feat: make icons work

icon/bookmark-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z"/></svg>

icon/star-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>

main.js

@@ -48,7 +48,7 @@ const maxInterests = 3;
 
 // configuration
 const localMode = false;
-const showSplash = true;
+const showSplash = false;
 
 const blockContainer = document.getElementById("block-container");
 const loader = document.getElementById("loader");
@@ -67,6 +67,77 @@ function getPageCount() {
     return Math.ceil(Object.keys(posts).length / postIncrease);
 }
 
+class Icon {
+    constructor(id, imagePath, callback) {
+        this.id = id;
+        this.imagePath = imagePath;
+        this.callback = callback;
+
+        this.isActive = false;
+    }
+
+    setActive(newValue) {
+        this.isActive = newValue;
+
+        const elem = document.getElementById(this.id);
+        if (this.isActive) {
+            elem.className = "icon active";
+        } else {
+            elem.className = "icon";
+        }
+    }
+
+    setImage(path) {
+        const imgElem = document.getElementById(this.id)
+            .getElementsByClassName("icon-img")[0];
+        imgElem.setAttribute("src", path);
+    }
+
+    getElement() {
+        const elem = document.createElement("div");
+        elem.id = this.id;
+        elem.className = "icon";
+
+        const imgElem = document.createElement("img");
+        imgElem.className = "icon-img";
+        imgElem.setAttribute("src", this.imagePath);
+        elem.appendChild(imgElem);
+
+        const countElem = document.createElement("span");
+        countElem.className = "icon-count";
+        const count = Math.floor(1000 + Math.random() * 9000);
+        countElem.innerHTML = count;
+        elem.appendChild(countElem);
+
+        elem.addEventListener("click", () => {
+            this.callback(this);
+        });
+
+        return elem;
+    }
+
+    incrementCount() {
+        this.modifyCount(1);
+    }
+    decrementCount() {
+        this.modifyCount(-1);
+    }
+
+    modifyCount(amount) {
+        // get count element
+        const countElem = document.getElementById(this.id)
+            .getElementsByClassName("icon-count")[0];
+
+        // read the number out of it
+        let number = parseInt(countElem.innerHTML);
+
+        number += amount;
+
+        // put the number back
+        countElem.innerHTML = number;
+    }
+}
+
 class Post {
     // JSON post data
     constructor(data) {
@@ -76,8 +147,6 @@ class Post {
         this.replyTo = data.replyTo;
         this.parentPost = null;
 
-        this.stars = 420;
-
         this.replies = [];
     }
 
@@ -112,7 +181,7 @@ class Post {
         // 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 pfpPath = isCurrentUser ? "https://thispersondoesnotexist.com/" : `user/${this.username}.png`;
 
         const pfpElem = document.createElement("img");
         pfpElem.setAttribute("src", pfpPath);
@@ -138,8 +207,6 @@ class Post {
     getIconElement(svg, right) {
         const elem = document.createElement("div");
         elem.className = "icon";
-        right *= 15;
-        elem.style.right = `${right}vw`;
 
         const imgElem = document.createElement("img");
         imgElem.className = "icon-img";
@@ -147,9 +214,8 @@ class Post {
         elem.appendChild(imgElem);
 
         const countElem = document.createElement("span");
-        // TODO: make an icon class to store count OR i guess just parse it out of the DOM
         countElem.className = "icon-count";
-        countElem.innerHTML = "42069";
+        countElem.innerHTML = count;
         elem.appendChild(countElem);
 
         return elem;
@@ -159,18 +225,47 @@ class Post {
         const elem = document.createElement("div");
         elem.className = "post-footer";
 
-        const starIconElem = this.getIconElement("icon/star-regular.svg", 0);
+        const getToggleCallback = (activeImg, inactiveImg) => {
-        elem.appendChild(starIconElem);
+            const toggle = icon => {
+                if (icon.isActive) {
+                    icon.setActive(false);
+                    icon.setImage(inactiveImg);
+                    icon.decrementCount();
+                } else {
+                    icon.setActive(true);
+                    icon.setImage(activeImg);
+                    icon.incrementCount();
+                }
+            };
+            return toggle;
+        }
 
-        const repostElem = this.getIconElement("icon/retweet-solid.svg", 1)
+        const star = new Icon(
-        elem.appendChild(repostElem);
+            `${this.id}-star`,
+            "icon/star-regular.svg",
+            getToggleCallback("icon/star-solid.svg", "icon/star-regular.svg"));
+        const repost = new Icon(
+            `${this.id}-repost`,
+            "icon/retweet-solid.svg",
+            icon => icon.incrementCount());
+        const bookmark = new Icon(
+            `${this.id}-bookmark`,
+            "icon/bookmark-regular.svg",
+            getToggleCallback("icon/bookmark-solid.svg", "icon/bookmark-regular.svg"));
+        const comment = new Icon(
+            `${this.id}-comment`,
+            "icon/comment-regular.svg",
+            icon => {
+                writeReply(this);
+                icon.incrementCount();
+            });
 
-        const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2);
+        if (this.username != getCurrentUser().user) {
-        elem.appendChild(bookmarkElem);
+            elem.appendChild(comment.getElement());
-
+        }
-        const commentElem = this.getIconElement("icon/comment-regular.svg", 3);
+        elem.appendChild(star.getElement());
-        commentElem.addEventListener("click", () => writeReply(this));
+        elem.appendChild(repost.getElement());
-        elem.appendChild(commentElem);
+        elem.appendChild(bookmark.getElement());
 
         return elem;
     }
@@ -306,7 +401,7 @@ function getCurrentUser() {
     return {
         "user": localUser.user,
         "interests": localUser.interests,
-        "posting_style": "just the most truly inane takes"
+        "posting_style": localUser.postingStyle
     };
 }
 
@@ -328,7 +423,7 @@ function getLoaderIcon() {
 }
 
 function getWritePostButtonText() {
-    return `Write something ${getAdjective()} for me!`;
+    return `write something ${getAdjective()}.`;
 }
 
 function writePost() {
@@ -425,7 +520,6 @@ function init() {
 
     console.log(`loaded ${users.length} users and ${postCount} posts`);
 
-    // TODO: add user bio above write post button
     addWritePostBlock();
 
     addPosts(currentPage);

styles.css

@@ -16,6 +16,7 @@ body {
     font-weight: 400;
     font-style: normal;
     background-color: var(--sky-blue);
+    overflow-x: clip;
 }
 
 @media only screen and (min-width: 800px) {
@@ -27,12 +28,18 @@ body {
     #loader {
         max-width: 800px;
     }
+
+    .icon-img {
+        height: 32px;
+        width: 32px;
+        padding: 0;
+    }
 }
 
 #start-splash {
     position: fixed;
-    width: 100%;
+    width: 100vw;
-    height: 100%;
+    height: 100vh;
     padding: 0;
     margin: 0;
     background-color: white;
@@ -47,9 +54,13 @@ body {
 }
 
 #start-splash h1 {
+    width: 100%;
+    padding: 0;
     padding-top: 35vh;
     display: flex;
     justify-content: center;
+    font-size: x-large;
+    margin: 0;
 }
 
 #start-splash input {
@@ -58,11 +69,11 @@ body {
     color: var(--sky-blue);
     border-radius: 16px;
     font-size: 1.5em;
-    padding: 4px 8px;
+    padding: 4px;
 }
 
 #advance-button {
-    width: 10%;
+    width: 15%;
     margin: 2em auto;
     color: white;
     background-color: var(--sky-blue);
@@ -157,40 +168,47 @@ body {
     display: flex;
     align-items: center;
     justify-content: left;
+    font-size: larger;
 }
 
 .post-footer {
+    height: calc(var(--header-height) / 2);
     position: relative;
+
+    display: flex;
+    justify-content: flex-end;
+    margin-left: auto;
 }
 
 .icon {
+    display: inline;
     color: var(--sky-blue);
     height: 32px;
-    width: 100px;
+    width: 80px;
-    position: absolute;
-    top: 16px;
 }
 
 .icon-img {
     filter: var(--blue-gray-filter);
-    height: 32px;
+    height: 24px;
-    width: 32px;
+    width: 24px;
+    padding: 4px 0 4px 5px;
     display: inline-block;
+    transition: all 200ms ease-in-out;
 }
 
-.icon-img.active {
+.icon-img:hover {
+    filter: var(--sky-blue-filter)
+}
+.icon-img:active {
     filter: var(--sky-blue-filter)
 }
 
 .icon-count {
     color: var(--blue-gray);
     height: 100%;
-    display: flex;
+    display: flex inline;
-    align-items: center;
+    cursor: default;
-    position: absolute;
+    transform: translate(5px, -30%);
-    top: 0;
-    left: 32px;
-    margin-left: 4px;
 }
 
 .write-post {
@@ -230,7 +248,6 @@ a {
 }
 
 .post:not(.block) {
-    margin-top: calc(var(--header-height));
     border-left: var(--comment-column-width) solid var(--sky-blue);
     padding-left: calc(var(--header-height) / 2 - var(--comment-column-width));
 }