-
`scale(${s}) translate(${tx / s}px, ${ty / s}px)`
- ),
+ backgroundSize: '100px 100px',
}}
>
- {/* Render all regions (included + excluded) */}
- `scale(${s}) translate(${tx / s}px, ${ty / s}px)`
+ ),
+ }}
+ >
+ {/* Render all regions (included + excluded) */}
+
+
+ {/* Debug: Render bounding boxes (only if enabled) */}
+ {effectiveShowDebugBoundingBoxes &&
+ debugBoundingBoxes.map((bbox) => {
+ // Color based on acceptance and importance
+ // Green = accepted, Orange = high importance, Yellow = medium, Gray = low
+ const importance = bbox.importance ?? 0
+ let strokeColor = '#888888' // Default gray for low importance
+ let fillColor = 'rgba(136, 136, 136, 0.1)'
+
+ if (bbox.wasAccepted) {
+ strokeColor = '#00ff00' // Green for accepted region
+ fillColor = 'rgba(0, 255, 0, 0.15)'
+ } else if (importance > 1.5) {
+ strokeColor = '#ff6600' // Orange for high importance (2.0× boost + close)
+ fillColor = 'rgba(255, 102, 0, 0.1)'
+ } else if (importance > 0.5) {
+ strokeColor = '#ffcc00' // Yellow for medium importance
+ fillColor = 'rgba(255, 204, 0, 0.1)'
+ }
+
+ return (
+
+
+
+ )
+ })}
+
+ {/* Arrow marker definition */}
+
+
+
+
+
+
+
+
+ {/* Player emoji patterns for region backgrounds */}
+ {Object.values(playerMetadata).map((player) => (
+
+
+
+ {player.emoji}
+
+
+ ))}
+
+
+ {/* Magnifier region indicator on main map */}
+ {showMagnifier && cursorPosition && svgRef.current && containerRef.current && (
+ {
+ const containerRect = containerRef.current!.getBoundingClientRect()
+ const svgRect = svgRef.current!.getBoundingClientRect()
+ // Account for preserveAspectRatio letterboxing
+ const viewport = getRenderedViewport(
+ svgRect,
+ parsedViewBox.x,
+ parsedViewBox.y,
+ parsedViewBox.width,
+ parsedViewBox.height
+ )
+ const svgOffsetX = svgRect.left - containerRect.left + viewport.letterboxX
+ const cursorSvgX =
+ (cursorPosition.x - svgOffsetX) / viewport.scale + parsedViewBox.x
+ // Calculate leftover dimensions for magnifier sizing
+ const leftoverW =
+ containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
+ const leftoverH =
+ containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
+ const { width: magnifiedWidth } = getAdjustedMagnifiedDimensions(
+ parsedViewBox.width,
+ parsedViewBox.height,
+ zoom,
+ leftoverW,
+ leftoverH
+ )
+ return cursorSvgX - magnifiedWidth / 2
+ })}
+ y={zoomSpring.to((zoom: number) => {
+ const containerRect = containerRef.current!.getBoundingClientRect()
+ const svgRect = svgRef.current!.getBoundingClientRect()
+ // Account for preserveAspectRatio letterboxing
+ const viewport = getRenderedViewport(
+ svgRect,
+ parsedViewBox.x,
+ parsedViewBox.y,
+ parsedViewBox.width,
+ parsedViewBox.height
+ )
+ const svgOffsetY = svgRect.top - containerRect.top + viewport.letterboxY
+ const cursorSvgY =
+ (cursorPosition.y - svgOffsetY) / viewport.scale + parsedViewBox.y
+ // Calculate leftover dimensions for magnifier sizing
+ const leftoverW =
+ containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
+ const leftoverH =
+ containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
+ const { height: magnifiedHeight } = getAdjustedMagnifiedDimensions(
+ parsedViewBox.width,
+ parsedViewBox.height,
+ zoom,
+ leftoverW,
+ leftoverH
+ )
+ return cursorSvgY - magnifiedHeight / 2
+ })}
+ width={zoomSpring.to((zoom: number) => {
+ const containerRect = containerRef.current!.getBoundingClientRect()
+ // Calculate leftover dimensions for magnifier sizing
+ const leftoverW =
+ containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
+ const leftoverH =
+ containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
+ const { width } = getAdjustedMagnifiedDimensions(
+ parsedViewBox.width,
+ parsedViewBox.height,
+ zoom,
+ leftoverW,
+ leftoverH
+ )
+ return width
+ })}
+ height={zoomSpring.to((zoom: number) => {
+ const containerRect = containerRef.current!.getBoundingClientRect()
+ // Calculate leftover dimensions for magnifier sizing
+ const leftoverW =
+ containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
+ const leftoverH =
+ containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
+ const { height } = getAdjustedMagnifiedDimensions(
+ parsedViewBox.width,
+ parsedViewBox.height,
+ zoom,
+ leftoverW,
+ leftoverH
+ )
+ return height
+ })}
+ fill="none"
+ stroke={isDark ? '#60a5fa' : '#3b82f6'}
+ strokeWidth={parsedViewBox.width / 500}
+ vectorEffect="non-scaling-stroke"
+ strokeDasharray="5,5"
+ pointerEvents="none"
+ opacity={0.8}
+ />
+ )}
+
+
+ {/* Labels for found regions - rendered via LabelLayer component */}
+
- {/* Debug: Render bounding boxes (only if enabled) */}
+ {/* Debug: Bounding box labels as HTML overlays */}
{effectiveShowDebugBoundingBoxes &&
+ containerRef.current &&
+ svgRef.current &&
debugBoundingBoxes.map((bbox) => {
- // Color based on acceptance and importance
- // Green = accepted, Orange = high importance, Yellow = medium, Gray = low
const importance = bbox.importance ?? 0
- let strokeColor = '#888888' // Default gray for low importance
- let fillColor = 'rgba(136, 136, 136, 0.1)'
+ let strokeColor = '#888888'
if (bbox.wasAccepted) {
- strokeColor = '#00ff00' // Green for accepted region
- fillColor = 'rgba(0, 255, 0, 0.15)'
+ strokeColor = '#00ff00'
} else if (importance > 1.5) {
- strokeColor = '#ff6600' // Orange for high importance (2.0× boost + close)
- fillColor = 'rgba(255, 102, 0, 0.1)'
+ strokeColor = '#ff6600'
} else if (importance > 0.5) {
- strokeColor = '#ffcc00' // Yellow for medium importance
- fillColor = 'rgba(255, 204, 0, 0.1)'
+ strokeColor = '#ffcc00'
}
+ // Convert SVG coordinates to pixel coordinates (accounting for preserveAspectRatio)
+ const containerRect = containerRef.current!.getBoundingClientRect()
+ const svgRect = svgRef.current!.getBoundingClientRect()
+
+ const viewport = getRenderedViewport(
+ svgRect,
+ parsedViewBox.x,
+ parsedViewBox.y,
+ parsedViewBox.width,
+ parsedViewBox.height
+ )
+ const svgOffsetX = svgRect.left - containerRect.left + viewport.letterboxX
+ const svgOffsetY = svgRect.top - containerRect.top + viewport.letterboxY
+
+ // Convert bbox center from SVG coords to pixels
+ const centerX =
+ (bbox.x + bbox.width / 2 - parsedViewBox.x) * viewport.scale + svgOffsetX
+ const centerY =
+ (bbox.y + bbox.height / 2 - parsedViewBox.y) * viewport.scale + svgOffsetY
+
return (
-
-
-
+
+
{bbox.regionId}
+
{importance.toFixed(2)}
+
)
})}
- {/* Arrow marker definition */}
-
-
-
-
-
-
-
+ {/* Custom cursor and heat crosshair overlays */}
+
- {/* Player emoji patterns for region backgrounds */}
- {Object.values(playerMetadata).map((player) => (
-
-
-
- {player.emoji}
-
-
- ))}
-
-
- {/* Magnifier region indicator on main map */}
- {showMagnifier && cursorPosition && svgRef.current && containerRef.current && (
-
{
- const containerRect = containerRef.current!.getBoundingClientRect()
- const svgRect = svgRef.current!.getBoundingClientRect()
- // Account for preserveAspectRatio letterboxing
- const viewport = getRenderedViewport(
- svgRect,
- parsedViewBox.x,
- parsedViewBox.y,
- parsedViewBox.width,
- parsedViewBox.height
- )
- const svgOffsetX = svgRect.left - containerRect.left + viewport.letterboxX
- const cursorSvgX = (cursorPosition.x - svgOffsetX) / viewport.scale + parsedViewBox.x
- // Calculate leftover dimensions for magnifier sizing
- const leftoverW =
- containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
- const leftoverH =
- containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
- const { width: magnifiedWidth } = getAdjustedMagnifiedDimensions(
- parsedViewBox.width,
- parsedViewBox.height,
- zoom,
- leftoverW,
- leftoverH
- )
- return cursorSvgX - magnifiedWidth / 2
- })}
- y={zoomSpring.to((zoom: number) => {
- const containerRect = containerRef.current!.getBoundingClientRect()
- const svgRect = svgRef.current!.getBoundingClientRect()
- // Account for preserveAspectRatio letterboxing
- const viewport = getRenderedViewport(
- svgRect,
- parsedViewBox.x,
- parsedViewBox.y,
- parsedViewBox.width,
- parsedViewBox.height
- )
- const svgOffsetY = svgRect.top - containerRect.top + viewport.letterboxY
- const cursorSvgY = (cursorPosition.y - svgOffsetY) / viewport.scale + parsedViewBox.y
- // Calculate leftover dimensions for magnifier sizing
- const leftoverW =
- containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
- const leftoverH =
- containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
- const { height: magnifiedHeight } = getAdjustedMagnifiedDimensions(
- parsedViewBox.width,
- parsedViewBox.height,
- zoom,
- leftoverW,
- leftoverH
- )
- return cursorSvgY - magnifiedHeight / 2
- })}
- width={zoomSpring.to((zoom: number) => {
- const containerRect = containerRef.current!.getBoundingClientRect()
- // Calculate leftover dimensions for magnifier sizing
- const leftoverW =
- containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
- const leftoverH =
- containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
- const { width } = getAdjustedMagnifiedDimensions(
- parsedViewBox.width,
- parsedViewBox.height,
- zoom,
- leftoverW,
- leftoverH
- )
- return width
- })}
- height={zoomSpring.to((zoom: number) => {
- const containerRect = containerRef.current!.getBoundingClientRect()
- // Calculate leftover dimensions for magnifier sizing
- const leftoverW =
- containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
- const leftoverH =
- containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
- const { height } = getAdjustedMagnifiedDimensions(
- parsedViewBox.width,
- parsedViewBox.height,
- zoom,
- leftoverW,
- leftoverH
- )
- return height
- })}
- fill="none"
- stroke={isDark ? '#60a5fa' : '#3b82f6'}
- strokeWidth={parsedViewBox.width / 500}
- vectorEffect="non-scaling-stroke"
- strokeDasharray="5,5"
- pointerEvents="none"
- opacity={0.8}
- />
- )}
-
-
- {/* Labels for found regions - rendered via LabelLayer component */}
-
-
- {/* Debug: Bounding box labels as HTML overlays */}
- {effectiveShowDebugBoundingBoxes &&
- containerRef.current &&
- svgRef.current &&
- debugBoundingBoxes.map((bbox) => {
- const importance = bbox.importance ?? 0
- let strokeColor = '#888888'
-
- if (bbox.wasAccepted) {
- strokeColor = '#00ff00'
- } else if (importance > 1.5) {
- strokeColor = '#ff6600'
- } else if (importance > 0.5) {
- strokeColor = '#ffcc00'
+ {/* Magnifier overlay - centers on cursor position */}
+ {(() => {
+ if (!cursorPosition || !svgRef.current || !containerRef.current) {
+ return null
}
- // Convert SVG coordinates to pixel coordinates (accounting for preserveAspectRatio)
- const containerRect = containerRef.current!.getBoundingClientRect()
- const svgRect = svgRef.current!.getBoundingClientRect()
+ // Calculate magnifier size based on leftover rectangle (area not covered by UI)
+ const containerRect = containerRef.current.getBoundingClientRect()
+ const leftoverWidth =
+ containerRect.width - SAFE_ZONE_MARGINS.left - SAFE_ZONE_MARGINS.right
+ const leftoverHeight =
+ containerRect.height - SAFE_ZONE_MARGINS.top - SAFE_ZONE_MARGINS.bottom
+ // When expanded (during/after pinch-to-zoom), use full leftover area
+ // Otherwise use the normal calculated dimensions
+ const { width: normalWidth, height: normalHeight } = getMagnifierDimensions(
+ leftoverWidth,
+ leftoverHeight
+ )
+ const magnifierWidthPx = isMagnifierExpanded ? leftoverWidth : normalWidth
+ const magnifierHeightPx = isMagnifierExpanded ? leftoverHeight : normalHeight
+
+ // Pre-compute SVG coordinate transformation for crosshair and pixel grid
+ const svgRect = svgRef.current.getBoundingClientRect()
const viewport = getRenderedViewport(
svgRect,
parsedViewBox.x,
@@ -3192,402 +3342,329 @@ export function MapRenderer({
)
const svgOffsetX = svgRect.left - containerRect.left + viewport.letterboxX
const svgOffsetY = svgRect.top - containerRect.top + viewport.letterboxY
+ const cursorSvgX = (cursorPosition.x - svgOffsetX) / viewport.scale + parsedViewBox.x
+ const cursorSvgY = (cursorPosition.y - svgOffsetY) / viewport.scale + parsedViewBox.y
- // Convert bbox center from SVG coords to pixels
- const centerX = (bbox.x + bbox.width / 2 - parsedViewBox.x) * viewport.scale + svgOffsetX
- const centerY = (bbox.y + bbox.height / 2 - parsedViewBox.y) * viewport.scale + svgOffsetY
+ // Get heat-based crosshair styling
+ const heatStyle = getHeatCrosshairStyle(
+ hotColdFeedbackType,
+ isDark,
+ effectiveHotColdEnabled
+ )
return (
- {
+ // When hot/cold is enabled, use heat-based colors
+ if (effectiveHotColdEnabled && hotColdFeedbackType) {
+ const heatColors = getHeatBorderColors(hotColdFeedbackType, isDark)
+ return `${heatColors.width}px solid ${heatColors.border}`
+ }
+ // Fall back to zoom-based coloring
+ return zoomSpring.to(
+ (zoom: number) =>
+ zoom > HIGH_ZOOM_THRESHOLD
+ ? `4px solid ${isDark ? '#fbbf24' : '#f59e0b'}` // gold-400/gold-500
+ : `3px solid ${isDark ? '#60a5fa' : '#3b82f6'}` // blue-400/blue-600
+ )
+ })(),
+ borderRadius: '12px',
+ overflow: 'hidden',
+ // Enable touch events on mobile for panning, but keep mouse events disabled
+ // This allows touch-based panning while not interfering with mouse-based interactions
+ pointerEvents: 'auto',
+ touchAction: 'none', // Prevent browser handling of touch gestures
+ zIndex: 100,
+ // Box shadow with heat glow when hot/cold is enabled
+ boxShadow: (() => {
+ if (effectiveHotColdEnabled && hotColdFeedbackType) {
+ const heatColors = getHeatBorderColors(hotColdFeedbackType, isDark)
+ return `0 10px 40px rgba(0, 0, 0, 0.3), 0 0 25px ${heatColors.glow}`
+ }
+ return zoomSpring.to((zoom: number) =>
+ zoom > HIGH_ZOOM_THRESHOLD
+ ? '0 10px 40px rgba(251, 191, 36, 0.4), 0 0 20px rgba(251, 191, 36, 0.2)' // Gold glow
+ : '0 10px 40px rgba(0, 0, 0, 0.5)'
+ )
+ })(),
+ background: isDark ? '#111827' : '#f3f4f6',
+ opacity: magnifierSpring.opacity,
}}
>
-
{bbox.regionId}
-
{importance.toFixed(2)}
-