-
Notifications
You must be signed in to change notification settings - Fork 0
/
threeupthreedown.html
120 lines (101 loc) · 4.32 KB
/
threeupthreedown.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<title>3up3dn</title>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<h1>3up3dn</h1>
<h3>Your Name: <span id="player_name"></span></h3>
<pre id="prompt">Enter your name. (A good one, because you can't change it).</pre>
<form action="" onsubmit="submit_name(event)" id="name_form">
<input type="text" id="message_text" autocomplete="off" />
<button>Join Game</button>
</form>
<form action="" onsubmit="start_game(event)" id="vip_form" style="display:none">
<button>Start Game</button>
</form>
<form action="" onsubmit="submit_cards(event)" id="card_form" style="display:none"></form>
<hr>
<pre id="board"></pre>
<script>
// to be filled in by submit_name()
var websocket = null;
function submit_name(event) {
console.log("entered submit_name()")
var name = document.getElementById("message_text").value;
document.querySelector("#player_name").textContent = name;
// Hide the form and clear the prompt
document.getElementById("name_form").style.display = "none";
document.getElementById("prompt").innerHTML = "";
// Create a websocket for this name
// websocket = new WebSocket(`wss://official_url.com/ws/${name}`);
websocket = new WebSocket(`ws://SOMETHING/ws/${name}`);
websocket.onmessage = default_onmessage;
event.preventDefault();
};
function start_game(event) {
console.log("entered start_game()")
websocket.send("go time");
// Hide the form
document.getElementById("vip_form").style.display = "none";
event.preventDefault();
};
function submit_cards(event) {
console.log("entered submit_cards()")
const checked_boxes = document.querySelectorAll('input[name=checkboxes]:checked');
var checked_indexes = [];
for (i = 0; i < checked_boxes.length; i++) {
checked_indexes.push(checked_boxes[i].value);
};
console.log(`sending ${checked_indexes}`)
websocket.send(checked_indexes);
// remove everything
var form = document.getElementById("card_form");
while (form.firstChild) {
form.removeChild(form.lastChild);
};
event.preventDefault();
};
function default_onmessage(event) {
console.log("entered default_onmessage()")
// Dispatch various commands from the server
payload = JSON.parse(event.data);
console.log(event.data)
if (payload.target == "enable_vip_form") {
console.log("enabling vip form")
document.getElementById("vip_form").style.display = "block";
console.log("done enabling vip form")
} else if (payload.target == "enable_card_form") {
document.getElementById("card_form").style.display = "block";
} else if (payload.target == "populate_cards") {
populate_cards(payload.cards);
} else {
console.log(`setting ${payload.target}`)
// render an area of the screen defined by the target
document.getElementById(payload.target).innerHTML = payload.text;
console.log(`done setting ${payload.target}`)
};
};
function populate_cards(cards) {
console.log("entered populate_cards()")
var form = document.getElementById("card_form");
// add the cards
for (i = 0; i < cards.length; ++i) {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "checkboxes";
checkbox.value = i;
var label = document.createElement("label");
label.appendChild(checkbox);
label.appendChild(document.createTextNode(cards[i]));
form.appendChild(label);
};
// add the submit button
var button = document.createElement("button");
button.innerHTML = "Play";
form.appendChild(button);
};
</script>
</body>
</html>