auto-scroll dicelog and connect to table viewing as admin
Iris Lightshard nilix@nilfm.cc
PGP Signature
-----BEGIN PGP SIGNATURE----- iQIzBAABCAAdFiEEkFh6dA+k/6CXFXU4O3+8IhROY5gFAmP1p9oACgkQO3+8IhRO Y5jZbA//YkqEb2wBpvNLCr7xT/27cAzIg1Yq6Q6nHl2ChuDmSqI8K3bQXoxVhQ7t T23IQ0gD7FlCL2NkKZkngsiKkhlsxrFVPKlm5iiy434njr1D1G3EEBYWrznAP5Bf p2qPa3xvy/qgg5bwiHfEk8ouzMnY2BnMhW/0MrtehFUNdI+xCBxljtuJ5MsR3odf U9Q+EaOrsZjHqQ0rduXiNI468+kHU3jv4xungJ5P2U8qYOhK4JeqnBLUge8zngQK vVFD2w+f+mIHASd9RL3pqC+rzfKqQHhZn1HDtnONZd34Hk9/hbWL5iQU3d+wWW7K 1SZW/Ij7MFOiUyEIOdRPqNpgmVWz4IAxU5oJ1PkXsbrEzJlv2lnVnj0L75zU2c3A klTOGrOskF8dW6zMFBT7MRJQQW8i+zuEdBz9gzVSn9aT86s1SRrqIiXxW1nvZkPC obQ37u12jyN4fIBYRgxzV/06cmUVK6GRZhGvLBiuM8nO48IC/Dn2fqj3pqTj1rjq vNeurMIdrNoaeYirXLrRCNoh71RYvdk2afstEbnF0Xlx66CdgU/5Jfl1O6N4ynnF 92JMcgSougAk615kscKgqLy7KcVW/od77ZtcyHdc9Kx8Gp5k22/55Whtm4Hc3Yra upeOpbEs5wAGenrpls1zO2aAhcNFLQSZW3T6h92g8w1orfrg9qg= =CVma -----END PGP SIGNATURE-----
4 files changed,
33 insertions(+),
12 deletions(-)
M
static/admin.js
→
static/admin.js
@@ -15,6 +15,9 @@ headers: headers,
}); if (res.ok) { + document.getElementById("input_table_name").value = name; + document.getElementById("input_table_pass").value = pass; + dial(); infoHtml = "<a href='#' onclick='getTables()'>← table list</a><br><pre>"; infoHtml += await res.text(); infoHtml += "</pre>"@@ -63,6 +66,7 @@ adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value);
if (adminToken) { adminWrapper.style.display="block"; getTables(); + adminZone.style.display = "block"; } else { setErr("Incorrect credentials"); }
M
static/index.html
→
static/index.html
@@ -58,7 +58,8 @@ </select>
<input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button> <div id="dice_log"></div> <div id="map"></div> - <div id="adminWrapper" style="display:none;"> + </main> + <div id="adminWrapper" style="display:none;"> <div id="adminCtrl"> <button onclick="setTableCreateFormVisible(true)">New Table</button> <form onsubmit="return false" id="createTableForm" style="display:none;">@@ -70,7 +71,6 @@ </form>
</div> <div id="adminZone"></div> </div> - </main> </body> <script src="./util.js" type="text/javascript"></script> <script src="./socket.js" type="text/javascript"></script>
M
static/socket.js
→
static/socket.js
@@ -16,20 +16,26 @@ }
function formatDice(r) { const date = new Date(r.timestamp) - - return `<p>${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} ${r.player} rolled ${r.roll.length}d${r.faces} ${(r.note ? "(" + r.note + ")" : "")}<br>[${r.roll}] (total ${r.roll.reduce((a,c)=>a+c,0)})</p>` + const p = document.createElement("p"); + p.innerHTML = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} ${r.player} rolled ${r.roll.length}d${r.faces} ${(r.note ? "(" + r.note + ")" : "")}<br>[${r.roll}] (total ${r.roll.reduce((a,c)=>a+c,0)})`; + return p; } function logDice(dice, many) { const diceLog = document.getElementById("dice_log"); + if (!many) { + dice = [ dice ]; + } else { + if (diceLog) { + diceLog.innerHTML = ""; + } + } if (diceLog) { - if (many) { for(const r of dice) { - diceLog.innerHTML += formatDice(r); + const p = formatDice(r); + diceLog.append(p); + p.scrollIntoView(); } - } else { - diceLog.innerHTML += formatDice(dice); - } } }@@ -47,9 +53,12 @@ if (tblNameInput && tblPassInput && tblNameInput.value && tblPassInput.value) {
tableKey.name = tblNameInput.value; tableKey.passcode = tblPassInput.value; + if (conn) { + conn.close(1000); + } conn = new WebSocket(`ws://${location.host}/subscribe`, `${tableKey.name}.${tableKey.passcode}`); conn.addEventListener("close", e => { - if (e.code !== 1001) { + if (e.code > 1001) { // TODO: add message to let user know they are reconnecting setTimeout(dial, 1000) } else {@@ -70,7 +79,7 @@ }
}); conn.addEventListener("error", e => { setErr(JSON.stringify(e)); - conn.close(); + conn.close(1002); }) conn.addEventListener("message", e => {
M
static/style.css
→
static/style.css
@@ -65,8 +65,16 @@
#dice_log { background: #fff; color: #000; + height: 10em; + max-height: 10em; + display: block; + overflow-y: auto; } #dice_log p { - margin: 0.5ch; + padding: 0.5ch; +} + +#dice_log p:not(:last-child) { + border-bottom: solid 1px gray; }