nilix/felt
1
0
Fork 0
mirror of https://hacklab.nilfm.cc/felt synced 2024-10-22 14:31:48 +00:00
Code Issues Projects Releases Packages Wiki Activity

auto-scroll dicelog and connect to table viewing as admin

Browse source
This commit is contained in:
Iris Lightshard 2023-02-21 22:27:54 -07:00
parent 81876f9f36
commit 4f9ca53e1b
Signed by: nilix
GPG key ID: 3B7FBC22144E6398
4 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/admin.js
View file

@ -15,6 +15,9 @@ async function getTable(name, pass) {
}); });
if (res.ok) { if (res.ok) {
document.getElementById("input_table_name").value = name;
document.getElementById("input_table_pass").value = pass;
dial();
infoHtml = "<a href='#' onclick='getTables()'>&larr; table list</a><br><pre>"; infoHtml = "<a href='#' onclick='getTables()'>&larr; table list</a><br><pre>";
infoHtml += await res.text(); infoHtml += await res.text();
infoHtml += "</pre>" infoHtml += "</pre>"
@ -63,6 +66,7 @@ async function doLogin() {
if (adminToken) { if (adminToken) {
adminWrapper.style.display="block"; adminWrapper.style.display="block";
getTables(); getTables();
adminZone.style.display = "block";
} else { } else {
setErr("Incorrect credentials"); setErr("Incorrect credentials");
} }

4
static/index.html
View file

@ -58,7 +58,8 @@
<input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button> <input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button>
<div id="dice_log"></div> <div id="dice_log"></div>
<div id="map"></div> <div id="map"></div>
<div id="adminWrapper" style="display:none;"> </main>
<div id="adminWrapper" style="display:none;">
<div id="adminCtrl"> <div id="adminCtrl">
<button onclick="setTableCreateFormVisible(true)">New Table</button> <button onclick="setTableCreateFormVisible(true)">New Table</button>
<form onsubmit="return false" id="createTableForm" style="display:none;"> <form onsubmit="return false" id="createTableForm" style="display:none;">
@ -70,7 +71,6 @@
</div> </div>
<div id="adminZone"></div> <div id="adminZone"></div>
</div> </div>
</main>
</body> </body>
<script src="./util.js" type="text/javascript"></script> <script src="./util.js" type="text/javascript"></script>
<script src="./socket.js" type="text/javascript"></script> <script src="./socket.js" type="text/javascript"></script>

31
static/socket.js
View file

@ -16,21 +16,27 @@ function showTableModal(show) {
function formatDice(r) { function formatDice(r) {
const date = new Date(r.timestamp) const date = new Date(r.timestamp)
const p = document.createElement("p");
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>` 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) { function logDice(dice, many) {
const diceLog = document.getElementById("dice_log"); const diceLog = document.getElementById("dice_log");
if (diceLog) { if (!many) {
if (many) { dice = [ dice ];
for(const r of dice) { } else {
diceLog.innerHTML += formatDice(r); if (diceLog) {
} diceLog.innerHTML = "";
} else {
diceLog.innerHTML += formatDice(dice);
} }
} }
if (diceLog) {
for(const r of dice) {
const p = formatDice(r);
diceLog.append(p);
p.scrollIntoView();
}
}
} }
function makeUpToDate(table) { function makeUpToDate(table) {
@ -47,9 +53,12 @@ function dial() {
tableKey.name = tblNameInput.value; tableKey.name = tblNameInput.value;
tableKey.passcode = tblPassInput.value; tableKey.passcode = tblPassInput.value;
if (conn) {
conn.close(1000);
}
conn = new WebSocket(`ws://${location.host}/subscribe`, `${tableKey.name}.${tableKey.passcode}`); conn = new WebSocket(`ws://${location.host}/subscribe`, `${tableKey.name}.${tableKey.passcode}`);
conn.addEventListener("close", e => { conn.addEventListener("close", e => {
if (e.code !== 1001) { if (e.code > 1001) {
// TODO: add message to let user know they are reconnecting // TODO: add message to let user know they are reconnecting
setTimeout(dial, 1000) setTimeout(dial, 1000)
} else { } else {
@ -70,7 +79,7 @@ function dial() {
}); });
conn.addEventListener("error", e => { conn.addEventListener("error", e => {
setErr(JSON.stringify(e)); setErr(JSON.stringify(e));
conn.close(); conn.close(1002);
}) })
conn.addEventListener("message", e => { conn.addEventListener("message", e => {

10
static/style.css
View file

@ -65,8 +65,16 @@ button:hover {
#dice_log { #dice_log {
background: #fff; background: #fff;
color: #000; color: #000;
height: 10em;
max-height: 10em;
display: block;
overflow-y: auto;
} }
#dice_log p { #dice_log p {
margin: 0.5ch; padding: 0.5ch;
}
#dice_log p:not(:last-child) {
border-bottom: solid 1px gray;
} }