All files / web/src/arcade-games/know-your-world/features/magnifier MagnifierPixelGrid.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * MagnifierPixelGrid Component
 *
 * Renders a grid overlay in the magnifier that shows the resolution
 * of mouse movements on the main map. Each grid cell represents one
 * screen pixel of cursor movement.
 *
 * The grid fades in/out based on proximity to the precision mode threshold,
 * providing visual feedback about when precision controls become necessary.
 */

export interface MagnifierPixelGridProps {
  /** Current zoom level */
  currentZoom: number
  /** Screen pixel ratio at current zoom */
  screenPixelRatio: number
  /** Precision mode threshold */
  precisionModeThreshold: number
  /** Cursor X position in SVG coordinates */
  cursorSvgX: number
  /** Cursor Y position in SVG coordinates */
  cursorSvgY: number
  /** ViewBox dimensions */
  viewBoxWidth: number
  viewBoxHeight: number
  /** Viewport scale from main map */
  viewportScale: number
  /** Whether dark mode is active */
  isDark: boolean
  /**
   * Whether to show the grid at all.
   * When false, the grid is hidden regardless of zoom level.
   * Use this to hide the grid on mobile where precision mode doesn't exist.
   */
  enabled?: boolean
}

export function MagnifierPixelGrid({
  currentZoom,
  screenPixelRatio,
  precisionModeThreshold,
  cursorSvgX,
  cursorSvgY,
  viewBoxWidth,
  viewBoxHeight,
  viewportScale,
  isDark,
  enabled = true,
}: MagnifierPixelGridProps) {
  // Early out if disabled (e.g., on mobile where precision mode doesn't exist)
  if (!enabled) {
    return null
  }

  // 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)
  const fadeStartRatio = precisionModeThreshold * 0.7
  const fadeEndRatio = precisionModeThreshold * 1.3

  if (screenPixelRatio < fadeStartRatio || screenPixelRatio > fadeEndRatio) {
    return null
  }

  // Calculate opacity: 0 at edges (70% and 130%), 1 at threshold (100%)
  let gridOpacity: number
  if (screenPixelRatio <= precisionModeThreshold) {
    // Fading in: 0 at 70%, 1 at 100%
    gridOpacity = (screenPixelRatio - fadeStartRatio) / (precisionModeThreshold - fadeStartRatio)
  } else {
    // Fading out: 1 at 100%, 0 at 130%
    gridOpacity = (fadeEndRatio - screenPixelRatio) / (fadeEndRatio - precisionModeThreshold)
  }

  // Calculate grid spacing in SVG units
  // Each grid cell represents one screen pixel of mouse movement on the main map
  const mainMapSvgUnitsPerScreenPixel = 1 / viewportScale
  const gridSpacingSvgUnits = mainMapSvgUnitsPerScreenPixel

  // Calculate magnified viewport dimensions for grid bounds
  const magnifiedViewBoxWidth = viewBoxWidth / currentZoom
  const magnifiedHeight = viewBoxHeight / currentZoom

  // Calculate grid bounds (magnifier viewport)
  const gridLeft = cursorSvgX - magnifiedViewBoxWidth / 2
  const gridRight = cursorSvgX + magnifiedViewBoxWidth / 2
  const gridTop = cursorSvgY - magnifiedHeight / 2
  const gridBottom = cursorSvgY + magnifiedHeight / 2

  // Calculate grid line positions aligned with cursor (crosshair center)
  const lines: Array<{ type: 'h' | 'v'; pos: number }> = []

  // Vertical lines (aligned with cursor X)
  const firstVerticalLine =
    Math.floor((gridLeft - cursorSvgX) / gridSpacingSvgUnits) * gridSpacingSvgUnits + cursorSvgX
  for (let x = firstVerticalLine; x <= gridRight; x += gridSpacingSvgUnits) {
    lines.push({ type: 'v', pos: x })
  }

  // Horizontal lines (aligned with cursor Y)
  const firstHorizontalLine =
    Math.floor((gridTop - cursorSvgY) / gridSpacingSvgUnits) * gridSpacingSvgUnits + cursorSvgY
  for (let y = firstHorizontalLine; y <= gridBottom; y += gridSpacingSvgUnits) {
    lines.push({ type: 'h', pos: y })
  }

  // Apply opacity to grid color
  const baseOpacity = isDark ? 0.5 : 0.6
  const finalOpacity = baseOpacity * gridOpacity
  const gridColor = `rgba(251, 191, 36, ${finalOpacity})`

  return (
    <g data-element="pixel-grid-overlay">
      {lines.map((line, i) =>
        line.type === 'v' ? (
          <line
            key={`vgrid-${i}`}
            x1={line.pos}
            y1={gridTop}
            x2={line.pos}
            y2={gridBottom}
            stroke={gridColor}
            strokeWidth={viewBoxWidth / 2000}
            vectorEffect="non-scaling-stroke"
          />
        ) : (
          <line
            key={`hgrid-${i}`}
            x1={gridLeft}
            y1={line.pos}
            x2={gridRight}
            y2={line.pos}
            stroke={gridColor}
            strokeWidth={viewBoxWidth / 2000}
            vectorEffect="non-scaling-stroke"
          />
        )
      )}
    </g>
  )
}