3 files changed, 82 insertions, 0 deletions
diff --git a/server/web/game/game.js b/server/web/game/game.js
new file mode 100644
index 0000000..5e71786
--- /dev/null
+++ b/server/web/game/game.js
@@ -0,0 +1,39 @@
+"use strict"
+const showGame = (g) => {
+  const tmpl = document.querySelector("template#tmpl")
+  const disp = document.querySelector("#game")
+  const clone = document.importNode(tmpl.content, true)
+  doDistance(clone, g.Distance.Value)
+  disp.replaceChildren(clone)
+};
+
+const doDistance = (clone, value) => {
+  clone.querySelector(".distance").setAttribute("data-value", value);
+  [...clone.querySelectorAll(".distance .sakura")].map((n, i) => {
+    if (i < value) {
+      n.checked = true
+    } else {
+      n.checked = false
+    }
+  })
+
+}
+
+const connect = (gameId) => {
+  const connection = new WebSocket(`/api/game/${gameId}/connect`);
+  window.socket = connection;
+  connection.addEventListener("message", (ev) => {
+      const game = JSON.parse(ev.data);
+      console.debug(game);
+      showGame(game);
+      document.querySelector("#game-json").innerText =
+          JSON.stringify(ev.data, null, 2);
+  });
+}
+
+const init = () => {
+  const id = window.location.hash.slice(1)
+  connect(id)
+}
+
+init()
diff --git a/server/web/game/index.html b/server/web/game/index.html
new file mode 100644
index 0000000..414ff5c
--- /dev/null
+++ b/server/web/game/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>sakura | game</title>
+        <link rel="stylesheet" type="text/css" href="/style.css" />
+        <link rel="stylesheet" type="text/css" href="/game/style.css" />
+    </head>
+    <body>
+        <header>
+            <details>
+                <summary>Game state</summary>
+                <pre id="game-json"></pre>
+            </details>
+        </header>
+        <main id="game"></main>
+
+        <template id="tmpl">
+            <div class="distance">
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+                <input type="checkbox" class="sakura" />
+            </div>
+        </template>
+
+        <script src="/game/game.js"></script>
+    </body>
+</html>
diff --git a/server/web/game/style.css b/server/web/game/style.css
new file mode 100644
index 0000000..dd0e421
--- /dev/null
+++ b/server/web/game/style.css
@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}