Map Snow

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 SnowParticle = {
14  x: number
15  y: number
16  size: number
17  speed: number
18  opacity: number
19  wobble: number
20  wobbleSpeed: number
21  wobbleAmount: number
22}
23 
24type SnowControl = {
25  start: () => void
26  stop: () => void
27  setIntensity: (intensity: number) => void
28  isActive: boolean
29}
30 
31type SnowOverlayProps = {
32  intensity: number
33  particleCount: number
34  color: string
35  windSpeed: number
36  windDirection: number
37  fallSpeed: number
38  isActive: boolean
39  onControlReady: (control: SnowControl) => void
40}
41 
42type MapSnowProps = {
43  id?: string
44  intensity?: number
45  particleCount?: number
46  color?: string
47  windSpeed?: number
48  windDirection?: number
49  fallSpeed?: number
50  autoStart?: boolean
51}
52 
53const DEFAULT_INTENSITY = 1
54const DEFAULT_PARTICLE_COUNT = 150
55const DEFAULT_COLOR = "#ffffff"
56const DEFAULT_WIND_SPEED = 0.5
57const DEFAULT_WIND_DIRECTION = 0
58const DEFAULT_FALL_SPEED = 1
59 
60const MIN_INTENSITY = 0.1
61const MAX_INTENSITY = 3
62const PARTICLE_SPAWN_OFFSET = 100
63const PARTICLE_MIN_SIZE = 2
64const PARTICLE_SIZE_RANGE = 4
65const PARTICLE_MIN_SPEED = 0.5
66const PARTICLE_SPEED_RANGE = 1.5
67const PARTICLE_MIN_OPACITY = 0.4
68const PARTICLE_OPACITY_RANGE = 0.6
69const PARTICLE_MIN_WOBBLE_SPEED = 0.01
70const PARTICLE_WOBBLE_SPEED_RANGE = 0.03
71const PARTICLE_MIN_WOBBLE_AMOUNT = 0.5
72const PARTICLE_WOBBLE_AMOUNT_RANGE = 1.5
73const BOUNDS_PADDING = 20
74const DEGREES_TO_RADIANS = Math.PI / 180
75const WOBBLE_DRIFT_FACTOR = 0.3
76const GRADIENT_MID_OPACITY_FACTOR = 0.6
77const CONTROL_UPDATE_INTERVAL = 100
78 
79const snowControls = new Map<string, SnowControl>()
80 
81const hexToRgb = (hex: string): RgbColor => {
82  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
83 
84  if (!result) {
85    return { red: 255, green: 255, blue: 255 }
86  }
87 
88  return {
89    red: parseInt(result[1], 16),
90    green: parseInt(result[2], 16),
91    blue: parseInt(result[3], 16),
92  }
93}
94 
95const createParticle = (canvasWidth: number, canvasHeight: number, intensity: number): SnowParticle => {
96  return {
97    x: Math.random() * canvasWidth,
98    y: -BOUNDS_PADDING - Math.random() * PARTICLE_SPAWN_OFFSET,
99    size: PARTICLE_MIN_SIZE + Math.random() * PARTICLE_SIZE_RANGE * intensity,
100    speed: PARTICLE_MIN_SPEED + Math.random() * PARTICLE_SPEED_RANGE,
101// … truncated