Add map picker with Featured/All tabs (#3005)

Resolves #2996

## Description:

Replace map selection UI in src/client/SinglePlayerModal.ts and
src/client/HostLobbyModal.ts with the picker (Featured/All tabs + random
map card).

Also, since the html was getting quite long, I extracted the shared
parts into a separate component.

<img width="575" height="592" alt="スクリーンショット 2026-01-23 21 57 03"
src="https://github.com/user-attachments/assets/fc6bfbc3-cb66-452a-b971-436940b0fb99"
/>

<img width="633" height="648" alt="スクリーンショット 2026-01-23 21 57 12"
src="https://github.com/user-attachments/assets/1aa409a1-b801-4a60-8b26-ba20e343d66e"
/>

I separated Map.ts because the display logic looked reusable in other
places, but I’m also open to merging it back if that makes more sense.
If the review prefers it integrated, I can combine them again.

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

resources/lang/en.json

@@ -280,6 +280,8 @@
   },
   "map": {
     "map": "Map",
+    "featured": "Featured",
+    "all": "All",
     "world": "World",
     "giantworldmap": "Giant World Map",
     "europe": "Europe",
@@ -330,6 +332,7 @@
     "amazonriver": "Amazon River"
   },
   "map_categories": {
+    "featured": "Featured",
     "continental": "Continental",
     "regional": "Regional",
     "fantasy": "Other",

src/client/HelpModal.ts

@@ -3,7 +3,6 @@ import { customElement, state } from "lit/decorators.js";
 import { translateText } from "../client/Utils";
 import { BaseModal } from "./components/BaseModal";
 import "./components/Difficulties";
-import "./components/Maps";
 import { modalHeader } from "./components/ui/ModalHeader";
 import { TroubleshootingModal } from "./TroubleshootingModal";
 

src/client/HostLobbyModal.ts

@@ -12,7 +12,6 @@ import {
   Quads,
   Trios,
   UnitType,
-  mapCategories,
 } from "../core/game/Game";
 import {
   ClientInfo,
@@ -28,7 +27,7 @@ import "./components/CopyButton";
 import "./components/Difficulties";
 import "./components/FluentSlider";
 import "./components/LobbyPlayerView";
-import "./components/Maps";
+import "./components/map/MapPicker";
 import { modalHeader } from "./components/ui/ModalHeader";
 import { crazyGamesSDK } from "./CrazyGamesSDK";
 import { JoinLobbyEvent } from "./Main";
@@ -38,7 +37,6 @@ import {
   renderToggleInputCardInput,
 } from "./utilities/RenderToggleInputCard";
 import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
-import randomMap from "/images/RandomMap.webp?url";
 @customElement("host-lobby-modal")
 export class HostLobbyModal extends BaseModal {
   @state() private selectedMap: GameMapType = GameMapType.World;
@@ -209,80 +207,14 @@ export class HostLobbyModal extends BaseModal {
                   ${translateText("map.map")}
                 </h3>
               </div>
-              <div class="space-y-8">
-                <!-- Use the imported mapCategories -->
-                ${Object.entries(mapCategories).map(
-                  ([categoryKey, maps]) => html`
-                    <div class="w-full">
-                      <h4
-                        class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
-                      >
-                        ${translateText(`map_categories.${categoryKey}`)}
-                      </h4>
-                      <div
-                        class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
-                      >
-                        ${maps.map((mapValue) => {
-                          const mapKey = Object.entries(GameMapType).find(
-                            ([, v]) => v === mapValue,
-                          )?.[0];
-                          return html`
-                            <div
-                              @click=${() => this.handleMapSelection(mapValue)}
-                              class="cursor-pointer transition-transform duration-200 active:scale-95"
-                            >
-                              <map-display
-                                .mapKey=${mapKey}
-                                .selected=${!this.useRandomMap &&
-                                this.selectedMap === mapValue}
-                                .translation=${translateText(
-                                  `map.${mapKey?.toLowerCase()}`,
-                                )}
-                              ></map-display>
-                            </div>
-                          `;
-                        })}
-                      </div>
-                    </div>
-                  `,
-                )}
-                <!-- Random Map Card -->
-                <div class="w-full pt-4 border-t border-white/5">
-                  <h4
-                    class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
-                  >
-                    ${translateText("map_categories.special")}
-                  </h4>
-                  <div
-                    class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
-                  >
-                    <button
-                      class="relative group rounded-xl border transition-all duration-200 overflow-hidden flex flex-col items-stretch ${this
-                        .useRandomMap
-                        ? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
-                        : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
-                      @click=${this.handleSelectRandomMap}
-                    >
-                      <div
-                        class="aspect-[2/1] w-full relative overflow-hidden bg-black/20"
-                      >
-                        <img
-                          src=${randomMap}
-                          alt=${translateText("map.random")}
-                          class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
-                        />
-                      </div>
-                      <div class="p-3 text-center border-t border-white/5">
-                        <div
-                          class="text-xs font-bold text-white uppercase tracking-wider break-words hyphens-auto"
-                        >
-                          ${translateText("map.random")}
-                        </div>
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              </div>
+              <map-picker
+                .selectedMap=${this.selectedMap}
+                .useRandomMap=${this.useRandomMap}
+                .randomMapDivider=${true}
+                .onSelectMap=${(mapValue: GameMapType) =>
+                  this.handleMapSelection(mapValue)}
+                .onSelectRandom=${() => this.handleSelectRandomMap()}
+              ></map-picker>
             </div>
 
             <!-- Difficulty Selection -->

src/client/SinglePlayerModal.ts

@@ -13,7 +13,6 @@ import {
   Quads,
   Trios,
   UnitType,
-  mapCategories,
 } from "../core/game/Game";
 import { UserSettings } from "../core/game/UserSettings";
 import { TeamCountConfig } from "../core/Schemas";
@@ -24,7 +23,7 @@ import "./components/baseComponents/Modal";
 import { BaseModal } from "./components/BaseModal";
 import "./components/Difficulties";
 import "./components/FluentSlider";
-import "./components/Maps";
+import "./components/map/MapPicker";
 import { modalHeader } from "./components/ui/ModalHeader";
 import { fetchCosmetics } from "./Cosmetics";
 import { FlagInput } from "./FlagInput";
@@ -35,7 +34,6 @@ import {
   renderToggleInputCardInput,
 } from "./utilities/RenderToggleInputCard";
 import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
-import randomMap from "/images/RandomMap.webp?url";
 
 @customElement("single-player-modal")
 export class SinglePlayerModal extends BaseModal {
@@ -197,84 +195,15 @@ export class SinglePlayerModal extends BaseModal {
                 </h3>
               </div>
 
-              <div class="space-y-8">
-                ${Object.entries(mapCategories).map(
-                  ([categoryKey, maps]) => html`
-                    <div class="w-full">
-                      <h4
-                        class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
-                      >
-                        ${translateText(`map_categories.${categoryKey}`)}
-                      </h4>
-                      <div
-                        class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
-                      >
-                        ${maps.map((mapValue) => {
-                          const mapKey = Object.keys(GameMapType).find(
-                            (key) =>
-                              GameMapType[key as keyof typeof GameMapType] ===
-                              mapValue,
-                          );
-                          return html`
-                            <div
-                              @click=${() => this.handleMapSelection(mapValue)}
-                              class="cursor-pointer transition-transform duration-200 active:scale-95"
-                            >
-                              <map-display
-                                .mapKey=${mapKey}
-                                .selected=${!this.useRandomMap &&
-                                this.selectedMap === mapValue}
-                                .showMedals=${this.showAchievements}
-                                .wins=${this.mapWins.get(mapValue) ?? new Set()}
-                                .translation=${translateText(
-                                  `map.${mapKey?.toLowerCase()}`,
-                                )}
-                              ></map-display>
-                            </div>
-                          `;
-                        })}
-                      </div>
-                    </div>
-                  `,
-                )}
-
-                <!-- Random Map Card -->
-                <div class="w-full">
-                  <h4
-                    class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
-                  >
-                    ${translateText("map_categories.special")}
-                  </h4>
-                  <div
-                    class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
-                  >
-                    <button
-                      class="relative group rounded-xl border transition-all duration-200 overflow-hidden flex flex-col items-stretch ${this
-                        .useRandomMap
-                        ? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
-                        : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
-                      @click=${this.handleSelectRandomMap}
-                    >
-                      <div
-                        class="aspect-[2/1] w-full relative overflow-hidden bg-black/20"
-                      >
-                        <img
-                          src=${randomMap}
-                          alt=${translateText("map.random")}
-                          class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
-                        />
-                      </div>
-                      <div class="p-3 text-center border-t border-white/5">
-                        <div
-                          class="text-xs font-bold text-white uppercase tracking-wider break-words hyphens-auto"
-                        >
-                          ${translateText("map.random")}
-                        </div>
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              </div>
+              <map-picker
+                .selectedMap=${this.selectedMap}
+                .useRandomMap=${this.useRandomMap}
+                .showMedals=${this.showAchievements}
+                .mapWins=${this.mapWins}
+                .onSelectMap=${(mapValue: GameMapType) =>
+                  this.handleMapSelection(mapValue)}
+                .onSelectRandom=${() => this.handleSelectRandomMap()}
+              ></map-picker>
             </div>
 
             <!-- Difficulty Selection -->

src/client/components/map/MapDisplay.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { Difficulty, GameMapType } from "../../core/game/Game";
-import { terrainMapFileLoader } from "../TerrainMapFileLoader";
-import { translateText } from "../Utils";
+import { Difficulty, GameMapType } from "../../../core/game/Game";
+import { terrainMapFileLoader } from "../../TerrainMapFileLoader";
+import { translateText } from "../../Utils";
 
 @customElement("map-display")
 export class MapDisplay extends LitElement {

src/client/components/map/MapPicker.ts

@@ -0,0 +1,183 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+  Difficulty,
+  GameMapType,
+  mapCategories,
+} from "../../../core/game/Game";
+import { translateText } from "../../Utils";
+import "./MapDisplay";
+import randomMap from "/images/RandomMap.webp?url";
+
+const featuredMaps: GameMapType[] = [
+  GameMapType.World,
+  GameMapType.Europe,
+  GameMapType.NorthAmerica,
+  GameMapType.SouthAmerica,
+  GameMapType.Asia,
+  GameMapType.Africa,
+  GameMapType.Japan,
+];
+
+@customElement("map-picker")
+export class MapPicker extends LitElement {
+  @property({ type: String }) selectedMap: GameMapType = GameMapType.World;
+  @property({ type: Boolean }) useRandomMap = false;
+  @property({ type: Boolean }) showMedals = false;
+  @property({ type: Boolean }) randomMapDivider = false;
+  @property({ attribute: false }) mapWins: Map<GameMapType, Set<Difficulty>> =
+    new Map();
+  @property({ attribute: false }) onSelectMap?: (map: GameMapType) => void;
+  @property({ attribute: false }) onSelectRandom?: () => void;
+  @state() private showAllMaps = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleMapSelection(mapValue: GameMapType) {
+    this.onSelectMap?.(mapValue);
+  }
+
+  private handleSelectRandomMap = () => {
+    this.onSelectRandom?.();
+  };
+
+  private getWins(mapValue: GameMapType): Set<Difficulty> {
+    return this.mapWins?.get(mapValue) ?? new Set();
+  }
+
+  private renderMapCard(mapValue: GameMapType) {
+    const mapKey = Object.entries(GameMapType).find(
+      ([_, value]) => value === mapValue,
+    )?.[0];
+    return html`
+      <div
+        @click=${() => this.handleMapSelection(mapValue)}
+        class="cursor-pointer transition-transform duration-200 active:scale-95"
+      >
+        <map-display
+          .mapKey=${mapKey}
+          .selected=${!this.useRandomMap && this.selectedMap === mapValue}
+          .showMedals=${this.showMedals}
+          .wins=${this.getWins(mapValue)}
+          .translation=${translateText(`map.${mapKey?.toLowerCase()}`)}
+        ></map-display>
+      </div>
+    `;
+  }
+
+  private renderAllMaps() {
+    const mapCategoryEntries = Object.entries(mapCategories);
+    return html`<div class="space-y-8">
+      ${mapCategoryEntries.map(
+        ([categoryKey, maps]) => html`
+          <div class="w-full">
+            <h4
+              class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
+            >
+              ${translateText(`map_categories.${categoryKey}`)}
+            </h4>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              ${maps.map((mapValue) => this.renderMapCard(mapValue))}
+            </div>
+          </div>
+        `,
+      )}
+    </div>`;
+  }
+
+  private renderFeaturedMaps() {
+    let featuredMapList = featuredMaps;
+    if (!featuredMapList.includes(this.selectedMap)) {
+      featuredMapList = [this.selectedMap, ...featuredMaps];
+    }
+    return html`<div class="w-full">
+      <h4
+        class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
+      >
+        ${translateText("map_categories.featured")}
+      </h4>
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        ${featuredMapList.map((mapValue) => this.renderMapCard(mapValue))}
+      </div>
+    </div>`;
+  }
+
+  render() {
+    return html`
+      <div class="space-y-8">
+        <div class="w-full">
+          <div
+            role="tablist"
+            aria-label="${translateText("map.map")}"
+            class="grid grid-cols-2 gap-2 rounded-xl border border-white/10 bg-black/20 p-1"
+          >
+            <button
+              type="button"
+              role="tab"
+              aria-selected=${!this.showAllMaps}
+              class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all ${this
+                .showAllMaps
+                ? "text-white/60 hover:text-white"
+                : "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"}"
+              @click=${() => (this.showAllMaps = false)}
+            >
+              ${translateText("map.featured")}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected=${this.showAllMaps}
+              class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all ${this
+                .showAllMaps
+                ? "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"
+                : "text-white/60 hover:text-white"}"
+              @click=${() => (this.showAllMaps = true)}
+            >
+              ${translateText("map.all")}
+            </button>
+          </div>
+        </div>
+        ${this.showAllMaps ? this.renderAllMaps() : this.renderFeaturedMaps()}
+        <div
+          class="w-full ${this.randomMapDivider
+            ? "pt-4 border-t border-white/5"
+            : ""}"
+        >
+          <h4
+            class="text-xs font-bold text-white/40 uppercase tracking-widest mb-4 pl-2"
+          >
+            ${translateText("map_categories.special")}
+          </h4>
+          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <button
+              class="relative group rounded-xl border transition-all duration-200 overflow-hidden flex flex-col items-stretch ${this
+                .useRandomMap
+                ? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
+                : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
+              @click=${this.handleSelectRandomMap}
+            >
+              <div
+                class="aspect-[2/1] w-full relative overflow-hidden bg-black/20"
+              >
+                <img
+                  src=${randomMap}
+                  alt=${translateText("map.random")}
+                  class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
+                />
+              </div>
+              <div class="p-3 text-center border-t border-white/5">
+                <div
+                  class="text-xs font-bold text-white uppercase tracking-wider break-words hyphens-auto"
+                >
+                  ${translateText("map.random")}
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}