code cleanup, floodfill algo changed to iterative

4 files changed, 41 insertions, 20 deletions

diff --git a/assets/client.js b/assets/client.js
index 14e95f0..33ad796 100644
--- a/assets/client.js
+++ b/assets/client.js
@@ -11,7 +11,7 @@ window.room = {
 };
 window.info_elem = document.getElementById("miscinfo");
 window.identform = document.getElementById("identform");
-window.statusline = document.getElementById("statusline");
+window.statusline = document.getElementsByClassName("statusline")[0];
 window.bcont_elem = document.getElementById("board-container");
 window.board_elem = document.getElementById("board");
 window.cursor_frame = document.getElementById("cursor-frame");
@@ -34,7 +34,7 @@ function join() {
   room.socket = connect();
   statusline.style.display = "flex";
 }
-function new_ident_btn() {
+function clear_ident() {
   localStorage.removeItem("identity");
   document.location.reload();
 }
diff --git a/assets/index.html b/assets/index.html
index 9282726..f86287e 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -52,20 +52,39 @@
     <form method="post" action="r" class="cent">
       <fieldset>
         <legend>-={ Create a new room }=-</legend>
-        <label>room name<input name="rname" type="text" autofocus></label><br>
-        <label>board dimensions<br>
+        <label>room name&nbsp;<input name="rname" type="text" autofocus></label><br>
+        <label>
+          board dimensions
           <input name="rwidth" type="number" value="30" required>
           x
           <input name="rheight" type="number" value="20" required><br>
-          where<input name="rration" type="number" value="1" required>
-          in every<input name="rratiod" type="number" value="8" required>
+          where <input name="rration" type="number" value="1" required>
+          in every <input name="rratiod" type="number" value="8" required>
           tiles are mines
         </label><br>
         <label>public, ie. shown in the lobby <input name="raccess" type="checkbox" checked></label><br>
-        <label>safe first move (if possible)<input name="ralwayssafe1move" type="checkbox" checked></label><br>
-        <label>player limit<input name="rlimit" type="number" value="32"></label><br>
+        <label>safe first move (if possible) <input name="ralwayssafe1move" type="checkbox" checked></label><br>
+        <label>player limit <input name="rlimit" type="number" value="32"></label><br>
         <button id="createbtn">create</button>
       </fieldset>
-      <form>
+    </form>
+    <div class="statusline cent">
+      <p id="ident-name"></p>
+      <a id="ident-clr" href="javascript:clear_ident();">clear identity</a>
+    </div>
+    <script>
+      function clear_ident() {
+        localStorage.removeItem("identity");
+        document.location.reload();
+      }
+      let ident = JSON.parse(localStorage.getItem("identity"));
+      let ident_elem = document.getElementById("ident-name");
+      if (ident == null) {
+        ident_elem.innerHTML = "no identity yet";
+        document.getElementById("ident-clr").style.display = "none";
+      } else {
+        ident_elem.innerHTML = `you are <span style="color: ${ident.clr}">${ident.name}</span>`;
+      }
+    </script>
   </body>
 </html>
diff --git a/assets/room.html b/assets/room.html
index b669757..c3dc871 100644
--- a/assets/room.html
+++ b/assets/room.html
@@ -17,10 +17,10 @@
         <input id="clr-in" type="color" value="#33c033"></input>
         <button>Join</button>
       </form>
-      <div id="statusline">
+      <div class="statusline">
         <p id="miscinfo"></p>
         <a href="javascript:navigator.clipboard.writeText(window.location.href);alert('copied link to clipboard');">🔗share</p>
-        <a href="javascript:new_ident_btn();">new identity</p>
+        <a href="javascript:clear_ident();">new identity</p>
         <a href="../..">back to lobby</a>
       </div>
     </div>
diff --git a/assets/style.css b/assets/style.css
index 16ca7f0..49e832e 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -15,10 +15,6 @@
   top: 0px;
   left: 0px;
 }
-.cent {
-  width: 80vw;
-  margin: 0 auto;
-}
 
 body {
   font-family: vt323, monospace;
@@ -50,17 +46,16 @@ body {
   line-height: initial;
 }
 
-#rlist a, #rlist span {
+a {
   text-decoration: none;
-  color: #dfdfff;
-  background-color: #3c3c3c;
+  color: #8b8be8;
 }
 
 #miscinfo {
   flex-grow: 1;
 }
 
-#statusline {
+.statusline {
   display: flex;
   position: sticky;
   background-color: black;
@@ -69,10 +64,17 @@ body {
   bottom: 0px;
   left: 0px;
 }
-#statusline * {
+.statusline * {
   margin: 0.5em 2em 0 0;
 }
 
+/* i was today years old when i learned that css selector declaration order matters */
+/* cent should come after statusline, so it overwrites statusline's props */
+.cent {
+  width: 80vw;
+  margin: 0 auto;
+}
+
 span, h1, h4 {
   margin: 0 auto;
 }