diff --git a/icon/bookmark-solid.svg b/icon/bookmark-solid.svg
new file mode 100644
index 0000000..45f078c
--- /dev/null
+++ b/icon/bookmark-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icon/star-solid.svg b/icon/star-solid.svg
new file mode 100644
index 0000000..e0eec11
--- /dev/null
+++ b/icon/star-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/main.js b/main.js
index 8def86b..dcc326c 100644
--- a/main.js
+++ b/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,80 @@ function getPageCount() {
return Math.ceil(Object.keys(posts).length / postIncrease);
}
+class Icon {
+ constructor(id, imagePath, right, callback) {
+ this.id = id;
+ this.imagePath = imagePath;
+ this.right = right;
+ 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 right = this.right * 25;
+ elem.style.right = `${right}%`;
+
+ 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 +150,6 @@ class Post {
this.replyTo = data.replyTo;
this.parentPost = null;
- this.stars = 420;
-
this.replies = [];
}
@@ -112,7 +184,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 +210,8 @@ class Post {
getIconElement(svg, right) {
const elem = document.createElement("div");
elem.className = "icon";
- right *= 15;
- elem.style.right = `${right}vw`;
+ right *= 25;
+ elem.style.right = `${right}%`;
const imgElem = document.createElement("img");
imgElem.className = "icon-img";
@@ -147,9 +219,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 +230,51 @@ class Post {
const elem = document.createElement("div");
elem.className = "post-footer";
- const starIconElem = this.getIconElement("icon/star-regular.svg", 0);
- elem.appendChild(starIconElem);
+ const getToggleCallback = (activeImg, inactiveImg) => {
+ 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)
- elem.appendChild(repostElem);
+ const star = new Icon(
+ `${this.id}-star`,
+ "icon/star-regular.svg",
+ 0,
+ getToggleCallback("icon/star-solid.svg", "icon/star-regular.svg"));
+ const repost = new Icon(
+ `${this.id}-repost`,
+ "icon/retweet-solid.svg",
+ 1,
+ icon => icon.incrementCount());
+ const bookmark = new Icon(
+ `${this.id}-bookmark`,
+ "icon/bookmark-regular.svg",
+ 2,
+ getToggleCallback("icon/bookmark-solid.svg", "icon/bookmark-regular.svg"));
+ const comment = new Icon(
+ `${this.id}-comment`,
+ "icon/comment-regular.svg",
+ 3,
+ icon => {
+ writeReply(this);
+ icon.incrementCount();
+ });
- const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2);
- elem.appendChild(bookmarkElem);
-
- const commentElem = this.getIconElement("icon/comment-regular.svg", 3);
- commentElem.addEventListener("click", () => writeReply(this));
- elem.appendChild(commentElem);
+ elem.appendChild(star.getElement());
+ elem.appendChild(repost.getElement());
+ elem.appendChild(bookmark.getElement());
+ if (this.username != getCurrentUser().user) {
+ elem.appendChild(comment.getElement());
+ }
return elem;
}
@@ -306,7 +410,7 @@ function getCurrentUser() {
return {
"user": localUser.user,
"interests": localUser.interests,
- "posting_style": "just the most truly inane takes"
+ "posting_style": localUser.postingStyle
};
}
@@ -328,7 +432,7 @@ function getLoaderIcon() {
}
function getWritePostButtonText() {
- return `Write something ${getAdjective()} for me!`;
+ return `write something ${getAdjective()}.`;
}
function writePost() {
@@ -425,7 +529,6 @@ function init() {
console.log(`loaded ${users.length} users and ${postCount} posts`);
- // TODO: add user bio above write post button
addWritePostBlock();
addPosts(currentPage);
diff --git a/oct.jpg b/oct.jpg
deleted file mode 100644
index 3c8f6e7..0000000
Binary files a/oct.jpg and /dev/null differ
diff --git a/styles.css b/styles.css
index bd900ed..b749ae9 100644
--- a/styles.css
+++ b/styles.css
@@ -176,9 +176,13 @@ body {
height: 32px;
width: 32px;
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)
}
@@ -191,6 +195,7 @@ body {
top: 0;
left: 32px;
margin-left: 4px;
+ cursor: default;
}
.write-post {
@@ -230,7 +235,7 @@ a {
}
.post:not(.block) {
- margin-top: calc(var(--header-height));
+ padding-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));
}