monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-02 21:44:06 +08:00
Code Issues Projects Releases Packages Wiki Activity

added stats to the prelobby

Browse source
This commit is contained in:
Miodec 2021-01-21 04:48:45 +00:00
parent 050b0c3ce7
commit 537aa1e967
3 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/js/tribe.js
View file

@ -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(
`<div>Online <span class="num">${data.online}</span></div>`
);
$(".pageTribe .prelobby .welcome .stats").append(
`<div>Active Races <span class="num">${data.rooms}</span></div>`
);
$(".pageTribe .prelobby .welcome .stats").append(
`<div class="small">Version ${data.version}</div>`
);
});
MP.socket.on("mp_update_name", (data) => {
MP.name = data.newName;
});

22
src/sass/style.scss
View file

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

7
static/index.html
View file

@ -3630,8 +3630,11 @@
<div class="prelobby hidden">
<div class="welcome">
Welcome to
<span style="color: var(--main-color)">Tribe</span>
<div class="text">
Welcome to
<span style="color: var(--main-color)">Tribe</span>
</div>
<div class="stats"></div>
</div>
<div class="matchmaking">
<!-- <div id="joinRandomRoom" class="button">Join random room</div> -->