1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
"use strict";
var cloned = false
const cloneGame = (g) => {
const tmpl = document.querySelector("template#tmpl");
const disp = document.querySelector("#game");
const clone = document.importNode(tmpl.content, true);
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 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");
if (!actionTemplate) {
actionTemplate = document.importNode(actionList.querySelector("template").content.querySelector(".action"), 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);
if (cloned) {
showGame(document.querySelector("#game"), game)
} else {
cloneGame(game)
cloned = true
}
document.querySelector("#game-json").innerText = JSON.stringify(
ev.data,
null,
2,
);
});
};
const init = () => {
const id = window.location.hash.slice(1);
connect(id);
};
init();
|
