blob: 614ccd0685c5088d527808ed3e8817836dacd1af (
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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websweeper</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="cent">
<div id="rlist"></div>
<span id="rspace"></span>
</div>
<form method="post" action="r" class="cent">
<fieldset>
<legend>-={ Create a new room }=-</legend>
<label>room name <input name="rname" type="text" autofocus></label><br>
<label>
board dimensions
<input name="bwidth" type="number" value="30" required>
x
<input name="bheight" type="number" value="20" required><br>
where <input name="mineratio-n" type="number" value="1" required>
in every <input name="mineratio-d" type="number" value="8" required>
tiles are mines
</label><br>
<label>public, ie. shown in the lobby <input name="public" type="checkbox" checked></label><br>
<label>safe first move (if possible) <input name="allsafe1move" type="checkbox" checked></label><br>
<label>revealed borders <input name="rborders" type="checkbox"></label><br>
<label>reveal on lose <input name="revealonlose" type="checkbox" checked></label><br>
<label>player limit <input name="limit" type="number" value="32"></label><br>
<button id="createbtn">create</button>
</fieldset>
</form>
<div class="statusline cent">
<p id="ident-name"></p>
<a id="ident-clr" href="javascript:clear_ident();">clear identity</a>
</div>
<script>
let rlist = {
elem: document.getElementById('rlist'),
map: new Map(),
};
let active_rids = [];
let rspace = {
elem: document.getElementById('rspace'),
num: NaN,
txt: undefined,
};
function fetch_info(callback) {
fetch('rlist').then(r => r.json()).then(info => {
let rooms = info[0];
let pcounts = info[1];
active_rids = Object.keys(rooms);
active_rids.forEach(id => {
let room = rlist.map.get(id);
if (!room) { room = { init: false }; }
let rinfo = JSON.parse(rooms[id]);
room.name = rinfo.name;
room.pcount = Number(pcounts[id][0]);
room.pcapacity = Number(pcounts[id][1]);
room.board_conf = rinfo.board_conf;
rlist.map.set(id, room);
});
for (id of rlist.map.keys()) {
if (!active_rids.includes(id)) {
let r = rlist.map.get(id);
r.entry.remove();
rlist.map.delete(id);
}
}
callback();
});
fetch("rspace").then(resp => resp.text()).then(roomspace => {
rspace.num = Number(roomspace);
callback();
})
}
function render_info() {
rlist.map.forEach((room, id) => {
let full = room.pcount == room.pcapacity;
if (!room.init) {
room.entry = (full)? document.createElement('span') : document.createElement('a');
room.h1 = document.createElement("h1");
room.h1_txt = document.createTextNode("");
room.h1.appendChild(room.h1_txt);
room.h4 = document.createElement("h4");
room.h4.appendChild(document.createTextNode(
`${room.board_conf.w} by ${room.board_conf.h} with
${room.board_conf.mine_ratio[0]} in every ${room.board_conf.mine_ratio[1]} tiles mined`
));
room.entry.append(room.h1);
room.entry.append(room.h4);
room.entry.append(document.createElement('br'));
room.entry.href = 'room/' + id;
rlist.elem.append(room.entry);
room.init = true;
}
let ptxt = `${room.pcount}/${room.pcapacity} players` + ((full)? " (full)" : "");
room.h1_txt.textContent = `> ${room.name} — ${ptxt}`;
});
if (!rspace.txt) {
rspace.txt = document.createTextNode("");
rspace.elem.appendChild(rspace.txt);
}
if (rspace.num == 0) {
rspace.txt.textContent = "all room slots filled, when a room empties it can be replaced by a new one";
document.getElementById("createbtn").disabled = "disabled";
} else {
document.getElementById("createbtn").disabled = "";
if (rspace.num == 1) {
rspace.txt.textContent = "there is 1 available room slot";
} else if (rspace.num > 1) {
rspace.txt.textContent = `there are ${rspace.num} available room slots`;
}
}
}
(function refresh_info() {
fetch_info(render_info);
setTimeout(function() {
refresh_info();
}, 2000);
})();
function clear_ident() {
localStorage.removeItem("identity");
document.location.reload();
}
let ident = JSON.parse(localStorage.getItem("identity"));
let ident_elem = document.getElementById("ident-name");
if (ident == null) {
ident_elem.innerHTML = "no identity yet";
document.getElementById("ident-clr").style.display = "none";
} else {
ident_elem.innerHTML = `you are <span style="color: ${ident.clr}">${ident.name}</span>`;
}
</script>
</body>
</html>
|
