antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: complete screen pixel ratio refactoring - replace all instances 

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 <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-24 05:52:56 -06:00
parent efb39b013c
commit 360f8409d0
1 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
View File

@ -2211,14 +2211,15 @@ export function MapRenderer({
const viewBoxX = viewBoxParts[0] || 0 const viewBoxX = viewBoxParts[0] || 0
const viewBoxY = viewBoxParts[1] || 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 currentZoom = magnifierSpring.zoom.get()
const magnifiedViewBoxWidth = viewBoxWidth / currentZoom const screenPixelRatio = calculateScreenPixelRatio({
const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth magnifierWidth,
const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width viewBoxWidth,
const screenPixelRatio = svgWidth: svgRect.width,
mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit zoom: currentZoom,
})
// Fade grid in/out within 30% range on both sides of threshold // 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) // 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 // Calculate grid spacing in SVG units
// Each grid cell represents one screen pixel of mouse movement on the main map // Each grid cell represents one screen pixel of mouse movement on the main map
const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width
const gridSpacingSvgUnits = mainMapSvgUnitsPerScreenPixel const gridSpacingSvgUnits = mainMapSvgUnitsPerScreenPixel
// Calculate magnified viewport dimensions for grid bounds
const magnifiedViewBoxWidth = viewBoxWidth / currentZoom
// Get cursor position in SVG coordinates // Get cursor position in SVG coordinates
const scaleX = viewBoxWidth / svgRect.width const scaleX = viewBoxWidth / svgRect.width
const scaleY = viewBoxHeight / svgRect.height const scaleY = viewBoxHeight / svgRect.height
@ -2357,26 +2362,19 @@ export function MapRenderer({
const viewBoxParts = mapData.viewBox.split(' ').map(Number) const viewBoxParts = mapData.viewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
if (!viewBoxWidth || isNaN(viewBoxWidth)) { if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) {
return `${z.toFixed(1)}×` return `${z.toFixed(1)}×`
} }
// SVG units visible in magnifier const screenPixelRatio = calculateScreenPixelRatio({
const magnifiedViewBoxWidth = viewBoxWidth / z magnifierWidth,
viewBoxWidth,
// Screen pixels per SVG unit in magnifier window svgWidth: svgRect.width,
const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth zoom: z,
})
// 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
// If at or above threshold, show notice about activating precision controls // 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' return 'Click to activate precision mode'
} }
@ -2399,17 +2397,18 @@ export function MapRenderer({
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * 0.5
const viewBoxParts = mapData.viewBox.split(' ').map(Number) const viewBoxParts = mapData.viewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
if (!viewBoxWidth || isNaN(viewBoxWidth)) return null if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return null
const currentZoom = magnifierSpring.zoom.get() const currentZoom = magnifierSpring.zoom.get()
const magnifiedViewBoxWidth = viewBoxWidth / currentZoom const screenPixelRatio = calculateScreenPixelRatio({
const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth magnifierWidth,
const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width viewBoxWidth,
const screenPixelRatio = svgWidth: svgRect.width,
mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit zoom: currentZoom,
})
// Only show scrim when at or above threshold // Only show scrim when at or above threshold
if (screenPixelRatio < PRECISION_MODE_THRESHOLD) return null if (!isAboveThreshold(screenPixelRatio, PRECISION_MODE_THRESHOLD)) return null
return ( return (
<div <div