added timer to next update

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();

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;

static/index.html

@@ -379,6 +379,7 @@
       <div id="leaderboards">
         <div class="leaderboardsTop">
           <div class="mainTitle">Leaderboards</div>
+          <div class="subTitle">Next update in: --:--</div>
           <!-- <div class="buttons">
             <div class="buttonGroup">
               <div class="button active" board="time_15">time 15</div>