auto-scroll dicelog and connect to table viewing as admin

static/admin.js

@@ -15,6 +15,9 @@ async function getTable(name, pass) {
     });
   
     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 += await res.text();
       infoHtml += "</pre>"
@@ -63,6 +66,7 @@ async function doLogin() {
     if (adminToken) {
       adminWrapper.style.display="block";
       getTables();
+      adminZone.style.display = "block";
     } else {
       setErr("Incorrect credentials");
     }

static/index.html

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

static/socket.js

@@ -16,19 +16,25 @@ function showTableModal(show) {
 
 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 (diceLog) {
-    if (many) {
-      for(const r of dice) {
-        diceLog.innerHTML += formatDice(r);
-      }
+  if (!many) {
+    dice = [ dice ];
   } else {
-      diceLog.innerHTML += formatDice(dice);
+    if (diceLog) {
+      diceLog.innerHTML = "";
+    }
+  }
+  if (diceLog) {
+      for(const r of dice) {
+        const p = formatDice(r);
+        diceLog.append(p);
+        p.scrollIntoView();
       }
   }
 }
@@ -47,9 +53,12 @@ function dial() {
     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 @@ function dial() {
     });
     conn.addEventListener("error", e => {
       setErr(JSON.stringify(e));
-      conn.close();
+      conn.close(1002);
     })
     
     conn.addEventListener("message", e => {

static/style.css

@@ -65,8 +65,16 @@ button:hover {
 #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;
 }