X-Git-Url: https://git.cworth.org/git?a=blobdiff_plain;f=index.html;h=8db8b695b93b68c2187af45978e1fe4e8a07e6c0;hb=HEAD;hp=012995cbe96285715b24284a18f761c4e43b2aa1;hpb=a89283fbb522b14c9015695ab4982db8d0888b90;p=zombocom-ai

diff --git a/index.html b/index.html
index 012995c..8db8b69 100644
--- 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");
@@ -129,51 +130,101 @@ mute.addEventListener("click", () => {
         socket.emit('set-name', name_input.value);
     });
 
-    socket.on('comment', function(comment) {
-        const comments = document.querySelector("#" + comment.comments_id);
+    function add_comment(comments, comment) {
         const dt = document.createElement('dt');
         const dd = document.createElement('dd');
         dt.textContent = comment.name + ':';
         dd.textContent = comment.text;
         comments.appendChild(dt);
         comments.appendChild(dd);
+    }
+
+    // When we enter the endgame, we disable the art-generation form,
+    // (just hide it)
+    socket.on('endgame', () => {
+	zombo_form.style.display = "none";
+    });
+
+    socket.on('comment', function(comment) {
+        const comments = document.querySelector("#comments_" + comment.image_id);
+        add_comment(comments, comment);
     });
 
     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) => {
         const figure = document.createElement('figure');
+        figure.id = "image_" + image.id;
 
         const img = document.createElement('img');
         img.src = image.filename;
-        figure.appendChild(img);
-
-        const figcaption = document.createElement('figcaption');
-        const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
-        figcaption.appendChild(caption_text);
 
-        const reuse_button = document.createElement('button');
-        reuse_button.appendChild(document.createTextNode("Reuse"));
-        figcaption.appendChild(reuse_button);
-
-        reuse_button.addEventListener('click', () => {
-            prompt.value = image.prompt;
-            window.scrollTo(0,0);
-        });
+        if (image.link) {
+            const a = document.createElement('a');
+            a.href = image.link;
+            a.appendChild(img);
+            figure.appendChild(a);
+        } else {
+            figure.appendChild(img);
+        }
+
+        if (image.censored) {
+            img.style.display = "none";
+        }
+
+        if (image.prompt && image.code) {
+            const figcaption = document.createElement('figcaption');
+            const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
+            figcaption.appendChild(caption_text);
+
+            const reuse_button = document.createElement('button');
+            reuse_button.appendChild(document.createTextNode("Reuse"));
+            figcaption.appendChild(reuse_button);
+
+            reuse_button.addEventListener('click', () => {
+                prompt.value = image.prompt;
+                window.scrollTo(0,0);
+            });
+
+            if (image.censored) {
+                figcaption.style.display = "none";
+            }
 
-        figure.appendChild(figcaption);
+            figure.appendChild(figcaption);
+        }
 
         const dl_comments = document.createElement('dl');
-        const comments_id = "comments_" + image.index;
         dl_comments.className = "comments";
-        dl_comments.id = comments_id;
+        dl_comments.id = "comments_" + image.id;
+
+        image.comments.forEach((comment) => {
+            add_comment(dl_comments, comment);
+        });
+
         figure.appendChild(dl_comments);
 
         const comment_form = document.createElement('form');
@@ -185,18 +236,25 @@ 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();
         });
 
         comment_form.addEventListener('submit', function(e) {
             e.preventDefault();
             if (comment_input.value) {
-                socket.emit('comment', {comments_id: comments_id,
+                socket.emit('comment', {image_id: image.id,
                                         text: comment_input.value});
                 comment_input.value = '';
             }