(defaultChipId);
+ const starRangeKey = starRange ? `${starRange.min}-${starRange.max}` : '';
+ const previousStarRangeKey = useRef(starRangeKey);
useEffect(() => {
setExpandedChipId((current) => {
- if (current != null && leaderboards.some((lb) => lb.id === current)) return current;
+ if (previousStarRangeKey.current !== starRangeKey) {
+ previousStarRangeKey.current = starRangeKey;
+ return defaultChipId;
+ }
+
+ if (current != null) {
+ const currentLeaderboard = leaderboards.find((leaderboard) => leaderboard.id === current);
+ if (currentLeaderboard && (!starRange || matchesStarRange(currentLeaderboard, starRange))) return current;
+ }
return defaultChipId;
});
- }, [defaultChipId, leaderboards]);
+ }, [defaultChipId, leaderboards, starRange, starRangeKey]);
return (
@@ -29,9 +47,15 @@ export function MapDifficultyChips({ mapId, leaderboards, expandLowest }: MapDif
mapId={mapId}
leaderboard={lb}
isExpanded={expandedChipId === lb.id}
+ isDimmed={!!starRange && !matchesStarRange(lb, starRange)}
onExpandAction={() => setExpandedChipId(lb.id)}
/>
))}
);
}
+
+function matchesStarRange(leaderboard: MapCardLeaderboard, starRange: StarRangeFilter) {
+ const stars = leaderboard.realm.stars;
+ return leaderboard.realm.leaderboardStatus === 'RANKED' && stars >= starRange.min && stars <= starRange.max;
+}
diff --git a/src/routes/maps.tsx b/src/routes/maps.tsx
index 3740ed2..1977bf4 100644
--- a/src/routes/maps.tsx
+++ b/src/routes/maps.tsx
@@ -3,7 +3,7 @@ import { createServerFn } from '@tanstack/react-start';
import { z } from 'zod';
import { MapCard } from '@/modules/maps/listing/map-card';
-import { MapFilters } from '@/modules/maps/listing/map-filters';
+import { DEFAULT_MAX_STARS, DEFAULT_MIN_STARS, MapFilters } from '@/modules/maps/listing/map-filters';
import {
MAP_CONTROLLER_GET_MAP_LISTINGS_SORT_BY,
MAP_CONTROLLER_GET_MAP_LISTINGS_SORT_DIRECTION,
@@ -100,6 +100,15 @@ function MapsRoute() {
const maps = response.data;
const meta = response.metadata;
const expandLowest = searchParams.sortBy === 'highestStars' && (searchParams.sortDirection ?? 'desc') === 'asc';
+ const minStars = searchParams.minStars ?? DEFAULT_MIN_STARS;
+ const maxStars = searchParams.maxStars ?? DEFAULT_MAX_STARS;
+ const starRange =
+ minStars !== DEFAULT_MIN_STARS || maxStars !== DEFAULT_MAX_STARS
+ ? {
+ min: minStars,
+ max: maxStars
+ }
+ : undefined;
const bgCandidates = maps.filter((m) => m.coverUrl).map((m) => m.coverUrl);
const getPageHref = (page: number) => buildMapsHref(updateSearchParams(searchParams, { page: page > 1 ? page : undefined }));
@@ -119,7 +128,7 @@ function MapsRoute() {
{maps.map((map) => (
-
+
))}