Scoring-System/frontend/src/components/ParticleBackground.jsx

import React, { useEffect, useRef } from 'react';

const ParticleBackground = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;

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

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    const particles = [];
    const particleCount = 100;
    const meteors = [];
    const meteorCount = 8;

    class Particle {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.5;
        this.vy = (Math.random() - 0.5) * 0.5;
        this.size = Math.random() * 2;
        this.color = Math.random() > 0.5 ? 'rgba(0, 185, 107, ' : 'rgba(0, 240, 255, '; // Green or Blue
      }

      update() {
        this.x += this.vx;
        this.y += this.vy;

        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color + Math.random() * 0.5 + ')';
        ctx.fill();
      }
    }

    class Meteor {
      constructor() {
        this.reset();
      }

      reset() {
        this.x = Math.random() * canvas.width * 1.5; // Start further right
        this.y = Math.random() * -canvas.height; // Start further above
        this.vx = -(Math.random() * 5 + 5); // Faster
        this.vy = Math.random() * 5 + 5; // Faster
        this.len = Math.random() * 150 + 150; // Longer trail
        this.color = Math.random() > 0.5 ? 'rgba(0, 185, 107, ' : 'rgba(0, 240, 255, ';
        this.opacity = 0;
        this.maxOpacity = Math.random() * 0.5 + 0.2;
        this.wait = Math.random() * 300; // Random delay before showing up
      }

      update() {
        if (this.wait > 0) {
          this.wait--;
          return;
        }
        
        this.x += this.vx;
        this.y += this.vy;

        if (this.opacity < this.maxOpacity) {
          this.opacity += 0.02;
        }

        if (this.x < -this.len || this.y > canvas.height + this.len) {
          this.reset();
        }
      }

      draw() {
        if (this.wait > 0) return;
        
        const tailX = this.x - this.vx * (this.len / 15);
        const tailY = this.y - this.vy * (this.len / 15);
        
        const gradient = ctx.createLinearGradient(this.x, this.y, tailX, tailY);
        gradient.addColorStop(0, this.color + this.opacity + ')');
        gradient.addColorStop(0.1, this.color + (this.opacity * 0.5) + ')');
        gradient.addColorStop(1, this.color + '0)');

        ctx.save();
        
        // Add glow effect
        ctx.shadowBlur = 8;
        ctx.shadowColor = this.color.replace('rgba', 'rgb').replace(', ', ')');
        
        ctx.beginPath();
        ctx.strokeStyle = gradient;
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(tailX, tailY);
        ctx.stroke();
        
        // Add a bright head
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(this.x, this.y, 1, 0, Math.PI * 2);
        ctx.fill();
        
        ctx.restore();
      }
    }

    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle());
    }

    for (let i = 0; i < meteorCount; i++) {
      meteors.push(new Meteor());
    }

    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw meteors first (in background)
      meteors.forEach(m => {
        m.update();
        m.draw();
      });

      // Draw connecting lines
      ctx.lineWidth = 0.5;
      for (let i = 0; i < particleCount; i++) {
        for (let j = i; j < particleCount; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < 100) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(100, 255, 218, ${1 - distance / 100})`;
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            ctx.stroke();
          }
        }
      }

      particles.forEach(p => {
        p.update();
        p.draw();
      });

      animationFrameId = requestAnimationFrame(animate);
    };

    animate();

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

  return <canvas ref={canvasRef} id="particle-canvas" />;
};

export default ParticleBackground;