icon/comment-regular.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M123.6 391.3c12.9-9.4 29.6-11.8 44.6-6.4c26.5 9.6 56.2 15.1 87.8 15.1c124.7 0 208-80.5 208-160s-83.3-160-208-160S48 160.5 48 240c0 32 12.4 62.8 35.7 89.2c8.6 9.7 12.8 22.5 11.8 35.5c-1.4 18.1-5.7 34.7-11.3 49.4c17-7.9 31.1-16.7 39.4-22.7zM21.2 431.9c1.8-2.7 3.5-5.4 5.1-8.1c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208s-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6c-15.1 6.6-32.3 12.6-50.1 16.1c-.8 .2-1.6 .3-2.4 .5c-4.4 .8-8.7 1.5-13.2 1.9c-.2 0-.5 .1-.7 .1c-5.1 .5-10.2 .8-15.3 .8c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c4.1-4.2 7.8-8.7 11.3-13.5c1.7-2.3 3.3-4.6 4.8-6.9l.3-.5z"/></svg>

main.js

@@ -91,6 +91,7 @@ class Post {
     getHeaderElement() {
         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
@@ -122,8 +123,8 @@ class Post {
     getIconElement(svg, right) {
         const elem = document.createElement("div");
         elem.className = "icon";
-        right *= 15;
+        right *= 94;
-        elem.style.right = `${right}vw`;
+        elem.style.right = `${right}px`;
 
         const imgElem = document.createElement("img");
         imgElem.className = "icon-img";
@@ -152,10 +153,16 @@ class Post {
         const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2);
         elem.appendChild(bookmarkElem);
 
-        const commentElem = this.getIconElement("icon/comment-regular.svg", 3);
+        return elem;
-        commentElem.addEventListener("click", () => writeReply(this));
+    }
-        elem.appendChild(commentElem);
 
+    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;
     }
 
@@ -172,6 +179,7 @@ class Post {
         elem.appendChild(this.getHeaderElement());
         elem.appendChild(this.getContentElement());
         elem.appendChild(this.getFooterElement());
+        elem.appendChild(this.getReplyButton());
 
         for (let i = 0; i < this.replies.length; i++) {
             const reply = this.replies[i];
@@ -183,11 +191,6 @@ class Post {
 }
 
 
-function getAdjective() {
-    return adjectives[Math.floor(Math.random() * adjectives.length)];
-}
-
-
 function getRootPosts() {
     let result = [];
     for (var id in posts) {
@@ -307,23 +310,7 @@ function getPostRequest(body) {
     };
 }
 
-function getLoaderIcon() {
-    const elem = document.createElement("div");
-    elem.className = "loader-icon";
-    return elem;
-}
-
-function getWritePostButtonText() {
-    return `Write something ${getAdjective()} for me!`;
-}
-
-var isWritingPost = false;
-var isWritingReply = false;
-
 function writePost() {
-    if (isWritingPost)
-        return;
-
     if (localMode) {
         const post = new Post({
             id: "1234",
@@ -334,26 +321,13 @@ function writePost() {
         return;
     } 
 
-    // change the content of the write post button to a loading animation
-    const buttonContent = document.getElementById("write-post-button-content");
-    buttonContent.innerHTML = "";
-    buttonContent.appendChild(getLoaderIcon());
-    isWritingPost = true;
-
     fetch("https://api.wayfarer.games/singularity/generate-posts.php", getPostRequest(getCurrentUser()))
         .then(response => response.json())
         .then(makePostFromJson)
-        .then(post => {
+        .then(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
-            isWritingPost = false;
-            blockContainer.insertBefore(post.getElement(), getTopPost());
-            buttonContent.innerHTML = getWritePostButtonText();
-        });
 }
 
 function writeReply(post) {
-    if (isWritingReply)
-        return;
-
     // find the correct element
     const elem = document.getElementById(post.id);
     const user = getCurrentUser();
@@ -369,33 +343,26 @@ function writeReply(post) {
         user: user.user,
         posting_style: user.posting_style
     };
-    isWritingReply = true;
     const request = getPostRequest(replyBody);
-
-    // add a loading icon to the element
-    const loader = getLoaderIcon();
-    elem.append(loader);
-
     fetch("https://api.wayfarer.games/singularity/generate-reply.php", getPostRequest(replyBody))
         .then(response => response.json())
         .then(makePostFromJson)
         .then(reply => {
-            isWritingReply = false;
             post.addReply(reply);
             elem.append(reply.getElement());
-            loader.remove();
         });
 }
+
+
 function addWritePostBlock() {
     const blockElem = document.createElement("div");
     blockElem.addEventListener("click", writePost);
     blockElem.className = "block write-post";
 
-    const contentElem = document.createElement("h1");
+    const spanElem = document.createElement("h2");
-    contentElem.className = "";
+    spanElem.className = "";
-    contentElem.id = "write-post-button-content";
+    spanElem.innerHTML = "Write something interesting for me!";
-    contentElem.innerHTML = getWritePostButtonText();
+    blockElem.append(spanElem);
-    blockElem.append(contentElem);
 
     blockContainer.append(blockElem);
 }
@@ -522,6 +489,10 @@ function chooseName() {
     splashStep = 1;
     localUser.user = inputElem.value;
 
+    // TODO: disable button until name has been chosen
+
+    // TODO: insert interest selection elements before name input
+    //writePost(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
     const splashElem = document.getElementById("start-splash");
 
     const interestsTextElem = document.createElement("p");
@@ -582,28 +553,14 @@ function loadDataFromEndpoint(endpoint, callback) {
         });
 }
 
-function shuffle(array) {
-    let idx = array.length;
-
-    while (idx != 0) {
-        const r = Math.floor(Math.random() * idx);
-        idx--;
-
-        [array[idx], array[r]] = [array[r], array[idx]];
-    }
-}
 
 const usersUrl = localMode ? "users.json" : "https://api.wayfarer.games/singularity/users.json";
 const postsUrl = localMode ? "posts.json" : "https://api.wayfarer.games/singularity/posts.json";
 loadDataFromEndpoint(usersUrl, json => { users = json.users; });
 loadDataFromEndpoint(postsUrl, json => {
-
-    let postsData = json.content;
-    shuffle(postsData);
-
     // first pass to instantiate all the posts
-    for (let i = 0; i < postsData.length; i++) {
+    for (let i = 0; i < json.content.length; i++) {
-        const post = new Post(postsData[i]);
+        const post = new Post(json.content[i]);
         posts[post.id] = post;
     }
 

styles.css

@@ -120,7 +120,7 @@ body {
 }
 
 .block:not(.write-post) {
-    padding-bottom: calc(3 * var(--header-height) / 2);
+    padding-bottom: var(--header-height);
 }
 
 .reply-button {
@@ -206,7 +206,7 @@ body {
     background-color: var(---blue-gray);
 }
 
-.write-post h1 {
+.write-post h2 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -229,7 +229,7 @@ a {
 }
 
 .post:not(.block) {
-    margin-top: calc(var(--header-height));
+    margin-top: calc(var(--header-height) / 4);
     border-left: var(--comment-column-width) solid var(--sky-blue);
     padding-left: calc(var(--header-height) / 2 - var(--comment-column-width));
 }
@@ -248,26 +248,6 @@ a {
     margin-inline: auto;
 }
 
-.loader-icon {
-    width: 50px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    padding: 3px;
-    background:
-        radial-gradient(farthest-side,var(--blue-gray) 95%,#0000) 50% 0/12px 12px no-repeat,
-        radial-gradient(farthest-side,#0000 calc(100% - 5px),var(--blue-gray) calc(100% - 4px)) content-box;
-    animation: l6 2s infinite ;
-}
-@keyframes l6 {to{transform: rotate(1turn)}}
-
-.post .loader-icon {
-    background:
-        radial-gradient(farthest-side,var(--blue-gray) 95%,#0000) 50% 0/12px 12px no-repeat,
-        radial-gradient(farthest-side,#0000 calc(100% - 5px),var(--blue-gray) calc(100% - 4px)) content-box;
-    margin: auto;
-    margin-top: calc(3 * var(--header-height) / 2);
-}
-
 .skeleton-post {
     height: 55vh;
     position: relative;