Add map picker with Featured/All tabs

[Aotumuri]

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.

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:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• 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

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

This change introduces a new map-picker component to improve map selection UI in lobby creation flows. The featured maps constant defines a curated set of commonly-used maps, while the MapPicker component provides a tabbed interface showing featured maps first with all maps available on a secondary tab. Existing modals are refactored to use this centralized picker instead of inline map selection logic.

Changes

Cohort / File(s)	Summary
Featured Maps Configuration src/core/game/Game.ts	Added exported constant featuredMaps array with 8 predefined map types for UI prioritization.
Map Picker Component src/client/components/map/MapPicker.ts	New LitElement component with tabbed interface (Featured/All), category grouping, random map option, and medal display. Exposes selectedMap, useRandomMap, mapWins properties and onSelectMap, onSelectRandom callbacks.
Modal Component Refactoring src/client/HostLobbyModal.ts, src/client/SinglePlayerModal.ts	Replaced inline mapCategories rendering with MapPicker component. Removed manual category iteration and random map card logic, delegating all map selection to picker via bound properties and event handlers.
Import Path Updates src/client/HelpModal.ts, src/client/components/map/MapDisplay.ts	Removed unused Maps import in HelpModal; adjusted relative paths in MapDisplay to account for component file relocation.
UI Translation Additions resources/lang/en.json	Added translation keys: map.featured, map.all, and map_categories.featured for UI labels.

Sequence Diagram

sequenceDiagram
    actor User
    participant Modal as HostLobbyModal/<br/>SinglePlayerModal
    participant Picker as MapPicker
    participant Display as MapDisplay
    participant State as Component State

    User->>Modal: Open modal
    Modal->>Picker: Render with selectedMap, mapWins
    
    alt User clicks Featured tab
        Picker->>Picker: Show featured maps (filtered from Game.featuredMaps)
    else User clicks All tab
        Picker->>Picker: Show all maps by category
    end
    
    User->>Picker: Click map card
    Picker->>Display: Render map with selection state
    Picker->>Picker: handleMapSelection(mapValue)
    Picker->>Modal: onSelectMap callback
    Modal->>State: Update selectedMap
    
    alt User clicks Random map
        User->>Picker: Click random tile
        Picker->>Picker: handleSelectRandomMap()
        Picker->>Modal: onSelectRandom callback
        Modal->>State: Update useRandomMap = true
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A map picker blooms with featured grace, 📍
Worlds arranged in organized space,
Tabs guide travelers far and wide,
Random journeys bundled inside,
Lobbies now need scroll no more! 🗺️✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: introducing a map picker component with Featured and All tabs, which is the primary objective of the PR.
Description check	✅ Passed	The description is well-related to the changeset, explaining the component replacement, extraction rationale, and including relevant details like screenshots and testing confirmation.
Linked Issues check	✅ Passed	The PR directly addresses issue #2996 by introducing a map picker with Featured and All tabs, reducing scrolling by prominently displaying featured maps while keeping others accessible.
Out of Scope Changes check	✅ Passed	All changes are scoped to map selection UI improvements: new MapPicker component, integration into SinglePlayerModal and HostLobbyModal, MapDisplay relocation, and translation additions—all aligned with the linked issue objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[evanpelle]

maybe instead of tabs, I think a collapsable section might be better ux?

[ryanbarlow97]

There could be a point where we just make a "popup" modal which is a much wider screen, where all the maps more easily shown, but I quite like the unified modals we have now

[Aotumuri]

@evanpelle
I actually chose tabs for UX reasons.

I initially implemented this as a collapsible section, but it felt a bit awkward in practice:

• When both “Recommended” and non-recommended items were present, there was a sense of duplication.
• When only one of them existed, the collapsible section felt confusing, because it appeared to represent “everything else,” even though it was actually the only category being shown.

By clearly separating them into “All” and “Recommended” tabs, I was aiming to make the structure more explicit and easier to understand at a glance.

That said, I’m still open to changing it if you feel a collapsible section would work better overall.

Sorry if my wording isn’t perfectly clear — I used a translation tool, so some of the nuance might not have come through as intended.