From a27c48b98a84dd3bdd9e545413610d8f267372ff Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Sun, 11 Apr 2021 23:58:24 +0100
Subject: [PATCH] showing stats for races, waiting and private races, prelobby
 media queries

---
 src/js/tribe/tribe-online-stats.js | 18 ++++++--
 src/js/tribe/tribe.js              |  4 +-
 src/sass/style.scss                | 70 +++++++++++++++++++++++++-----
 static/index.html                  | 27 +++++++++---
 4 files changed, 95 insertions(+), 24 deletions(-)

diff --git a/src/js/tribe/tribe-online-stats.js b/src/js/tribe/tribe-online-stats.js
index 964e865b8..0a5a91da3 100644
--- a/src/js/tribe/tribe-online-stats.js
+++ b/src/js/tribe/tribe-online-stats.js
@@ -32,12 +32,24 @@ export function setInQueue(newNum) {
 export function updateQueueButtons() {
   let buttons = $(".pageTribe .prelobby .matchmaking .buttons .button");
   inQueueNumbers.forEach((num, index) => {
-    $(buttons[index])
-      .find(".subtext")
-      .text("In queue: " + num);
+    $(buttons[index]).find(".subtext .waiting").text(`Waiting: ${num}`);
+    // .html(`
+    // <div class='races'>Races: 0</div>
+    // <div class='waiting'></div>
+    // `);
   });
 }
 
+export function updateRaces(races) {
+  let buttons = $(".pageTribe .prelobby .matchmaking .buttons .button");
+  races.public.forEach((num, index) => {
+    $(buttons[index]).find(".subtext .races").text(`Races: ${num}`);
+  });
+  $(
+    ".pageTribe .prelobby .privateRooms #createPrivateRoom .subtext .rooms"
+  ).text(`Rooms: ${races.private}`);
+}
+
 export function refresh() {
   showLoading();
   Tribe.socket.emit("mp_get_online_stats");
diff --git a/src/js/tribe/tribe.js b/src/js/tribe/tribe.js
index 578d99bd4..a4b6fb128 100644
--- a/src/js/tribe/tribe.js
+++ b/src/js/tribe/tribe.js
@@ -1003,13 +1003,11 @@ socket.on("mp_room_name_update", (data) => {
 socket.on("mp_update_online_stats", (data) => {
   OnlineStats.hideLoading();
   OnlineStats.setInQueue(data[2]);
+  OnlineStats.updateRaces(data[1]);
   $(".pageTribe .prelobby .welcome .stats").empty();
   $(".pageTribe .prelobby .welcome .stats").append(
     `<div>Online <span class="num">${data[0]}</span></div>`
   );
-  $(".pageTribe .prelobby .welcome .stats").append(
-    `<div>Active Races <span class="num">${data[1]}</span></div>`
-  );
   $(".pageTribe .prelobby .welcome .stats").append(
     `<div class="small">Version ${data[3]}</div>`
   );
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 590cd0e81..6f9802a80 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -3636,7 +3636,7 @@ key {
       grid-area: mm;
       display: grid;
       gap: 1rem;
-      grid-template-rows: auto 2.4fr 1fr auto;
+      grid-template-rows: auto 2fr auto;
       .title,
       .subtitle {
         color: var(--sub-color);
@@ -3649,6 +3649,7 @@ key {
           display: grid;
           gap: 0.25rem;
           height: 100%;
+          padding: 1rem;
           .icon {
             font-size: 1.5rem;
             line-height: 1.5rem;
@@ -3671,12 +3672,24 @@ key {
       grid-area: priv;
       display: grid;
       gap: 1rem;
-      grid-template-rows: auto auto auto 1fr;
+      grid-template-rows: auto 2fr auto;
       .title {
         color: var(--sub-color);
       }
       #createPrivateRoom {
-        padding: 2.4rem 0;
+        height: 100%;
+        padding: 1rem;
+        display: grid;
+        gap: 0.25rem;
+        .icon {
+          font-size: 1.5rem;
+          line-height: 1.5rem;
+        }
+        .subtext {
+          opacity: 0.5;
+          font-size: 0.75rem;
+          line-height: 0.75rem;
+        }
       }
     }
     #joinByCode {
@@ -4305,10 +4318,15 @@ key {
     .matchmaking .buttons {
       grid-template-columns: 1fr 1fr;
       .button {
-        grid-template-columns: 1fr auto;
+        padding: 1rem;
+        grid-template-rows: 1fr;
+        grid-template-columns: auto auto 1fr;
         align-items: center;
+        .subtext {
+          text-align: right;
+        }
         .icon {
-          display: none;
+          // display: none;
           font-size: 1rem;
           line-height: 1rem;
         }
@@ -4320,13 +4338,19 @@ key {
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 850px) {
   .pageTribe .prelobby {
-    grid-template-areas:
-      "welcome welcome"
-      "mm mm"
-      "priv priv";
+    grid-template-columns: 2fr 1fr;
+    .matchmaking .buttons {
+      grid-template-columns: 1fr;
+    }
+    #joinByCode .customInput {
+      font-size: 1rem;
+    }
   }
+}
+
+@media only screen and (max-width: 800px) {
   #centerContent {
     #top {
       grid-template-areas:
@@ -4355,8 +4379,30 @@ key {
 }
 
 @media only screen and (max-width: 650px) {
-  .pageTribe .prelobby .matchmaking .buttons {
-    grid-template-columns: 1fr;
+  .pageTribe .prelobby {
+    grid-template-areas:
+      "welcome welcome"
+      "mm mm"
+      "priv priv";
+  }
+  .pageTribe .prelobby {
+    .privateRooms #createPrivateRoom {
+      padding: 1rem;
+      grid-template-rows: 1fr;
+      grid-template-columns: auto auto 1fr;
+      align-items: center;
+      .subtext {
+        text-align: right;
+      }
+      .icon {
+        // display: none;
+        font-size: 1rem;
+        line-height: 1rem;
+      }
+    }
+    #joinByCode .customInput {
+      font-size: 1.25rem;
+    }
   }
   .pageSettings .section {
     grid-template-columns: 1fr;
diff --git a/static/index.html b/static/index.html
index 60355c439..a084f9f79 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3918,22 +3918,34 @@
                   <div class="button active" queue="0">
                     <div class="icon"><i class="fas fa-clock"></i></div>
                     <div class="text">Time 15</div>
-                    <div class="subtext">In queue: 0</div>
+                    <div class="subtext">
+                      <div class="races">Races: 0</div>
+                      <div class="waiting">Waiting: 0</div>
+                    </div>
                   </div>
                   <div class="button active" queue="1">
                     <div class="icon"><i class="fas fa-clock"></i></div>
                     <div class="text">Time 60</div>
-                    <div class="subtext">In queue: 0</div>
+                    <div class="subtext">
+                      <div class="races">Races: 0</div>
+                      <div class="waiting">Waiting: 0</div>
+                    </div>
                   </div>
                   <div class="button active" queue="2">
                     <div class="icon"><i class="fas fa-quote-right"></i></div>
                     <div class="text">Medium Quotes</div>
-                    <div class="subtext">In queue: 0</div>
+                    <div class="subtext">
+                      <div class="races">Races: 0</div>
+                      <div class="waiting">Waiting: 0</div>
+                    </div>
                   </div>
                   <div class="button active" queue="3">
                     <div class="icon"><i class="fas fa-quote-right"></i></div>
                     <div class="text">Long Quotes</div>
-                    <div class="subtext">In queue: 0</div>
+                    <div class="subtext">
+                      <div class="races">Races: 0</div>
+                      <div class="waiting">Waiting: 0</div>
+                    </div>
                   </div>
                 </div>
                 <div class="button startMatchmakingButton">
@@ -3958,8 +3970,11 @@
               <div class="privateRooms">
                 <div class="title">private rooms</div>
                 <div id="createPrivateRoom" class="button">
-                  <i class="fas fa-users"></i>
-                  Create room
+                  <div class="icon"><i class="fas fa-users"></i></div>
+                  <div class="text">Create room</div>
+                  <div class="subtext">
+                    <div class="rooms">Rooms: 0</div>
+                  </div>
                 </div>
                 <div id="joinByCode">
                   <div class="customInput">