diff options
Diffstat (limited to 'server/web/game/game.js')
| -rw-r--r-- | server/web/game/game.js | 62 |
1 files changed, 43 insertions, 19 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(); |
