diff --git a/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx b/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx index 04c9afb9..a1b61597 100644 --- a/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx +++ b/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx @@ -166,6 +166,18 @@ export function DrillDownMapSelector({ // Track which region name is being hovered in the popover (for zoom preview) const [previewRegionName, setPreviewRegionName] = useState(null) + // Sync local path state when props change from external sources (e.g., other players) + useEffect(() => { + const expectedPath = getInitialPath() + const pathMatches = + path.length === expectedPath.length && path.every((p, i) => p === expectedPath[i]) + + if (!pathMatches) { + setPath(expectedPath) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedMap, selectedContinent]) + // Measure container dimensions for viewBox calculation useEffect(() => { const measureContainer = () => { @@ -1071,6 +1083,75 @@ export function DrillDownMapSelector({ onRegionNameHover={setPreviewRegionName} /> + + {/* Region List Panel - visible on larger screens only */} + {fillContainer && selectedRegionNames.length > 0 && ( +
+ {/* Header */} +
+ {selectedRegionNames.length} regions +
+ {/* Scrollable list */} +
+ {selectedRegionNames + .slice() + .sort((a, b) => a.localeCompare(b)) + .map((name) => ( +
setPreviewRegionName(name)} + onMouseLeave={() => setPreviewRegionName(null)} + className={css({ + px: '3', + py: '1', + fontSize: 'xs', + color: isDark ? 'gray.300' : 'gray.600', + cursor: 'pointer', + _hover: { + bg: isDark ? 'gray.700' : 'gray.200', + color: isDark ? 'gray.100' : 'gray.900', + }, + })} + > + {name} +
+ ))} +
+
+ )} {/* Peer Navigation - Mini-map thumbnails below main map (or planets at world level) */} diff --git a/apps/web/src/arcade-games/know-your-world/components/MapSelectorMap.tsx b/apps/web/src/arcade-games/know-your-world/components/MapSelectorMap.tsx index ed1bba29..c374a5bf 100644 --- a/apps/web/src/arcade-games/know-your-world/components/MapSelectorMap.tsx +++ b/apps/web/src/arcade-games/know-your-world/components/MapSelectorMap.tsx @@ -65,6 +65,7 @@ const AnimatedRegion = memo(function AnimatedRegion({ cursor: 'pointer', pointerEvents: 'all', opacity: springProps.opacity, + touchAction: 'manipulation', }} /> ) @@ -365,6 +366,7 @@ export function MapSelectorMap({ height: '100%', cursor: 'crosshair', display: 'block', + touchAction: 'manipulation', })} preserveAspectRatio="xMidYMid meet" >