Homepage update & add 3 public lobbies (#3191)

## Description:

Update UI 
check https://homepageupdate.openfront.dev/ 

Improved mobile UI (now fills whole screen for all modals) e.g.:
<img width="432" height="852" alt="image"
src="https://github.com/user-attachments/assets/56de40af-4137-4c57-96b7-3910c9a665b8"
/>

Converted PublicLobby to be "GameModeSelector" to get a nicer 4x4 grid
div, where <GameModeSelector> now handles all the username validation
now (removed redundant code from modals such as matchmaking) also fixed
a bug where someone could have "[XX] X" as thier username (when the
minimum should be 3 chars for their name)

Now visually displays the 3 lobbies ffa/team/special (which is a
continuation from the work done in: #3196 )
<img width="818" height="563" alt="image"
src="https://github.com/user-attachments/assets/a15cd31b-6061-4fb8-83ee-ffde6225cfa7"
/>

updated the background:
<img width="1919" height="807" alt="image"
src="https://github.com/user-attachments/assets/358a7434-51b8-4540-baf2-d1be05053c44"
/>



slightly updated the glassy-look to be less glassy:
<img width="825" height="729" alt="image"
src="https://github.com/user-attachments/assets/1801871b-bbf8-43db-ac53-489337ae80a5"
/>



## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

src/client/Matchmaking.ts

@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 import { UserMeResponse } from "../core/ApiSchemas";
 import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
 import { getUserMe, hasLinkedAccount } from "./Api";
@@ -18,7 +18,7 @@ export class MatchmakingModal extends BaseModal {
   @state() private connected = false;
   @state() private socket: WebSocket | null = null;
   @state() private gameID: string | null = null;
-  private elo: number | "unknown" = "unknown";
+  private elo: number | string = "...";
 
   constructor() {
     super();
@@ -37,14 +37,10 @@ export class MatchmakingModal extends BaseModal {
     `;
 
     const content = html`
-      <div
-        class="h-full flex flex-col ${this.inline
-          ? "bg-black/60 backdrop-blur-md rounded-2xl border border-white/10"
-          : ""}"
-      >
+      <div class="${this.modalContainerClass}">
         ${modalHeader({
           title: translateText("matchmaking_modal.title"),
-          onBack: this.close,
+          onBack: () => this.close(),
           ariaLabel: translateText("common.back"),
         })}
         <div class="flex-1 flex flex-col items-center justify-center gap-6 p-6">
@@ -71,39 +67,21 @@ export class MatchmakingModal extends BaseModal {
 
   private renderInner() {
     if (!this.connected) {
-      return html`
-        <div class="flex flex-col items-center gap-4">
-          <div
-            class="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"
-          ></div>
-          <p class="text-center text-white/80">
-            ${translateText("matchmaking_modal.connecting")}
-          </p>
-        </div>
-      `;
+      return this.renderLoadingSpinner(
+        translateText("matchmaking_modal.connecting"),
+        "blue",
+      );
     }
     if (this.gameID === null) {
-      return html`
-        <div class="flex flex-col items-center gap-4">
-          <div
-            class="w-12 h-12 border-4 border-green-500/30 border-t-green-500 rounded-full animate-spin"
-          ></div>
-          <p class="text-center text-white/80">
-            ${translateText("matchmaking_modal.searching")}
-          </p>
-        </div>
-      `;
+      return this.renderLoadingSpinner(
+        translateText("matchmaking_modal.searching"),
+        "green",
+      );
     } else {
-      return html`
-        <div class="flex flex-col items-center gap-4">
-          <div
-            class="w-12 h-12 border-4 border-yellow-500/30 border-t-yellow-500 rounded-full animate-spin"
-          ></div>
-          <p class="text-center text-white/80">
-            ${translateText("matchmaking_modal.waiting_for_game")}
-          </p>
-        </div>
-      `;
+      return this.renderLoadingSpinner(
+        translateText("matchmaking_modal.waiting_for_game"),
+        "yellow",
+      );
     }
   }
 
@@ -177,7 +155,9 @@ export class MatchmakingModal extends BaseModal {
       return;
     }
 
-    this.elo = userMe.player.leaderboard?.oneVone?.elo ?? "unknown";
+    this.elo =
+      userMe.player.leaderboard?.oneVone?.elo ??
+      translateText("matchmaking_modal.no_elo");
 
     this.connected = false;
     this.gameID = null;
@@ -241,7 +221,6 @@ export class MatchmakingModal extends BaseModal {
 
 @customElement("matchmaking-button")
 export class MatchmakingButton extends LitElement {
-  @query("matchmaking-modal") private matchmakingModal?: MatchmakingModal;
   @state() private isLoggedIn = false;
 
   constructor() {
@@ -281,7 +260,6 @@ export class MatchmakingButton extends LitElement {
               ${translateText("matchmaking_button.description")}
             </span>
           </button>
-          <matchmaking-modal></matchmaking-modal>
         `
       : html`
           <button
@@ -296,35 +274,10 @@ export class MatchmakingButton extends LitElement {
   }
 
   private handleLoggedInClick() {
-    const usernameInput = document.querySelector("username-input") as any;
-    const publicLobby = document.querySelector("public-lobby") as any;
-
-    if (usernameInput?.isValid()) {
-      this.open();
-      publicLobby?.leaveLobby();
-    } else {
-      window.dispatchEvent(
-        new CustomEvent("show-message", {
-          detail: {
-            message: usernameInput?.validationError,
-            color: "red",
-            duration: 3000,
-          },
-        }),
-      );
-    }
+    document.dispatchEvent(new CustomEvent("open-matchmaking"));
   }
 
   private handleLoggedOutClick() {
     window.showPage?.("page-account");
   }
-
-  public open() {
-    this.matchmakingModal?.open();
-  }
-
-  public close() {
-    this.matchmakingModal?.close();
-    this.requestUpdate();
-  }
 }