Tell server a name at first connection

[zombocom-ai] / index.html

diff --git a/index.html b/index.html
index a1f4e51955dc0d15096494ea3327d9a56399c738..243e1da301e56737691f23f760d5eca84056129b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -64,7 +64,7 @@
             <label for="code">
               Numeric code:
             </label>
-            <input id="code" type="text" autocomplete="off" placeholder="(Leave blank for random)" />
+            <input id="code" type="number" min="0" max="4294967295" autocomplete="off" placeholder="(Leave blank for random)" />
           </div>
         </div>
 
@@ -74,7 +74,7 @@
       </form>
     </p>
 
-    <div id="images" style="display: none">
+    <div id="images">
     </div>
 
     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
@@ -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,11 +142,28 @@ 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', () => {
         images.replaceChildren();
+
+        /* Since the server is seeing us for the first time, let it
+           know our name (if we have one). */
+        const name = localStorage.getItem('name');
+        if (name) {
+            socket.emit('set-name', name);
+            return;
+        }
     });
 
     socket.on('image', (image) => {
@@ -185,11 +203,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;
 
-            /* Otherwise, bring up the modal dialog to set the name. */
+            /* If server has no name, check local storage. */
+            const name = localStorage.getItem('name');
+            if (name) {
+                socket.emit('set-name', name);
+                return;
+            }
+
+            /* Failing both, bring up the modal dialog to set the name. */
             name_dialog.showModal();
         });
 
@@ -224,8 +249,6 @@ mute.addEventListener("click", () => {
         /* Re-display the form and hide spinner now that generation is over. */
         clearTimeout(spinner_timeout);
         hide_spinner();
-        /* Also display all of the images. */
-        images.style.display = "block";
     });
 
     function random_from(items) {
@@ -242,6 +265,8 @@ mute.addEventListener("click", () => {
             "An image of",
             "A pencil sketch of",
             "A watercolor of",
+            "A 3D rendering of",
+            "A marble statue of",
         ];
         const subject = [
             " a modern home",
@@ -254,6 +279,7 @@ mute.addEventListener("click", () => {
             " sci-fi buildings",
             " pastel purple clouds",
             " a Teenage Mutant Ninja Turtle",
+            " Pikachu",
         ];
         const scenery = [
             " in tropical surroundings",
@@ -272,6 +298,7 @@ mute.addEventListener("click", () => {
             " on the streets of London at night with neon lights flashing",
             " that is part octopus",
             " melting into a puddle",
+            " on a birthday cake",
         ];
         const artist = [
             ", unreal engine 5",
@@ -283,6 +310,8 @@ mute.addEventListener("click", () => {
             ", fantasy art, neon fog",
             ", epic lighting from above",
             ", trending on artstation",
+            " by Gustav Klimt",
+            " by Leonardo da Vinci",
         ];
 
         prompt.value = random_from(art_type) + random_from(subject) +