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

Compare commits

base: ktyl:bf242897b6b87ae6d2784fd4656c2d5212a62008
Branches Tags
ktyl:main
..
compare: ktyl:6aee9f0d75255117656c5473024cce74ba943017
Branches Tags
ktyl:main

5 Commits
bf242897b6 ... 6aee9f0d75

Author SHA1 Message Date
ktyl 6aee9f0d75 feat: add post button at top of feed 2024-07-17 00:08:55 +01:00
ktyl b512176f19 chore: genericise posts to blocks 2024-07-17 00:08:03 +01:00
ktyl 52fa5a2df5 fix: fix mobile layout 2024-07-16 20:25:24 +01:00
ktyl 3db1310934 fix: hardcode api URLs 2024-07-16 19:56:34 +01:00
ktyl a6c7bd54f6 style: import poppins font 2024-07-16 19:56:05 +01:00
3 changed files with 47 additions and 16 deletions
Show Stats Expand all files Collapse all files

10
index.html
View File

@ -1,11 +1,17 @@
<!doctype html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<!-- posts are added by JavaScript so container starts empty --> <!-- blocks are added by JavaScript so container starts empty -->
<div id="post-container"></div> <div id="block-container"></div>
<!-- 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">

39
main.js
View File

@ -1,8 +1,7 @@
var users = []; var users = [];
var posts = {}; var posts = {};
// first, let's get all the elements we'll need from our DOM const blockContainer = document.getElementById("block-container");
const postContainer = document.getElementById("post-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");
const loader = document.getElementById("loader"); const loader = document.getElementById("loader");
@ -66,7 +65,7 @@ class Post {
getElement() { getElement() {
const postElem = document.createElement("div"); const postElem = document.createElement("div");
postElem.className = "post"; postElem.className = "block";
postElem.style.backgroundColor = getRandomColor(); postElem.style.backgroundColor = getRandomColor();
// add a header to the post // add a header to the post
@ -148,10 +147,9 @@ function addPosts(pageIdx) {
postCountElem.innerHTML = endRange; postCountElem.innerHTML = endRange;
const rootPosts = getRootPosts(); const rootPosts = getRootPosts();
console.log(rootPosts);
for (let i = startRange + 1; i <= endRange; i++) { for (let i = startRange + 1; i <= endRange; i++) {
postContainer.appendChild(rootPosts[i].getElement()); blockContainer.appendChild(rootPosts[i].getElement());
} }
} }
@ -190,6 +188,23 @@ function removeInfiniteScroll() {
window.removeEventListener("scroll", handleInfiniteScroll); window.removeEventListener("scroll", handleInfiniteScroll);
} }
function addWritePostBlock() {
const blockElem = document.createElement("div");
blockElem.className = "block";
blockElem.style.backgroundColor = "red";
const buttonElem = document.createElement("a");
buttonElem.setAttribute("href", "#");
buttonElem.innerHTML = "Write something interesting for me!";
buttonElem.addEventListener("click", () => {
// TODO: inject a new post element at the top of the feed
console.log("write something interesting");
});
blockElem.append(buttonElem);
blockContainer.append(blockElem)
}
function init() { function init() {
if (posts == undefined) if (posts == undefined)
{ {
@ -198,10 +213,15 @@ function init() {
} }
// need to load all the resources first // need to load all the resources first
if (users.length == 0 || Object.keys(posts).length == 0) const postCount = Object.keys(posts).length;
if (users.length == 0 || postCount == 0)
return; return;
console.log(`loaded ${users.length} users and ${posts.length} posts`); console.log(`loaded ${users.length} users and ${postCount} posts`);
// TODO: add write post block
addWritePostBlock();
// TODO: add bio
addPosts(currentPage); addPosts(currentPage);
window.addEventListener("scroll", handleInfiniteScroll); window.addEventListener("scroll", handleInfiniteScroll);
@ -216,9 +236,8 @@ function loadDataFromEndpoint(endpoint, callback) {
}); });
} }
const baseUrl = "https://api.wayfarer.games/singularity"; loadDataFromEndpoint("https://api.wayfarer.games/singularity/users.json", json => { users = json.users; });
loadDataFromEndpoint(`{baseUrl}/users.json`, json => { users = json.users; }); loadDataFromEndpoint("https://api.wayfarer.games/singularity/posts.json", json => {
loadDataFromEndpoint(`{baseUrl}/posts.json`, 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]);

14
styles.css
View File

@ -1,6 +1,12 @@
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
/* For bigger than phones */ /* For bigger than phones */
#post-container { #block-container {
max-width: 800px; max-width: 800px;
} }
@ -10,7 +16,7 @@
} }
#post-container { #block-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -18,14 +24,14 @@
width: 100%; width: 100%;
} }
.post { .block {
width: calc(100% - 16px); width: calc(100% - 16px);
margin: 8px; margin: 8px;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
} }
.post:hover { .block:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }