OpenFlare/frontend/components/ui/fireworks-effect.tsx

'use client';

import { useEffect, useRef } from 'react';

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  alpha: number;
  color: string;
  decay: number;
}

interface Firework {
  x: number;
  y: number;
  targetY: number;
  vx: number;
  vy: number;
  color: string;
  particles: Particle[];
  exploded: boolean;
  dead: boolean;
}

export function FireworksEffect() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let animationFrameId: number;
    let fireworks: Firework[] = [];

    const colors = [
      '#ff0000',
      '#ff7f00',
      '#ffff00',
      '#00ff00',
      '#0000ff',
      '#4b0082',
      '#8f00ff',
      '#ff1493',
      '#00bfff',
      '#ffd700',
      '#ff4500',
      '#32cd32',
    ];

    const resizeCanvas = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };

    const createFirework = () => {
      const x = Math.random() * canvas.width;
      const y = canvas.height;

      const targetY =
        canvas.height * 0.2 + Math.random() * (canvas.height * 0.5);
      const speed = 8 + Math.random() * 5;

      fireworks.push({
        x,
        y,
        targetY,
        vx: (Math.random() - 0.5) * 3,
        vy: -speed,
        color: colors[Math.floor(Math.random() * colors.length)],
        particles: [],
        exploded: false,
        dead: false,
      });
    };

    const createParticles = (x: number, y: number, color: string) => {
      const particleCount = 50 + Math.random() * 50;
      const particles: Particle[] = [];

      for (let i = 0; i < particleCount; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 5 + 1;
        particles.push({
          x,
          y,
          vx: Math.cos(angle) * speed,
          vy: Math.sin(angle) * speed,
          alpha: 1,
          color: color,
          decay: Math.random() * 0.01 + 0.005,
        });
      }
      return particles;
    };

    const updateAndDraw = () => {
      if (!ctx || !canvas) return;

      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.globalCompositeOperation = 'lighter';

      if (Math.random() < 0.04) {
        createFirework();
      }

      fireworks.forEach((fw) => {
        if (fw.dead) return;

        if (!fw.exploded) {
          ctx.beginPath();
          ctx.arc(fw.x, fw.y, 2, 0, Math.PI * 2);
          ctx.fillStyle = fw.color;
          ctx.fill();

          fw.x += fw.vx;
          fw.y += fw.vy;
          fw.vy += 0.15;

          if (fw.vy >= 0 || fw.y <= fw.targetY) {
            fw.exploded = true;
            fw.particles = createParticles(fw.x, fw.y, fw.color);
          }
        } else {
          for (let i = fw.particles.length - 1; i >= 0; i--) {
            const p = fw.particles[i];

            ctx.beginPath();
            ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2);
            ctx.fillStyle = p.color;
            ctx.globalAlpha = p.alpha;
            ctx.fill();
            ctx.globalAlpha = 1;

            p.x += p.vx;
            p.y += p.vy;
            p.vy += 0.1;
            p.alpha -= p.decay;

            if (p.alpha <= 0) {
              fw.particles.splice(i, 1);
            }
          }

          if (fw.particles.length === 0) {
            fw.dead = true;
          }
        }
      });

      fireworks = fireworks.filter((fw) => !fw.dead);

      animationFrameId = requestAnimationFrame(updateAndDraw);
    };

    resizeCanvas();
    updateAndDraw();

    window.addEventListener('resize', resizeCanvas);

    return () => {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className='fixed inset-0 pointer-events-none z-50'
      style={{ background: 'transparent' }}
    />
  );
}