Fix: incorrect Duos Trios Quads texts + display teams in one box (#2632)

## Description:

- **Fix wrong Duos Trios Quads text in SP and Private Lobby modals:** PR
#2591 overwrote translations for public_lobby.teams_Duos , teams_Trios
and teams_Quads. But those translation keys are not only used in Public
Lobby, they are also used for the Single player and Private Lobby
modals. Where they are displayed in a slightly different context, making
the new translations appear off. Fix: add seperate translation keys and
restore old strings.

- **One box for team text in Public Lobby:** display number of teams and
team size in one block instead of two seperate blocks. It is agreed upon
also by evan that one block would look better:
https://discord.com/channels/1359946986937258015/1360078040222142564/1449498245817569502

--BEFORE:--
<img width="816" height="272" alt="Before in public lobby seperated
boxes"
src="https://github.com/user-attachments/assets/ddf7b425-4664-4f23-9d8c-7a859d6aea36"
/>

<img width="797" height="256" alt="Before in public lobby seperated
boxes and with change in translation of PR 2591 visible"
src="https://github.com/user-attachments/assets/f49c8fec-5de5-42d9-88fb-ed0ccb3951ea"
/>

<img width="1091" height="282" alt="Before naming of Duos Trios Quads
incorrect in SP and private lobby modal after changes in PR 2591"
src="https://github.com/user-attachments/assets/9c4d45b5-8db6-44b9-b2db-379a2c97e4d5"
/>

--AFTER:--
<img width="911" height="297" alt="After in public lobby now one box for
Team games"
src="https://github.com/user-attachments/assets/28a1c30b-3f0d-4484-bf12-4281435072c1"
/>

<img width="807" height="248" alt="After in public lobby now one box for
Team games Quads example"
src="https://github.com/user-attachments/assets/7cb54246-8d0a-410a-9e44-1f8cc15a2978"
/>

<img width="912" height="297" alt="After in public lobby still same for
other game modes"
src="https://github.com/user-attachments/assets/4dab6234-81fe-426d-82d1-c478d672673e"
/>

<img width="1115" height="622" alt="After naming of num teams for Duos
Trios Quads corrected Private lobby modal"
src="https://github.com/user-attachments/assets/c2622c4e-1cfd-40f9-b0ed-8ff1d437d72d"
/>

<img width="1163" height="582" alt="After naming of num teams for Duos
Trios Quads corrected"
src="https://github.com/user-attachments/assets/98fdfa22-70a8-4820-96fa-7b1df991e3ff"
/>


## 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:

tryout33

resources/lang/en.json

@@ -292,7 +292,10 @@
     "assigned_teams": "Assigned Teams",
     "empty_teams": "Empty Teams",
     "empty_team": "Empty",
-    "remove_player": "Remove {username}"
+    "remove_player": "Remove {username}",
+    "teams_Duos": "Duos (teams of 2)",
+    "teams_Trios": "Trios (teams of 3)",
+    "teams_Quads": "Quads (teams of 4)"
   },
   "team_colors": {
     "red": "Red",

src/client/HostLobbyModal.ts

@@ -312,7 +312,7 @@ export class HostLobbyModal extends LitElement {
                               ${typeof o === "string"
                                 ? o === HumansVsNations
                                   ? translateText("public_lobby.teams_hvn")
-                                  : translateText(`public_lobby.teams_${o}`)
+                                  : translateText(`host_modal.teams_${o}`)
                                 : translateText("public_lobby.teams", {
                                     num: o,
                                   })}

src/client/PublicLobby.ts

@@ -143,6 +143,11 @@ export class PublicLobby extends LitElement {
       teamTotal,
       teamSize,
     );
+
+    const fullModeLabel = teamDetailLabel
+      ? `${modeLabel} ${teamDetailLabel}`
+      : modeLabel;
+
     const mapImageSrc = this.mapImages.get(lobby.gameID);
 
     return html`
@@ -176,14 +181,8 @@ export class PublicLobby extends LitElement {
             </div>
             <div class="text-md font-medium text-white-400">
               <span class="text-sm text-red-800 bg-white rounded-sm px-1 mr-1"
-                >${modeLabel}</span
+                >${fullModeLabel}</span
               >
-              ${teamDetailLabel
-                ? html`<span
-                    class="text-sm text-red-800 bg-white rounded-sm px-1 ml-1"
-                    >${teamDetailLabel}</span
-                  >`
-                : ""}
               <span
                 >${translateText(
                   `map.${lobby.gameConfig.gameMap.toLowerCase().replace(/[\s.]+/g, "")}`,

src/client/SinglePlayerModal.ts

@@ -220,7 +220,7 @@ export class SinglePlayerModal extends LitElement {
                             ${typeof o === "string"
                               ? o === HumansVsNations
                                 ? translateText("public_lobby.teams_hvn")
-                                : translateText(`public_lobby.teams_${o}`)
+                                : translateText(`host_modal.teams_${o}`)
                               : translateText(`public_lobby.teams`, { num: o })}
                           </div>
                         </div>