style: remove placeholder stying

index.html

@@ -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) -->

main.js

@@ -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]);

styles.css

@@ -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));
 }