<!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>number tile revealing <input name="numtilereveal" 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>