diff --git a/src/js/elements/leaderboards.js b/src/js/elements/leaderboards.js index c49ccee46..95574e0a5 100644 --- a/src/js/elements/leaderboards.js +++ b/src/js/elements/leaderboards.js @@ -2,6 +2,7 @@ import * as Loader from "./loader"; import * as Notifications from "./notifications"; import * as DB from "./db"; import axiosInstance from "./axios-instance"; +import * as Misc from "./misc"; let currentLeaderboard = "time_15"; @@ -30,6 +31,7 @@ export function hide() { clearTable(15); clearTable(60); reset(); + stopTimer(); $("#leaderboardsWrapper").addClass("hidden"); } ); @@ -307,6 +309,7 @@ export function show() { 125, () => { update(); + startTimer(); } ); } @@ -328,6 +331,30 @@ function hideLoader(lb) { } } +let updateTimer; +function startTimer() { + updateTimerElement(); + updateTimer = setInterval(() => { + updateTimerElement(); + }, 1000); +} + +function updateTimerElement() { + let date = new Date(); + let minutesToNextUpdate = 4 - (date.getMinutes() % 5); + let secondsToNextUpdate = 60 - date.getSeconds(); + let totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate; + $("#leaderboards .subTitle").text( + "Next update in: " + Misc.secondsToString(totalSeconds, true) + ); +} + +function stopTimer() { + clearInterval(updateTimer); + updateTimer = undefined; + $("#leaderboards .subTitle").text("Next update in: --:--"); +} + $("#leaderboardsWrapper").click((e) => { if ($(e.target).attr("id") === "leaderboardsWrapper") { hide(); diff --git a/src/sass/style.scss b/src/sass/style.scss index cfdcfc804..045e1283f 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -414,6 +414,10 @@ a:hover { grid-area: title; } + .subTitle { + color: var(--sub-color); + } + .title { font-size: 2rem; line-height: 2rem; diff --git a/static/index.html b/static/index.html index 740f68784..c242643ff 100644 --- a/static/index.html +++ b/static/index.html @@ -379,6 +379,7 @@
Leaderboards
+
Next update in: --:--