1 files changed, 29 insertions, 18 deletions

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;
 }