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
This commit is contained in:
Aotumuri
2026-01-28 08:52:48 +09:00
committed by GitHub
parent db745dcf4a
commit 1314115d3f
6 changed files with 208 additions and 162 deletions
-1
View File
@@ -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";