Map Tsunami

1"use client"
2 
3import { useEffect, useId, useMemo, useRef, useState } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7type FoamParticle = {
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 DebrisParticle = {
19  positionX: number
20  positionY: number
21  size: number
22  rotation: number
23  rotationSpeed: number
24  opacity: number
25  velocityX: number
26  velocityY: number
27}
28 
29type RgbColor = {
30  red: number
31  green: number
32  blue: number
33}
34 
35type TsunamiPhase = "approaching" | "crashing" | "receding" | "idle"
36 
37type TsunamiRenderer = {
38  width: number
39  height: number
40  data: Uint8ClampedArray
41  context?: CanvasRenderingContext2D
42  foamParticles: FoamParticle[]
43  debrisParticles: DebrisParticle[]
44  isActive: boolean
45  startTime: number
46  waveProgress: number
47  phase: TsunamiPhase
48  restartTimerId: number
49  onAdd: () => void
50  render: () => boolean
51  start: () => void
52  stop: () => void
53  reset: () => void
54}
55 
56type TsunamiControl = {
57  start: () => void
58  stop: () => void
59  reset: () => void
60  isActive: boolean
61  progress: number
62  phase: TsunamiPhase
63}
64 
65type MapTsunamiProps = {
66  id?: string
67  origin: MapCoordinates
68  target: MapCoordinates
69  size?: number
70  waveHeight?: number
71  waveWidth?: number
72  speed?: number
73  waterColor?: string
74  foamColor?: string
75  particleCount?: number
76  autoStart?: boolean
77  loop?: boolean
78  loopDelay?: number
79}
80 
81const DEFAULT_SIZE = 300
82const DEFAULT_WAVE_HEIGHT = 0.4
83const DEFAULT_WAVE_WIDTH = 0.8
84const DEFAULT_SPEED = 3000
85const DEFAULT_WATER_COLOR = "#0077be"
86const DEFAULT_FOAM_COLOR = "#ffffff"
87const DEFAULT_PARTICLE_COUNT = 40
88const DEFAULT_LOOP_DELAY = 2000
89 
90const PARTICLE_SPREAD_ANGLE = 60
91const DEGREES_TO_RADIANS = Math.PI / 180
92const HALF_CIRCLE_DEGREES = 180
93const FULL_CIRCLE_DEGREES = 360
94const CRASH_DURATION_MULTIPLIER = 0.5
95const WAVE_START_DISTANCE = 0.45
96const CRASH_OFFSET = 0.1
97const TRAIL_LENGTH = 0.5
98const TRAIL_WIDTH = 0.6
99const FOAM_HEIGHT_RATIO = 0.8
100const WAVE_SEGMENTS = 20
101const FOAM_PARTICLE_MIN_RADIUS = 3
102const FOAM_PARTICLE_MAX_RADIUS = 8
103const FOAM_MIN_OPACITY = 0.6
104const FOAM_MAX_OPACITY = 0.4
105const FOAM_MIN_LIFE = 30
106const FOAM_MAX_LIFE = 30
107const DEBRIS_MIN_SIZE = 2
108const DEBRIS_MAX_SIZE = 4
109const DEBRIS_MIN_OPACITY = 0.4
110const DEBRIS_MAX_OPACITY = 0.3
111const DEBRIS_COLOR = "101, 67, 33"
112const GRAVITY = 0.1
113const DEBRIS_GRAVITY = 0.15
114const FRICTION = 0.98
115// … truncated