Rearrange homepage game boxes & tune special modifier probabilities 🎲 (#3420)

## Description:

**Homepage layout:** Reorder the game mode cards so FFA is the left
(large) box, Teams is the upper-right box, and Special Games is the
lower-right box. Mobile order updated to match (FFA → Teams → Special).

**Special game modifiers:**
- Adjusted modifier count roll to 40%/40%/15%/5% for 1/2/3/4 modifiers
(was 30%/40%/20%/10%) because having so many special games with 3/4
modifiers while we only have 8 modifiers in the pool is a bit dumb (from
the 8 modifiers two are mutually exclusive and 4 should be quite rare).
- Changed ticket counts in `SPECIAL_MODIFIER_POOL` so
isAlliancesDisabled and isHardNations are more rare.

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

FloPinguin

src/client/GameModeSelector.ts

@@ -150,35 +150,30 @@ export class GameModeSelector extends LitElement {
         <div
           class="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-4 sm:h-[min(24rem,40vh)]"
         >
-          <!-- Left col: main card (desktop only) -->
-          ${special
+          <!-- Left col: FFA (desktop only) -->
+          ${ffa
             ? html`<div class="hidden sm:block">
-                ${this.renderSpecialLobbyCard(special)}
+                ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
               </div>`
-            : ffa
-              ? html`<div class="hidden sm:block">
-                  ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
-                </div>`
-              : nothing}
+            : nothing}
 
-          <!-- Right col: FFA + teams (desktop only) -->
-          <div class="hidden sm:flex sm:flex-col sm:gap-4">
-            ${special && ffa
-              ? html`<div class="flex-1 min-h-0">
-                  ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
-                </div>`
-              : nothing}
-            ${teams
-              ? html`<div class="flex-1 min-h-0">
-                  ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
-                </div>`
-              : nothing}
-          </div>
+          <!-- Right col: Teams + Special (desktop only) -->
+          ${teams || special
+            ? html`<div class="hidden sm:flex sm:flex-col sm:gap-4">
+                ${teams
+                  ? html`<div class="flex-1 min-h-0">
+                      ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
+                    </div>`
+                  : nothing}
+                ${special
+                  ? html`<div class="flex-1 min-h-0">
+                      ${this.renderSpecialLobbyCard(special)}
+                    </div>`
+                  : nothing}
+              </div>`
+            : nothing}
 
-          <!-- Mobile: special, ffa, teams inline -->
-          <div class="sm:hidden">
-            ${special ? this.renderSpecialLobbyCard(special) : nothing}
-          </div>
+          <!-- Mobile: ffa, teams, special inline -->
           <div class="sm:hidden">
             ${ffa
               ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
@@ -189,6 +184,9 @@ export class GameModeSelector extends LitElement {
               ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
               : nothing}
           </div>
+          <div class="sm:hidden">
+            ${special ? this.renderSpecialLobbyCard(special) : nothing}
+          </div>
         </div>
 
         <!-- Solo: full width, desktop only -->

src/server/MapPlaylist.ts

@@ -109,14 +109,14 @@ type ModifierKey =
 
 // Each entry represents one "ticket" in the pool. More tickets = higher chance of selection.
 const SPECIAL_MODIFIER_POOL: ModifierKey[] = [
-  ...Array<ModifierKey>(4).fill("isRandomSpawn"),
-  ...Array<ModifierKey>(8).fill("isCompact"),
-  ...Array<ModifierKey>(1).fill("isCrowded"),
-  ...Array<ModifierKey>(1).fill("isHardNations"),
-  ...Array<ModifierKey>(8).fill("startingGold"),
-  ...Array<ModifierKey>(1).fill("startingGoldHigh"),
-  ...Array<ModifierKey>(1).fill("goldMultiplier"),
-  ...Array<ModifierKey>(1).fill("isAlliancesDisabled"),
+  ...Array<ModifierKey>(8).fill("isRandomSpawn"),
+  ...Array<ModifierKey>(16).fill("isCompact"),
+  ...Array<ModifierKey>(3).fill("isCrowded"), // should be quite rare as it causes max-size lobbies
+  ...Array<ModifierKey>(1).fill("isHardNations"), // should be quite rare because it's just for the PvPvE enjoyers
+  ...Array<ModifierKey>(16).fill("startingGold"),
+  ...Array<ModifierKey>(4).fill("startingGoldHigh"), // should be quite rare because it's very crazy
+  ...Array<ModifierKey>(6).fill("goldMultiplier"),
+  ...Array<ModifierKey>(1).fill("isAlliancesDisabled"), // should be quite rare because it removes a key element of OpenFront
 ];
 
 // Modifiers that cannot be active at the same time.
@@ -515,16 +515,16 @@ export class MapPlaylist {
     count?: number,
     countReduction: number = 0,
   ): PublicGameModifiers {
-    // Roll how many modifiers to pick: 30% → 1, 40% → 2, 20% → 3, 10% → 4
-    const modifierCountRoll = Math.floor(Math.random() * 10) + 1;
+    // Roll how many modifiers to pick: 40% → 1, 40% → 2, 15% → 3, 5% → 4
+    const modifierCountRoll = Math.floor(Math.random() * 100) + 1;
     const k = Math.max(
       0,
       (count ??
-        (modifierCountRoll <= 3
+        (modifierCountRoll <= 40
           ? 1
-          : modifierCountRoll <= 7
+          : modifierCountRoll <= 80
             ? 2
-            : modifierCountRoll <= 9
+            : modifierCountRoll <= 95
               ? 3
               : 4)) - countReduction,
     );