Quads (#1347)

## Description:

- Add trios and quads
- Add translations for duos, trios, quads
- Add duos, trios, quads to the public lobby rotation
- Increase the frequency of team games


![image](https://github.com/user-attachments/assets/a7bac4e7-9db2-486d-87bc-5779dd64da08)

![image](https://github.com/user-attachments/assets/c1b9225e-2193-4776-b97f-be01a1bdeeed)

## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

src/client/HostLobbyModal.ts

@@ -8,10 +8,12 @@ import {
   Duos,
   GameMapType,
   GameMode,
+  Quads,
+  Trios,
   UnitType,
   mapCategories,
 } from "../core/game/Game";
-import { GameConfig, GameInfo } from "../core/Schemas";
+import { GameConfig, GameInfo, TeamCountConfig } from "../core/Schemas";
 import { generateID } from "../core/Util";
 import "./components/baseComponents/Modal";
 import "./components/Difficulties";
@@ -30,7 +32,7 @@ export class HostLobbyModal extends LitElement {
   @state() private selectedDifficulty: Difficulty = Difficulty.Medium;
   @state() private disableNPCs = false;
   @state() private gameMode: GameMode = GameMode.FFA;
-  @state() private teamCount: number | typeof Duos = 2;
+  @state() private teamCount: TeamCountConfig = 2;
   @state() private bots: number = 400;
   @state() private infiniteGold: boolean = false;
   @state() private infiniteTroops: boolean = false;
@@ -196,7 +198,7 @@ export class HostLobbyModal extends LitElement {
                       ${translateText("host_modal.team_count")}
                     </div>
                     <div class="option-cards">
-                      ${[Duos, 2, 3, 4, 5, 6, 7].map(
+                      ${[2, 3, 4, 5, 6, 7, Quads, Trios, Duos].map(
                         (o) => html`
                           <div
                             class="option-card ${this.teamCount === o
@@ -204,7 +206,13 @@ export class HostLobbyModal extends LitElement {
                               : ""}"
                             @click=${() => this.handleTeamCountSelection(o)}
                           >
-                            <div class="option-card-title">${o}</div>
+                            <div class="option-card-title">
+                              ${typeof o === "string"
+                                ? translateText(`public_lobby.teams_${o}`)
+                                : translateText("public_lobby.teams", {
+                                    num: o,
+                                  })}
+                            </div>
                           </div>
                         `,
                       )}
@@ -465,8 +473,8 @@ export class HostLobbyModal extends LitElement {
     this.putGameConfig();
   }
 
-  private async handleTeamCountSelection(value: number | typeof Duos) {
-    this.teamCount = value === Duos ? Duos : Number(value);
+  private async handleTeamCountSelection(value: TeamCountConfig) {
+    this.teamCount = value;
     this.putGameConfig();
   }
 

src/client/PublicLobby.ts

@@ -151,7 +151,11 @@ export class PublicLobby extends LitElement {
                   : "text-blue-600"} bg-white rounded-sm px-1"
               >
                 ${lobby.gameConfig.gameMode === GameMode.Team
-                  ? translateText("public_lobby.teams", { num: teamCount ?? 0 })
+                  ? typeof teamCount === "string"
+                    ? translateText(`public_lobby.teams_${teamCount}`)
+                    : translateText("public_lobby.teams", {
+                        num: teamCount ?? 0,
+                      })
                   : translateText("game_mode.ffa")}</span
               >
               <span

src/client/SinglePlayerModal.ts

@@ -8,10 +8,13 @@ import {
   GameMapType,
   GameMode,
   GameType,
+  Quads,
+  Trios,
   UnitType,
   mapCategories,
 } from "../core/game/Game";
 import { UserSettings } from "../core/game/UserSettings";
+import { TeamCountConfig } from "../core/Schemas";
 import { generateID } from "../core/Util";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
@@ -38,7 +41,7 @@ export class SinglePlayerModal extends LitElement {
   @state() private instantBuild: boolean = false;
   @state() private useRandomMap: boolean = false;
   @state() private gameMode: GameMode = GameMode.FFA;
-  @state() private teamCount: number | typeof Duos = 2;
+  @state() private teamCount: TeamCountConfig = 2;
 
   @state() private disabledUnits: UnitType[] = [UnitType.Factory];
 
@@ -171,7 +174,7 @@ export class SinglePlayerModal extends LitElement {
                     ${translateText("host_modal.team_count")}
                   </div>
                   <div class="option-cards">
-                    ${["Duos", 2, 3, 4, 5, 6, 7].map(
+                    ${[2, 3, 4, 5, 6, 7, Quads, Trios, Duos].map(
                       (o) => html`
                         <div
                           class="option-card ${this.teamCount === o
@@ -179,7 +182,11 @@ export class SinglePlayerModal extends LitElement {
                             : ""}"
                           @click=${() => this.handleTeamCountSelection(o)}
                         >
-                          <div class="option-card-title">${o}</div>
+                          <div class="option-card-title">
+                            ${typeof o === "string"
+                              ? translateText(`public_lobby.teams_${o}`)
+                              : translateText(`public_lobby.teams`, { num: o })}
+                          </div>
                         </div>
                       `,
                     )}
@@ -358,8 +365,8 @@ export class SinglePlayerModal extends LitElement {
     this.gameMode = value;
   }
 
-  private handleTeamCountSelection(value: number | string) {
-    this.teamCount = value === "Duos" ? Duos : Number(value);
+  private handleTeamCountSelection(value: TeamCountConfig) {
+    this.teamCount = value;
   }
 
   private getRandomMap(): GameMapType {