feat: reply to posts

This commit is contained in:
ktyl 2024-08-04 15:02:19 +01:00
parent 91b48e7582
commit 98e2c2c9c5
2 changed files with 68 additions and 10 deletions

51
main.js
View File

@ -1,6 +1,13 @@
var users = []; var users = [];
var posts = {}; var posts = {};
const adjectives = [
"dynamic", "strategic", "innovative", "passionate", "results-oriented",
"proactive", "visionary", "collaborative", "driven", "empathetic",
"adaptable", "resilient", "resourceful", "detail-oriented", "inspirational",
"analytical", "motivated", "solution-focused", "committed", "agile"
];
const localMode = false; const localMode = false;
const blockContainer = document.getElementById("block-container"); const blockContainer = document.getElementById("block-container");
const postCountElem = document.getElementById("post-count"); const postCountElem = document.getElementById("post-count");
@ -53,7 +60,9 @@ class Post {
} }
getHeaderElement() { getHeaderElement() {
const elem = document.createElement("a"); 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 // 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
@ -69,9 +78,6 @@ class Post {
const usernameElem = document.createElement(this.getHeaderTag()); const usernameElem = document.createElement(this.getHeaderTag());
usernameElem.setAttribute("class", "username"); usernameElem.setAttribute("class", "username");
usernameElem.innerHTML = `<a href="#">${this.username}</a>`; usernameElem.innerHTML = `<a href="#">${this.username}</a>`;
elem.setAttribute("href", "#");
elem.addEventListener("click", () => updateUserProfile(this.username));
elem.appendChild(usernameElem); elem.appendChild(usernameElem);
return elem; return elem;
@ -83,8 +89,19 @@ class Post {
return elem; return elem;
} }
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;
}
getElement() { getElement() {
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.id = this.id;
// display root posts as blocks, and comments as attached to their posts // display root posts as blocks, and comments as attached to their posts
let classes = ["post"]; let classes = ["post"];
@ -94,6 +111,7 @@ class Post {
elem.className = classes.join(" "); elem.className = classes.join(" ");
elem.appendChild(this.getHeaderElement()); elem.appendChild(this.getHeaderElement());
elem.appendChild(this.getContentElement()); elem.appendChild(this.getContentElement());
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];
@ -208,7 +226,7 @@ function getCurrentUser() {
}; };
} }
function writePost() { function writePost(postCallback) {
const request = { const request = {
method: "POST", method: "POST",
mode: "cors", mode: "cors",
@ -224,18 +242,35 @@ function writePost() {
associatedUser: getCurrentUser().user, associatedUser: getCurrentUser().user,
body: "local mode post (local mode post)" body: "local mode post (local mode post)"
}); });
blockContainer.insertBefore(post.getElement(), getTopPost()); postCallback(post);
//blockContainer.insertBefore(post.getElement(), getTopPost());
} else { } else {
fetch("https://api.wayfarer.games/singularity/generate-posts.php", request) fetch("https://api.wayfarer.games/singularity/generate-posts.php", request)
.then(response => response.json()) .then(response => response.json())
.then(makePostFromJson) .then(makePostFromJson)
.then(post => blockContainer.insertBefore(post.getElement(), getTopPost())); //.then(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
.then(postCallback);
} }
} }
function writeNewPost() {
writePost(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
}
function writeReply(post) {
// find the correct element
const elem = document.getElementById(post.id);
writePost(reply => {
post.addReply(reply);
elem.append(reply.getElement());
});
}
function addWritePostBlock() { function addWritePostBlock() {
const blockElem = document.createElement("div"); const blockElem = document.createElement("div");
blockElem.addEventListener("click", writePost); blockElem.addEventListener("click", writeNewPost);
blockElem.className = "block write-post"; blockElem.className = "block write-post";
const spanElem = document.createElement("h2"); const spanElem = document.createElement("h2");

View File

@ -46,7 +46,31 @@ body {
padding-bottom: var(--header-height); padding-bottom: var(--header-height);
} }
.block a .username { .reply-button {
display: inline-block;
border-radius: calc(var(--header-height) / 2);
margin-top: calc(var(--header-height) / 8);
padding: calc(var(--header-height) / 8) calc(var(--header-height) / 4);
background-color: var(--accent-color);
color: var(--backround-color);
cursor: pointer;
transition: all 200ms ease-in-out;
}
.reply-button:hover {
background-color: var(--background-color);
color: white;
}
.reply-button:active {
background-color: white;
}
.post-header {
position: relative;
}
.post-header .username {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-left: calc(var(--header-height) / 4); padding-left: calc(var(--header-height) / 4);
@ -98,7 +122,6 @@ a {
padding-left: calc(var(--header-height) / 2 - var(--comment-column-width)); padding-left: calc(var(--header-height) / 2 - var(--comment-column-width));
} }
.post-actions { .post-actions {
margin: 8px; margin: 8px;
padding: 16px 0; padding: 16px 0;