From 5fe10bcb4d92b1cb13689d81074fe30947208fc4 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Wed, 7 Apr 2021 21:41:52 +0100
Subject: [PATCH] refreshing online stats every 10 seconds if prelobby page is
 visible

---
 gulpfile.js                        |  1 +
 src/js/tribe/tribe-online-stats.js | 22 ++++++++++++++++++++++
 src/js/tribe/tribe.js              |  4 +++-
 src/sass/style.scss                |  7 +++++++
 static/index.html                  |  3 +++
 5 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/js/tribe/tribe-online-stats.js

diff --git a/gulpfile.js b/gulpfile.js
index 4cc60c417..e66f96313 100644
--- a/gulpfile.js
+++ b/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",
diff --git a/src/js/tribe/tribe-online-stats.js b/src/js/tribe/tribe-online-stats.js
new file mode 100644
index 000000000..bedb6bc04
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/js/tribe/tribe.js b/src/js/tribe/tribe.js
index 2e613b5e0..8b219c575 100644
--- a/src/js/tribe/tribe.js
+++ b/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>`
diff --git a/src/sass/style.scss b/src/sass/style.scss
index b5752e487..cb259c68b 100644
--- a/src/sass/style.scss
+++ b/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);
diff --git a/static/index.html b/static/index.html
index 2d3934fe3..4693485fc 100644
--- a/static/index.html
+++ b/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> -->