Map Meteor

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7type TrailParticle = {
8  positionX: number
9  positionY: number
10  radius: number
11  opacity: number
12  velocityX: number
13  velocityY: number
14  life: number
15  maxLife: number
16}
17 
18type ImpactParticle = {
19  positionX: number
20  positionY: number
21  radius: number
22  opacity: number
23  velocityX: number
24  velocityY: number
25  color: string
26}
27 
28type MeteorInstance = {
29  startX: number
30  startY: number
31  currentX: number
32  currentY: number
33  progress: number
34  trailParticles: TrailParticle[]
35  delay: number
36  active: boolean
37}
38 
39type RgbColor = {
40  red: number
41  green: number
42  blue: number
43}
44 
45type MeteorPhase = "falling" | "impact" | "fading" | "idle"
46 
47type MeteorRenderer = {
48  width: number
49  height: number
50  data: Uint8ClampedArray
51  context?: CanvasRenderingContext2D
52  meteors: MeteorInstance[]
53  impactParticles: ImpactParticle[]
54  isActive: boolean
55  startTime: number
56  progress: number
57  phase: MeteorPhase
58  flashOpacity: number
59  restartTimerId: number
60  onAdd: () => void
61  render: () => boolean
62  start: () => void
63  stop: () => void
64  reset: () => void
65}
66 
67type MeteorControl = {
68  start: () => void
69  stop: () => void
70  reset: () => void
71  isActive: boolean
72  progress: number
73  phase: MeteorPhase
74}
75 
76type MapMeteorProps = {
77  id: string
78  target: MapCoordinates
79  size?: number
80  angle?: number
81  speed?: number
82  intensity?: number
83  meteorColor?: string
84  trailColor?: string
85  impactColor?: string
86  tailLength?: number
87  meteorSize?: number
88  impactSize?: number
89  autoStart?: boolean
90  loop?: boolean
91  loopDelay?: number
92  shower?: boolean
93  showerCount?: number
94}
95 
96const DEFAULT_SIZE = 300
97const DEFAULT_ANGLE = 45
98const DEFAULT_SPEED = 2000
99const DEFAULT_INTENSITY = 1
100const DEFAULT_METEOR_COLOR = "#ffaa00"
101const DEFAULT_TRAIL_COLOR = "#ff6600"
102const DEFAULT_IMPACT_COLOR = "#ffdd00"
103const DEFAULT_TAIL_LENGTH = 0.4
104const DEFAULT_METEOR_SIZE = 8
105const DEFAULT_IMPACT_SIZE = 0.3
106const DEFAULT_LOOP_DELAY = 2000
107const DEFAULT_SHOWER_COUNT = 4
108 
109const DEGREES_TO_RADIANS = Math.PI / 180
110const TRAIL_SPAWN_RATE = 3
111const TRAIL_MIN_RADIUS = 2
112const TRAIL_MAX_RADIUS = 6
113const TRAIL_MIN_LIFE = 20
114const TRAIL_MAX_LIFE = 40
115const TRAIL_VELOCITY_SPREAD = 0.5
116const TRAIL_POSITION_SPREAD = 4
117const TRAIL_VELOCITY_DAMPING = 0.1
118const TRAIL_BASE_OPACITY = 0.8
119const TRAIL_OPACITY_VARIANCE = 0.2
120const TRAIL_GRAVITY_MULTIPLIER = 0.3
121// … truncated