Fix public lobby team labels with team_count placeholder (#2677)

## Description:

Add {team_count} to public lobby team size translations so word order
stays correct across languages.

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

aotumuri

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>

resources/lang/en.json

@@ -274,11 +274,11 @@
   "public_lobby": {
     "join": "Join next Game",
     "waiting": "players waiting",
+    "teams_Duos": "{team_count} of 2 (Duos)",
+    "teams_Trios": "{team_count} of 3 (Trios)",
+    "teams_Quads": "{team_count} of 4 (Quads)",
     "waiting_for_players": "Waiting for players",
     "starting_game": "Starting game…",
-    "teams_Duos": "of 2 (Duos)",
-    "teams_Trios": "of 3 (Trios)",
-    "teams_Quads": "of 4 (Quads)",
     "teams_hvn": "Humans vs Nations",
     "teams_hvn_detailed": "{num} Humans vs {num} Nations",
     "teams": "{num} teams",

src/client/PublicLobby.ts

@@ -97,16 +97,21 @@ export class PublicLobby extends LitElement {
       teamTotal,
       teamSize,
     );
-    const teamDetailLabel = this.getTeamDetailLabel(
-      lobby.gameConfig.gameMode,
-      teamCount,
-      teamTotal,
-      teamSize,
-    );
+    // True when the detail label already includes the full mode text.
+    const { label: teamDetailLabel, isFullLabel: isTeamDetailFullLabel } =
+      this.getTeamDetailLabel(
+        lobby.gameConfig.gameMode,
+        teamCount,
+        teamTotal,
+        teamSize,
+      );
 
-    const fullModeLabel = teamDetailLabel
-      ? `${modeLabel} ${teamDetailLabel}`
-      : modeLabel;
+    let fullModeLabel = modeLabel;
+    if (teamDetailLabel) {
+      fullModeLabel = isTeamDetailFullLabel
+        ? teamDetailLabel
+        : `${modeLabel} ${teamDetailLabel}`;
+    }
 
     const mapImageSrc = this.mapImages.get(lobby.gameID);
 
@@ -253,24 +258,37 @@ export class PublicLobby extends LitElement {
     teamCount: number | string | null,
     teamTotal: number | undefined,
     teamSize: number | undefined,
-  ): string | null {
-    if (gameMode !== GameMode.Team) return null;
+  ): { label: string | null; isFullLabel: boolean } {
+    if (gameMode !== GameMode.Team) {
+      return { label: null, isFullLabel: false };
+    }
 
     if (typeof teamCount === "string" && teamCount === HumansVsNations) {
-      return null;
+      return { label: null, isFullLabel: false };
     }
 
     if (typeof teamCount === "string") {
       const teamKey = `public_lobby.teams_${teamCount}`;
-      const maybeTranslated = translateText(teamKey);
-      if (maybeTranslated !== teamKey) return maybeTranslated;
+      // translateText returns the key when a translation is missing.
+      const maybeTranslated = translateText(teamKey, {
+        team_count: teamTotal ?? 0,
+      });
+      if (maybeTranslated !== teamKey) {
+        return { label: maybeTranslated, isFullLabel: true };
+      }
     }
 
     if (teamTotal !== undefined && teamSize !== undefined) {
-      return translateText("public_lobby.players_per_team", { num: teamSize });
+      // Fallback when there's no specific team label translation.
+      return {
+        label: translateText("public_lobby.players_per_team", {
+          num: teamSize,
+        }),
+        isFullLabel: false,
+      };
     }
 
-    return null;
+    return { label: null, isFullLabel: false };
   }
 
   private lobbyClicked(lobby: GameInfo) {