1 files changed, 53 insertions, 14 deletions
diff --git a/server/web/game/game.js b/server/web/game/game.js
index 78e5547..05756fc 100644
--- a/server/web/game/game.js
+++ b/server/web/game/game.js
@@ -1,24 +1,59 @@
 "use strict";
-const showGame = (g) => {
+
+var cloned = false
+
+const cloneGame = (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 localPlayer = clone.querySelector("#player").content.cloneNode(true)
+    localPlayer.querySelector("div").setAttribute("id", "local-player")
+    const remotePlayer = clone.querySelector("#player").content.cloneNode(true)
+    remotePlayer.querySelector("div").setAttribute("id", "remote-player")
+
+    disp.replaceChildren(remotePlayer, clone, localPlayer);
+    showGame(disp, g)
+}
+
+const showGame = (n, g) => {
+    console.debug(g)
+    doDistance(n, g.Distance.Value);
+    doActions(n, g.Actions);
+    doPlayer(n.querySelector("#local-player"), g[g.You])
+    doPlayer(n.querySelector("#remote-player"), g[g.Them])
 };
 
-const doDistance = (clone, value) => {
-    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 doPlayer = (n, p) => {
+    doPool(n.querySelector(".life"), p.Life.Value)
+    doPool(n.querySelector(".aura"), p.Life.Value)
+
+}
+
+const doPool = (node, value) => {
+    node.setAttribute("data-value", value);
+    node.querySelectorAll(".sakura").forEach((n, i) => {
+        const shouldCheck = (n.getAttribute("data-ordering") ?? i) < value
+        n.checked = shouldCheck
+        n.setAttribute("checked", shouldCheck)
+    })
+    const valueNode = node.querySelector(".pool-value")
+    if (valueNode)
+        valueNode.innerText = value
+}
+
+const doDistance = (node, value) => {
+    const distance = node.querySelector("#distance")
+    doPool(distance, value)
 };
 
+
+let actionTemplate
+
 const doActions = (g, actions) => {
-    const actionList = g.querySelector(".actions");
-    const actionTemplate = actionList.querySelector(".action").cloneNode(true);
+    const actionList = g.querySelector("#actions");
+    if (!actionTemplate) {
+        actionTemplate = document.importNode(actionList.querySelector("template").content.querySelector(".action"), true)
+    }
     if (actions) {
         actionList.replaceChildren(
             ...actions.map((a, i) => {
@@ -42,8 +77,12 @@ const connect = (gameId) => {
     window.socket = connection;
     connection.addEventListener("message", (ev) => {
         const game = JSON.parse(ev.data);
-        console.debug(game);
-        showGame(game);
+        if (cloned) {
+            showGame(document.querySelector("#game"), game)
+        } else {
+            cloneGame(game)
+            cloned = true
+        }
         document.querySelector("#game-json").innerText = JSON.stringify(
             ev.data,
             null,