ktyl/singularity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ktyl:3f4a1a00647d9bf242277253cf9b397f2aeb45cc
Branches Tags
ktyl:main
..
compare: ktyl:0108c871b871839c9e733b3785c93b195fb23b30
Branches Tags
ktyl:main

No commits in common. "3f4a1a00647d9bf242277253cf9b397f2aeb45cc" and "0108c871b871839c9e733b3785c93b195fb23b30" have entirely different histories.
3f4a1a0064 ... 0108c871b8

3 changed files with 29 additions and 93 deletions
Show Stats Expand all files Collapse all files

1
icon/comment-regular.svg
View File

@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 900 B

95
main.js
View File

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

26
styles.css
View File

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