feat: reply to posts

main.js

@@ -1,6 +1,13 @@
 var users = [];
 var posts = {};
 
+const adjectives = [
+    "dynamic", "strategic", "innovative", "passionate", "results-oriented",
+    "proactive", "visionary", "collaborative", "driven", "empathetic",
+    "adaptable", "resilient", "resourceful", "detail-oriented", "inspirational",
+    "analytical", "motivated", "solution-focused", "committed", "agile"
+];
+
 const localMode = false;
 const blockContainer = document.getElementById("block-container");
 const postCountElem = document.getElementById("post-count");
@@ -53,7 +60,9 @@ class Post {
     }
 
     getHeaderElement() {
-        const elem = document.createElement("a");
+        const elem = document.createElement("div");
+        elem.className = "post-header";
+        elem.addEventListener("click", () => updateUserProfile(this.username));
 
         // TODO: fetch current user pfp from thispersondoesnotexist and place in local storage
         // for now if this person is us, post octopus
@@ -69,9 +78,6 @@ class Post {
         const usernameElem = document.createElement(this.getHeaderTag());
         usernameElem.setAttribute("class", "username");
         usernameElem.innerHTML = `<a href="#">${this.username}</a>`;
-
-        elem.setAttribute("href", "#");
-        elem.addEventListener("click", () => updateUserProfile(this.username));
         elem.appendChild(usernameElem);
 
         return elem;
@@ -83,8 +89,19 @@ class Post {
         return elem;
     }
 
+    getReplyButton() {
+        const elem = document.createElement("a");
+        const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+        const particle = "aeiou".includes(adjective[0]) ? "an" : "a";
+        elem.innerHTML = `Write ${particle} ${adjective} reply for me!`;
+        elem.className = "reply-button";
+        elem.addEventListener("click", () => writeReply(this));
+        return elem;
+    }
+
     getElement() {
         const elem = document.createElement("div");
+        elem.id = this.id;
 
         // display root posts as blocks, and comments as attached to their posts
         let classes = ["post"];
@@ -94,6 +111,7 @@ class Post {
         elem.className = classes.join(" ");
         elem.appendChild(this.getHeaderElement());
         elem.appendChild(this.getContentElement());
+        elem.appendChild(this.getReplyButton());
 
         for (let i = 0; i < this.replies.length; i++) {
             const reply = this.replies[i];
@@ -208,7 +226,7 @@ function getCurrentUser() {
     };
 }
 
-function writePost() {
+function writePost(postCallback) {
     const request = {
         method: "POST",
         mode: "cors",
@@ -224,18 +242,35 @@ function writePost() {
             associatedUser: getCurrentUser().user,
             body: "local mode post (local mode post)"
         });
-        blockContainer.insertBefore(post.getElement(), getTopPost());
+        postCallback(post);
+        //blockContainer.insertBefore(post.getElement(), getTopPost());
     } else {
         fetch("https://api.wayfarer.games/singularity/generate-posts.php", request)
             .then(response => response.json())
             .then(makePostFromJson)
-            .then(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
+            //.then(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
+            .then(postCallback);
     }
 }
 
+function writeNewPost() {
+    writePost(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
+}
+
+function writeReply(post) {
+    // find the correct element
+    const elem = document.getElementById(post.id);
+
+    writePost(reply => {
+        post.addReply(reply);
+        elem.append(reply.getElement());
+    });
+}
+
+
 function addWritePostBlock() {
     const blockElem = document.createElement("div");
-    blockElem.addEventListener("click", writePost);
+    blockElem.addEventListener("click", writeNewPost);
     blockElem.className = "block write-post";
 
     const spanElem = document.createElement("h2");

styles.css

@@ -46,7 +46,31 @@ body {
     padding-bottom: var(--header-height);
 }
 
-.block a .username {
+.reply-button {
+    display: inline-block;
+    border-radius: calc(var(--header-height) / 2);
+    margin-top: calc(var(--header-height) / 8);
+    padding: calc(var(--header-height) / 8) calc(var(--header-height) / 4);
+    background-color: var(--accent-color);
+    color: var(--backround-color);
+    cursor: pointer;
+    transition: all 200ms ease-in-out;
+}
+
+.reply-button:hover {
+    background-color: var(--background-color);
+    color: white;
+}
+
+.reply-button:active {
+    background-color: white;
+}
+
+.post-header {
+    position: relative;
+}
+
+.post-header .username {
     margin-top: 0;
     margin-bottom: 0;
     padding-left: calc(var(--header-height) / 4);
@@ -98,7 +122,6 @@ a {
     padding-left: calc(var(--header-height) / 2 - var(--comment-column-width));
 }
 
-
 .post-actions {
     margin: 8px;
     padding: 16px 0;