refreshing online stats every 10 seconds if prelobby page is visible

gulpfile.js

@@ -114,6 +114,7 @@ const refactoredSrc = [
   "./src/js/tribe/matchmaking.js",
   "./src/js/tribe/tribe-default-configs.js",
   "./src/js/tribe/tribe.js",
+  "./src/js/tribe/tribe-online-stats.js",
 
   "./src/js/account/all-time-stats.js",
   "./src/js/account/pb-tables.js",

src/js/tribe/tribe-online-stats.js

@@ -0,0 +1,22 @@
+import * as Tribe from "./tribe";
+
+export function showLoading() {
+  $(".pageTribe .prelobby .welcome .onlineStatsLoader").removeClass("hidden");
+}
+
+export function hideLoading() {
+  $(".pageTribe .prelobby .welcome .onlineStatsLoader").addClass("hidden");
+}
+
+export function refresh() {
+  showLoading();
+  Tribe.socket.emit("mp_get_online_stats");
+  if (
+    $(".pageTribe").hasClass("active") &&
+    !$(".pageTribe .prelobby").hasClass("hidden")
+  ) {
+    setTimeout(() => {
+      refresh();
+    }, 10000);
+  }
+}

src/js/tribe/tribe.js

@@ -13,6 +13,7 @@ import * as TestLogic from "./test-logic";
 import * as TestUI from "./test-ui";
 import * as Commandline from "./commandline";
 import * as CommandlineLists from "./commandline-lists";
+import * as OnlineStats from "./tribe-online-stats";
 import seedrandom from "seedrandom";
 
 export let state = -1;
@@ -101,7 +102,7 @@ function changeActiveSubpage(newPage) {
     250,
     () => {
       if (newPage === "prelobby") {
-        socket.emit("mp_get_online_stats");
+        OnlineStats.refresh();
       }
       if (newPage === "lobby") {
         $(".pageTribe .lobby .chat .input input").focus();
@@ -1000,6 +1001,7 @@ socket.on("mp_room_name_update", (data) => {
 });
 
 socket.on("mp_update_online_stats", (data) => {
+  OnlineStats.hideLoading();
   $(".pageTribe .prelobby .welcome .stats").empty();
   $(".pageTribe .prelobby .welcome .stats").append(
     `<div>Online <span class="num">${data.online}</span></div>`

src/sass/style.scss

@@ -3608,6 +3608,7 @@ key {
       grid-template-columns: 2fr 1fr;
       align-items: center;
       grid-area: welcome;
+      position: relative;
       .stats {
         justify-self: right;
         color: var(--sub-color);
@@ -3620,6 +3621,12 @@ key {
           line-height: 1.25rem;
         }
       }
+      .onlineStatsLoader {
+        position: absolute;
+        right: 0;
+        margin-right: -2rem;
+        color: var(--sub-color);
+      }
       .text {
         font-size: 2rem;
         color: var(--text-color);

static/index.html

@@ -3907,6 +3907,9 @@
                   <span style="color: var(--main-color)">Tribe</span>
                 </div>
                 <div class="stats"></div>
+                <div class="onlineStatsLoader hidden">
+                  <i class="fas fa-spin fa-circle-notch"></i>
+                </div>
               </div>
               <div class="matchmaking">
                 <!-- <div id="joinRandomRoom" class="button">Join random room</div> -->