-decimals

- round decimals on leaderboard
-leaderboard scores
2025-11-09 02:26:57 -05:00 · 2025-11-06 03:42:41 -05:00 · 2025-11-05 23:18:56 -05:00 · 2025-11-04 12:19:37 -05:00 · 2025-11-04 12:18:33 -05:00 · 2025-11-03 15:57:11 -05:00
4 changed files with 489 additions and 133 deletions
--- a/index.html
+++ b/index.html
@@ -13,55 +13,118 @@
  <body>
    <main>
      <div class='contentContainer'>
-        <img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
+
+        <img class='mainHeart' src='src/youvegotmail.webp'>
+
+        <div class='infoWrap'>
          <div class='infoGroup'>
+
+            <div class='infoBox' id='InfoBox3'>
+              <p id='TopUsers'>
+                Leaderboard:
+              </p>
+
+              <div class='rightFadeWrap' id='RightFadeWrapInfoBox3'>
+                <div class='giftUserWrap' id='GiftUserWrap'>
+                  <div class='giftUserRow' id='GiftUserRow1'>
+                    <p class='giftUserNum' id='GiftUserNum1'>
+                      1
+                    </p>
+                    <div class='scrollWrap' id='ScrollWrapName1'>
+                      <div class='scrollWrapW' id='ScrollWrapNameW1'>
+                        <p class='giftUserName'id='GiftUserName1'>
+                          Usernamethatisverylong
+                        </p>
+                        <p class='giftUserNameDupe'id='GiftUserNameDupe1'>
+                          Usernamethatisverylong
+                        </p>
+                      </div>
+                    </div>
+                    <p class='giftUserScore' id='GiftUserScore1'>
+                      0000
+                    </p>
+                  </div>
+                  <div class='giftUserRow' id='GiftUserRow2'>
+                    <p class='giftUserNum' id='GiftUserNum2'>
+                      2
+                    </p>
+                    <div class='scrollWrap' id='ScrollWrapName2'>
+                      <div class='scrollWrapW' id='ScrollWrapNameW2'>
+                        <p class='giftUserName'id='GiftUserName2'>
+                          Usernamethatisverylong
+                        </p>
+                        <p class='giftUserNameDupe'id='GiftUserNameDupe2'>
+                          Usernamethatisverylong
+                        </p>
+                      </div>
+                    </div>
+                    <p class='giftUserScore' id='GiftUserScore2'>
+                      25
+                    </p>
+                  </div>
+                  <div class='giftUserRow' id='GiftUserRow3'>
+                    <p class='giftUserNum' id='GiftUserNum3'>
+                      3
+                    </p>
+                    <div class='scrollWrap' id='ScrollWrapName3'>
+                      <div class='scrollWrapW' id='ScrollWrapNameW3'>
+                        <p class='giftUserName'id='GiftUserName3'>
+                          Usernamethatisverylong
+                        </p>
+                        <p class='giftUserNameDupe'id='GiftUserNameDupe3'>
+                          Usernamethatisverylong
+                        </p>
+                      </div>
+                    </div>
+                    <p class='giftUserScore' id='GiftUserScore3'>
+                      1
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <img class='mainHeart' id='SecondHeart' src='src/youvegotmail.webp'>
+
            <div class='infoBox' id='InfoBox1'>
              <h1 id='Timer'>
-              24:16
+                00:00
              </h1>
              <p id='TimerInfo'>
                !subathon for details
              </p>
            </div>
+
            <div class='infoBox' id='InfoBox2'>
-            <h2 id='GoalLabel'>
-              Current Goal:
-            </h2>
-            <h3 id='GoalName'>
+              <p id='GoalLabel'>
+                Next Goal:
+              </p>
+              <div class='rightFadeWrap' id='RightFadeWrapInfoBox2'>
+                <div class='scrollWrap' id='ScrollWrapGoal'>
+                  <div class='scrollWrapW' id='ScrollWrapGoalW'>
+                    <p id='GoalName'>
                      Discord Watch Party + Puzzles
-            </h3>
+                    </p>
+
+                    <p id='GoalNameDupe'>
+                      Discord Watch Party + Puzzles
+                    </p>
+
+                  </div>
+                </div>
+              </div>
+              <div id='GoalProgressWrap'>
+                <div id='GoalProgressBar'>
+                  <p id='GoalProgressTransparent' style='color: transparent;'>
+                    1234/5678
+                  </p>
+                </div>
                <p id='GoalProgress'>
-              1524/3000 Points
+                  1234/5678
                </p>
              </div>
-          <div class='infoBox' id='InfoBox3'>
-            <h2 id='TopUsers'>
-              Top 3 Gifters:
-            </h2>
-            <div class='giftUserRow' id='GiftUserRow1'>
-              <p class='giftUserNum' id='GiftUserNum1'>
-                1.
-              </p>
-              <p class='giftUserName'id='GiftUserName1'>
-                Usernamethatisverylong
-              </p>
-            </div>
-            <div class='giftUserRow' id='GiftUserRow2'>
-              <p class='giftUserNum' id='GiftUserNum2'>
-                2.
-              </p>
-              <p class='giftUserName'id='GiftUserName2'>
-                Usernamethatisverylong
-              </p>
-            </div>
-            <div class='giftUserRow' id='GiftUserRow3'>
-              <p class='giftUserNum' id='GiftUserNum3'>
-                3.
-              </p>
-              <p class='giftUserName'id='GiftUserName3'>
-                Usernamethatisverylong
-              </p>
            </div>
+
          </div>
        </div>
      </div>
--- a/src/youvegotmail.webp
+++ b/src/youvegotmail.webp
--- a/timer.css
+++ b/timer.css
@@ -14,45 +14,42 @@ html, body {
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--background-color);
+  background-color: transparent;
  overflow: hidden;
 }

 main {
-  font-family: "VT323", monospace;
+  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
-  font-size: 1em;
  color: #EA4045;
  height: 100%;
 }

 h1 {
  margin: 0;
-  font-size: 68cqh;
+  font-size: 3.6em;
  color: #404145;
+  font-weight: normal;
 }

 h2 {
  margin: 0;
-  font-size: 40cqh;
+  font-size: 1.4em;
  color: #404145;
+  font-weight: normal;
 }

 h3 {
-  font-family: "Silkscreen", sans-serif;
-  font-weight: 400;
-  font-style: normal;
  margin: 0;
-  font-size: 16cqh;
+  font-size: 1em;
  color: #404145;
+  font-weight: normal;
 }

 p {
  margin: 0;
-  font-family: "Silkscreen", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-size: 20cqh;
+  font-size: 1.3em;
 }

 .contentContainer {
@@ -62,12 +59,18 @@ p {
  text-align: center;
 }

- #MainHeart {
+.mainHeart {
  max-height: 100vh;
-  max-width: 100vw;
+  max-width: 72vw;
 }

-.infoGroup {
+ #SecondHeart {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+ }
+
+.infoWrap {
  container-type: size;
  height: 100%;
  width: 100%;
@@ -76,105 +79,256 @@ p {
  top: 0px;
  display: grid;
  grid-template-columns: 56% 34% 1fr;
-  grid-template-rows: 11% 28% 16% 16% 1fr;
+  grid-template-rows: 11% 1fr 29%;
  place-items: center;
+  text-wrap: nowrap;
 }

-.infoBox {
-  container-type: size;
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-auto-rows: auto;
-  place-items: center;
-}
-
-#InfoBox1 {
+.infoGroup {
+  height: 100%;
  width: 100%;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
-  justify-self: left;
-  align-self: stretch;
-  transform: translate(-8%, 5%);
+}
+
+.infoBox {
+  height: auto;
+  width: 100%;
+  font-size: 4cqh;
+}
+
+#InfoBox1 {
+  transform: translate(-2%, 0%);
+  margin-top: -50%;
 }

 #InfoBox2 {
-  display: grid;
-  width: 100%;
-  grid-column-start: 2;
-  grid-column-end: 2;
-  grid-row-start: 3;
-  grid-row-end: 3;
-  justify-self: left;
-  align-self: stretch;
-  transform: translate(6%, -24%);
+  /* -- !!DO NOT REMOVE!! -- 
+    Removing this transform kills the goal label and I do not know why
+    */
+  transform: translate(0%, 0%);
 }

 #InfoBox3 {
-  width: 100%;
-  grid-column-start: 2;
-  grid-column-end: 2;
-  grid-row-start: 4;
-  grid-row-end: 4;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr 23% 23% 23%;
-  justify-self: left;
-  align-self: stretch;
-  transform: translate(0%, -32%);
+  width: 142%;
+  position: relative;
+  transform: translate(65%, 10%) scale(1, 1);
+  border-radius: 3cqh;
+  border: .4cqh solid;
+  border-color: #00A0F3;
+  background-color: white;
+  padding: .4ch 0 .4ch 0;
+}
+
+#Timer {
+  /*
+  margin-top: 10%;
+  margin-bottom: 2%;
+  */
+  transform: translate(0%, 0%) scale(.95, 1.2);
 }

 #TimerInfo {
-  transform: translate(0%, -175%);
-  font-size: 9cqh;
+  transform: translate(0%, -60%);
+  display: none;
 }

 #GoalLabel {
-  transform: translate(0%, -20%);
+  color: #404145;
 }

 #GoalName {
-  width: 85%;
-  transform: translate(10%, -110%);
+  width: fit-content;
+  position: relative;
  color: #32B993;
  text-wrap: nowrap;
+  display: inline-block;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GoalNameDupe {
+  width: fit-content;
+  position: relative;
+  color: #32B993;
+  text-wrap: nowrap;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GoalProgressWrap {
+  width: fit-content;
+  padding-left: .8cqh;
+  padding-right: .8cqh;
+  border-radius: 3cqh;
+  border: .4cqh solid;
+  border-color: #404145;
+  margin: .4ch auto 0 auto;
  overflow: hidden;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+}
+
+#GoalProgressBar {
+  width: 110%;
+  background-color: #FC98B3;
+  transform: translate(-5%, 0%) scale(1, 1.5);
 }

 #GoalProgress {
-  transform: translate(0%, -75%);
-  border-radius: 8cqh;
-  border: 2cqh solid;
-  border-color: #404145;
+  transform: translate(0%, -8%) scale(1);
+  text-align: center;
+  margin-top: -19%;
+  color: #404145;
+}
+
+#TopUsers {
+  margin-bottom: 2%;
+  font-weight: normal;
+  color: #404145;
+}
+
+.giftUserWrap {
+  transform: translate(9%, -8%) scale(1, 1);
 }

 .giftUserRow {
  width: 100%;
  display: grid;
-  grid-template-columns: 10% 1fr;
+  grid-template-columns: 2ch 14ch 5ch;
  grid-template-rows: 1fr;
  text-wrap: nowrap;
  overflow: hidden;
-  text-align: left;
-  justify-self: left;
-  transform: translate(18%, 0%);
+  text-align: center;
+}
+
+.giftUserNum {
+  border-right: 1.5px solid #00A0F3;
+  border-image: linear-gradient(to top, 
+    transparent 0%,
+    transparent 5%,
+    #00A0F3 35%,
+    #00A0F3 65%, 
+    transparent 95%) 1;
+}
+
+.giftUserScore {
+  border-left: 1.5px solid #00A0F3;
+  border-image: linear-gradient(to top, 
+    transparent 0%,
+    transparent 5%,
+    #00A0F3 40%,
+    #00A0F3 60%, 
+    transparent 95%) 1;
+  text-align: right;
+  padding-right: .25ch;
 }

 .giftUserName {
+  width: fit-content;
  margin-left: 0%;
+  position: relative;
  color: #32B993;
+  text-align: left;
+  display: inline-block;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
+}
+
+.giftUserNameDupe {
+  width: fit-content;
+  margin-left: 0%;
+  position: relative;
+  color: #32B993;
+  text-align: left;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
 }

 #GiftUserName1 {
-  width: 54%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  /* --- animation-duration = JS VAR --- */
 }
+
 #GiftUserName2 {
-  width: 46%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  /* --- animation-duration = JS VAR --- */
 }
+
 #GiftUserName3 {
-  width: 38%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GiftUserNameDupe1 {
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GiftUserNameDupe2 {
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GiftUserNameDupe3 {
+  /* --- animation-duration = JS VAR --- */
+}
+
+.scrollWrap {
+  width: 100%;
+}
+
+.rightFadeWrap {
+  /*
+  mask-image: linear-gradient(to right, black 75%, transparent 90%);
+  */
+}
+
+#RightFadeWrapInfoBox2 {
+  width: 90%;
+  border-left: 1.5px solid #00A0F3;
+  border-right: 1.5px solid #00A0F3;
+  border-image: linear-gradient(to top, 
+    transparent 0%,
+    transparent 5%,
+    #00A0F3 40%,
+    #00A0F3 60%, 
+    transparent 95%) 1;
+  transform: translate(1ch, 0%) scale(1);
+}
+
+.fadeLeft {
+  mask-image: linear-gradient(to right, 
+    transparent 0%, 
+    black 1ch, 
+    black calc(100% - 2ch), 
+    transparent 100%);
+}
+
+#ScrollWrapGoal {
+  /*
+  width: 90%;
+  */
+}
+
+.scrollWrapName {
+}
+
+.scrollWrapW {
+  width: fit-content;
+  display: flex;
+}
+
+#ScrollWrapGoalW {
+}
+
+.hide {
+  display: none;
+}
+
+.scrollAnim {
+  animation: myScroll linear infinite;
+}
+
+@keyframes myScroll {
+  0% {left: 0%; top: 0%;}
+  42% {left: 0%; top: 0%;}
+  100% {left: -54%; top: 0%;}
 }
--- a/timer.js
+++ b/timer.js
@@ -8,6 +8,7 @@ class Timer {
  constructor(renderer, timer_data) {
    this.renderer = renderer;
    this.destroying = false;
+    this.ended = false;

    this.update_from_data(timer_data);
  }
@@ -32,13 +33,34 @@ class Timer {
    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(
@@ -46,21 +68,26 @@ class Timer {
        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();
  }

  /**
@@ -74,7 +101,6 @@ class Timer {
        setTimeout(this.tick.bind(this), 1000);
      }
    }
-
  }
 }

@@ -88,41 +114,127 @@ class TimerRenderer {

    // 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. (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!"
+  }
+
+  // -- 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");
+        }
+      }
+    }
  }

  /**
   * 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.goal_label.textContent = "Current Goal:";
-    this.goal_name.textContent = "Be awesome";
-    this.goal_progress.textContent = "00/00 Points";
-
-    this.topusers_label.textContent = "Top 3 Gifters";
-    this.topusers_user1_num.textContent = "1.";
-    this.topusers_user1_name.textContent = "Anonymous";
-    this.topusers_user2_num.textContent = "2.";
-    this.topusers_user2_name.textContent = "Anonymous";
-    this.topusers_user3_num.textContent = "3.";
-    this.topusers_user3_name.textContent = "Anonymous";
-
+    this.timer.style.color = '#82C8B6';
+    this.goal_label.textContent = "Completed!";
+    this.goal_name.textContent = this.thankyou;
+    this.goal_namedupe.textContent = this.thankyou;
+    this.animate();
  }

  /**
@@ -165,9 +277,18 @@ class TimerRenderer {
    // 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) + ' Points'
+    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%)`;
+    }
  }

  /**
@@ -175,6 +296,7 @@ class TimerRenderer {
   */
  clear_current_goal() {
    this.goal_name.textContent = "";
+    //this.goal_namedupe.textContent = "";
    this.goal_progress.textContent = "";
    this.goal_label.textContent = "";
  }
@@ -189,27 +311,42 @@ class TimerRenderer {
  render_users(users) {

    if (users.length >= 1) {
-      this.topusers_user1_num.textContent = "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 = "";
+      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_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 = "";
+      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_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 = "";
+      this.topusers_user3_num.textContent = "3";
      this.topusers_user3_name.textContent = "";
+      this.topusers_userdupe3_name.textContent = "";
+      this.topusers_user3_score.textContent = "0000";
    }

  }
@@ -320,6 +457,7 @@ function communicate(websocket) {
      )
    );
    renderer.reset();
+    renderer.animate();
  };

  websocket.onmessage = ({ data }) => {
@@ -345,6 +483,7 @@ function communicate(websocket) {
              timer = null;
            }
            renderer.reset();
+            renderer.animate();
          case "endTimer":
            if (timer != null) {
              timer.destroying = true;
Author	SHA1	Message	Date
RolimirKal	1a09ea3d80	-decimals - round decimals on leaderboard	2025-11-09 02:26:57 -05:00
RolimirKal	ff7c48dab4	-leaderboard scores - will not work over 1000 points	2025-11-06 03:42:41 -05:00
RolimirKal	6c2b897522	-red progress bar	2025-11-05 23:18:56 -05:00
RolimirKal	192f3c0eb1	- cleanup	2025-11-04 12:19:37 -05:00
RolimirKal	8e95f378d7	- OBS progress bar bugfix	2025-11-04 12:18:33 -05:00
RolimirKal	f2fc02ff7e	v5-Progress Bar, Finale - 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)	2025-11-03 15:57:11 -05:00
Interitio	75cdfcf09a	Add timer end checking	2025-11-03 22:20:10 +10:00
RolimirKal	11ca4470fe	-hot garbage - never send this version live	2025-11-03 06:58:14 -05:00
RolimirKal	2d9e320d42	v4.1-Spacing adjustments - relaxed vertical spacing and increased horizontal gap between text and graphic - cleanup	2025-11-02 04:45:52 -05:00
RolimirKal	da6ae0b9c3	v4-Animation rework - added JS logic for controlling animations based on text length - added duplicate elements for looping scroll effect and JS logic for populating them	2025-11-02 03:45:11 -05:00
RolimirKal	960c037362	Completed v3 - layout change, reorganized elements and duplicated graphic to avoid using z-index which did not function in OBS browser sources - DO NOT REMOVE DUPLICATE HEART GRAPHIC - - animation!!! + more wrappers to split up static vs dynamic effects - temp legacy versions for easier comparisons (no-bold and uniform-font html+css) - js content tweaks to maintain parity with layout template	2025-10-31 18:50:34 -04:00
RolimirKal	1f49e82035	Merge branch 'v2-Prototyping' of https://git.thewisewolf.dev/CarmiCoven/subathon-timer into v2-Prototyping	2025-10-31 11:06:37 -04:00
RolimirKal	31bc26c72f	Completed v2 - aligned elements to graphic - minimized wasted space (lots of small manual adjustments) - extra wrappers for better formatting - tested various text lengths to ensure static elements sizing	2025-10-31 10:43:14 -04:00
Interitio	45502c00e4	Merge branch 'master' into v2-Prototyping	2025-10-31 23:53:35 +10:00
RolimirKal	9544579ebe	Quick-push checkpoint - messy, under renovations - IDs for important content (timer, goal progress, username elements) should be final	2025-10-31 07:34:08 -04:00
RolimirKal	f8bce7a50c	Scaling method and structure refactor - Unify scaling method based on image height instead of individual elements for better iteration control. - Restructure layout method to reduce reliance on manual grid definitions, remove unnecessary grid blocks, and improve dynamic layout for simpler iteration - Breaks layout, needs new polish pass	2025-10-31 05:48:40 -04:00
RolimirKal	b1fb0299d2	v2-Init Create branch and rollback point for v2 prototyping	2025-10-31 04:15:21 -04:00