Map Steam

1"use client"
2 
3import { useEffect, useId, useRef, useState, useCallback } from "react"
4import { useMap } from "./hooks"
5import type { MapCoordinates } from "./types"
6 
7type SteamParticle = {
8  x: number
9  y: number
10  velocityX: number
11  velocityY: number
12  radius: number
13  life: number
14  maxLife: number
15  opacity: number
16}
17 
18type MapSteamProps = {
19  id?: string
20  coordinates: MapCoordinates
21  size?: number
22  intensity?: number
23  particleCount?: number
24  color?: string
25  drift?: number
26  riseSpeed?: number
27  autoStart?: boolean
28}
29 
30type SteamRenderer = {
31  width: number
32  height: number
33  data: Uint8ClampedArray
34  context?: CanvasRenderingContext2D
35  particles: SteamParticle[]
36  isActive: boolean
37  currentIntensity: number
38  onAdd: () => void
39  render: () => boolean
40  start: () => void
41  stop: () => void
42  setIntensity: (intensity: number) => void
43}
44 
45type RgbColor = {
46  red: number
47  green: number
48  blue: number
49}
50 
51type SteamControl = {
52  start: () => void
53  stop: () => void
54  setIntensity: (intensity: number) => void
55  isActive: boolean
56}
57 
58const DEFAULT_SIZE = 100
59const DEFAULT_INTENSITY = 1
60const DEFAULT_PARTICLE_COUNT = 40
61const DEFAULT_COLOR = "#ffffff"
62const DEFAULT_DRIFT = 0.4
63const DEFAULT_RISE_SPEED = 1
64const CONTROL_UPDATE_INTERVAL = 100
65 
66const hexToRgb = (hex: string): RgbColor => {
67  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
68 
69  if (!result) {
70    return { red: 255, green: 255, blue: 255 }
71  }
72 
73  return {
74    red: parseInt(result[1], 16),
75    green: parseInt(result[2], 16),
76    blue: parseInt(result[3], 16),
77  }
78}
79 
80const createParticle = (
81  centerX: number,
82  baseY: number,
83  intensity: number,
84  drift: number,
85  riseSpeed: number
86): SteamParticle => {
87  const spreadX = 20 * intensity
88 
89  return {
90    x: centerX + (Math.random() - 0.5) * spreadX,
91    y: baseY + Math.random() * 10,
92    velocityX: (Math.random() - 0.5) * drift,
93    velocityY: -riseSpeed * (0.8 + Math.random() * 0.4),
94    radius: 6 + Math.random() * 10 * intensity,
95    life: 0,
96    maxLife: 60 + Math.random() * 40,
97    opacity: 0.3 + Math.random() * 0.4,
98  }
99}
100 
101const fadeCanvasEdges = (context: CanvasRenderingContext2D, width: number, height: number) => {
102  const edgeSize = Math.max(4, Math.floor(width * 0.06))
103  context.globalCompositeOperation = "destination-out"
104 
105  const topGradient = context.createLinearGradient(0, 0, 0, edgeSize)
106  topGradient.addColorStop(0, "rgba(0, 0, 0, 1)")
107  topGradient.addColorStop(1, "rgba(0, 0, 0, 0)")
108// … truncated