From 360f8409d0742751dd8bcdb906e38ec85bf70fa9 Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Mon, 24 Nov 2025 05:52:56 -0600 Subject: [PATCH] refactor: complete screen pixel ratio refactoring - replace all instances MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Completed replacing ALL screen pixel ratio calculations with utility functions. This eliminates all remaining code duplication. Changes: - Replaced 3 more calculations in rendering sections: 1. Pixel grid overlay fade calculation (line ~2217) 2. Magnifier label text calculation (line ~2365) 3. Gold scrim overlay threshold check (line ~2399) - Added back intermediate variables needed for grid calculations: - mainMapSvgUnitsPerScreenPixel (for grid spacing) - magnifiedViewBoxWidth (for grid bounds) Results: - ALL 8 screen pixel ratio calculations now use utility functions - Zero code duplication remaining - All variables properly scoped - TypeScript passes with no new errors Next: Extract zoom capping logic to separate utility module. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/MapRenderer.tsx | 55 +++++++++---------- 1 file changed, 27 insertions(+), 28 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 cb464f92..1551ac80 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 @@ -2211,14 +2211,15 @@ export function MapRenderer({ const viewBoxX = viewBoxParts[0] || 0 const viewBoxY = viewBoxParts[1] || 0 - if (!viewBoxWidth || isNaN(viewBoxWidth)) return null + if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return null const currentZoom = magnifierSpring.zoom.get() - const magnifiedViewBoxWidth = viewBoxWidth / currentZoom - const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth - const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width - const screenPixelRatio = - mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit + const screenPixelRatio = calculateScreenPixelRatio({ + magnifierWidth, + viewBoxWidth, + svgWidth: svgRect.width, + zoom: currentZoom, + }) // Fade grid in/out within 30% range on both sides of threshold // Visible from 70% to 130% of threshold (14 to 26 px/px at threshold=20) @@ -2241,8 +2242,12 @@ export function MapRenderer({ // Calculate grid spacing in SVG units // Each grid cell represents one screen pixel of mouse movement on the main map + const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width const gridSpacingSvgUnits = mainMapSvgUnitsPerScreenPixel + // Calculate magnified viewport dimensions for grid bounds + const magnifiedViewBoxWidth = viewBoxWidth / currentZoom + // Get cursor position in SVG coordinates const scaleX = viewBoxWidth / svgRect.width const scaleY = viewBoxHeight / svgRect.height @@ -2357,26 +2362,19 @@ export function MapRenderer({ const viewBoxParts = mapData.viewBox.split(' ').map(Number) const viewBoxWidth = viewBoxParts[2] - if (!viewBoxWidth || isNaN(viewBoxWidth)) { + if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) { return `${z.toFixed(1)}×` } - // SVG units visible in magnifier - const magnifiedViewBoxWidth = viewBoxWidth / z - - // Screen pixels per SVG unit in magnifier window - const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth - - // SVG units per screen pixel on main map - const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width - - // Screen pixel movement in magnifier = - // (SVG units moved on main map) × (screen pixels per SVG unit in magnifier) - const screenPixelRatio = - mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit + const screenPixelRatio = calculateScreenPixelRatio({ + magnifierWidth, + viewBoxWidth, + svgWidth: svgRect.width, + zoom: z, + }) // If at or above threshold, show notice about activating precision controls - if (screenPixelRatio >= PRECISION_MODE_THRESHOLD) { + if (isAboveThreshold(screenPixelRatio, PRECISION_MODE_THRESHOLD)) { return 'Click to activate precision mode' } @@ -2399,17 +2397,18 @@ export function MapRenderer({ const magnifierWidth = containerRect.width * 0.5 const viewBoxParts = mapData.viewBox.split(' ').map(Number) const viewBoxWidth = viewBoxParts[2] - if (!viewBoxWidth || isNaN(viewBoxWidth)) return null + if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return null const currentZoom = magnifierSpring.zoom.get() - const magnifiedViewBoxWidth = viewBoxWidth / currentZoom - const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth - const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width - const screenPixelRatio = - mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit + const screenPixelRatio = calculateScreenPixelRatio({ + magnifierWidth, + viewBoxWidth, + svgWidth: svgRect.width, + zoom: currentZoom, + }) // Only show scrim when at or above threshold - if (screenPixelRatio < PRECISION_MODE_THRESHOLD) return null + if (!isAboveThreshold(screenPixelRatio, PRECISION_MODE_THRESHOLD)) return null return (