diff --git a/static/bg.png b/static/bg.png
new file mode 100644
index 0000000..a9efec2
Binary files /dev/null and b/static/bg.png differ
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