initial refactoring to use a pure html/js login screen

2025-05-25 22:05:35 -06:00
parent 457d6cee96
commit 2ba48354ac
6 changed files with 264 additions and 70 deletions
@@ -0,0 +1,72 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Play of the Game</title>
+        <style>
+            html,
+            body,
+            canvas {
+                margin: 0px;
+                padding: 0px;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                position: absolute;
+                z-index: 0;
+            }
+        </style>
+    </head>
+    <body style="margin: 0; padding: 0; height: 100vh; width: 100vw">
+        <canvas id="glcanvas" tabindex="1" hidden></canvas>
+        <script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
+        <script type="module">
+            import init, { set_wasm } from "./static/frontend.js";
+            async function impl_run() {
+                let wbg = await init();
+                miniquad_add_plugin({
+                    register_plugin: (a) => (a.wbg = wbg),
+                    on_init: () => set_wasm(wasm_exports),
+                    version: "0.0.1",
+                    name: "wbg",
+                });
+                load("./static/frontend_bg.wasm");
+            }
+            window.run = function (join_type) {
+                console.log("Joining as: ", join_type);
+                var xhr = new XMLHttpRequest();
+                xhr.open("POST", "./login/" + join_type);
+                xhr.onload = function (event) {
+                    console.log("Starting game...", event.target);
+                    document.getElementById("run-container").remove();
+                    document
+                        .getElementById("glcanvas")
+                        .removeAttribute("hidden");
+                    document.getElementById("glcanvas").focus();
+                    impl_run();
+                };
+                // or onerror, onabort
+                var formData = new FormData(document.getElementById("login"));
+                xhr.send(JSON.stringify(Object.fromEntries(formData));
+            };
+        </script>
+        <div
+            id="run-container"
+            style="
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                flex-direction: column;
+            "
+        >
+            <form id="login">
+                <label for="username">Username:</label><br />
+                <input type="text" id="username" name="username" /><br />
+                <label for="gamecode">Gamecode:</label><br />
+                <input type="text" id="gamecode" name="gamecode" /><br />
+            </form>
+            <button onclick="run('join')">Join Game</button>
+            <button onclick="run('host')">Host Game</button>
+        </div>
+    </body>
+</html>