+
+ 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);
+ }
+
+ const dl_comments = document.createElement('dl');
+ dl_comments.className = "comments";
+ 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');
+ 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', () => {
+ /* 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;
+ }
+
+ /* 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', {image_id: image.id,
+ text: comment_input.value});
+ comment_input.value = '';
+ }
+ });
+
+ images.prepend(figure);