Map Cyclone

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates, MapPath } from "./types"
6 
7type RgbColor = {
8  r: number
9  g: number
10  b: number
11}
12 
13type CycloneParticle = {
14  angle: number
15  radius: number
16  height: number
17  angularVelocity: number
18  verticalVelocity: number
19  size: number
20  opacity: number
21  type: "funnel" | "debris" | "dust"
22}
23 
24type MapCycloneProps = {
25  id: string
26  coordinates: MapCoordinates
27  path?: MapPath
28  duration?: number
29  loop?: boolean
30  size?: number
31  intensity?: number
32  scale?: number
33  particleCount?: number
34  funnelColor?: string
35  debrisColor?: string
36  rotationSpeed?: number
37  autoStart?: boolean
38}
39 
40type CycloneRenderer = {
41  width: number
42  height: number
43  data: Uint8ClampedArray
44  context?: CanvasRenderingContext2D
45  particles: CycloneParticle[]
46  isActive: boolean
47  startTime: number
48  currentIntensity: number
49  targetIntensity: number
50  currentScale: number
51  targetScale: number
52  rotationSpeed: number
53  onAdd: () => void
54  render: () => boolean
55  start: () => void
56  stop: () => void
57  setIntensity: (intensity: number) => void
58  setScale: (scale: number, instant?: boolean) => void
59  setRotationSpeed: (speed: number) => void
60}
61 
62type CycloneControl = {
63  start: () => void
64  stop: () => void
65  setIntensity: (intensity: number) => void
66  setScale: (scale: number, instant?: boolean) => void
67  setRotationSpeed: (speed: number) => void
68  isActive: boolean
69  isMoving: boolean
70  progress: number
71  scale: number
72  rotationSpeed: number
73}
74 
75const DEFAULT_SIZE = 200
76const DEFAULT_INTENSITY = 1
77const DEFAULT_SCALE = 1
78const DEFAULT_PARTICLE_COUNT = 120
79const DEFAULT_FUNNEL_COLOR = "#8b9dc3"
80const DEFAULT_DEBRIS_COLOR = "#5c4033"
81const DEFAULT_ROTATION_SPEED = 1
82const DEFAULT_DURATION = 10000
83 
84const FUNNEL_BASE_RADIUS_RATIO = 0.05
85const FUNNEL_TOP_RADIUS_RATIO = 0.25
86const FUNNEL_RADIUS_VARIATION_MIN = 0.8
87const FUNNEL_RADIUS_VARIATION_RANGE = 0.4
88const FUNNEL_ANGULAR_VELOCITY_BASE = 0.08
89const FUNNEL_ANGULAR_VELOCITY_RANGE = 0.04
90const FUNNEL_VERTICAL_VELOCITY_BASE = 0.003
91const FUNNEL_VERTICAL_VELOCITY_RANGE = 0.002
92const FUNNEL_SIZE_BASE = 2
93const FUNNEL_SIZE_RANGE = 3
94const FUNNEL_OPACITY_BASE = 0.4
95const FUNNEL_OPACITY_RANGE = 0.4
96 
97const DEBRIS_HEIGHT_MAX = 0.7
98const DEBRIS_BASE_RADIUS_RATIO = 0.08
99const DEBRIS_TOP_RADIUS_RATIO = 0.2
100const DEBRIS_RADIUS_VARIATION_MIN = 1.2
101const DEBRIS_RADIUS_VARIATION_RANGE = 0.8
102const DEBRIS_ANGULAR_VELOCITY_BASE = 0.06
103// … truncated