more client features

1 files changed, 40 insertions, 43 deletions

diff --git a/server/web/game/game.js b/server/web/game/game.js
index 4b0024c..78e5547 100644
--- a/server/web/game/game.js
+++ b/server/web/game/game.js
@@ -1,63 +1,60 @@
 "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);
-  doActions(clone, g.Actions);
-  disp.replaceChildren(clone);
+    const tmpl = document.querySelector("template#tmpl");
+    const disp = document.querySelector("#game");
+    const clone = document.importNode(tmpl.content, true);
+    doDistance(clone, g.Distance.Value);
+    doActions(clone, g.Actions);
+    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;
-    }
-  });
+    clone.querySelector("#distance").setAttribute("data-value", value);
+    [...clone.querySelectorAll("#distance .content .sakura")].map((n, i) => {
+        n.checked = i < value;
+    });
+    clone.querySelector("#distance .pool-value").innerText = value
 };
 
 const doActions = (g, actions) => {
-  const actionList = g.querySelector(".actions");
-  const actionTemplate = actionList.querySelector(".action").cloneNode(true);
-  if (actions) {
-  actionList.replaceChildren(
-    ...actions.map((a, i) => {
-      const newAction = actionTemplate.cloneNode(true);
-      newAction.setAttribute("data-index", i);
-      newAction.querySelector(".description").innerText = a.Description;
-      return newAction;
-    }),
-  );
-  } else {
-    actionList.replaceChildren()
-  }
+    const actionList = g.querySelector(".actions");
+    const actionTemplate = actionList.querySelector(".action").cloneNode(true);
+    if (actions) {
+        actionList.replaceChildren(
+            ...actions.map((a, i) => {
+                const newAction = actionTemplate.cloneNode(true);
+                newAction.setAttribute("data-index", i);
+                newAction.querySelector(".description").innerText = a.Description;
+                return newAction;
+            }),
+        );
+    } else {
+        actionList.replaceChildren()
+    }
 };
 
 const doAction = (idx) => {
-  window.socket.send(String(idx))
+    window.socket.send(String(idx))
 }
 
 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 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);
+    const id = window.location.hash.slice(1);
+    connect(id);
 };
 
 init();