Map Targeting Reticle

1"use client"
2 
3import { useEffect, useRef, useCallback, useState, type CSSProperties } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7const DEFAULT_SIZE = 120
8const DEFAULT_BRACKET_LENGTH = 24
9const DEFAULT_BRACKET_THICKNESS = 2
10const DEFAULT_GAP = 8
11const DEFAULT_COLOR = "rgba(59, 130, 246, 0.9)"
12const DEFAULT_LOCKED_COLOR = "rgba(34, 197, 94, 0.9)"
13const DEFAULT_TRACKING_SPEED = 0.02
14const DEFAULT_LOCKED_THICKNESS_MULTIPLIER = 2.5
15const DEFAULT_CROSSHAIR_LENGTH = 12
16 
17type MapTargetingReticleProps = {
18  coordinates: MapCoordinates
19  target?: MapCoordinates
20  size?: number
21  bracketLength?: number
22  bracketThickness?: number
23  gap?: number
24  color?: string
25  lockedColor?: string
26  locked?: boolean
27  trackingSpeed?: number
28  showCrosshair?: boolean
29  showCoordinates?: boolean
30  onLocked?: () => void
31}
32 
33type Corner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight"
34 
35type CornerBracketProps = {
36  corner: Corner
37  bracketLength: number
38  bracketThickness: number
39  gap: number
40  color: string
41}
42 
43const CornerBracket = ({ corner, bracketLength, bracketThickness, gap, color }: CornerBracketProps) => {
44  const getPosition = (): CSSProperties => {
45    switch (corner) {
46      case "topLeft":
47        return { top: gap, left: gap }
48      case "topRight":
49        return { top: gap, right: gap }
50      case "bottomLeft":
51        return { bottom: gap, left: gap }
52      case "bottomRight":
53        return { bottom: gap, right: gap }
54    }
55  }
56 
57  const getTransform = (): string => {
58    switch (corner) {
59      case "topLeft":
60        return "rotate(0deg)"
61      case "topRight":
62        return "rotate(90deg)"
63      case "bottomLeft":
64        return "rotate(-90deg)"
65      case "bottomRight":
66        return "rotate(180deg)"
67    }
68  }
69 
70  const style: CSSProperties = {
71    position: "absolute",
72    width: bracketLength,
73    height: bracketLength,
74    ...getPosition(),
75  }
76 
77  return (
78    <div style={style}>
79      <svg
80        width={bracketLength}
81        height={bracketLength}
82        viewBox={`0 0 ${bracketLength} ${bracketLength}`}
83        style={{ transform: getTransform() }}
84      >
85        <path
86          d={`M 0 ${bracketLength} L 0 0 L ${bracketLength} 0`}
87          fill="none"
88          stroke={color}
89          strokeWidth={bracketThickness}
90          strokeLinecap="square"
91        />
92      </svg>
93    </div>
94  )
95}
96 
97type CrosshairProps = {
98  size: number
99  color: string
100  thickness: number
101}
102 
103// … truncated