index.html

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

main.js

@@ -1,7 +1,6 @@
 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");
@@ -17,6 +16,11 @@ 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) {
@@ -49,30 +53,26 @@ class Post {
     }
 
     getHeaderTag() {
-        return this.getPostLevel() == 0 ? "h1" : "h2";
+        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;
+        }
     }
 
     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(usernameElem);
+        elem.appendChild(headerElem);
 
         return elem;
     }
@@ -87,11 +87,10 @@ 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) {
-            classes.push("block");
+            elem.className = "block post";
         }
-        elem.className = classes.join(" ");
+        elem.style.backgroundColor = getRandomColor();
         elem.appendChild(this.getHeaderElement());
         elem.appendChild(this.getContentElement());
 
@@ -218,32 +217,24 @@ 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.addEventListener("click", writePost);
+    blockElem.className = "block";
-    blockElem.className = "block write-post";
+    blockElem.style.backgroundColor = "red";
 
-    const spanElem = document.createElement("h2");
+    const buttonElem = document.createElement("a");
-    spanElem.className = "";
+    buttonElem.setAttribute("href", "#");
-    spanElem.innerHTML = "Write something interesting for me!";
+    buttonElem.innerHTML = "Write something interesting for me!";
-    blockElem.append(spanElem);
+    buttonElem.addEventListener("click", writePost);
+    blockElem.append(buttonElem);
 
-    blockContainer.append(blockElem);
+    blockContainer.append(blockElem)
 }
 
 function init() {
@@ -276,10 +267,8 @@ function loadDataFromEndpoint(endpoint, callback) {
         });
 }
 
-const usersUrl = localMode ? "users.json" : "https://api.wayfarer.games/singularity/users.json";
+loadDataFromEndpoint("https://api.wayfarer.games/singularity/users.json", json => { users = json.users; });
-const postsUrl = localMode ? "posts.json" : "https://api.wayfarer.games/singularity/posts.json";
+loadDataFromEndpoint("https://api.wayfarer.games/singularity/posts.json", 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]);

styles.css

@@ -1,15 +1,7 @@
-: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) {
@@ -33,72 +25,16 @@ body {
 }
 
 .block {
-    background-color: white;
     width: calc(100% - 16px);
     margin: 8px;
-    border-radius: var(--header-height);
+    border-radius: 3px;
-    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;
@@ -115,5 +51,21 @@ a {
 
 .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));
 }