-leaderboard scores

- will not work over 1000 points

index.html

@@ -40,6 +40,9 @@
                         </p>
                       </div>
                     </div>
+                    <p class='giftUserScore' id='GiftUserScore1'>
+                      0000
+                    </p>
                   </div>
                   <div class='giftUserRow' id='GiftUserRow2'>
                     <p class='giftUserNum' id='GiftUserNum2'>
@@ -55,6 +58,9 @@
                         </p>
                       </div>
                     </div>
+                    <p class='giftUserScore' id='GiftUserScore2'>
+                      25
+                    </p>
                   </div>
                   <div class='giftUserRow' id='GiftUserRow3'>
                     <p class='giftUserNum' id='GiftUserNum3'>
@@ -70,6 +76,9 @@
                         </p>
                       </div>
                     </div>
+                    <p class='giftUserScore' id='GiftUserScore3'>
+                      1
+                    </p>
                   </div>
                 </div>
               </div>

timer.css

@@ -61,7 +61,7 @@ p {
 
 .mainHeart {
   max-height: 100vh;
-  max-width: 75vw;
+  max-width: 72vw;
  }
 
  #SecondHeart {
@@ -112,9 +112,9 @@ p {
 }
 
 #InfoBox3 {
-  width: 110%;
+  width: 142%;
   position: relative;
-  transform: translate(88%, 25%) scale(1, 1);
+  transform: translate(65%, 10%) scale(1, 1);
   border-radius: 3cqh;
   border: .4cqh solid;
   border-color: #00A0F3;
@@ -191,19 +191,41 @@ p {
 }
 
 .giftUserWrap {
-  transform: translate(11%, -8%) scale(1, 1);
+  transform: translate(9%, -8%) scale(1, 1);
 }
 
 .giftUserRow {
   width: 100%;
   display: grid;
-  grid-template-columns: 8% 1fr;
+  grid-template-columns: 2ch 14ch 5ch;
   grid-template-rows: 1fr;
   text-wrap: nowrap;
   overflow: hidden;
   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%;
@@ -254,19 +276,36 @@ p {
 }
 
 .rightFadeWrap {
+  /*
   mask-image: linear-gradient(to right, black 75%, transparent 90%);
+  */
 }
 
-#RightFadeWrapInfoBox3 {
-
+#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);
+  mask-image: linear-gradient(to right, 
+    transparent 0%, 
+    black 1ch, 
+    black calc(100% - 2ch), 
+    transparent 100%);
 }
 
 #ScrollWrapGoal {
-  transform: translate(1ch, 0%) scale(1);
+  /*
+  width: 90%;
+  */
 }
 
 .scrollWrapName {

timer.js

@@ -129,12 +129,15 @@ class TimerRenderer {
     // 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
@@ -160,7 +163,7 @@ class TimerRenderer {
       if (this.scrollboxes[i].id == 'ScrollWrapGoal') {
 
         // Check if element text overflows
-        if (this.goal_name.getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .85)) {
+        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");
@@ -179,7 +182,7 @@ class TimerRenderer {
       } else {
 
         // Check if element text overflows
-        if (this.userboxes[i].getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .75)) {
+        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");
@@ -213,12 +216,15 @@ class TimerRenderer {
     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
@@ -308,33 +314,39 @@ class TimerRenderer {
       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 = 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 = 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 = 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";
     }
 
   }