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

src/client/components/map/MapDisplay.ts

@@ -0,0 +1,133 @@
+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";
+
+@customElement("map-display")
+export class MapDisplay extends LitElement {
+  @property({ type: String }) mapKey = "";
+  @property({ type: Boolean }) selected = false;
+  @property({ type: String }) translation: string = "";
+  @property({ type: Boolean }) showMedals = false;
+  @property({ attribute: false }) wins: Set<Difficulty> = new Set();
+  @state() private mapWebpPath: string | null = null;
+  @state() private mapName: string | null = null;
+  @state() private isLoading = true;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadMapData();
+  }
+
+  private async loadMapData() {
+    if (!this.mapKey) return;
+
+    try {
+      this.isLoading = true;
+      const mapValue = GameMapType[this.mapKey as keyof typeof GameMapType];
+      const data = terrainMapFileLoader.getMapData(mapValue);
+      this.mapWebpPath = await data.webpPath();
+      this.mapName = (await data.manifest()).name;
+    } catch (error) {
+      console.error("Failed to load map data:", error);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    // Trigger the same activation logic as click when Enter or Space is pressed
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      // Dispatch a click event to maintain compatibility with parent click handlers
+      (event.target as HTMLElement).click();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        role="button"
+        tabindex="0"
+        aria-selected="${this.selected}"
+        aria-label="${this.translation ?? this.mapName ?? this.mapKey}"
+        @keydown="${this.handleKeydown}"
+        class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 gap-3 group ${this
+          .selected
+          ? "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 hover:-translate-y-1 active:scale-95"}"
+      >
+        ${this.isLoading
+          ? html`<div
+              class="w-full aspect-[2/1] text-white/40 transition-transform duration-200 rounded-lg bg-black/20 text-xs font-bold uppercase tracking-wider flex items-center justify-center animate-pulse"
+            >
+              ${translateText("map_component.loading")}
+            </div>`
+          : this.mapWebpPath
+            ? html`<div
+                class="w-full aspect-[2/1] relative overflow-hidden rounded-lg bg-black/20"
+              >
+                <img
+                  src="${this.mapWebpPath}"
+                  alt="${this.translation || this.mapName}"
+                  class="w-full h-full object-cover ${this.selected
+                    ? "opacity-100"
+                    : "opacity-80"} group-hover:opacity-100 transition-opacity duration-200"
+                />
+              </div>`
+            : html`<div
+                class="w-full aspect-[2/1] text-red-400 transition-transform duration-200 rounded-lg bg-red-500/10 text-xs font-bold uppercase tracking-wider flex items-center justify-center"
+              >
+                ${translateText("map_component.error")}
+              </div>`}
+        ${this.showMedals
+          ? html`<div class="flex gap-1 justify-center w-full">
+              ${this.renderMedals()}
+            </div>`
+          : null}
+        <div
+          class="text-xs font-bold text-white uppercase tracking-wider text-center leading-tight break-words hyphens-auto"
+        >
+          ${this.translation || this.mapName}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMedals() {
+    const medalOrder: Difficulty[] = [
+      Difficulty.Easy,
+      Difficulty.Medium,
+      Difficulty.Hard,
+      Difficulty.Impossible,
+    ];
+    const colors: Record<Difficulty, string> = {
+      [Difficulty.Easy]: "var(--medal-easy)",
+      [Difficulty.Medium]: "var(--medal-medium)",
+      [Difficulty.Hard]: "var(--medal-hard)",
+      [Difficulty.Impossible]: "var(--medal-impossible)",
+    };
+    const wins = this.readWins();
+    return medalOrder.map((medal) => {
+      const earned = wins.has(medal);
+      const mask =
+        "url('/images/MedalIconWhite.svg') no-repeat center / contain";
+      return html`<div
+        class="w-5 h-5 ${earned ? "opacity-100" : "opacity-25"}"
+        style="background-color:${colors[
+          medal
+        ]}; mask: ${mask}; -webkit-mask: ${mask};"
+        title=${translateText(`difficulty.${medal.toLowerCase()}`)}
+      ></div>`;
+    });
+  }
+
+  private readWins(): Set<Difficulty> {
+    return this.wins ?? new Set();
+  }
+}