- ${mapCategoryEntries.map(
- ([categoryKey, maps]) => html`
-
- `,
+ private renderMapGrid(maps: GameMapType[]) {
+ // Keyed by map so cards keep their identity when the list shifts
+ // (e.g. the selected map gets prepended to the featured grid) —
+ // positional reuse would leave stale thumbnails behind.
+ return html`
+ ${repeat(
+ maps,
+ (mapValue) => mapValue,
+ (mapValue) => this.renderMapCard(mapValue),
)}
`;
}
- private renderFeaturedMaps() {
- let featuredMapList = featuredMaps;
- if (!this.useRandomMap && !featuredMapList.includes(this.selectedMap)) {
- featuredMapList = [this.selectedMap, ...featuredMaps];
- }
+ private renderSectionHeading(label: string) {
+ return html`
`;
+ }
+
+ private renderCategoryBar(categoryKey: string, maps: GameMapType[]) {
+ const expanded = this.expandedCategories.has(categoryKey);
return html`
`;
}
- private renderFavoriteMaps() {
+ private renderFeaturedTab() {
+ const featured = mapCategories.featured ?? [];
+ let featuredMapList = featured;
+ if (!this.useRandomMap && !featured.includes(this.selectedMap)) {
+ featuredMapList = [this.selectedMap, ...featured];
+ }
+ return html`
+ ${this.renderSectionHeading(translateText("map_categories.featured"))}
+ ${this.renderMapGrid(featuredMapList)}
+
+ ${Object.entries(mapCategories)
+ .filter(([categoryKey]) => categoryKey !== "featured")
+ .map(([categoryKey, maps]) =>
+ this.renderCategoryBar(categoryKey, maps),
+ )}
+
`;
+ }
+
+ private renderFavoritesTab() {
if (this.favorites.length === 0) {
return html`
`;
}
return html`
-
- ${translateText("map_categories.favorites")}
-
-
- ${this.favorites.map((mapValue) => this.renderMapCard(mapValue))}
-
+ ${this.renderSectionHeading(translateText("map_categories.favorites"))}
+ ${this.renderMapGrid(this.favorites)}
`;
}
private renderActiveTab() {
switch (this.activeTab) {
case "all":
- return this.renderAllMaps();
+ return this.renderAllTab();
case "favorites":
- return this.renderFavoriteMaps();
+ return this.renderFavoritesTab();
default:
- return this.renderFeaturedMaps();
+ return this.renderFeaturedTab();
}
}
@@ -188,11 +227,7 @@ export class MapPicker extends LitElement {
? "pt-4 border-t border-white/5"
: ""}"
>
-
- ${translateText("map_categories.special")}
-
+ ${this.renderSectionHeading(translateText("map_categories.special"))}