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

68
timer.js
View File

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