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

fix(know-your-world): reduce magnifier size to 1/3 of pane dimensions 

Change magnifier from 1/2 width (and 1/4 height) to 1/3 of both
container dimensions. This makes the magnifier less obtrusive since
the map is centered in the pane.

- Add MAGNIFIER_SIZE_RATIO constant (1/3)
- Update magnifierWidth to use containerRect.width * MAGNIFIER_SIZE_RATIO
- Update magnifierHeight to use containerRect.height * MAGNIFIER_SIZE_RATIO

🤖 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-26 09:25:25 -06:00
parent bb2d6fc7d8
commit 61a438dd31
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,9 @@ const PRECISION_MODE_THRESHOLD = 20
const LABEL_FADE_RADIUS = 150 // pixels - labels within this radius fade const LABEL_FADE_RADIUS = 150 // pixels - labels within this radius fade
const LABEL_MIN_OPACITY = 0.08 // minimum opacity for faded labels const LABEL_MIN_OPACITY = 0.08 // minimum opacity for faded labels
// Magnifier size as fraction of container dimensions (1/3 of width and height)
const MAGNIFIER_SIZE_RATIO = 1 / 3
/** /**
* Calculate label opacity based on distance from cursor and animation state. * Calculate label opacity based on distance from cursor and animation state.
* Labels fade to low opacity when cursor is near to reduce visual clutter. * Labels fade to low opacity when cursor is near to reduce visual clutter.
@ -1582,8 +1585,8 @@ export function MapRenderer({
setZoomSearchDebugInfo(zoomSearchResult) setZoomSearchDebugInfo(zoomSearchResult)
// Calculate magnifier dimensions (needed for positioning) // Calculate magnifier dimensions (needed for positioning)
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const magnifierHeight = magnifierWidth / 2 const magnifierHeight = containerRect.height * MAGNIFIER_SIZE_RATIO
// Calculate magnifier position (opposite corner from cursor) // Calculate magnifier position (opposite corner from cursor)
// magnifierWidth and magnifierHeight already declared above // magnifierWidth and magnifierHeight already declared above
@ -1609,7 +1612,7 @@ export function MapRenderer({
if (!pointerLocked && containerRef.current && svgRef.current) { if (!pointerLocked && containerRef.current && svgRef.current) {
const containerRect = containerRef.current.getBoundingClientRect() const containerRect = containerRef.current.getBoundingClientRect()
const svgRect = svgRef.current.getBoundingClientRect() const svgRect = svgRef.current.getBoundingClientRect()
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const viewBoxParts = displayViewBox.split(' ').map(Number) const viewBoxParts = displayViewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
@ -2353,7 +2356,7 @@ export function MapRenderer({
const svgRect = svgRef.current?.getBoundingClientRect() const svgRect = svgRef.current?.getBoundingClientRect()
if (!containerRect || !svgRect) return 'none' if (!containerRect || !svgRect) return 'none'
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const viewBoxParts = displayViewBox.split(' ').map(Number) const viewBoxParts = displayViewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return 'none' if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return 'none'
@ -2494,7 +2497,7 @@ export function MapRenderer({
const svgRect = svgRef.current?.getBoundingClientRect() const svgRect = svgRef.current?.getBoundingClientRect()
if (!containerRect || !svgRect) return null if (!containerRect || !svgRect) return null
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const viewBoxParts = displayViewBox.split(' ').map(Number) const viewBoxParts = displayViewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
const viewBoxHeight = viewBoxParts[3] const viewBoxHeight = viewBoxParts[3]
@ -2681,7 +2684,7 @@ export function MapRenderer({
if (!containerRect || !svgRect || !cursorPosition) return '-9999px' if (!containerRect || !svgRect || !cursorPosition) return '-9999px'
// Magnifier dimensions // Magnifier dimensions
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
// Convert cursor to SVG coordinates (same as magnifier viewBox calc) // Convert cursor to SVG coordinates (same as magnifier viewBox calc)
const scaleX = viewBoxWidth / svgRect.width const scaleX = viewBoxWidth / svgRect.width
@ -2704,8 +2707,8 @@ export function MapRenderer({
if (!containerRect || !svgRect || !cursorPosition) return '-9999px' if (!containerRect || !svgRect || !cursorPosition) return '-9999px'
// Magnifier dimensions (2:1 aspect ratio) // Magnifier dimensions (2:1 aspect ratio)
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const magnifierHeight = magnifierWidth / 2 const magnifierHeight = containerRect.height * MAGNIFIER_SIZE_RATIO
// Convert cursor to SVG coordinates (same as magnifier viewBox calc) // Convert cursor to SVG coordinates (same as magnifier viewBox calc)
const scaleY = viewBoxHeight / svgRect.height const scaleY = viewBoxHeight / svgRect.height
@ -2780,7 +2783,7 @@ export function MapRenderer({
return `${z.toFixed(1)}×` return `${z.toFixed(1)}×`
} }
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const viewBoxParts = displayViewBox.split(' ').map(Number) const viewBoxParts = displayViewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
@ -2816,7 +2819,7 @@ export function MapRenderer({
const svgRect = svgRef.current?.getBoundingClientRect() const svgRect = svgRef.current?.getBoundingClientRect()
if (!containerRect || !svgRect) return null if (!containerRect || !svgRect) return null
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const viewBoxParts = displayViewBox.split(' ').map(Number) const viewBoxParts = displayViewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2] const viewBoxWidth = viewBoxParts[2]
if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return null if (!viewBoxWidth || Number.isNaN(viewBoxWidth)) return null
@ -2859,8 +2862,8 @@ export function MapRenderer({
const svgRect = svgRef.current.getBoundingClientRect() const svgRect = svgRef.current.getBoundingClientRect()
// Get magnifier dimensions and position // Get magnifier dimensions and position
const magnifierWidth = containerRect.width * 0.5 const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
const magnifierHeight = magnifierWidth / 2 // aspectRatio 2/1 const magnifierHeight = containerRect.height * MAGNIFIER_SIZE_RATIO // aspectRatio 2/1
// Magnifier position (animated via spring, but we use target for calculation) // Magnifier position (animated via spring, but we use target for calculation)
const magTop = targetTop const magTop = targetTop