join.js

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('joiningForm');
    const usernameInput = document.getElementById('username');
    const fullNameInput = document.getElementById('fullName');
    const statusMsg = document.getElementById('statusMsg');
    const submitBtn = form.querySelector('.submit-btn');

    // --- Custom Cursor Logic ---
    const cursorDot = document.querySelector('.cursor-glow');
    const cursorOutline = document.querySelector('.cursor-outer');

    window.addEventListener('mousemove', (e) => {
        const posX = e.clientX;
        const posY = e.clientY;

        cursorDot.style.transform = `translate(${posX - 15}px, ${posY - 15}px)`;
        cursorOutline.style.transform = `translate(${posX - 30}px, ${posY - 30}px)`;
    });

    // Hide custom cursor when mouse leaves window
    document.addEventListener('mouseleave', () => {
        cursorDot.style.opacity = '0';
        cursorOutline.style.opacity = '0';
    });

    document.addEventListener('mouseenter', () => {
        cursorDot.style.opacity = '1';
        cursorOutline.style.opacity = '1';
    });

    // --- Real-time Validation ---

    // Username: Only 1 word
    usernameInput.addEventListener('input', (e) => {
        let val = e.target.value;
        // Remove spaces if typed
        if (val.includes(' ')) {
            e.target.value = val.replace(/\s/g, '');
        }
    });

    // Full Name: Capital Only
    fullNameInput.addEventListener('input', (e) => {
        e.target.value = e.target.value.toUpperCase();
    });

    // --- Form Submission ---
    form.addEventListener('submit', (e) => {
        // Extra Validation Check
        const usernameVal = usernameInput.value.trim();
        if (usernameVal.split(/\s+/).length > 1) {
            e.preventDefault();
            showStatus('Username must be exactly one word.', 'error');
            return;
        }

        // UI State: Loading (Visual feedback before page redirects)
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';
    });

    function showStatus(msg, type) {
        statusMsg.textContent = msg;
        statusMsg.className = type;
        statusMsg.style.display = 'block';
        
        // Scroll to status message
        statusMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    // --- Particle Animation System ---
    const canvas = document.getElementById('particleCanvas');
    const ctx = canvas.getContext('2d');
    let particles = [];
    let mouse = { x: null, y: null, radius: 150 };

    window.addEventListener('mousemove', (e) => {
        mouse.x = e.x;
        mouse.y = e.y;
    });

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        initParticles();
    }

    class Particle {
        constructor() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.size = Math.random() * 2 + 0.5;
            this.baseX = this.x;
            this.baseY = this.y;
            this.density = (Math.random() * 30) + 1;
            this.color = 'rgba(0, 234, 255, ' + (Math.random() * 0.5 + 0.2) + ')';
        }

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

        update() {
            let dx = mouse.x - this.x;
            let dy = mouse.y - this.y;
            let distance = Math.sqrt(dx * dx + dy * dy);
            let forceDirectionX = dx / distance;
            let forceDirectionY = dy / distance;
            let maxDistance = mouse.radius;
            let force = (maxDistance - distance) / maxDistance;
            let directionX = forceDirectionX * force * this.density;
            let directionY = forceDirectionY * force * this.density;

            if (distance < mouse.radius) {
                this.x -= directionX;
                this.y -= directionY;
            } else {
                if (this.x !== this.baseX) {
                    let dx = this.x - this.baseX;
                    this.x -= dx / 10;
                }
                if (this.y !== this.baseY) {
                    let dy = this.y - this.baseY;
                    this.y -= dy / 10;
                }
            }
        }
    }

    function initParticles() {
        particles = [];
        let numberOfParticles = (canvas.width * canvas.height) / 9000;
        for (let i = 0; i < numberOfParticles; i++) {
            particles.push(new Particle());
        }
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
        }
        requestAnimationFrame(animate);
    }

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