monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-29 03:20:46 +08:00
Code Issues Projects Releases Packages Wiki Activity

showing stats for races, waiting and private races,

Browse source 
prelobby media queries
This commit is contained in:
Jack 2021-04-11 23:58:24 +01:00
parent f91e6e4954
commit a27c48b98a
4 changed files with 95 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/js/tribe/tribe-online-stats.js
View file

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

4
src/js/tribe/tribe.js
View file

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

70
src/sass/style.scss
View file

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

27
static/index.html
View file

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