From b1bef4d9bc28c9b4ef57b750368e92cb1878eba7 Mon Sep 17 00:00:00 2001
From: stale <redkugelblitzin@gmail.com>
Date: Wed, 1 Jun 2022 04:34:31 -0300
Subject: localStorage of identities, UI overhaul

---
 assets/client.js | 47 +++++++++++++++++++++++++++++------------------
 assets/room.html | 10 +++++++++-
 assets/style.css | 30 +++++++++++++++++++++++++-----
 3 files changed, 63 insertions(+), 24 deletions(-)

(limited to 'assets')

diff --git a/assets/client.js b/assets/client.js
index 7c89495..3d6f064 100644
--- a/assets/client.js
+++ b/assets/client.js
@@ -1,13 +1,7 @@
 window.id = NaN;
-window.name = "anon";
-window.clr = "#f03333";
 window.info_elem = document.getElementById("miscinfo");
-window.info_elem.innerHTML =`
-  <form action="javascript:;" onsubmit="register()">
-    <input id="name-in" type="text" value="anon">
-    <input id="clr-in" type="color" value="#33c033"></input>
-    <button>Join</button>
-  </form>`;
+window.identform = document.getElementById("identform");
+window.statusline = document.getElementById("statusline");
 window.board_elem = document.getElementById("board");
 window.bwidth = NaN;
 window.bheight = NaN;
@@ -19,17 +13,34 @@ window.last_packet = {};
 window.cursors = new Map();
 window.board = {};
 window.board_bounds = {}; // init when we actually have the board loaded
-function register() {
-  window.name = document.getElementById("name-in").value;
-  window.clr = document.getElementById("clr-in").value;
+window.identity = JSON.parse(localStorage.getItem("identity"));
+
+if (identity != null) {
+  window.socket = connect();
+  window.identform.style.display = "none";
+} else {
+  window.identform.style.display = "auto";
+  window.statusline.style.display = "none";
+}
+function new_ident() {
+  window.identity = Object();
+  window.identity.name = document.getElementById("name-in").value;
+  window.identity.clr = document.getElementById("clr-in").value;
+  localStorage.setItem("identity", JSON.stringify(window.identity));
   window.socket = connect();
+  window.identform.style.display = "none";
+  window.statusline.style.display = "flex";
+}
+function new_ident_btn() {
+  localStorage.removeItem("identity");
+  document.location.reload();
 }
 
 function connect() {
   let wsproto = (window.location.protocol == "https:")? "wss:": "ws:";
   let s = new WebSocket(`${wsproto}//${location.hostname}:${location.port}${location.pathname}/ws`);
   s.onopen = function() {
-    s.send(`register ${window.name} ${window.clr}`);
+    s.send(`register ${window.identity.name} ${window.identity.clr}`);
   }
   s.onmessage = function(e) {
     last_packet = e;
@@ -62,15 +73,15 @@ function connect() {
           bwidth = Number(dims[0]);
           bheight = Number(dims[1]);
           mine_ratio = fields[4];
-          createCursor(id, name, clr);
+          createCursor(id, name, identity.clr);
         } break;
         case "win": {
-          info_elem.innerHTML = "<p>You win! Click here to play again.</p>";
+          info_elem.innerHTML = "You win! Click here to play again.";
           info_elem.onclick = e => { s.send("reset") };
         } break;
         case "lose": {
           let badone = fields[1];
-          info_elem.innerHTML = `<p>You lost, ${badone} was blown up. Click here to retry.</p>`;
+          info_elem.innerHTML = `You lost, ${badone} was blown up. Click here to retry.`;
           info_elem.onclick = e => { s.send("reset") };
         } break;
         case "logoff": {
@@ -180,7 +191,7 @@ function movSelWin(win, x, y) {
 function getBoardBounds() {
   let boardb = board_elem.getBoundingClientRect();
   tile_w = boardb.width / bwidth;
-  tile_h = 22;
+  tile_h = 48;
   return {
     ox: boardb.x,
     oy: boardb.y,
@@ -192,13 +203,13 @@ function getBoardBounds() {
 board_elem.onclick = function(e) {
   let tpos = tilepos(e.clientX, e.clientY);
   let cmd = `reveal ${tpos.x} ${tpos.y}`;
-  console.log(cmd);
+  //console.log(cmd);
   socket.send(cmd);
 }
 board_elem.oncontextmenu = function(e) {
   let tpos = tilepos(e.clientX, e.clientY);
   let cmd = `flag ${tpos.x} ${tpos.y}`;
-  console.log(cmd);
+  //console.log(cmd);
   socket.send(cmd);
   return false;
 }
diff --git a/assets/room.html b/assets/room.html
index 4470aea..281afce 100644
--- a/assets/room.html
+++ b/assets/room.html
@@ -11,7 +11,15 @@
       <div id="board-container">
       <span id="board"></span>
       </div>
-      <p id="miscinfo">Loading...</p>
+      <form id="identform" action="javascript:;" onsubmit="new_ident()">
+        <input id="name-in" type="text" value="anon">
+        <input id="clr-in" type="color" value="#33c033"></input>
+        <button>Join</button>
+      </form>
+      <div id="statusline">
+        <p id="miscinfo"></p>
+        <p onclick="new_ident_btn()">new identity</p>
+      </div>
     </div>
   </body>
   <script src="https://unpkg.com/fflate"></script>
diff --git a/assets/style.css b/assets/style.css
index 58da34f..4127817 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -3,18 +3,21 @@
   src: url("./f.ttf");
 }
 #board-container {
-  font-size: 36px;
-  line-height: 22px;
+  font-size: 80px;
+  line-height: 48px;
+  margin: 2vw;
 }
 .cent {
-  width: 80vmin;
+  width: 80vw;
   margin: 0 auto;
 }
 
 body {
   font-family: vt323, monospace;
+  font-size: 20pt;
   background-color: black;
   color: white;
+  margin: 0;
 }
 .unsel {
   -webkit-touch-callout: none;
@@ -25,15 +28,18 @@ body {
   user-select: none;
 }
 .cursor {
-  font-size: 16pt;
+  font-size: 20pt;
+  padding: 0;
   pointer-events: none;
+  z-index: 1;
 }
 .cursor * {
   margin: 0 0;
 }
 .cursor-name {
   background-color: #000000c0;
-  padding: 0.1em 0.1em;
+  padding: 0 0.1em;
+  line-height: initial;
 }
 
 #rlist a, #rlist span {
@@ -42,6 +48,20 @@ body {
   background-color: #3c3c3c;
 }
 
+#miscinfo {
+  flex-grow: 1;
+}
+
+#statusline {
+  display: flex;
+  position: sticky;
+  background-color: black;
+  width: 96vw;
+  padding: 0 2vw;
+  bottom: 0px;
+  left: 0px;
+}
+
 span, h1, h4 {
   margin: 0 auto;
 }
-- 
cgit v1.2.3