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

Compare commits

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

No commits in common. "6aee9f0d75255117656c5473024cce74ba943017" and "bf242897b6b87ae6d2784fd4656c2d5212a62008" have entirely different histories.
6aee9f0d75 ... bf242897b6

3 changed files with 16 additions and 47 deletions
Show Stats Expand all files Collapse all files

10
index.html
View File

@ -1,17 +1,11 @@
<!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>
<!-- blocks are added by JavaScript so container starts empty --> <!-- posts are added by JavaScript so container starts empty -->
<div id="block-container"></div> <div id="post-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,7 +1,8 @@
var users = []; var users = [];
var posts = {}; var posts = {};
const blockContainer = document.getElementById("block-container"); // first, let's get all the elements we'll need from our DOM
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");
@ -65,7 +66,7 @@ class Post {
getElement() { getElement() {
const postElem = document.createElement("div"); const postElem = document.createElement("div");
postElem.className = "block"; postElem.className = "post";
postElem.style.backgroundColor = getRandomColor(); postElem.style.backgroundColor = getRandomColor();
// add a header to the post // add a header to the post
@ -147,9 +148,10 @@ 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++) {
blockContainer.appendChild(rootPosts[i].getElement()); postContainer.appendChild(rootPosts[i].getElement());
} }
} }
@ -188,23 +190,6 @@ 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)
{ {
@ -213,15 +198,10 @@ function init() {
} }
// need to load all the resources first // need to load all the resources first
const postCount = Object.keys(posts).length; if (users.length == 0 || Object.keys(posts).length == 0)
if (users.length == 0 || postCount == 0)
return; return;
console.log(`loaded ${users.length} users and ${postCount} posts`); console.log(`loaded ${users.length} users and ${posts.length} posts`);
// TODO: add write post block
addWritePostBlock();
// TODO: add bio
addPosts(currentPage); addPosts(currentPage);
window.addEventListener("scroll", handleInfiniteScroll); window.addEventListener("scroll", handleInfiniteScroll);
@ -236,8 +216,9 @@ function loadDataFromEndpoint(endpoint, callback) {
}); });
} }
loadDataFromEndpoint("https://api.wayfarer.games/singularity/users.json", json => { users = json.users; }); const baseUrl = "https://api.wayfarer.games/singularity";
loadDataFromEndpoint("https://api.wayfarer.games/singularity/posts.json", json => { loadDataFromEndpoint(`{baseUrl}/users.json`, json => { users = json.users; });
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,12 +1,6 @@
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 */
#block-container { #post-container {
max-width: 800px; max-width: 800px;
} }
@ -16,7 +10,7 @@ body {
} }
#block-container { #post-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -24,14 +18,14 @@ body {
width: 100%; width: 100%;
} }
.block { .post {
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;
} }
.block:hover { .post:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }