CarmiCoven/subathon-timer
2
0
Fork 0
forked from HoloTech/twitch-subathon-timer
Code Pull Requests Activity

v5-Progress Bar, Finale

Browse Source 
- added progress bar and 00:00 timer color change (first included in hot garbage)

- cleanup of local testing code

- adjustments to finale/stop logic to ensure final update when the clock stops

- minor polish

- ready for production!!! (I hope)
This commit is contained in:
RolimirKal
2025-11-03 15:57:11 -05:00
parent 75cdfcf09a
commit f2fc02ff7e
2 changed files with 31 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -8,7 +8,7 @@
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="timer.css" />
<script src="timer.js"></script>
<title>v2 onefont</title>
<title>Lilac Timer</title>
</head>
<body>
<main>

70
timer.js
View File

@@ -10,9 +10,6 @@ class Timer {
this.destroying = false;
this.ended = false;
//TEMP
this.temptime = 15;
this.update_from_data(timer_data);
}
@@ -38,29 +35,33 @@ class Timer {
check_ended() {
if (!this.ended && this.end_at < new Date()) {
this.ended = True;
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(
//TEMP
this.temptime
//Math.floor((this.end_at - new Date()) / 1000)
Math.floor((this.end_at - new Date()) / 1000)
);
}
render() {
if (this.check_ended()) {
if (this.ended) {
return;
}
// Render goal
if (this.next_goal != null) {
this.renderer.render_current_goal(
this.next_goal.name,
@@ -70,9 +71,9 @@ class Timer {
this.renderer.animate();
} else if (this.last_goal != null) {
this.renderer.render_current_goal(
this.next_goal.name,
this.last_goal.name,
this.total_contribution,
this.next_goal.required,
this.last_goal.required,
);
this.renderer.animate();
} else {
@@ -85,6 +86,8 @@ class Timer {
// Render timer
this.render_time();
this.set_ended();
}
/**
@@ -95,16 +98,7 @@ class Timer {
this.render_time();
if (this.running) {
//setTimeout(this.tick.bind(this), 1000);
//if (Math.floor((this.end_at - new Date()) / 1000) > 0) {
if (Math.floor(this.temptime) > 0) {
//TEMP
this.temptime = this.temptime - 1;
setTimeout(this.tick.bind(this), 1000);
} else {
}
setTimeout(this.tick.bind(this), 1000);
}
}
}
@@ -155,14 +149,13 @@ class TimerRenderer {
this.userdupeboxes = [this.topusers_userdupe1_name, this.topusers_userdupe2_name, this.topusers_userdupe3_name]
// Thank you!
this.thankyou = "Thank you very super lots many ultra bunches large big huge mega galactic universal multiversal infinite thnaks!"
this.thankyou = "Thank you! The subathon has now ended, thank you so much for contributions and viewership to celebrate!"
}
// -- Toggles animation if text overflows container and adjusts speed for uniform movement --
animate() {
for (let i = 0; i < this.scrollboxes.length; i++) {
console.log('animate');
// Check whether the itteration is a username or goal
if (this.scrollboxes[i].id == 'ScrollWrapGoal') {
@@ -210,11 +203,11 @@ class TimerRenderer {
* Bring the display into a standard initial state.
*/
reset() {
this.timer.textContent = "07:13";
this.timer.textContent = "88:88";
this.goal_label.textContent = "Next Goal:";
this.goal_name.textContent = "The answer is...";
this.goal_namedupe.textContent = "The answer is...";
this.goal_progress.textContent = "1234/5678";
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";
@@ -226,8 +219,16 @@ class TimerRenderer {
this.topusers_user3_num.textContent = "3";
this.topusers_user3_name.textContent = "Username_Very_Super_Long12";
this.topusers_userdupe3_name.textContent = "Username_Very_Super_Long12";
console.log('reset');
}
// 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();
}
/**
@@ -236,16 +237,10 @@ class TimerRenderer {
* @param {integer} seconds_remaining - The number of seconds remaining on the timer.
*/
render_time(seconds_remaining) {
console.log(seconds_remaining);
var timestr;
// Render a time remaining given in seconds
if (seconds_remaining <= 0) {
timestr = "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();
} else {
var seconds = seconds_remaining % 60;
seconds_remaining = seconds_remaining - seconds;
@@ -253,10 +248,6 @@ class TimerRenderer {
var hours = Math.floor(minutes / 60);
minutes = minutes - 60 * hours;
console.log('hr' + hours);
console.log('mn' + minutes);
console.log('sc' + seconds);
// Change rendering mode based on hours or minutes left
if (hours > 0) {
timestr = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0');
@@ -286,9 +277,8 @@ class TimerRenderer {
// Bitwise OR done to convert floats to integers if needed
this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0)
console.log('ratio' + current / required);
// Update the progress bar
if (current / required > .02) {
console.log('%' + (current / required) * 100);
this.goal_bar.style.maskImage = `linear-gradient(to right, #55CBFF 0%, #55CBFF ${((current / required) - .02) * 100}%, transparent ${(current / required) * 100}%)`;
} else {
this.goal_bar.style.maskImage = `linear-gradient(to right, transparent 0%)`;