From 81876f9f36998c20f796c692dcc37f0db381c6f8 Mon Sep 17 00:00:00 2001 From: Derek Stevens Date: Mon, 20 Feb 2023 10:40:25 -0700 Subject: [PATCH] add style, implement dicelog --- static/bg.png | Bin 0 -> 603 bytes static/index.html | 9 ++++-- static/socket.js | 45 ++++++++++++++++++++++++++++- static/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 static/bg.png create mode 100644 static/style.css diff --git a/static/bg.png b/static/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..a9efec288d8566a1df42014ba3e759631a504a68 GIT binary patch literal 603 zcmV-h0;K(kP)EX>4Tx04R}tkv&MmKpe$iQ$>-Af<;6eGE^rEq9Ts93Pq?8YK2xEOfLO`CJjl7 zi=*ILaPVWX>fqw6tAnc`2!4RLx;QDiNQwVT3N2zhIPS;0dyl(!fKV?p&FY8&nr@q^ zL|n{dSH-SZ2neGe6Bv}4Wz0!Z629Z>9s$1IMR}J0xj#p*nzI-X5Q$^VFm2)u;+aj` z;Ji;9W<^;gJ|`YG>4LCuqO|IySV+-++{Zuc`XzEHsR(ksm>xJh00009a7bBm001r{001r{0eGc9b^rhX2XskI zMF-~s6c92dL3Lox0000PbVXQnLvL+uWo~o;Lvm$dbY)~9cWHEJAV*0}P*;Ht7XSbN zMM*?KR7l6|)v*x(FbG0Xl0n%G7d0!y!tPU8d2+AvB+++lSCuBYqwVSSae?jK0t5&U pAlMP8yOZqA!#_ZP009C7k{*5>gXu2;>|6i<002ovPDHLkV1m!O`4RvC literal 0 HcmV?d00001 diff --git a/static/index.html b/static/index.html index 2b3b1dc..a6e97f6 100644 --- a/static/index.html +++ b/static/index.html @@ -9,20 +9,21 @@ -
+
+
+
diff --git a/static/socket.js b/static/socket.js index d68b0b5..0d238b9 100644 --- a/static/socket.js +++ b/static/socket.js @@ -14,6 +14,31 @@ function showTableModal(show) { } } +function formatDice(r) { + const date = new Date(r.timestamp) + + return `

${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 + ")" : "")}
[${r.roll}] (total ${r.roll.reduce((a,c)=>a+c,0)})

` +} + +function logDice(dice, many) { + const diceLog = document.getElementById("dice_log"); + if (diceLog) { + if (many) { + for(const r of dice) { + diceLog.innerHTML += formatDice(r); + } + } else { + diceLog.innerHTML += formatDice(dice); + } + } +} + +function makeUpToDate(table) { + if (table && table.diceRolls) { + logDice(table.diceRolls, true); + } +} + function dial() { // get tableKey from UI const tblNameInput = document.getElementById("input_table_name"); @@ -27,12 +52,27 @@ function dial() { if (e.code !== 1001) { // TODO: add message to let user know they are reconnecting setTimeout(dial, 1000) + } else { + tabletop = document.getElementById("tabletop"); + if (tabletop) { + tabletop.style.display = "none"; + } + table = null; } }); conn.addEventListener("open", e => { // TODO: add message to let user know they are at the table console.info("socket connected"); + tabletop = document.getElementById("tabletop"); + if (tabletop) { + tabletop.style.display = "block"; + } }); + conn.addEventListener("error", e => { + setErr(JSON.stringify(e)); + conn.close(); + }) + conn.addEventListener("message", e => { const data = JSON.parse(e.data); if (table == null) { @@ -41,8 +81,11 @@ function dial() { r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0)) }) table = data; + makeUpToDate(table); } else { - // UPDATE THE TABLE! + if (data.diceRoll) { + logDice(data.diceRoll); + } } console.log(data); }); diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..0ffd3fd --- /dev/null +++ b/static/style.css @@ -0,0 +1,72 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + appearance: none; + outline: none; +} + +body { + background: url('./bg.png'); + background-repeat: repeat; +} + +nav, #table_modal, #admin_modal { + color: #fff; + background: #000; + padding: 0.5em; +} + +label { + font-size: 80%; +} + +input, select { + background: #fff; + color: #000; + border: solid 1px gray; + margin-right: 1ch; +} + +input:active, input:focus, select:active, select:focus { + border: solid 1px cyan; +} + +button { + padding: 0.5ch; + background: #000; + color: #fff; + border: solid 2px lightseagreen; + margin-right: 1ch; +} + +button:hover { + color: #000; + background: lightseagreen; +} + +#errWrapper { + color: #fff; + background: crimson; + padding: 1em; +} +#closeErr { + display: inline; + border: dotted 1px #fff; + color: #fff; + background: crimson; + padding: 0 1ch; + margin-right: 1ch; +} +#errDiv { + display: inline; +} + +#dice_log { + background: #fff; + color: #000; +} + +#dice_log p { + margin: 0.5ch; +} \ No newline at end of file