feat: shuffle post data

icon/comment-regular.svg

@@ -0,0 +1 @@
+<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,7 +91,6 @@ 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
@@ -123,8 +122,8 @@ class Post {
     getIconElement(svg, right) {
         const elem = document.createElement("div");
         elem.className = "icon";
-        right *= 94;
+        right *= 15;
-        elem.style.right = `${right}px`;
+        elem.style.right = `${right}vw`;
 
         const imgElem = document.createElement("img");
         imgElem.className = "icon-img";
@@ -153,16 +152,10 @@ class Post {
         const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2);
         elem.appendChild(bookmarkElem);
 
-        return elem;
+        const commentElem = this.getIconElement("icon/comment-regular.svg", 3);
-    }
+        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;
     }
 
@@ -179,7 +172,6 @@ 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];
@@ -191,6 +183,11 @@ class Post {
 }
 
 
+function getAdjective() {
+    return adjectives[Math.floor(Math.random() * adjectives.length)];
+}
+
+
 function getRootPosts() {
     let result = [];
     for (var id in posts) {
@@ -310,7 +307,23 @@ 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",
@@ -321,13 +334,26 @@ 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 => blockContainer.insertBefore(post.getElement(), getTopPost()));
+        .then(post => {
+            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();
@@ -343,26 +369,33 @@ 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 spanElem = document.createElement("h2");
+    const contentElem = document.createElement("h1");
-    spanElem.className = "";
+    contentElem.className = "";
-    spanElem.innerHTML = "Write something interesting for me!";
+    contentElem.id = "write-post-button-content";
-    blockElem.append(spanElem);
+    contentElem.innerHTML = getWritePostButtonText();
+    blockElem.append(contentElem);
 
     blockContainer.append(blockElem);
 }
@@ -489,10 +522,6 @@ 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");
@@ -553,14 +582,28 @@ 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 < json.content.length; i++) {
+    for (let i = 0; i < postsData.length; i++) {
-        const post = new Post(json.content[i]);
+        const post = new Post(postsData[i]);
         posts[post.id] = post;
     }
 

styles.css

@@ -120,7 +120,7 @@ body {
 }
 
 .block:not(.write-post) {
-    padding-bottom: var(--header-height);
+    padding-bottom: calc(3 * var(--header-height) / 2);
 }
 
 .reply-button {
@@ -206,7 +206,7 @@ body {
     background-color: var(---blue-gray);
 }
 
-.write-post h2 {
+.write-post h1 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -229,7 +229,7 @@ a {
 }
 
 .post:not(.block) {
-    margin-top: calc(var(--header-height) / 4);
+    margin-top: calc(var(--header-height));
     border-left: var(--comment-column-width) solid var(--sky-blue);
     padding-left: calc(var(--header-height) / 2 - var(--comment-column-width));
 }
@@ -248,6 +248,26 @@ 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;