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 -->
<div id="loader">
<div class="skeleton-post"></div>
<div class="block skeleton-post"></div>
</div>
<!-- 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 posts = {};
const localMode = false;
const blockContainer = document.getElementById("block-container");
const postCountElem = document.getElementById("post-count");
const postTotalElem = document.getElementById("post-total");
@ -16,11 +17,6 @@ function getPageCount() {
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 {
// JSON post data
constructor(data) {
@ -53,26 +49,30 @@ class Post {
}
getHeaderTag() {
const level = this.getPostLevel();
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;
}
return this.getPostLevel() == 0 ? "h1" : "h2";
}
getHeaderElement() {
const headerElem = document.createElement(this.getHeaderTag());
headerElem.innerHTML = this.username;
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.addEventListener("click", () => updateUserProfile(this.username));
elem.appendChild(headerElem);
elem.appendChild(usernameElem);
return elem;
}
@ -87,10 +87,11 @@ class Post {
const elem = document.createElement("div");
// display root posts as blocks, and comments as attached to their posts
let classes = ["post"];
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.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)
.then(response => response.json())
.then(makePostFromJson)
.then(post => blockContainer.insertBefore(post.getElement(), getTopPost()));
}
}
function addWritePostBlock() {
const blockElem = document.createElement("div");
blockElem.className = "block";
blockElem.style.backgroundColor = "red";
blockElem.addEventListener("click", writePost);
blockElem.className = "block write-post";
const buttonElem = document.createElement("a");
buttonElem.setAttribute("href", "#");
buttonElem.innerHTML = "Write something interesting for me!";
buttonElem.addEventListener("click", writePost);
blockElem.append(buttonElem);
const spanElem = document.createElement("h2");
spanElem.className = "";
spanElem.innerHTML = "Write something interesting for me!";
blockElem.append(spanElem);
blockContainer.append(blockElem)
blockContainer.append(blockElem);
}
function init() {
@ -267,8 +276,10 @@ function loadDataFromEndpoint(endpoint, callback) {
});
}
loadDataFromEndpoint("https://api.wayfarer.games/singularity/users.json", json => { users = json.users; });
loadDataFromEndpoint("https://api.wayfarer.games/singularity/posts.json", 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";
loadDataFromEndpoint(usersUrl, json => { users = json.users; });
loadDataFromEndpoint(postsUrl, json => {
// first pass to instantiate all the posts
for (let i = 0; i < json.content.length; 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 {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
background-color: var(--background-color);
}
@media only screen and (min-width: 800px) {
@ -25,16 +33,72 @@ body {
}
.block {
background-color: white;
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
border-radius: var(--header-height);
padding: calc(var(--header-height) / 2);
transition: all 200ms ease-in-out;
}
.block:hover {
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 {
margin: 8px;
padding: 16px 0;
@ -51,21 +115,5 @@ body {
.skeleton-post {
height: 55vh;
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
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