Compare commits
No commits in common. "e6d5f157fa91fd287cca2ae238948c8fafdb8fed" and "ffd32966309a07bc57f6163b6c55d25674e9ded4" have entirely different histories.
e6d5f157fa
...
ffd3296630
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 402 B |
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 565 B |
|
|
@ -24,6 +24,14 @@
|
|||
<div class="block skeleton-post"></div>
|
||||
</div>
|
||||
|
||||
<!-- post actions shows the post count and post total (we probably do not need this) -->
|
||||
<div id="post-actions">
|
||||
<span>Showing
|
||||
<span id="post-count"></span> of
|
||||
<span id="post-total"></span> cards
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
151
main.js
151
main.js
|
|
@ -48,9 +48,11 @@ const maxInterests = 3;
|
|||
|
||||
// configuration
|
||||
const localMode = false;
|
||||
const showSplash = false;
|
||||
const showSplash = true;
|
||||
|
||||
const blockContainer = document.getElementById("block-container");
|
||||
const postCountElem = document.getElementById("post-count");
|
||||
const postTotalElem = document.getElementById("post-total");
|
||||
const loader = document.getElementById("loader");
|
||||
|
||||
// some state
|
||||
|
|
@ -67,80 +69,6 @@ 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) {
|
||||
|
|
@ -150,6 +78,8 @@ class Post {
|
|||
this.replyTo = data.replyTo;
|
||||
this.parentPost = null;
|
||||
|
||||
this.stars = 420;
|
||||
|
||||
this.replies = [];
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +114,7 @@ class Post {
|
|||
// for now if this person is us, post octopus
|
||||
const currentUser = getCurrentUser();
|
||||
const isCurrentUser = this.username == currentUser.user;
|
||||
const pfpPath = isCurrentUser ? "https://thispersondoesnotexist.com/" : `user/${this.username}.png`;
|
||||
const pfpPath = isCurrentUser ? "oct.jpg" : `user/${this.username}.png`;
|
||||
|
||||
const pfpElem = document.createElement("img");
|
||||
pfpElem.setAttribute("src", pfpPath);
|
||||
|
|
@ -210,8 +140,8 @@ class Post {
|
|||
getIconElement(svg, right) {
|
||||
const elem = document.createElement("div");
|
||||
elem.className = "icon";
|
||||
right *= 25;
|
||||
elem.style.right = `${right}%`;
|
||||
right *= 15;
|
||||
elem.style.right = `${right}vw`;
|
||||
|
||||
const imgElem = document.createElement("img");
|
||||
imgElem.className = "icon-img";
|
||||
|
|
@ -219,8 +149,9 @@ 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 = count;
|
||||
countElem.innerHTML = "42069";
|
||||
elem.appendChild(countElem);
|
||||
|
||||
return elem;
|
||||
|
|
@ -230,51 +161,18 @@ class Post {
|
|||
const elem = document.createElement("div");
|
||||
elem.className = "post-footer";
|
||||
|
||||
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 starIconElem = this.getIconElement("icon/star-regular.svg", 0);
|
||||
elem.appendChild(starIconElem);
|
||||
|
||||
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 repostElem = this.getIconElement("icon/retweet-solid.svg", 1)
|
||||
elem.appendChild(repostElem);
|
||||
|
||||
elem.appendChild(star.getElement());
|
||||
elem.appendChild(repost.getElement());
|
||||
elem.appendChild(bookmark.getElement());
|
||||
if (this.username != getCurrentUser().user) {
|
||||
elem.appendChild(comment.getElement());
|
||||
}
|
||||
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);
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
|
@ -329,6 +227,8 @@ function addPosts(pageIdx) {
|
|||
? posts.length
|
||||
: pageIdx * postIncrease;
|
||||
|
||||
postCountElem.innerHTML = endRange;
|
||||
|
||||
const rootPosts = getRootPosts();
|
||||
|
||||
for (let i = startRange + 1; i <= endRange; i++) {
|
||||
|
|
@ -410,7 +310,7 @@ function getCurrentUser() {
|
|||
return {
|
||||
"user": localUser.user,
|
||||
"interests": localUser.interests,
|
||||
"posting_style": localUser.postingStyle
|
||||
"posting_style": "just the most truly inane takes"
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -432,7 +332,7 @@ function getLoaderIcon() {
|
|||
}
|
||||
|
||||
function getWritePostButtonText() {
|
||||
return `write something ${getAdjective()}.`;
|
||||
return `Write something ${getAdjective()} for me!`;
|
||||
}
|
||||
|
||||
function writePost() {
|
||||
|
|
@ -529,6 +429,7 @@ function init() {
|
|||
|
||||
console.log(`loaded ${users.length} users and ${postCount} posts`);
|
||||
|
||||
// TODO: add user bio above write post button
|
||||
addWritePostBlock();
|
||||
|
||||
addPosts(currentPage);
|
||||
|
|
@ -735,6 +636,8 @@ loadDataFromEndpoint(postsUrl, json => {
|
|||
const parent = posts[post.replyTo];
|
||||
parent.addReply(post);
|
||||
}
|
||||
|
||||
postTotalElem.innerHTML = Object.keys(posts).length;
|
||||
});
|
||||
|
||||
if (!showSplash) {
|
||||
|
|
|
|||
|
|
@ -176,13 +176,9 @@ body {
|
|||
height: 32px;
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.icon-img:hover {
|
||||
filter: var(--sky-blue-filter)
|
||||
}
|
||||
.icon-img:active {
|
||||
.icon-img.active {
|
||||
filter: var(--sky-blue-filter)
|
||||
}
|
||||
|
||||
|
|
@ -195,7 +191,6 @@ body {
|
|||
top: 0;
|
||||
left: 32px;
|
||||
margin-left: 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.write-post {
|
||||
|
|
@ -235,7 +230,7 @@ a {
|
|||
}
|
||||
|
||||
.post:not(.block) {
|
||||
padding-top: calc(var(--header-height));
|
||||
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));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue