blob: 981cff107b08963097e183430ea51a068f763ca5 (
plain)
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
|
const colorSelect = document.getElementById('color-select');
const id = document.getElementById('session-script').dataset.id;
const websocket = new WebSocket(`/session/${id}/play`);
websocket.addEventListener('open', () => {
websocket.send(JSON.stringify({
"Initialize": { id }
}));
});
websocket.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
if (Object.hasOwn(message, 'Initialize')) {
const payload = message.Initialize;
for (let element in Array.from(colorSelect.getElementsByClassName('color-select-colors'))) {
element.remove();
}
payload.colors.forEach((color) => {
const selection = document.createElement('option');
selection.value = color;
selection.innerText = color;
selection.classList.add('color-select-colors');
colorSelect.appendChild(selection);
});
colorSelect.disabled = false;
} else if (Object.hasOwn(message, 'Hand')) {
const payload = message.Hand;
colorSelect.disabled = false;
}
});
websocket.addEventListener('close', () => {
colorSelect.disabled = true;
});
colorSelect.addEventListener('change', () => {
if (colorSelect.value === '') return;
colorSelect.disabled = true;
websocket.send(JSON.stringify({
"Color": colorSelect.value
}));
});
|
