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..407d41c 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,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);
- 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",
+ 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);
- elem.appendChild(bookmarkElem);
-
- const commentElem = this.getIconElement("icon/comment-regular.svg", 3);
- commentElem.addEventListener("click", () => writeReply(this));
- elem.appendChild(commentElem);
+ if (this.username != getCurrentUser().user) {
+ elem.appendChild(comment.getElement());
+ }
+ elem.appendChild(star.getElement());
+ elem.appendChild(repost.getElement());
+ 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);
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..94a20ca 100644
--- a/styles.css
+++ b/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%;
- height: 100%;
+ width: 100vw;
+ 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;
- position: absolute;
- top: 16px;
+ width: 80px;
}
.icon-img {
filter: var(--blue-gray-filter);
- height: 32px;
- width: 32px;
+ height: 24px;
+ 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;
- align-items: center;
- position: absolute;
- top: 0;
- left: 32px;
- margin-left: 4px;
+ display: flex inline;
+ cursor: default;
+ transform: translate(5px, -30%);
}
.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));
}