Map Sandstorm

1"use client"
2 
3import { useEffect, useId, useRef, useState, useCallback } from "react"
4import { createPortal } from "react-dom"
5import { useMap } from "./hooks"
6 
7type RgbColor = {
8  red: number
9  green: number
10  blue: number
11}
12 
13type SandParticle = {
14  x: number
15  y: number
16  size: number
17  speed: number
18  opacity: number
19  wobble: number
20  wobbleSpeed: number
21}
22 
23type SandstormControl = {
24  start: () => void
25  stop: () => void
26  setIntensity: (intensity: number) => void
27  isActive: boolean
28}
29 
30type SandstormOverlayProps = {
31  intensity: number
32  particleCount: number
33  color: string
34  windSpeed: number
35  windDirection: number
36  visibility: number
37  turbulence: number
38  isActive: boolean
39  onControlReady: (control: SandstormControl) => void
40}
41 
42type MapSandstormProps = {
43  id?: string
44  intensity?: number
45  particleCount?: number
46  color?: string
47  windSpeed?: number
48  windDirection?: number
49  visibility?: number
50  turbulence?: number
51  autoStart?: boolean
52}
53 
54const DEFAULT_INTENSITY = 1
55const DEFAULT_PARTICLE_COUNT = 200
56const DEFAULT_COLOR = "#d4a574"
57const DEFAULT_WIND_SPEED = 4
58const DEFAULT_WIND_DIRECTION = 0
59const DEFAULT_VISIBILITY = 0.3
60const DEFAULT_TURBULENCE = 0.5
61 
62const MIN_INTENSITY = 0.1
63const MAX_INTENSITY = 3
64const BOUNDS_PADDING = 10
65const PARTICLE_MIN_SIZE = 1
66const PARTICLE_SIZE_RANGE = 3
67const PARTICLE_MIN_SPEED = 2
68const PARTICLE_SPEED_RANGE = 4
69const PARTICLE_MIN_OPACITY = 0.3
70const PARTICLE_OPACITY_RANGE = 0.5
71const PARTICLE_MIN_WOBBLE_SPEED = 0.02
72const PARTICLE_WOBBLE_SPEED_RANGE = 0.04
73const DEGREES_TO_RADIANS = Math.PI / 180
74const TURBULENCE_MULTIPLIER = 20
75const VERTICAL_WOBBLE_FACTOR = 0.1
76const HAZE_OPACITY_FACTOR = 0.4
77const CONTROL_UPDATE_INTERVAL = 100
78const DEFAULT_SAND_RGB: RgbColor = { red: 212, green: 165, blue: 116 }
79 
80const sandstormControls = new Map<string, SandstormControl>()
81 
82const hexToRgb = (hex: string): RgbColor => {
83  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
84 
85  if (!result) {
86    return DEFAULT_SAND_RGB
87  }
88 
89  return {
90    red: parseInt(result[1], 16),
91    green: parseInt(result[2], 16),
92    blue: parseInt(result[3], 16),
93  }
94}
95 
96const createParticle = (
97  canvasWidth: number,
98  canvasHeight: number,
99  windDirection: number,
100  intensity: number
101): SandParticle => {
102  const angle = windDirection * DEGREES_TO_RADIANS
103  const startFromLeft = Math.cos(angle) > 0
104 
105  return {
106    x: startFromLeft ? -BOUNDS_PADDING : canvasWidth + BOUNDS_PADDING,
107    y: Math.random() * canvasHeight,
108// … truncated