Compare commits

...

3 Commits

Author SHA1 Message Date
ktyl 91b48e7582 style: remove placeholder stying 2024-08-03 14:19:53 +01:00
ktyl b9947236ba feat: user profile pictures 2024-08-03 13:01:59 +01:00
ktyl 60873afe12 feat: add local mode switch 2024-08-03 12:28:23 +01:00
152 changed files with 115 additions and 56 deletions

View File

@ -15,7 +15,7 @@
<!-- loader displays an animation before adding the next batch of posts --> <!-- loader displays an animation before adding the next batch of posts -->
<div id="loader"> <div id="loader">
<div class="skeleton-post"></div> <div class="block skeleton-post"></div>
</div> </div>
<!-- post actions shows the post count and post total (we probably do not need this) --> <!-- post actions shows the post count and post total (we probably do not need this) -->

73
main.js
View File

@ -1,6 +1,7 @@
var users = []; var users = [];
var posts = {}; var posts = {};
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");
const postTotalElem = document.getElementById("post-total"); const postTotalElem = document.getElementById("post-total");
@ -16,11 +17,6 @@ function getPageCount() {
return Math.ceil(Object.keys(posts).length / postIncrease); return Math.ceil(Object.keys(posts).length / postIncrease);
} }
function getRandomColor() {
const h = Math.floor(Math.random() * 360);
return `hsl(${h}deg, 90%, 85%)`;
}
class Post { class Post {
// JSON post data // JSON post data
constructor(data) { constructor(data) {
@ -53,26 +49,30 @@ class Post {
} }
getHeaderTag() { getHeaderTag() {
const level = this.getPostLevel(); return this.getPostLevel() == 0 ? "h1" : "h2";
switch (level) {
case 0: return "h1";
case 1: return "h2";
case 2: return "h3";
case 3: return "h4";
default:
console.error(`${level} is not a supported post level`);
return null;
}
} }
getHeaderElement() { getHeaderElement() {
const headerElem = document.createElement(this.getHeaderTag());
headerElem.innerHTML = this.username;
const elem = document.createElement("a"); const elem = document.createElement("a");
// TODO: fetch current user pfp from thispersondoesnotexist and place in local storage
// for now if this person is us, post octopus
const currentUser = getCurrentUser();
const isCurrentUser = this.username == currentUser.user;
const pfpPath = isCurrentUser ? "oct.jpg" : `user/${this.username}.png`;
const pfpElem = document.createElement("img");
pfpElem.setAttribute("src", pfpPath);
pfpElem.setAttribute("class", "pfp");
elem.appendChild(pfpElem);
const usernameElem = document.createElement(this.getHeaderTag());
usernameElem.setAttribute("class", "username");
usernameElem.innerHTML = `<a href="#">${this.username}</a>`;
elem.setAttribute("href", "#"); elem.setAttribute("href", "#");
elem.addEventListener("click", () => updateUserProfile(this.username)); elem.addEventListener("click", () => updateUserProfile(this.username));
elem.appendChild(headerElem); elem.appendChild(usernameElem);
return elem; return elem;
} }
@ -87,10 +87,11 @@ class Post {
const elem = document.createElement("div"); const elem = document.createElement("div");
// 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"];
if (this.getPostLevel() == 0) { if (this.getPostLevel() == 0) {
elem.className = "block post"; classes.push("block");
} }
elem.style.backgroundColor = getRandomColor(); elem.className = classes.join(" ");
elem.appendChild(this.getHeaderElement()); elem.appendChild(this.getHeaderElement());
elem.appendChild(this.getContentElement()); elem.appendChild(this.getContentElement());
@ -217,24 +218,32 @@ function writePost() {
} }
}; };
if (localMode) {
const post = new Post({
id: "1234",
associatedUser: getCurrentUser().user,
body: "local mode post (local mode post)"
});
blockContainer.insertBefore(post.getElement(), getTopPost());
} 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()));
} }
}
function addWritePostBlock() { function addWritePostBlock() {
const blockElem = document.createElement("div"); const blockElem = document.createElement("div");
blockElem.className = "block"; blockElem.addEventListener("click", writePost);
blockElem.style.backgroundColor = "red"; blockElem.className = "block write-post";
const buttonElem = document.createElement("a"); const spanElem = document.createElement("h2");
buttonElem.setAttribute("href", "#"); spanElem.className = "";
buttonElem.innerHTML = "Write something interesting for me!"; spanElem.innerHTML = "Write something interesting for me!";
buttonElem.addEventListener("click", writePost); blockElem.append(spanElem);
blockElem.append(buttonElem);
blockContainer.append(blockElem) blockContainer.append(blockElem);
} }
function init() { function init() {
@ -267,8 +276,10 @@ function loadDataFromEndpoint(endpoint, callback) {
}); });
} }
loadDataFromEndpoint("https://api.wayfarer.games/singularity/users.json", json => { users = json.users; }); const usersUrl = localMode ? "users.json" : "https://api.wayfarer.games/singularity/users.json";
loadDataFromEndpoint("https://api.wayfarer.games/singularity/posts.json", json => { const postsUrl = localMode ? "posts.json" : "https://api.wayfarer.games/singularity/posts.json";
loadDataFromEndpoint(usersUrl, json => { users = json.users; });
loadDataFromEndpoint(postsUrl, json => {
// 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 < json.content.length; i++) {
const post = new Post(json.content[i]); const post = new Post(json.content[i]);

BIN
oct.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

View File

@ -1,7 +1,15 @@
:root {
--header-height: 64px;
--background-color: #374955;
--accent-color: #86b1cc;
--comment-column-width: 3px;
}
body { body {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
background-color: var(--background-color);
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
@ -25,16 +33,72 @@ body {
} }
.block { .block {
background-color: white;
width: calc(100% - 16px); width: calc(100% - 16px);
margin: 8px; margin: 8px;
border-radius: 3px; border-radius: var(--header-height);
padding: calc(var(--header-height) / 2);
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
}
.block:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
.block:not(.write-post) {
padding-bottom: var(--header-height);
}
.block a .username {
margin-top: 0;
margin-bottom: 0;
padding-left: calc(var(--header-height) / 4);
height: var(--header-height);
display: flex;
align-items: center;
justify-content: left;
}
.write-post {
cursor: pointer;
color: var(--background-color);
}
.write-post:hover {
background-color: var(--accent-color);
color: white;
}
.write-post:active {
background-color: var(---background-color);
}
.write-post h2 {
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
color: var(--background-color);
}
.pfp {
max-width: var(--header-height);
max-height: var(--header-height);
float: left;
border-radius: 50%;
}
.post p {
margin-bottom: 0;
}
.post:not(.block) {
margin-top: calc(var(--header-height) / 4);
border-left: var(--comment-column-width) solid var(--accent-color);
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;
@ -51,21 +115,5 @@ body {
.skeleton-post { .skeleton-post {
height: 55vh; height: 55vh;
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
position: relative; position: relative;
background-color: #eaeaea;
}
.skeleton-post::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
} }

BIN
user/AdventureSeeker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
user/AnimalAdvocate.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/AnimalLover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
user/AnimalWhisperer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
user/ArtfulDodger.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
user/Artist.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/ArtsyAdvocate.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
user/Bibliophile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
user/BookLover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/BookishBaker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
user/CoffeeCrazedCoder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
user/CoffeeLover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/Conservationist.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
user/Creative.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
user/CreativeMind.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
user/CreativeSoul.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
user/DIYDiva.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
user/DesignEnthusiast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/DigitalArtist.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/Epicurean.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
user/Explorer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
user/FashionBlogger.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
user/FashionForward.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/FashionMaven.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
user/Fashionista.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
user/FitFashionista.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
user/FitnessFanatic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
user/FitnessGuru.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
user/FitnessJunkie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/FoodCritic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
user/Foodie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
user/FoodieExplorer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
user/FoodieFilmFan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
user/GamerGuru.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
user/Gastronome.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
user/Globetrotter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/Gourmand.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
user/GreenThumbGardener.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
user/HistoryBuff.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
user/HistoryEnthusiast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
user/HistoryGuru.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
user/HistoryNerd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/IronManiac.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/JazzyJester.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
user/LanguageLover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
user/LiteraryScholar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/MarathonRunner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
user/Melomane.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
user/MusicAddict.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
user/MusicAficionado.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/MusicFan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
user/MusicLover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
user/MusicNomad.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
user/Musicophile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/NatureEnthusiast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/NatureLover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
user/NaturePhotographer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
user/NewsJunkie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/Nomad.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
user/OutdoorEnthusiast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
user/Outdoorsman.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
user/Outdoorsy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
user/PetParentPro.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
user/PoliticalJunkie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
user/Politico.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
user/Reader.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
user/Runner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
user/SportsFanatic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/StyleIcon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
user/TechEnthusiast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
user/TechGeek.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
user/TechGuru.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/TechInnovator.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
user/TechTrendsetter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
user/TechWizard.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/Techie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
user/Technophile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/TechyTrekker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
user/TravelBlogger.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
user/TravelBug.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
user/Trendsetter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
user/UltraMarathoner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
user/VisionaryArtist.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
user/Wanderer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/Wanderlust.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
user/WellnessWarrior.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
user/WildernessExplorer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
user/WildlifeEnthusiast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
user/animal_rescuer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
user/art_lover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
user/artful_activist.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
user/audiophile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
user/beauty_seeker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Some files were not shown because too many files have changed in this diff Show More