feat: add loading icon, adjectives to main button

main.js

@@ -183,6 +183,11 @@ class Post {
 }
 
 
+function getAdjective() {
+    return adjectives[Math.floor(Math.random() * adjectives.length)];
+}
+
+
 function getRootPosts() {
     let result = [];
     for (var id in posts) {
@@ -302,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",
@@ -313,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();
@@ -335,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");
-    spanElem.className = "";
-    spanElem.innerHTML = "Write something interesting for me!";
-    blockElem.append(spanElem);
+    const contentElem = document.createElement("h1");
+    contentElem.className = "";
+    contentElem.id = "write-post-button-content";
+    contentElem.innerHTML = getWritePostButtonText();
+    blockElem.append(contentElem);
 
     blockContainer.append(blockElem);
 }
@@ -481,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");

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;