diff --git a/main.js b/main.js index 0ac1d8e..842eb58 100644 --- a/main.js +++ b/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"); diff --git a/styles.css b/styles.css index a995676..c837650 100644 --- a/styles.css +++ b/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;