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>
<head>
<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>
<body>
<!-- blocks are added by JavaScript so container starts empty -->
<div id="block-container"></div>
<!-- posts are added by JavaScript so container starts empty -->
<div id="post-container"></div>
<!-- loader displays an animation before adding the next batch of posts -->
<div id="loader">

39
main.js
View File

@ -1,7 +1,8 @@
var users = [];
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 postTotalElem = document.getElementById("post-total");
const loader = document.getElementById("loader");
@ -65,7 +66,7 @@ class Post {
getElement() {
const postElem = document.createElement("div");
postElem.className = "block";
postElem.className = "post";
postElem.style.backgroundColor = getRandomColor();
// add a header to the post
@ -147,9 +148,10 @@ function addPosts(pageIdx) {
postCountElem.innerHTML = endRange;
const rootPosts = getRootPosts();
console.log(rootPosts);
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);
}
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() {
if (posts == undefined)
{
@ -213,15 +198,10 @@ function init() {
}
// need to load all the resources first
const postCount = Object.keys(posts).length;
if (users.length == 0 || postCount == 0)
if (users.length == 0 || Object.keys(posts).length == 0)
return;
console.log(`loaded ${users.length} users and ${postCount} posts`);
// TODO: add write post block
addWritePostBlock();
// TODO: add bio
console.log(`loaded ${users.length} users and ${posts.length} posts`);
addPosts(currentPage);
window.addEventListener("scroll", handleInfiniteScroll);
@ -236,8 +216,9 @@ 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 baseUrl = "https://api.wayfarer.games/singularity";
loadDataFromEndpoint(`{baseUrl}/users.json`, json => { users = json.users; });
loadDataFromEndpoint(`{baseUrl}/posts.json`, json => {
// first pass to instantiate all the posts
for (let i = 0; i < json.content.length; 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) {
/* For bigger than phones */
#block-container {
#post-container {
max-width: 800px;
}
@ -16,7 +10,7 @@ body {
}
#block-container {
#post-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
@ -24,14 +18,14 @@ body {
width: 100%;
}
.block {
.post {
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
}
.block:hover {
.post:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}