monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-13 10:54:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

use button element

Browse source
This commit is contained in:
Miodec 2026-01-01 21:26:41 +01:00
parent 3fc52d2497
commit c4cc44522e
3 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/html/pages/tribe.html
View file

@ -22,38 +22,38 @@
<!-- <div id="joinRandomRoom" class="button">Join random room</div> -->
<div class="title">matchmaking</div>
<div class="buttons">
<div class="button" queue="0">
<button queue="0">
<div class="icon"><i class="fas fa-clock"></i></div>
<div class="text">Time 15</div>
<div class="subtext">
<div class="races">Races: 0</div>
<div class="waiting">Waiting: 0</div>
</div>
</div>
<div class="button" queue="1">
</button>
<button queue="1">
<div class="icon"><i class="fas fa-clock"></i></div>
<div class="text">Time 60</div>
<div class="subtext">
<div class="races">Races: 0</div>
<div class="waiting">Waiting: 0</div>
</div>
</div>
<div class="button" queue="2">
</button>
<button queue="2">
<div class="icon"><i class="fas fa-quote-right"></i></div>
<div class="text">Medium Quotes</div>
<div class="subtext">
<div class="races">Races: 0</div>
<div class="waiting">Waiting: 0</div>
</div>
</div>
<div class="button" queue="3">
</button>
<button queue="3">
<div class="icon"><i class="fas fa-quote-right"></i></div>
<div class="text">Long Quotes</div>
<div class="subtext">
<div class="races">Races: 0</div>
<div class="waiting">Waiting: 0</div>
</div>
</div>
</button>
</div>
<div class="button startMatchmakingButton disabled">
<i class="fas fa-times"></i>
@ -78,25 +78,25 @@
<div class="customRooms">
<div class="title">custom rooms</div>
<div class="buttons">
<div id="createCustomRoom" class="button">
<button id="createCustomRoom">
<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="browseCustomRooms" class="button">
</button>
<button id="browseCustomRooms">
<div class="icon"><i class="fas fa-list"></i></div>
<div class="text">Browse public rooms</div>
<div class="subtext">
<div class="rooms">Rooms: 0</div>
</div>
</div>
<div id="enterRoomCode" class="button">
</button>
<button id="enterRoomCode">
<div class="icon"><i class="fas fa-code"></i></div>
<div class="text">Enter code</div>
<div class="subtext">Join using a room code</div>
</div>
</button>
</div>
<!-- <div id="joinByCode">
<div class="customInput">

8
frontend/src/styles/tribe.scss
View file

@ -81,7 +81,7 @@
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
.button {
button {
display: grid;
gap: 0.25rem;
height: 100%;
@ -97,7 +97,7 @@
}
}
}
.button {
button {
padding: 0.7rem 0.7rem;
}
.leaveMatchmakingButton {
@ -116,7 +116,7 @@
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
.button {
button {
height: 100%;
padding: 1rem;
display: grid;
@ -138,7 +138,7 @@
grid-auto-flow: column;
grid-template-columns: 2fr 1fr;
gap: 1rem;
.button {
button {
padding: 0.7rem;
i {
margin: 0;

12
frontend/src/ts/tribe/pages/tribe-page-menu.ts
View file

@ -5,14 +5,14 @@ import { getTribeConfig } from "../tribe-config";
export const queues = [false, false, false, false];
export function disableButtons(): void {
$(".pageTribe .menu .matchmaking .buttons .button").addClass("disabled");
$(".pageTribe .menu .customRooms .button").addClass("disabled");
$(".pageTribe .menu .matchmaking .buttons button").addClass("disabled");
$(".pageTribe .menu .customRooms button").addClass("disabled");
$(".pageTribe .menu .customRooms .customInput").addClass("disabled");
}
export function enableButtons(): void {
$(".pageTribe .menu .matchmaking .buttons .button").removeClass("disabled");
$(".pageTribe .menu .customRooms .button").removeClass("disabled");
$(".pageTribe .menu .matchmaking .buttons button").removeClass("disabled");
$(".pageTribe .menu .customRooms button").removeClass("disabled");
$(".pageTribe .menu .customRooms .customInput").removeClass("disabled");
}
@ -41,7 +41,7 @@ function toggleQueue(queue: number): void {
}
function refreshQueueButtons(): void {
const buttons = $(".pageTribe .menu .matchmaking .buttons .button");
const buttons = $(".pageTribe .menu .matchmaking .buttons button");
buttons.removeClass("active");
@ -108,7 +108,7 @@ $(".pageTribe .menu .devRoom").on("click", (e) => {
tribeSocket.out.dev?.room();
});
$(".pageTribe .menu .matchmaking .buttons .button").on("click", (e) => {
$(".pageTribe .menu .matchmaking .buttons button").on("click", (e) => {
if ($(e.currentTarget).hasClass("disabled")) return;
const queue = $(e.currentTarget).attr("queue") as string;
toggleQueue(parseInt(queue));