Fix name tracking to be persistent

By adding both a variable to record in the client what the server has
told us the name is, and also adding localStorage storage of the name
so it persists between browser starts.

diff --git a/index.html b/index.html
index 012995cbe96285715b24284a18f761c4e43b2aa1..c556792845e29f6cb668de5c176320516ba3180c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -112,6 +112,7 @@ mute.addEventListener("click", () => {
 
     const name_input = document.querySelector("#name");
     const name_dialog = document.querySelector("#name-dialog");
+    var informed_name;
     const images = document.querySelector("#images");
     const zombo_form = document.querySelector("#zombo-form");
     const prompt = document.querySelector("#prompt");
@@ -141,7 +142,16 @@ mute.addEventListener("click", () => {
 
     socket.on('inform-name', (name) => {
         console.log("Received inform-name event: " + name);
+
+        /* When we receive a name we store it in 3 places:
+         *
+         *   * The informed_name variable (confirming what the server knows)
+         *   * The name_input field (so the user will see that in their profile)
+         *   * In localStorage (for use in a future session)
+         */
+        informed_name = name;
         name_input.value = name;
+        localStorage.setItem('name', name);
     });
 
     socket.on('reset', () => {
@@ -185,11 +195,18 @@ mute.addEventListener("click", () => {
         figure.appendChild(comment_form);
 
         comment_input.addEventListener('focus', () => {
-            /* Do nothing if name is already set. */
-            if (name_input.value)
+            /* If the server has informed us it has our name, we are done. */
+            if (informed_name)
+                return;
+
+            /* If server has no name, check local storage. */
+            const name = localStorage.getItem('name');
+            if (name) {
+                socket.emit('set-name', name);
                 return;
+            }
 
-            /* Otherwise, bring up the modal dialog to set the name. */
+            /* Failing both, bring up the modal dialog to set the name. */
             name_dialog.showModal();
         });