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 @@