From c4cc44522ee36b3c5adacc345e02081cd282de79 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 1 Jan 2026 21:26:41 +0100
Subject: [PATCH] use button element

---
 frontend/src/html/pages/tribe.html            | 28 +++++++++----------
 frontend/src/styles/tribe.scss                |  8 +++---
 .../src/ts/tribe/pages/tribe-page-menu.ts     | 12 ++++----
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/frontend/src/html/pages/tribe.html b/frontend/src/html/pages/tribe.html
index 971bf78c7..0f105bde5 100644
--- a/frontend/src/html/pages/tribe.html
+++ b/frontend/src/html/pages/tribe.html
@@ -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">
diff --git a/frontend/src/styles/tribe.scss b/frontend/src/styles/tribe.scss
index 0649a8601..70c721f7e 100644
--- a/frontend/src/styles/tribe.scss
+++ b/frontend/src/styles/tribe.scss
@@ -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;
diff --git a/frontend/src/ts/tribe/pages/tribe-page-menu.ts b/frontend/src/ts/tribe/pages/tribe-page-menu.ts
index 47019d64b..28e948746 100644
--- a/frontend/src/ts/tribe/pages/tribe-page-menu.ts
+++ b/frontend/src/ts/tribe/pages/tribe-page-menu.ts
@@ -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));