From 0d4603895fb7e5eb600d94620c473b6a5fb99a19 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Thu, 8 Dec 2022 00:27:57 -0800
Subject: [PATCH] Make a separate comments section for each image

Rather than a global one. So these comments elements are created
dynamically, each with their own unique id.
---
 index.html | 68 +++++++++++++++++++++++++++++-------------------------
 index.js   |  7 +++---
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index d61e2d0..75a4cb8 100644
--- a/index.html
+++ b/index.html
@@ -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>
@@ -122,9 +113,6 @@ mute.addEventListener("click", () => {
     const name = 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,15 +121,6 @@ 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();
     });
@@ -150,15 +129,8 @@ mute.addEventListener("click", () => {
         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.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 + ':';
@@ -174,18 +146,52 @@ mute.addEventListener("click", () => {
 
     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})`);
         figcaption.appendChild(caption_text);
-        figure.appendChild(img);
         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.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);
     });
 
diff --git a/index.js b/index.js
index 1239ea2..11fac96 100644
--- a/index.js
+++ b/index.js
@@ -91,9 +91,8 @@ io.on('connection', (socket) => {
     });
 
     // When any client comments, send that to all clients (including sender)
-    socket.on('comment', (comment_text) => {
-        comment = { name: socket.request.session.name,
-                    text: comment_text }
+    socket.on('comment', (comment) => {
+        comment.name = socket.request.session.name;
         io.emit('comment', comment);
         state.comments.push(comment);
     });
@@ -112,7 +111,7 @@ io.on('connection', (socket) => {
             child.stdout.on('data', (data) => {
                 const images = JSON.parse(data);
                 images.forEach((image) => {
-                    console.log(`Emitting image to clients: ${image}`);
+                    image.index = state.images.length;
                     io.emit('image', image);
                     state.images.push(image);
                 });
-- 
2.43.0