CarmiCoven/BookBar
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Upload

Browse Source 
Simple bare-bones book progress bar with a test animation running.

TODO:
- Remove IMGUR hotlink
- Update book art
- Proper input value testing
- Get websocket connected and tested
This commit is contained in:
RolimirKal
2026-07-28 04:49:35 -04:00
parent 3c2c8ec0ae
commit 36332867e6
53 changed files with 110 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files
timer.js
+54 -367
View File
@@ -1,356 +1,53 @@
window.addEventListener("DOMContentLoaded", () => {
const websocket = new ReconnectingWebSocket("wss://lilac.thewisewolf.dev/tracker/timer/ws");
communicate(websocket);
//Create progress bar
const book_bar = new ProgressBar();
//Pat Lilac
const websocket = new ReconnectingWebSocket("wss://lilac.thewisewolf.dev/campaigns/partnerplus2026/ws");
communicate(websocket, book_bar);
});
class Timer {
constructor(renderer, timer_data) {
this.renderer = renderer;
this.destroying = false;
this.ended = false;
this.update_from_data(timer_data);
}
update_from_data(timer_data) {
this.end_at = new Date(timer_data.end_at);
this.running = timer_data.is_running;
this.name = timer_data.name;
this.score_table = timer_data.score_table;
this.total_contribution = timer_data.total_contribution;
this.total_subpoints = timer_data.total_subpoints;
this.total_bits = timer_data.total_bits;
this.goals_met = timer_data.goals_met;
this.goals_total = timer_data.goals_total;
this.last_goal = timer_data.last_goal;
this.next_goal = timer_data.next_goal;
this.goals = timer_data.goals;
this.last_contribution = timer_data.last_contribution;
this.leaderboard = timer_data.leaderboard;
}
check_ended() {
if (!this.ended && this.end_at < new Date()) {
this.ended = true;
this.renderer.finale();
}
return this.ended;
}
set_ended() {
if (!this.ended && this.end_at < new Date()) {
this.ended = true;
this.renderer.finale();
}
}
render_time() {
if (this.check_ended()) {
return;
}
this.renderer.render_time(
Math.floor((this.end_at - new Date()) / 1000)
);
}
render() {
if (this.ended) {
return;
}
// Render goal
if (this.next_goal != null) {
this.renderer.render_current_goal(
this.next_goal.name,
this.total_contribution,
this.next_goal.required,
);
this.renderer.animate();
} else if (this.last_goal != null) {
this.renderer.render_current_goal(
this.last_goal.name,
this.total_contribution,
this.last_goal.required,
);
this.renderer.animate();
} else {
this.renderer.clear_current_goal();
}
// Render leaderboard
this.renderer.render_users(this.leaderboard);
this.renderer.animate();
// Render timer
this.render_time();
this.set_ended();
}
/**
* Recursive call run per second to update the rendered timer
*/
tick() {
if (!this.destroying) {
this.render_time();
if (this.running) {
setTimeout(this.tick.bind(this), 1000);
}
}
}
}
class TimerRenderer {
class ProgressBar {
constructor() {
// HH:MM or MM:SS
this.timer = document.getElementById("Timer");
// Current Goal:
this.goal_label = document.getElementById("GoalLabel")
// Name of the goal to display
this.goal_name = document.getElementById("GoalName")
this.goal_namedupe = document.getElementById("GoalNameDupe")
// 1524/3000 Points
this.goal_progress = document.getElementById("GoalProgress")
this.goal_bar = document.getElementById("GoalProgressBar")
// Top 3 Gifters
this.topusers_label = document.getElementById("TopUsers")
// Leaderboard items
// 1. (or points?) (1 as in 1st place, static)
this.topusers_user1_num = document.getElementById("GiftUserNum1")
// Name of user 1
this.topusers_user1_name = document.getElementById("GiftUserName1")
this.topusers_userdupe1_name = document.getElementById("GiftUserNameDupe1")
this.topusers_user1_score = document.getElementById("GiftUserScore1")
this.topusers_user2_num = document.getElementById("GiftUserNum2")
this.topusers_user2_name = document.getElementById("GiftUserName2")
this.topusers_userdupe2_name = document.getElementById("GiftUserNameDupe2")
this.topusers_user2_score = document.getElementById("GiftUserScore2")
this.topusers_user3_num = document.getElementById("GiftUserNum3")
this.topusers_user3_name = document.getElementById("GiftUserName3")
this.topusers_userdupe3_name = document.getElementById("GiftUserNameDupe3")
this.topusers_user3_score = document.getElementById("GiftUserScore3")
// -- Animation --
// Left-fade wrappers
this.scrollwraps = document.getElementsByClassName("scrollWrap")
// Parent wrappers
this.scrollboxes = [document.getElementById("GiftUserRow1"),
document.getElementById("GiftUserRow2"),
document.getElementById("GiftUserRow3"),
document.getElementById("ScrollWrapGoal")]
// Leaderboard names
this.userboxes = [this.topusers_user1_name, this.topusers_user2_name, this.topusers_user3_name]
this.userdupeboxes = [this.topusers_userdupe1_name, this.topusers_userdupe2_name, this.topusers_userdupe3_name]
// Thank you!
this.thankyou = "Thank you! The subathon has now ended, thank you so much for contributions and viewership to celebrate!"
this.current_progress = 0;
this.max_progress = 45;
this.target_element = document.getElementById("progressBar");
this.bar_back = document.getElementById("barBack");
this.bar_front = document.getElementById("barFront");
}
// -- Toggles animation if text overflows container and adjusts speed for uniform movement --
animate() {
for (let i = 0; i < this.scrollboxes.length; i++) {
// Check whether the itteration is a username or goal
if (this.scrollboxes[i].id == 'ScrollWrapGoal') {
// Check if element text overflows
if (this.goal_name.getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width)) {
// Toggle animation
this.goal_name.classList.add("scrollAnim");
this.goal_namedupe.classList.add("scrollAnim");
this.goal_namedupe.style.display = 'inline-block';
this.scrollwraps[i].classList.add("fadeLeft");
// Set animation speed
this.goal_name.style.animationDuration = `${this.goal_name.getBoundingClientRect().width / 40}s`;
this.goal_namedupe.style.animationDuration = `${this.goal_name.getBoundingClientRect().width / 40}s`;
} else {
// Toggle animation
this.goal_name.classList.remove("scrollAnim");
this.goal_namedupe.classList.remove("scrollAnim");
this.goal_namedupe.style.display = 'none';
this.scrollwraps[i].classList.remove("fadeLeft");
}
} else {
// Check if element text overflows
if (this.userboxes[i].getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .65)) {
// Toggle animation
this.userboxes[i].classList.add("scrollAnim");
this.userdupeboxes[i].classList.add("scrollAnim");
this.userdupeboxes[i].style.display = 'inline-block';
this.scrollwraps[i].classList.add("fadeLeft");
// Set animation speed
this.userboxes[i].style.animationDuration = `${this.userboxes[i].getBoundingClientRect().width / 40}s`;
this.userdupeboxes[i].style.animationDuration = `${this.userboxes[i].getBoundingClientRect().width / 40}s`;
} else {
// Toggle animation
this.userboxes[i].classList.remove("scrollAnim");
this.userdupeboxes[i].classList.remove("scrollAnim");
this.userdupeboxes[i].style.display = 'none';
this.scrollwraps[i].classList.remove("fadeLeft");
}
//SET NUMBER OF COLORED BOOKS
setProgress(val) {
if (Number.isInteger(val) && (this.target_element != null) && (this.bar_back != null) && (this.bar_front != null)) {
let val_string = val.toString();
if (val_string.length < 2) {
val_string = "0" + val_string;
}
this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
setTimeout(this.preLoad.bind(this), 150, val_string, val);
}
}
/**
* Bring the display into a standard initial state.
*/
reset() {
this.timer.textContent = "88:88";
this.goal_label.textContent = "Next Goal:";
this.goal_name.textContent = "Goal name for the subathon";
this.goal_namedupe.textContent = "Goal name for the subathon";
this.goal_progress.textContent = "1234/1234";
this.topusers_label.textContent = "Leaderboard:";
this.topusers_user1_num.textContent = "1";
this.topusers_user1_name.textContent = "Username1024";
this.topusers_userdupe1_name.textContent = "Username1024";
this.topusers_user1_score.textContent = "0000";
this.topusers_user2_num.textContent = "2";
this.topusers_user2_name.textContent = "User";
this.topusers_userdupe2_name.textContent = "User";
this.topusers_user2_score.textContent = "0000";
this.topusers_user3_num.textContent = "3";
this.topusers_user3_name.textContent = "Username_Very_Super_Long12";
this.topusers_userdupe3_name.textContent = "Username_Very_Super_Long12";
this.topusers_user3_score.textContent = "0000";
}
// End subathon, change timer color, and show thank you message
finale() {
this.timer.textContent = "00:00";
this.timer.style.color = '#82C8B6';
this.goal_label.textContent = "Completed!";
this.goal_name.textContent = this.thankyou;
this.goal_namedupe.textContent = this.thankyou;
this.animate();
}
/**
* Render the timer from a time remaining.
*
* @param {integer} seconds_remaining - The number of seconds remaining on the timer.
*/
render_time(seconds_remaining) {
var timestr;
// Render a time remaining given in seconds
if (seconds_remaining <= 0) {
timestr = "00:00";
} else {
var seconds = seconds_remaining % 60;
seconds_remaining = seconds_remaining - seconds;
var minutes = Math.floor(seconds_remaining / 60);
var hours = Math.floor(minutes / 60);
minutes = minutes - 60 * hours;
// Change rendering mode based on hours or minutes left
if (hours > 0) {
timestr = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0');
} else {
timestr = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
}
preLoad(val_string, new_val) {
this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
if ((new_val >= 0) && (new_val <= this.max_progress)) {
this.current_progress = new_val;
}
this.timer.textContent = timestr;
}
/**
* Render the current goal.
*
* @param {string} name - The name of the current goal.
* @param {number} current - The number of points we currently have.
* @param {number} required - The number of points to achieve the goal.
*/
render_current_goal(name, current, required) {
// TODO: Some kind of end condition, ability to clear a goal etc
// E.g. if subathon doesn't have a goal at all
// Or after we accomplish all goals
this.goal_name.textContent = name;
this.goal_namedupe.textContent = name;
//this.goal_name.style.animationDuration = `${this.goal_name.getBoundingClientRect().width / 50}s`;
// Bitwise OR done to convert floats to integers if needed
this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0)
// Update the progress bar
if (current / required > .02) {
this.goal_bar.style.maskImage = `linear-gradient(to right, #FC98B3 0%, #FC98B3 ${((current / required) - .02) * 100}%, transparent ${(current / required) * 100}%)`;
} else {
this.goal_bar.style.maskImage = `linear-gradient(to right, #FC98B3 0%, transparent .01%)`;
else {
console.warn("Progress update is out of range.");
}
}
/**
* Clear the current goal field.
*/
clear_current_goal() {
this.goal_name.textContent = "";
//this.goal_namedupe.textContent = "";
this.goal_progress.textContent = "";
this.goal_label.textContent = "";
//TEST ANIMATION
simProgress() {
if (this.current_progress < this.max_progress) {
this.setProgress(this.current_progress + 1);
setTimeout(this.simProgress.bind(this), 500);
}
if (this.current_progress == this.max_progress) {
setTimeout(() => this.setProgress(0), 5000);
setTimeout(this.simProgress.bind(this), 5500);
}
}
/**
* Render the user leaderboard.
*
* @param {Object[]} users - The user leaderboard in descending (points, name) order.
* @param {integer} users[].amount - The number of points this users has contrib.
* @param {string} users[].user_name - The name of this user.
*/
render_users(users) {
if (users.length >= 1) {
this.topusers_user1_num.textContent = "1";
this.topusers_user1_name.textContent = users[0].user_name;
this.topusers_userdupe1_name.textContent = users[0].user_name;
this.topusers_user1_score.textContent = Math.round(users[0].amount);
//this.topusers_user1_name.style.animationDuration = `${this.topusers_user1_name.getBoundingClientRect().width / 50}s`;
} else {
this.topusers_user1_num.textContent = "1";
this.topusers_user1_name.textContent = "";
this.topusers_userdupe1_name.textContent = "";
this.topusers_user1_score.textContent = "0000";
}
if (users.length >= 2) {
this.topusers_user2_num.textContent = "2";
this.topusers_user2_name.textContent = users[1].user_name;
this.topusers_userdupe2_name.textContent = users[1].user_name;
this.topusers_user2_score.textContent = Math.round(users[1].amount);
//this.topusers_user2_name.style.animationDuration = `${this.topusers_user2_name.getBoundingClientRect().width / 50}s`;
} else {
this.topusers_user2_num.textContent = "2";
this.topusers_user2_name.textContent = "";
this.topusers_userdupe2_name.textContent = "";
this.topusers_user2_score.textContent = "0000";
}
if (users.length >= 3) {
this.topusers_user3_num.textContent = "3";
this.topusers_user3_name.textContent = users[2].user_name;
this.topusers_userdupe3_name.textContent = users[2].user_name;
this.topusers_user3_score.textContent = Math.round(users[2].amount);
//this.topusers_user3_name.style.animationDuration = `${this.topusers_user3_name.getBoundingClientRect().width / 50}s`;
} else {
this.topusers_user3_num.textContent = "3";
this.topusers_user3_name.textContent = "";
this.topusers_userdupe3_name.textContent = "";
this.topusers_user3_score.textContent = "0000";
}
}
}
class ReconnectingWebSocket {
@@ -371,7 +68,7 @@ class ReconnectingWebSocket {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
console.log('WebSocket connected');
console.log('WebSocket connecting');
this.attempt = 0;
if (this.onopen != null) {
this.onopen();
@@ -389,8 +86,9 @@ class ReconnectingWebSocket {
if (this.closing) {
console.log('Closing Websocket.')
} {
console.warn('WebSocket closed. Reconnecting...');
this.reconnect();
console.warn('WebSocket closed. Reconnecting... (disabled for now)');
//this.reconnect();
//TODO turn that back on ^
}
};
@@ -438,13 +136,11 @@ class ReconnectingWebSocket {
}
function communicate(websocket) {
function communicate(websocket, book_bar) {
console.log("Communicating");
const params = new URLSearchParams(window.location.search);
var renderer = new TimerRenderer();
let timer;
// INITIALIZE CLASS HERE
book_bar.simProgress();
websocket.onopen = () => {
websocket.send(
@@ -456,11 +152,10 @@ function communicate(websocket) {
}
)
);
renderer.reset();
renderer.animate();
};
websocket.onmessage = ({ data }) => {
console.log("messaged");
const event = JSON.parse(data);
switch (event.type) {
case "DO":
@@ -469,26 +164,18 @@ function communicate(websocket) {
// Call the specified method
switch (event.method) {
case "setTimer":
if (timer == null) {
timer = new Timer(renderer, args);
} else {
timer.update_from_data(args);
}
timer.render();
timer.tick();
//do something with the new data
console.log("set timer: " + event);
book_bar.setProgress(event.reward_progress);
break;
case "noTimer":
if (timer != null) {
timer.destroying = true;
timer = null;
}
renderer.reset();
renderer.animate();
//do something default
console.log("no timer: " + event);
break;
case "endTimer":
if (timer != null) {
timer.destroying = true;
timer = null;
}
//do something for the final time
console.log("end timer: " + event);
break
default:
throw new Error(`Unsupported method requested: ${event.method}.`)
}