From 3eda493051965772056bcfc2bc8c14176d4efd3b Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 23 Nov 2025 14:04:53 -0600
Subject: [PATCH] fix: merge duplicate style attributes on magnifier SVG
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix TypeScript error caused by having two style attributes on the
magnifier SVG element. Merged width/height and filter into a single
style object.

Error: TS17001: JSX elements cannot have multiple attributes with the same name.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/MapRenderer.tsx                | 56 +++++++++----------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx b/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
index 610322d4..41487d02 100644
--- a/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
+++ b/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
@@ -1859,35 +1859,6 @@ export function MapRenderer({
           }}
         >
           <animated.svg
-            style={{
-              filter: (() => {
-                // Apply "disabled" visual effect when at threshold but not in precision mode
-                if (pointerLocked) return 'none'
-
-                const containerRect = containerRef.current?.getBoundingClientRect()
-                const svgRect = svgRef.current?.getBoundingClientRect()
-                if (!containerRect || !svgRect) return 'none'
-
-                const magnifierWidth = containerRect.width * 0.5
-                const viewBoxParts = mapData.viewBox.split(' ').map(Number)
-                const viewBoxWidth = viewBoxParts[2]
-                if (!viewBoxWidth || isNaN(viewBoxWidth)) return 'none'
-
-                const currentZoom = magnifierSpring.zoom.get()
-                const magnifiedViewBoxWidth = viewBoxWidth / currentZoom
-                const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth
-                const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width
-                const screenPixelRatio =
-                  mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit
-
-                // When at or above threshold (but not in precision mode), add disabled effect
-                if (screenPixelRatio >= PRECISION_MODE_THRESHOLD) {
-                  return 'brightness(0.6) saturate(0.5)'
-                }
-
-                return 'none'
-              })(),
-            }}
             viewBox={magnifierSpring.zoom.to((zoom) => {
               // Calculate magnified viewBox centered on cursor
               const containerRect = containerRef.current!.getBoundingClientRect()
@@ -1922,6 +1893,33 @@ export function MapRenderer({
             style={{
               width: '100%',
               height: '100%',
+              filter: (() => {
+                // Apply "disabled" visual effect when at threshold but not in precision mode
+                if (pointerLocked) return 'none'
+
+                const containerRect = containerRef.current?.getBoundingClientRect()
+                const svgRect = svgRef.current?.getBoundingClientRect()
+                if (!containerRect || !svgRect) return 'none'
+
+                const magnifierWidth = containerRect.width * 0.5
+                const viewBoxParts = mapData.viewBox.split(' ').map(Number)
+                const viewBoxWidth = viewBoxParts[2]
+                if (!viewBoxWidth || isNaN(viewBoxWidth)) return 'none'
+
+                const currentZoom = magnifierSpring.zoom.get()
+                const magnifiedViewBoxWidth = viewBoxWidth / currentZoom
+                const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth
+                const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width
+                const screenPixelRatio =
+                  mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit
+
+                // When at or above threshold (but not in precision mode), add disabled effect
+                if (screenPixelRatio >= PRECISION_MODE_THRESHOLD) {
+                  return 'brightness(0.6) saturate(0.5)'
+                }
+
+                return 'none'
+              })(),
             }}
           >
             {/* Render all regions in magnified view */}