From 98e2c2c9c5b5c1597d4165c85e7aab280a7ad7b7 Mon Sep 17 00:00:00 2001 From: ktyl Date: Sun, 4 Aug 2024 15:02:19 +0100 Subject: [PATCH] feat: reply to posts --- main.js | 51 +++++++++++++++++++++++++++++++++++++++++++-------- styles.css | 27 +++++++++++++++++++++++++-- 2 files changed, 68 insertions(+), 10 deletions(-) diff --git a/main.js b/main.js index 7b02d5d..4b9aa7c 100644 --- a/main.js +++ b/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 = `${this.username}`; - - 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"); diff --git a/styles.css b/styles.css index e590ca6..51f224b 100644 --- a/styles.css +++ b/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;