2 files changed, 49 insertions, 20 deletions
diff --git a/server/web/game/game.js b/server/web/game/game.js
index 5e71786..4b0024c 100644
--- a/server/web/game/game.js
+++ b/server/web/game/game.js
@@ -1,39 +1,63 @@
-"use strict"
+"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 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
+      n.checked = true;
     } else {
-      n.checked = false
+      n.checked = false;
     }
-  })
+  });
+};
+
+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 doAction = (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 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()
+init();
diff --git a/server/web/game/index.html b/server/web/game/index.html
index 414ff5c..f4f6593 100644
--- a/server/web/game/index.html
+++ b/server/web/game/index.html
@@ -15,7 +15,7 @@
         <header>
             <details>
                 <summary>Game state</summary>
-                <pre id="game-json"></pre>
+                <code id="game-json"></code>
             </details>
         </header>
         <main id="game"></main>
@@ -33,6 +33,11 @@
                 <input type="checkbox" class="sakura" />
                 <input type="checkbox" class="sakura" />
             </div>
+            <ul class="actions">
+                <li class="action" data-index="">
+                    <button type="button" class="description" onclick="window.socket.send(closest('.action').getAttribute('data-index'))">Do</button>
+                </li>
+            </s>
         </template>
 
         <script src="/game/game.js"></script>