Compare commits

..

4 Commits

Author SHA1 Message Date
ktyl 3f4a1a0064 feat: shuffle post data 2024-08-08 20:52:04 +01:00
ktyl 5892679ee7 feat: add loading icon, adjectives to main button 2024-08-08 20:51:43 +01:00
ktyl df099bc2d4 feat: add comment button to icon cluster 2024-08-08 20:43:52 +01:00
ktyl 968762061f fix: remove undefined function 2024-08-08 20:41:55 +01:00
3 changed files with 93 additions and 29 deletions

1
icon/comment-regular.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 900 B

95
main.js
View File

@ -91,7 +91,6 @@ class Post {
getHeaderElement() { getHeaderElement() {
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.className = "post-header"; elem.className = "post-header";
elem.addEventListener("click", () => updateUserProfile(this.username));
// TODO: fetch current user pfp from thispersondoesnotexist and place in local storage // TODO: fetch current user pfp from thispersondoesnotexist and place in local storage
// for now if this person is us, post octopus // for now if this person is us, post octopus
@ -123,8 +122,8 @@ class Post {
getIconElement(svg, right) { getIconElement(svg, right) {
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.className = "icon"; elem.className = "icon";
right *= 94; right *= 15;
elem.style.right = `${right}px`; elem.style.right = `${right}vw`;
const imgElem = document.createElement("img"); const imgElem = document.createElement("img");
imgElem.className = "icon-img"; imgElem.className = "icon-img";
@ -153,16 +152,10 @@ class Post {
const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2); const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2);
elem.appendChild(bookmarkElem); 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; return elem;
} }
@ -179,7 +172,6 @@ class Post {
elem.appendChild(this.getHeaderElement()); elem.appendChild(this.getHeaderElement());
elem.appendChild(this.getContentElement()); elem.appendChild(this.getContentElement());
elem.appendChild(this.getFooterElement()); elem.appendChild(this.getFooterElement());
elem.appendChild(this.getReplyButton());
for (let i = 0; i < this.replies.length; i++) { for (let i = 0; i < this.replies.length; i++) {
const reply = this.replies[i]; const reply = this.replies[i];
@ -191,6 +183,11 @@ class Post {
} }
function getAdjective() {
return adjectives[Math.floor(Math.random() * adjectives.length)];
}
function getRootPosts() { function getRootPosts() {
let result = []; let result = [];
for (var id in posts) { 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() { function writePost() {
if (isWritingPost)
return;
if (localMode) { if (localMode) {
const post = new Post({ const post = new Post({
id: "1234", id: "1234",
@ -321,13 +334,26 @@ function writePost() {
return; 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())) fetch("https://api.wayfarer.games/singularity/generate-posts.php", getPostRequest(getCurrentUser()))
.then(response => response.json()) .then(response => response.json())
.then(makePostFromJson) .then(makePostFromJson)
.then(post => blockContainer.insertBefore(post.getElement(), getTopPost())); .then(post => {
isWritingPost = false;
blockContainer.insertBefore(post.getElement(), getTopPost());
buttonContent.innerHTML = getWritePostButtonText();
});
} }
function writeReply(post) { function writeReply(post) {
if (isWritingReply)
return;
// find the correct element // find the correct element
const elem = document.getElementById(post.id); const elem = document.getElementById(post.id);
const user = getCurrentUser(); const user = getCurrentUser();
@ -343,26 +369,33 @@ function writeReply(post) {
user: user.user, user: user.user,
posting_style: user.posting_style posting_style: user.posting_style
}; };
isWritingReply = true;
const request = getPostRequest(replyBody); 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)) fetch("https://api.wayfarer.games/singularity/generate-reply.php", getPostRequest(replyBody))
.then(response => response.json()) .then(response => response.json())
.then(makePostFromJson) .then(makePostFromJson)
.then(reply => { .then(reply => {
isWritingReply = false;
post.addReply(reply); post.addReply(reply);
elem.append(reply.getElement()); elem.append(reply.getElement());
loader.remove();
}); });
} }
function addWritePostBlock() { function addWritePostBlock() {
const blockElem = document.createElement("div"); const blockElem = document.createElement("div");
blockElem.addEventListener("click", writePost); blockElem.addEventListener("click", writePost);
blockElem.className = "block write-post"; 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); blockContainer.append(blockElem);
} }
@ -489,10 +522,6 @@ function chooseName() {
splashStep = 1; splashStep = 1;
localUser.user = inputElem.value; 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 splashElem = document.getElementById("start-splash");
const interestsTextElem = document.createElement("p"); 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 usersUrl = localMode ? "users.json" : "https://api.wayfarer.games/singularity/users.json";
const postsUrl = localMode ? "posts.json" : "https://api.wayfarer.games/singularity/posts.json"; const postsUrl = localMode ? "posts.json" : "https://api.wayfarer.games/singularity/posts.json";
loadDataFromEndpoint(usersUrl, json => { users = json.users; }); loadDataFromEndpoint(usersUrl, json => { users = json.users; });
loadDataFromEndpoint(postsUrl, json => { loadDataFromEndpoint(postsUrl, json => {
let postsData = json.content;
shuffle(postsData);
// first pass to instantiate all the posts // 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; posts[post.id] = post;
} }

View File

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