feat: make icons work

This commit is contained in:
Cat Flynn 2024-08-10 19:32:54 +01:00
parent 44b6d3a23a
commit f391c7bfea
5 changed files with 151 additions and 38 deletions

1
icon/bookmark-solid.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 402 B

1
icon/star-solid.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 565 B

136
main.js
View File

@ -48,7 +48,7 @@ const maxInterests = 3;
// configuration // configuration
const localMode = false; const localMode = false;
const showSplash = true; const showSplash = false;
const blockContainer = document.getElementById("block-container"); const blockContainer = document.getElementById("block-container");
const loader = document.getElementById("loader"); const loader = document.getElementById("loader");
@ -67,6 +67,77 @@ function getPageCount() {
return Math.ceil(Object.keys(posts).length / postIncrease); 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 { class Post {
// JSON post data // JSON post data
constructor(data) { constructor(data) {
@ -76,8 +147,6 @@ class Post {
this.replyTo = data.replyTo; this.replyTo = data.replyTo;
this.parentPost = null; this.parentPost = null;
this.stars = 420;
this.replies = []; this.replies = [];
} }
@ -112,7 +181,7 @@ class Post {
// for now if this person is us, post octopus // for now if this person is us, post octopus
const currentUser = getCurrentUser(); const currentUser = getCurrentUser();
const isCurrentUser = this.username == currentUser.user; 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"); const pfpElem = document.createElement("img");
pfpElem.setAttribute("src", pfpPath); pfpElem.setAttribute("src", pfpPath);
@ -138,8 +207,6 @@ class Post {
getIconElement(svg, right) { getIconElement(svg, right) {
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.className = "icon"; elem.className = "icon";
right *= 15;
elem.style.right = `${right}vw`;
const imgElem = document.createElement("img"); const imgElem = document.createElement("img");
imgElem.className = "icon-img"; imgElem.className = "icon-img";
@ -147,9 +214,8 @@ class Post {
elem.appendChild(imgElem); elem.appendChild(imgElem);
const countElem = document.createElement("span"); 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.className = "icon-count";
countElem.innerHTML = "42069"; countElem.innerHTML = count;
elem.appendChild(countElem); elem.appendChild(countElem);
return elem; return elem;
@ -159,18 +225,47 @@ class Post {
const elem = document.createElement("div"); const elem = document.createElement("div");
elem.className = "post-footer"; 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; return elem;
} }
@ -306,7 +401,7 @@ function getCurrentUser() {
return { return {
"user": localUser.user, "user": localUser.user,
"interests": localUser.interests, "interests": localUser.interests,
"posting_style": "just the most truly inane takes" "posting_style": localUser.postingStyle
}; };
} }
@ -328,7 +423,7 @@ function getLoaderIcon() {
} }
function getWritePostButtonText() { function getWritePostButtonText() {
return `Write something ${getAdjective()} for me!`; return `write something ${getAdjective()}.`;
} }
function writePost() { function writePost() {
@ -425,7 +520,6 @@ function init() {
console.log(`loaded ${users.length} users and ${postCount} posts`); console.log(`loaded ${users.length} users and ${postCount} posts`);
// TODO: add user bio above write post button
addWritePostBlock(); addWritePostBlock();
addPosts(currentPage); addPosts(currentPage);

BIN
oct.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

View File

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