enforce subprotocol/tableKey to alphanumeric and underscore, refine UI

admin/admin.go

@@ -16,6 +16,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"regexp"
 )
 
 func apiGetTableList(next http.Handler, udb auth.UserStore) http.Handler {
@@ -80,6 +81,13 @@ func apiCreateTable(next http.Handler, udb auth.UserStore, dbAdapter mongodb.DbA
 			return
 		}
 
+		r := regexp.MustCompile("^[a-zA-Z0-9_]+$")
+		if !r.MatchString(tableKey.Name) || !r.MatchString(tableKey.Passcode) {
+			w.WriteHeader(422)
+			next.ServeHTTP(w, req)
+			return
+		}
+
 		// table name is primary key so w edon't need to check
 		err = dbAdapter.CreateTable(tableKey)
 

static/admin.js

@@ -127,7 +127,9 @@ async function destroyTable() {
     });
     if (res.ok) {
       conn.close(1000);
+      initializeMap("");
       getTables();
+      
     } else {
       setErr(await res.json());
     }

static/index.html

@@ -24,11 +24,9 @@
     <button type="submit" id="table_join" onclick="dial();">Join</button>
   </form>
   </details><br/>
-  
-  
 
   <div id="tabletop" style="display:none;">
-  <details class="ui_win"><summary>dice</summary>
+  <details id="dice_win" class="ui_win"><summary>dice</summary>
   <select id="num_dice">
     <option>1</option>
     <option>2</option>

static/map.js

@@ -14,6 +14,10 @@ function initializeMap(mapImgUrl) {
   mapImg.addTo(map);
   map.setMaxBounds([[-180,180],[180,-180]]);
   map.setView([0,0], 2);
+  while (tokens.some(t=>t)) {
+    tokens[0].m.removeFrom(map);
+    tokens.shift();
+  }
 }
 
 // this works but assumes the map is square (reasonable limitation I think)

static/socket.js

@@ -14,10 +14,19 @@ function showTableModal(show) {
   }
 }
 
+function fmtLeading(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+
 function formatDice(r) {
   const date = new Date(r.timestamp)
   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)})`;
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  p.innerHTML = `${date.getFullYear()}-${fmtLeading(month)}-${fmtLeading(day)} ${fmtLeading(hours)}:${fmtLeading(minutes)}:${fmtLeading(seconds)} ${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;
 }
 
@@ -67,58 +76,72 @@ function setMapImg(url) {
   initializeMap(url);
 }
 
+function isTableKeyValid(name, passcode) {
+  const r = /^[a-zA-Z0-9_]+$/;
+  return r.test(name) && r.test(passcode);
+}
+
 function dial() {
   // get tableKey from UI
   const tblNameInput = document.getElementById("input_table_name");
   const tblPassInput = document.getElementById("input_table_pass");
   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) {
-        // TODO: add message to let user know they are reconnecting
-        setTimeout(dial, 1000)
-      } else {
+    if (isTableKeyValid(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 == 1006) {
+          setErr("Table not found - check the name and passcode are correct");
+        } else if (e.code > 1001) {
+          // TODO: add message to let user know they are reconnecting
+          setErr("Websocket error: trying to reconnect");
+          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 = "none";
+          tabletop.style.display = "block";
         }
-        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(`${e.name}: ${e.message}`);
-      conn.close(3000);
-    })
-    
-    conn.addEventListener("message", e => {
-      const data = JSON.parse(e.data);
-      if (table == null) {
-        // first fetch comes from mongo, so the rolls array in each diceRoll is a byte array and needs to be decoded
-        data.diceRolls.forEach(r=>{
-          r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0))
-        })
-        table = data;
-        makeUpToDate(table);
-      } else {
-        makeUpToDate(data);
-      }
+      });
+      conn.addEventListener("error", e => {
+        setErr(`${e.name}: ${e.message}`);
+        conn.close(3000);
+      })
       
-      console.log(data);
-    });
+      conn.addEventListener("message", e => {
+        const data = JSON.parse(e.data);
+        if (table == null) {
+          // first fetch comes from mongo, so the rolls array in each diceRoll is a byte array and needs to be decoded
+          data.diceRolls.forEach(r=>{
+            r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0))
+          })
+          table = data;
+          makeUpToDate(table);
+        } else {
+          makeUpToDate(data);
+        }
+        
+        console.log(data);
+      });
+    } else {
+      setErr("Table name and passcode can only be alphanumeric and underscores");
+    }
+  }else {
+    setErr("Table name and passcode required");
   }
 }
 
@@ -131,4 +154,4 @@ async function publish(msg) {
   if (!res.ok) {
     setErr("Failed to publish message");
   }
-}
+}

static/style.css

@@ -1,3 +1,10 @@
+:root {
+  --bg_color: rgba(0,0,0,0.7);
+  --fg_color: #ccc;
+  --main_color: #1f9b92;
+  --sub_color: #002b36;
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -6,12 +13,12 @@
   outline: none;
 }
 
-* { scrollbar-color:#1f9b92 #000;}
+* { scrollbar-color:var(--main_color) var(--sub_color); }
 *::-webkit-scrollbar { width:6px;height:6px; }
-*::-webkit-scrollbar-track { background:#000; }
-*::-webkit-scrollbar-thumb { background-color:#1f9b92;border-radius:0;border:none; }
-*::-webkit-scrollbar-corner { background:#000; }
-*::selection { background-color:#1f9b92;color:#000;text-decoration:none;text-shadow:none; }
+*::-webkit-scrollbar-track { background: var(--sub_color);}
+*::-webkit-scrollbar-thumb { background:var(--main_color);border-radius:0;border:none; }
+*::-webkit-scrollbar-corner { background:var(--sub_color); }
+*::selection { background-color:var(--main_color);color:var(--bg_color);text-decoration:none;text-shadow:none; }
 
 body {
   background: url('./bg.png');
@@ -22,15 +29,18 @@ label {
   font-size: 80%;
 }
 
-input, select {
-  background: #002b36;
-  color: #93a1a1;
-  border: solid 1px gray;
+input, select, textarea {
+  background: var(--sub_color);
+  color: var(--fg_color);
+  border: solid 1px transparent;
+}
+
+input , select {
   margin-right: 1ch;
 }
 
-input:active, input:focus, select:active, select:focus {
-  border: solid 1px cyan;
+input:active, input:focus, select:active, select:focus, textarea:focus {
+  border: solid 1px var(--main_color);
 }
 
 
@@ -41,15 +51,15 @@ ul {
 
 button {
   padding: 0.5ch;
-  background: #000;
-  color: #fff;
-  border: solid 2px lightseagreen;
+  background: transparent;
+  color: var(--fg_color);
+  border: solid 2px var(--main_color);
   margin-right: 1ch;
 }
 
 button:hover {
-  color: #000;
-  background: lightseagreen;
+  color: var(--bg_color);
+  background: var(--main_color);
 }
 
 #errWrapper {
@@ -72,8 +82,8 @@ button:hover {
 }
 
 #dice_log {
-  background: #002b36;
-  color: #93a1a1;
+  background: var(--sub_color);
+  color: var(--fg_color);
   height: 10em;
   max-height: 10em;
   display: block;
@@ -85,7 +95,7 @@ button:hover {
 }
 
 #dice_log p:not(:last-child) {
-  border-bottom: solid 1px gray;
+  border-bottom: solid 1px var(--fg_color);
 }
 
 #aux {
@@ -94,14 +104,12 @@ button:hover {
 
 pre {
   font-size: 125%;
-  background: #002b36;
-  color: #93a1a1;
+  background: var(--sub_color);
+  color: var(--fg_color);
 }
 
 #auxMsgZone {
   width: 100%;
-  color: #93a1a1;
-  background: #002b36;
   padding:0.2em;
 }
 
@@ -112,18 +120,18 @@ pre {
   text-align: left;
   position: relative;
   margin: 2em;
-  background: rgba(0,0,0,0.7);
-  color: #eee;
+  background: var(--bg_color);
+  color: var(--fg_color);
   display: inline;
   height: min-content;
   z-index:1;
   padding: 0.25em;
-  border: 2px solid dimgray;;
-  max-width: 80ch;
+  border: 2px solid transparent;
+  max-width: min(60ch, 80vw);
 }
 
-.ui_win:hover, .ui_win:active {
-  border: 2px solid #1f9b92;
+.ui_win:focus-within {
+  border: 2px solid var(--main_color);
 }
 
 .ui_win * {
@@ -135,7 +143,7 @@ pre {
 }
 
 .ui_win a:hover, ui_win a:active {
-  color: #ff;
+  color: var(--fg_color);
 }
 
 #admin_section {

static/util.js

@@ -38,4 +38,15 @@ function loadName() {
   }
 }
 
+function setupDiceAutoScroll() {
+  const diceWin = document.getElementById("dice_win");
+  diceWin.addEventListener("toggle", e => {
+    if (diceWin.open) {
+      const diceLog = document.getElementById("dice_log");
+      diceLog.children[diceLog.children.length - 1].scrollIntoView();
+    }
+  });
+}
+
+setupDiceAutoScroll();
 loadName();