From ff7c48dab45bcfac83de9cbcbf3af5b063ceaf40 Mon Sep 17 00:00:00 2001 From: RolimirKal Date: Thu, 6 Nov 2025 03:42:41 -0500 Subject: [PATCH] -leaderboard scores - will not work over 1000 points --- index.html | 9 +++++++++ timer.css | 57 +++++++++++++++++++++++++++++++++++++++++++++--------- timer.js | 16 +++++++++++++-- 3 files changed, 71 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index c04bd4f..884b3e4 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,9 @@

+

+ 0000 +

@@ -55,6 +58,9 @@

+

+ 25 +

@@ -70,6 +76,9 @@

+

+ 1 +

diff --git a/timer.css b/timer.css index c6381f3..0ab19d5 100644 --- a/timer.css +++ b/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 { diff --git a/timer.js b/timer.js index b886213..a1935cc 100644 --- a/timer.js +++ b/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"; } }