Map Lightning

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7type RgbColor = {
8  red: number
9  green: number
10  blue: number
11}
12 
13type LightningBranch = {
14  startX: number
15  startY: number
16  endX: number
17  endY: number
18  width: number
19  opacity: number
20}
21 
22type LightningBolt = {
23  segments: LightningBranch[]
24  flashOpacity: number
25  life: number
26  maxLife: number
27}
28 
29type LightningControl = {
30  strike: () => void
31  isActive: boolean
32}
33 
34type LightningRenderer = {
35  width: number
36  height: number
37  data: Uint8ClampedArray
38  context?: CanvasRenderingContext2D
39  bolts: LightningBolt[]
40  isActive: boolean
41  lastStrikeTime: number
42  onAdd: () => void
43  render: () => boolean
44  strike: () => void
45}
46 
47type MapLightningProps = {
48  id: string
49  coordinates: MapCoordinates
50  size?: number
51  boltColor?: string
52  flashColor?: string
53  flashIntensity?: number
54  autoStrike?: boolean
55  strikeInterval?: number
56  boltWidth?: number
57  branchProbability?: number
58}
59 
60const DEFAULT_SIZE = 200
61const DEFAULT_BOLT_COLOR = "#ffffff"
62const DEFAULT_FLASH_COLOR = "#e0e8ff"
63const DEFAULT_FLASH_INTENSITY = 0.6
64const DEFAULT_STRIKE_INTERVAL = 4000
65const DEFAULT_BOLT_WIDTH = 4
66const DEFAULT_BRANCH_PROBABILITY = 0.3
67 
68const MIN_STRIKE_INTERVAL = 500
69const BOLT_LIFETIME = 8
70const FLASH_DECAY_RATE = 0.5
71const SEGMENT_MIN_LENGTH = 20
72const SEGMENT_MAX_LENGTH = 40
73const SEGMENT_OFFSET_RANGE = 30
74const BRANCH_LENGTH_FACTOR = 0.5
75const BRANCH_WIDTH_FACTOR = 0.5
76const BRANCH_ANGLE_RANGE = 60
77const GLOW_BLUR_AMOUNT = 20
78const CORE_GLOW_BLUR = 10
79const DEGREES_TO_RADIANS = Math.PI / 180
80const PIXEL_RATIO = 2
81const CONTROL_UPDATE_INTERVAL = 50
82const MAX_BRANCH_DEPTH = 3
83const BRANCH_OPACITY_DECAY = 0.2
84const WIDTH_DECAY_FACTOR = 0.05
85const FLASH_THRESHOLD = 0.01
86const OUTER_GLOW_WIDTH_MULTIPLIER = 3
87const OUTER_GLOW_OPACITY_MULTIPLIER = 0.5
88 
89const lightningControls = new Map<string, LightningControl>()
90 
91export const useLightningControl = (id: string): LightningControl | null => {
92  const [, forceUpdate] = useState(0)
93 
94  useEffect(() => {
95    const interval = setInterval(() => {
96      forceUpdate((previous) => {
97        return previous + 1
98      })
99    }, CONTROL_UPDATE_INTERVAL)
100 
101    return () => {
102      clearInterval(interval)
103    }
104  }, [])
105 
106  return lightningControls.get(id) || null
107}
108 
109const hexToRgb = (hex: string): RgbColor => {
110  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
111 
112  if (!result) {
113// … truncated