diff --git a/src/js/tribe.js b/src/js/tribe.js
index 36349c754..81787fcc6 100644
--- a/src/js/tribe.js
+++ b/src/js/tribe.js
@@ -49,6 +49,9 @@ function mp_changeActiveSubpage(newPage) {
if (MP.pageTransition) return;
if (newPage === MP.activePage) return;
MP.pageTransition = true;
+ if (newPage === "prelobby") {
+ MP.socket.emit("mp_get_online_stats");
+ }
swapElements(
$(`.pageTribe .${MP.activePage}`),
$(`.pageTribe .${newPage}`),
@@ -460,6 +463,19 @@ MP.socket.on("connect", (f) => {
}, 250);
});
+MP.socket.on("mp_update_online_stats", (data) => {
+ $(".pageTribe .prelobby .welcome .stats").empty();
+ $(".pageTribe .prelobby .welcome .stats").append(
+ `
Online ${data.online}
`
+ );
+ $(".pageTribe .prelobby .welcome .stats").append(
+ `Active Races ${data.rooms}
`
+ );
+ $(".pageTribe .prelobby .welcome .stats").append(
+ `Version ${data.version}
`
+ );
+});
+
MP.socket.on("mp_update_name", (data) => {
MP.name = data.newName;
});
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 4ed9f0e88..905796638 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -2906,8 +2906,26 @@ key {
grid-template-columns: 1fr 1fr;
gap: 2rem;
.welcome {
- font-size: 2rem;
- color: var(--text-color);
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ align-items: center;
+ grid-area: welcome;
+ .stats {
+ justify-self: right;
+ color: var(--sub-color);
+ text-align: right;
+ .num {
+ color: var(--text-color);
+ }
+ .small {
+ font-size: 0.65rem;
+ line-height: 1.25rem;
+ }
+ }
+ .text {
+ font-size: 2rem;
+ color: var(--text-color);
+ }
}
.matchmaking {
grid-area: mm;
diff --git a/static/index.html b/static/index.html
index 751bcb8a5..cd30b5be9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3630,8 +3630,11 @@
- Welcome to
-
Tribe
+
+ Welcome to
+ Tribe
+
+