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

diff --git a/index.html b/index.html
index d61e2d0..012995c 100644
--- 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>
 
@@ -77,15 +77,6 @@
     <div id="images">
     </div>
 
-    <dl id="comments" class="comments">
-    </dl>
-
-    <p>
-      <form action="" id="comment-form">
-        <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
-      </form>
-    </p>
-
     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
     <button id="mute" class="menu-button fade volume">
       <div>🔊</div>
@@ -119,12 +110,9 @@ mute.addEventListener("click", () => {
   <script>
     var socket = io();
 
-    const name = document.querySelector("#name");
+    const name_input = document.querySelector("#name");
     const name_dialog = document.querySelector("#name-dialog");
     const images = document.querySelector("#images");
-    const comments = document.querySelector("#comments");
-    const comment_form = document.querySelector("#comment-form");
-    const comment = document.querySelector("#comment");
     const zombo_form = document.querySelector("#zombo-form");
     const prompt = document.querySelector("#prompt");
     const code = document.querySelector("#code");
@@ -133,32 +121,16 @@ mute.addEventListener("click", () => {
     const profile = document.querySelector("#profile");
     var spinner_timeout;
 
-    comment.addEventListener('focus', () => {
-        /* Do nothing if name is already set. */
-        if (name.value)
-            return;
-
-        /* Otherwise, bring up the modal dialog to set the name. */
-        name_dialog.showModal();
-    });
-
     profile.addEventListener('click', () => {
         name_dialog.showModal();
     });
 
     name_dialog.addEventListener('close', () => {
-        socket.emit('set-name', name.value);
-    });
-
-    comment_form.addEventListener('submit', function(e) {
-        e.preventDefault();
-        if (comment.value) {
-            socket.emit('comment', comment.value);
-            comment.value = '';
-        }
+        socket.emit('set-name', name_input.value);
     });
 
     socket.on('comment', function(comment) {
+        const comments = document.querySelector("#" + comment.comments_id);
         const dt = document.createElement('dt');
         const dd = document.createElement('dd');
         dt.textContent = comment.name + ':';
@@ -169,23 +141,67 @@ mute.addEventListener("click", () => {
 
     socket.on('inform-name', (name) => {
         console.log("Received inform-name event: " + name);
-        name.value = name;
+        name_input.value = name;
     });
 
     socket.on('reset', () => {
         images.replaceChildren();
-        comments.replaceChildren();
     });
 
     socket.on('image', (image) => {
         const figure = document.createElement('figure');
+
         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})`);
+        const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
         figcaption.appendChild(caption_text);
-        figure.appendChild(img);
+
+        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);
+        });
+
         figure.appendChild(figcaption);
+
+        const dl_comments = document.createElement('dl');
+        const comments_id = "comments_" + image.index;
+        dl_comments.className = "comments";
+        dl_comments.id = comments_id;
+        figure.appendChild(dl_comments);
+
+        const comment_form = document.createElement('form');
+        const comment_input = document.createElement('input')
+        comment_input.type = "text";
+        comment_input.className = "comment";
+        comment_input.placeholder = "Add a comment";
+        comment_form.appendChild(comment_input);
+        figure.appendChild(comment_form);
+
+        comment_input.addEventListener('focus', () => {
+            /* Do nothing if name is already set. */
+            if (name_input.value)
+                return;
+
+            /* Otherwise, 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,
+                                        text: comment_input.value});
+                comment_input.value = '';
+            }
+        });
+
         images.prepend(figure);
     });
 
@@ -224,6 +240,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",
@@ -236,6 +254,7 @@ mute.addEventListener("click", () => {
             " sci-fi buildings",
             " pastel purple clouds",
             " a Teenage Mutant Ninja Turtle",
+            " Pikachu",
         ];
         const scenery = [
             " in tropical surroundings",
@@ -254,6 +273,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",
@@ -265,6 +285,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) +