diff --git a/bar.html b/bar.html index 0168fad..6b7107d 100644 --- a/bar.html +++ b/bar.html @@ -4,16 +4,20 @@ - - + - Lilac Timer + Lilac BookBar
-
+
+
+
+
+
+
diff --git a/src/BookBar_Mask.png b/src/BookBar_Mask.png new file mode 100644 index 0000000..d9b856b Binary files /dev/null and b/src/BookBar_Mask.png differ diff --git a/src/Books/BookBar_v5_f0000.png b/src/Books/BookBar_v5_f0000.png new file mode 100644 index 0000000..4fc0a38 Binary files /dev/null and b/src/Books/BookBar_v5_f0000.png differ diff --git a/src/Books/BookBar_v5_f0001.png b/src/Books/BookBar_v5_f0001.png new file mode 100644 index 0000000..c371472 Binary files /dev/null and b/src/Books/BookBar_v5_f0001.png differ diff --git a/src/Books/BookBar_v5_f0002.png b/src/Books/BookBar_v5_f0002.png new file mode 100644 index 0000000..ea2697f Binary files /dev/null and b/src/Books/BookBar_v5_f0002.png differ diff --git a/src/Books/BookBar_v5_f0003.png b/src/Books/BookBar_v5_f0003.png new file mode 100644 index 0000000..e8f5a4c Binary files /dev/null and b/src/Books/BookBar_v5_f0003.png differ diff --git a/src/Books/BookBar_v5_f0004.png b/src/Books/BookBar_v5_f0004.png new file mode 100644 index 0000000..ac49e02 Binary files /dev/null and b/src/Books/BookBar_v5_f0004.png differ diff --git a/src/Books/BookBar_v5_f0005.png b/src/Books/BookBar_v5_f0005.png new file mode 100644 index 0000000..6803371 Binary files /dev/null and b/src/Books/BookBar_v5_f0005.png differ diff --git a/src/Books/BookBar_v5_f0006.png b/src/Books/BookBar_v5_f0006.png new file mode 100644 index 0000000..977ca5f Binary files /dev/null and b/src/Books/BookBar_v5_f0006.png differ diff --git a/src/Books/BookBar_v5_f0007.png b/src/Books/BookBar_v5_f0007.png new file mode 100644 index 0000000..756fa03 Binary files /dev/null and b/src/Books/BookBar_v5_f0007.png differ diff --git a/src/Books/BookBar_v5_f0008.png b/src/Books/BookBar_v5_f0008.png new file mode 100644 index 0000000..382833c Binary files /dev/null and b/src/Books/BookBar_v5_f0008.png differ diff --git a/src/Books/BookBar_v5_f0009.png b/src/Books/BookBar_v5_f0009.png new file mode 100644 index 0000000..f26447c Binary files /dev/null and b/src/Books/BookBar_v5_f0009.png differ diff --git a/src/Books/BookBar_v5_f0010.png b/src/Books/BookBar_v5_f0010.png new file mode 100644 index 0000000..d8e6052 Binary files /dev/null and b/src/Books/BookBar_v5_f0010.png differ diff --git a/src/Books/BookBar_v5_f0011.png b/src/Books/BookBar_v5_f0011.png new file mode 100644 index 0000000..8f6613b Binary files /dev/null and b/src/Books/BookBar_v5_f0011.png differ diff --git a/src/Books/BookBar_v5_f0012.png b/src/Books/BookBar_v5_f0012.png new file mode 100644 index 0000000..6857f23 Binary files /dev/null and b/src/Books/BookBar_v5_f0012.png differ diff --git a/src/Books/BookBar_v5_f0013.png b/src/Books/BookBar_v5_f0013.png new file mode 100644 index 0000000..4fbc469 Binary files /dev/null and b/src/Books/BookBar_v5_f0013.png differ diff --git a/src/Books/BookBar_v5_f0014.png b/src/Books/BookBar_v5_f0014.png new file mode 100644 index 0000000..415b1ed Binary files /dev/null and b/src/Books/BookBar_v5_f0014.png differ diff --git a/src/Books/BookBar_v5_f0015.png b/src/Books/BookBar_v5_f0015.png new file mode 100644 index 0000000..f9a5fed Binary files /dev/null and b/src/Books/BookBar_v5_f0015.png differ diff --git a/src/Books/BookBar_v5_f0016.png b/src/Books/BookBar_v5_f0016.png new file mode 100644 index 0000000..d29dad7 Binary files /dev/null and b/src/Books/BookBar_v5_f0016.png differ diff --git a/src/Books/BookBar_v5_f0017.png b/src/Books/BookBar_v5_f0017.png new file mode 100644 index 0000000..157444a Binary files /dev/null and b/src/Books/BookBar_v5_f0017.png differ diff --git a/src/Books/BookBar_v5_f0018.png b/src/Books/BookBar_v5_f0018.png new file mode 100644 index 0000000..97f2e9c Binary files /dev/null and b/src/Books/BookBar_v5_f0018.png differ diff --git a/src/Books/BookBar_v5_f0019.png b/src/Books/BookBar_v5_f0019.png new file mode 100644 index 0000000..baca9f7 Binary files /dev/null and b/src/Books/BookBar_v5_f0019.png differ diff --git a/src/Books/BookBar_v5_f0020.png b/src/Books/BookBar_v5_f0020.png new file mode 100644 index 0000000..ef94755 Binary files /dev/null and b/src/Books/BookBar_v5_f0020.png differ diff --git a/src/Books/BookBar_v5_f0021.png b/src/Books/BookBar_v5_f0021.png new file mode 100644 index 0000000..303f0d7 Binary files /dev/null and b/src/Books/BookBar_v5_f0021.png differ diff --git a/src/Books/BookBar_v5_f0022.png b/src/Books/BookBar_v5_f0022.png new file mode 100644 index 0000000..82ba3f6 Binary files /dev/null and b/src/Books/BookBar_v5_f0022.png differ diff --git a/src/Books/BookBar_v5_f0023.png b/src/Books/BookBar_v5_f0023.png new file mode 100644 index 0000000..7c6b91c Binary files /dev/null and b/src/Books/BookBar_v5_f0023.png differ diff --git a/src/Books/BookBar_v5_f0024.png b/src/Books/BookBar_v5_f0024.png new file mode 100644 index 0000000..4abf7cf Binary files /dev/null and b/src/Books/BookBar_v5_f0024.png differ diff --git a/src/Books/BookBar_v5_f0025.png b/src/Books/BookBar_v5_f0025.png new file mode 100644 index 0000000..443683d Binary files /dev/null and b/src/Books/BookBar_v5_f0025.png differ diff --git a/src/Books/BookBar_v5_f0026.png b/src/Books/BookBar_v5_f0026.png new file mode 100644 index 0000000..a38b036 Binary files /dev/null and b/src/Books/BookBar_v5_f0026.png differ diff --git a/src/Books/BookBar_v5_f0027.png b/src/Books/BookBar_v5_f0027.png new file mode 100644 index 0000000..a7cba2c Binary files /dev/null and b/src/Books/BookBar_v5_f0027.png differ diff --git a/src/Books/BookBar_v5_f0028.png b/src/Books/BookBar_v5_f0028.png new file mode 100644 index 0000000..a1cf38e Binary files /dev/null and b/src/Books/BookBar_v5_f0028.png differ diff --git a/src/Books/BookBar_v5_f0029.png b/src/Books/BookBar_v5_f0029.png new file mode 100644 index 0000000..607ba82 Binary files /dev/null and b/src/Books/BookBar_v5_f0029.png differ diff --git a/src/Books/BookBar_v5_f0030.png b/src/Books/BookBar_v5_f0030.png new file mode 100644 index 0000000..4c09cc9 Binary files /dev/null and b/src/Books/BookBar_v5_f0030.png differ diff --git a/src/Books/BookBar_v5_f0031.png b/src/Books/BookBar_v5_f0031.png new file mode 100644 index 0000000..1aa2342 Binary files /dev/null and b/src/Books/BookBar_v5_f0031.png differ diff --git a/src/Books/BookBar_v5_f0032.png b/src/Books/BookBar_v5_f0032.png new file mode 100644 index 0000000..8cbb83d Binary files /dev/null and b/src/Books/BookBar_v5_f0032.png differ diff --git a/src/Books/BookBar_v5_f0033.png b/src/Books/BookBar_v5_f0033.png new file mode 100644 index 0000000..b9dc8de Binary files /dev/null and b/src/Books/BookBar_v5_f0033.png differ diff --git a/src/Books/BookBar_v5_f0034.png b/src/Books/BookBar_v5_f0034.png new file mode 100644 index 0000000..10f2cb1 Binary files /dev/null and b/src/Books/BookBar_v5_f0034.png differ diff --git a/src/Books/BookBar_v5_f0035.png b/src/Books/BookBar_v5_f0035.png new file mode 100644 index 0000000..9a79104 Binary files /dev/null and b/src/Books/BookBar_v5_f0035.png differ diff --git a/src/Books/BookBar_v5_f0036.png b/src/Books/BookBar_v5_f0036.png new file mode 100644 index 0000000..60b3f0d Binary files /dev/null and b/src/Books/BookBar_v5_f0036.png differ diff --git a/src/Books/BookBar_v5_f0037.png b/src/Books/BookBar_v5_f0037.png new file mode 100644 index 0000000..75ca4f0 Binary files /dev/null and b/src/Books/BookBar_v5_f0037.png differ diff --git a/src/Books/BookBar_v5_f0038.png b/src/Books/BookBar_v5_f0038.png new file mode 100644 index 0000000..48862d1 Binary files /dev/null and b/src/Books/BookBar_v5_f0038.png differ diff --git a/src/Books/BookBar_v5_f0039.png b/src/Books/BookBar_v5_f0039.png new file mode 100644 index 0000000..92ecd5c Binary files /dev/null and b/src/Books/BookBar_v5_f0039.png differ diff --git a/src/Books/BookBar_v5_f0040.png b/src/Books/BookBar_v5_f0040.png new file mode 100644 index 0000000..b7186a0 Binary files /dev/null and b/src/Books/BookBar_v5_f0040.png differ diff --git a/src/Books/BookBar_v5_f0041.png b/src/Books/BookBar_v5_f0041.png new file mode 100644 index 0000000..2167411 Binary files /dev/null and b/src/Books/BookBar_v5_f0041.png differ diff --git a/src/Books/BookBar_v5_f0042.png b/src/Books/BookBar_v5_f0042.png new file mode 100644 index 0000000..1f69ec5 Binary files /dev/null and b/src/Books/BookBar_v5_f0042.png differ diff --git a/src/Books/BookBar_v5_f0043.png b/src/Books/BookBar_v5_f0043.png new file mode 100644 index 0000000..909182f Binary files /dev/null and b/src/Books/BookBar_v5_f0043.png differ diff --git a/src/Books/BookBar_v5_f0044.png b/src/Books/BookBar_v5_f0044.png new file mode 100644 index 0000000..501f11e Binary files /dev/null and b/src/Books/BookBar_v5_f0044.png differ diff --git a/src/Books/BookBar_v5_f0045.png b/src/Books/BookBar_v5_f0045.png new file mode 100644 index 0000000..81e64cc Binary files /dev/null and b/src/Books/BookBar_v5_f0045.png differ diff --git a/src/Paper_v4.png b/src/Paper_v4.png new file mode 100644 index 0000000..ba3a8b9 Binary files /dev/null and b/src/Paper_v4.png differ diff --git a/src/Paper_v5.png b/src/Paper_v5.png new file mode 100644 index 0000000..b5e6b9e Binary files /dev/null and b/src/Paper_v5.png differ diff --git a/src/Paper_v6.png b/src/Paper_v6.png new file mode 100644 index 0000000..5fc113c Binary files /dev/null and b/src/Paper_v6.png differ diff --git a/timer.css b/timer.css index 8cf533f..6181866 100644 --- a/timer.css +++ b/timer.css @@ -12,17 +12,19 @@ html, body { height: 100%; margin: 0; padding: 0; - font-family: 'Inter', sans-serif; + font-family: "Courier Prime", monospace; + font-weight: 400; + font-style: normal; background-color: var(--background-color); background-color: transparent; overflow: hidden; } main { - font-family: "Silkscreen", sans-serif; + font-family: "Courier Prime", monospace; font-weight: 400; font-style: normal; - color: #EA4045; + color: #0f0908; height: 100%; } @@ -36,14 +38,14 @@ h1 { h2 { margin: 0; font-size: 1.4em; - color: #404145; + color: #0f0908; font-weight: normal; } h3 { margin: 0; font-size: 1em; - color: #404145; + color: #0f0908; font-weight: normal; } @@ -53,314 +55,60 @@ p { } - -/* -*** Timer Widget *** -*/ - - - - .contentContainer { - height: fit-content; - width: fit-content; - position: relative; - text-align: center; - } - - .mainHeart { - max-height: 100vh; - max-width: 72vw; - } - - #SecondHeart { - position: absolute; - top: 0px; - left: 0px; - } - - .infoWrap { - container-type: size; - height: 100%; - width: 100%; - position: absolute; - left: 0px; - top: 0px; - display: grid; - grid-template-columns: 56% 34% 1fr; - grid-template-rows: 11% 1fr 29%; - place-items: center; - text-wrap: nowrap; - } - - .infoGroup { - height: 100%; - width: 100%; - grid-column-start: 2; - grid-column-end: 2; - grid-row-start: 2; - grid-row-end: 2; - } - - .infoBox { - height: auto; - width: 100%; - font-size: 4cqh; - } - - #InfoBox1 { - transform: translate(-2%, 0%); - margin-top: -50%; - } - - #InfoBox2 { - /* -- !!DO NOT REMOVE!! -- - Removing this transform kills the goal label and I do not know why - */ - transform: translate(0%, 0%); - } - - #InfoBox3 { - 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%, -60%); - display: none; - } - - #GoalLabel { - color: #404145; - } - - #GoalName { - 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; - } - - #GoalProgressBar { - width: 110%; - background-color: #FC98B3; - transform: translate(-5%, 0%) scale(1, 1.5); - } - - #GoalProgress { - 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: 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%; - 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 { - /* --- animation-duration = JS VAR --- */ - } - - #GiftUserName2 { - /* --- animation-duration = JS VAR --- */ - } - - #GiftUserName3 { - /* --- 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%;} - } - - - /* *** Progres Bar Widget *** */ .widgetContainer { - max-height: 16vh; + aspect-ratio: 195/32; + width: auto; + height: auto; max-width: 100vw; + max-height: 100vh; position: relative; text-align: center; - background-color: lightblue; container-type: inline-size; container-name: sidebar; } .layoutContainer { - height: clamp(64px, calc(.164*100vw), calc(.164*100vw)); - width: clamp(36.563px, 100vw, 100vw); + width: 100%; + height: 100%; position: relative; text-align: center; - background-color: grey; + background-color: transparent; + background-repeat: no-repeat; + background-size: contain; + background-repeat: no-repeat; + background-size: contain; + background-image: url("src/Books/BookBar_v5_f0000.png"); + } + .barFlashHelper { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: contain; + background-image: url("src/Books/BookBar_v5_f0000.png"); + } + #barBack { + } + #barFront { + } + #paperOverlay { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: contain; + opacity: 1; + background-image: url("src/Paper_v4.png"); + mask-image: url("https://i.imgur.com/lseOCYA.png"); + mask-mode: luminance; + mask-size: 100%; + mix-blend-mode: soft-light; } \ No newline at end of file diff --git a/timer.js b/timer.js index ef76dfb..2cf1f38 100644 --- a/timer.js +++ b/timer.js @@ -1,356 +1,53 @@ window.addEventListener("DOMContentLoaded", () => { - const websocket = new ReconnectingWebSocket("wss://lilac.thewisewolf.dev/tracker/timer/ws"); - communicate(websocket); + //Create progress bar + const book_bar = new ProgressBar(); + //Pat Lilac + const websocket = new ReconnectingWebSocket("wss://lilac.thewisewolf.dev/campaigns/partnerplus2026/ws"); + communicate(websocket, book_bar); }); -class Timer { - constructor(renderer, timer_data) { - this.renderer = renderer; - this.destroying = false; - this.ended = false; - - this.update_from_data(timer_data); - } - - update_from_data(timer_data) { - this.end_at = new Date(timer_data.end_at); - this.running = timer_data.is_running; - this.name = timer_data.name; - this.score_table = timer_data.score_table; - - this.total_contribution = timer_data.total_contribution; - this.total_subpoints = timer_data.total_subpoints; - this.total_bits = timer_data.total_bits; - - this.goals_met = timer_data.goals_met; - this.goals_total = timer_data.goals_total; - this.last_goal = timer_data.last_goal; - this.next_goal = timer_data.next_goal; - this.goals = timer_data.goals; - - this.last_contribution = timer_data.last_contribution; - 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( - this.next_goal.name, - 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(); - } - - /** - * Recursive call run per second to update the rendered timer - */ - tick() { - if (!this.destroying) { - this.render_time(); - - if (this.running) { - setTimeout(this.tick.bind(this), 1000); - } - } - } -} - -class TimerRenderer { +class ProgressBar { constructor() { - // HH:MM or MM:SS - this.timer = document.getElementById("Timer"); - - // Current Goal: - this.goal_label = document.getElementById("GoalLabel") - - // 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 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!" + this.current_progress = 0; + this.max_progress = 45; + this.target_element = document.getElementById("progressBar"); + this.bar_back = document.getElementById("barBack"); + this.bar_front = document.getElementById("barFront"); } - - // -- 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"); - } + //SET NUMBER OF COLORED BOOKS + setProgress(val) { + if (Number.isInteger(val) && (this.target_element != null) && (this.bar_back != null) && (this.bar_front != null)) { + let val_string = val.toString(); + if (val_string.length < 2) { + val_string = "0" + val_string; } + this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)"; + setTimeout(this.preLoad.bind(this), 150, val_string, val); } } - - /** - * 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.timer.style.color = '#82C8B6'; - this.goal_label.textContent = "Completed!"; - this.goal_name.textContent = this.thankyou; - this.goal_namedupe.textContent = this.thankyou; - this.animate(); - } - - /** - * Render the timer from a time remaining. - * - * @param {integer} seconds_remaining - The number of seconds remaining on the timer. - */ - render_time(seconds_remaining) { - var timestr; - // Render a time remaining given in seconds - if (seconds_remaining <= 0) { - timestr = "00:00"; - } else { - var seconds = seconds_remaining % 60; - seconds_remaining = seconds_remaining - seconds; - var minutes = Math.floor(seconds_remaining / 60); - var hours = Math.floor(minutes / 60); - minutes = minutes - 60 * hours; - - // Change rendering mode based on hours or minutes left - if (hours > 0) { - timestr = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0'); - } else { - timestr = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0'); - } + preLoad(val_string, new_val) { + this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)"; + if ((new_val >= 0) && (new_val <= this.max_progress)) { + this.current_progress = new_val; } - this.timer.textContent = timestr; - } - - /** - * Render the current goal. - * - * @param {string} name - The name of the current goal. - * @param {number} current - The number of points we currently have. - * @param {number} required - The number of points to achieve the goal. - */ - render_current_goal(name, current, required) { - // TODO: Some kind of end condition, ability to clear a goal etc - // E.g. if subathon doesn't have a goal at all - // 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) - - // 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%)`; + else { + console.warn("Progress update is out of range."); } } - - /** - * Clear the current goal field. - */ - clear_current_goal() { - this.goal_name.textContent = ""; - //this.goal_namedupe.textContent = ""; - this.goal_progress.textContent = ""; - this.goal_label.textContent = ""; + //TEST ANIMATION + + simProgress() { + if (this.current_progress < this.max_progress) { + this.setProgress(this.current_progress + 1); + setTimeout(this.simProgress.bind(this), 500); + } + if (this.current_progress == this.max_progress) { + setTimeout(() => this.setProgress(0), 5000); + setTimeout(this.simProgress.bind(this), 5500); + } } - - /** - * Render the user leaderboard. - * - * @param {Object[]} users - The user leaderboard in descending (points, name) order. - * @param {integer} users[].amount - The number of points this users has contrib. - * @param {string} users[].user_name - The name of this user. - */ - render_users(users) { - - if (users.length >= 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 = "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 = 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 = "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 = 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 = "3"; - this.topusers_user3_name.textContent = ""; - this.topusers_userdupe3_name.textContent = ""; - this.topusers_user3_score.textContent = "0000"; - } - - } - + } class ReconnectingWebSocket { @@ -371,7 +68,7 @@ class ReconnectingWebSocket { this.ws = new WebSocket(this.url); this.ws.onopen = () => { - console.log('WebSocket connected'); + console.log('WebSocket connecting'); this.attempt = 0; if (this.onopen != null) { this.onopen(); @@ -389,8 +86,9 @@ class ReconnectingWebSocket { if (this.closing) { console.log('Closing Websocket.') } { - console.warn('WebSocket closed. Reconnecting...'); - this.reconnect(); + console.warn('WebSocket closed. Reconnecting... (disabled for now)'); + //this.reconnect(); + //TODO turn that back on ^ } }; @@ -438,13 +136,11 @@ class ReconnectingWebSocket { } - - -function communicate(websocket) { +function communicate(websocket, book_bar) { console.log("Communicating"); const params = new URLSearchParams(window.location.search); - var renderer = new TimerRenderer(); - let timer; + // INITIALIZE CLASS HERE + book_bar.simProgress(); websocket.onopen = () => { websocket.send( @@ -456,11 +152,10 @@ function communicate(websocket) { } ) ); - renderer.reset(); - renderer.animate(); }; websocket.onmessage = ({ data }) => { + console.log("messaged"); const event = JSON.parse(data); switch (event.type) { case "DO": @@ -469,26 +164,18 @@ function communicate(websocket) { // Call the specified method switch (event.method) { case "setTimer": - if (timer == null) { - timer = new Timer(renderer, args); - } else { - timer.update_from_data(args); - } - timer.render(); - timer.tick(); + //do something with the new data + console.log("set timer: " + event); + book_bar.setProgress(event.reward_progress); break; case "noTimer": - if (timer != null) { - timer.destroying = true; - timer = null; - } - renderer.reset(); - renderer.animate(); + //do something default + console.log("no timer: " + event); + break; case "endTimer": - if (timer != null) { - timer.destroying = true; - timer = null; - } + //do something for the final time + console.log("end timer: " + event); + break default: throw new Error(`Unsupported method requested: ${event.method}.`) }