✨ Frontend

UltiRequiem · UltiRequiem · commit 031eb7caf2db · 2022-05-16T16:54:30.000-05:00
diff --git a/Server.java b/Server.java
@@ -1,5 +1,8 @@
 import java.io.*;
 import java.net.*;
+import java.nio.file.Files;
+import java.nio.file.Paths;
+
 import com.sun.net.httpserver.*;
 
 public class Server {
@@ -8,13 +11,34 @@ public static void main(String[] args) throws Exception {
 
                 var server = HttpServer.create(port, 0);
 
+                server.createContext("/", new FrontendHandler());
                 server.createContext("/randomNumber", new RandomNumberHandler());
 
                 server.setExecutor(null);
 
                 server.start();
         }
 
+        static class FrontendHandler implements HttpHandler {
+                @Override
+                public void handle(HttpExchange request) throws IOException {
+                        var appPath = Paths.get("app.html");
+
+                        var app = new String(Files.readAllBytes(appPath));
+
+                        var appBytesLength = app.getBytes().length;
+
+                        request.sendResponseHeaders(200, appBytesLength);
+
+                        var body = request.getResponseBody();
+
+                        body.write(app.getBytes());
+
+                        body.close();
+
+                }
+        }
+
         static class RandomNumberHandler implements HttpHandler {
                 @Override
                 public void handle(HttpExchange request) throws IOException {
diff --git a/app.html b/app.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Random Number Generator</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script defer type="module">
+      import {
+        html,
+        render,
+      } from "https://unpkg.com/htm/preact/index.mjs?module";
+      import { useState } from "https://unpkg.com/preact/hooks/dist/hooks.module.js?module";
+
+      function App() {
+        const [number, setNumber] = useState(0);
+
+        return html`
+          <div class="container">
+            <h1>NENSS</h1>
+            <p>
+              <button
+                onClick=${async () => {
+                  const response = await fetch("/randomNumber");
+                  setNumber(await response.json());
+                }}
+              >
+                Get random number
+              </button>
+            </p>
+            <p>${number}</p>
+          </div>
+        `;
+      }
+
+      render(html`<${App} />`, document.body);
+    </script>
+
+    <style>
+      * {
+        margin: 0;
+      }
+
+      .container {
+        background-color: lightsalmon;
+        gap: 10px;
+        height: 100vh;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+  </head>
+
+  <body></body>
+</html>
