script.js

// Loot Box Generator
function initLootBoxes() {
    const lootBoxes = document.getElementById('lootBoxes');
    const rarities = ['common', 'rare', 'epic', 'legendary'];
    const colors = {
        'common': '#2ecc71',
        'rare': '#3498db',
        'epic': '#9b59b6',
        'legendary': '#f1c40f'
    };
    
    // Create 24 loot boxes (12 visible, 12 for seamless looping)
    for (let i = 0; i < 24; i++) {
        const rarity = rarities[Math.floor(Math.random() * rarities.length)];
        const box = document.createElement('div');
        box.className = `loot-box ${rarity} flex-shrink-0`;
        box.innerHTML = `<i data-feather="box" stroke="${colors[rarity]}"></i>`;
        lootBoxes.appendChild(box);
    }
    
    // Animate the loot boxes
    let position = 0;
    let speed = 20;
    let deceleration = 0.95;
    let selectedBox = Math.floor(Math.random() * 12) + 6; // Random box between 6-18
    
    const animate = () => {
        position += speed;
        speed *= deceleration;
        
        // Stop when we reach the selected box
        if (speed < 0.5 && Math.abs(position % 120) < 1) {
            // Select the center box
            lootBoxes.style.transform = `translateX(calc(-${selectedBox * 110}px + 50%))`;
            
            // Highlight the selected box
            const boxes = document.querySelectorAll('.loot-box');
            boxes.forEach((box, index) => {
                if (index === selectedBox) {
                    box.classList.add('selected');
                    
                    // Show prize popup after slight delay
                    setTimeout(() => {
                        showPrize(selectedBox);
                    }, 800);
                } else {
                    box.style.filter = index < selectedBox - 3 || index > selectedBox + 3 ? 
                        'blur(3px) opacity(0.5)' : 'blur(1px) opacity(0.8)';
                }
            });
        } else {
            lootBoxes.style.transform = `translateX(calc(-${position % 2400}px + 50%))`;
            requestAnimationFrame(animate);
        }
    };
    
    animate();
}

// Multiplier Generator
function initMultipliers() {
    const multipliers = document.getElementById('multipliers');
    multiplierValues = ['×1', '×1.25', '×1.5', '×2', '×3', '×5', '×1', '×1.25', '×1.5', '×2', '×3', '×5'];
    
    multiplierValues.forEach(value => {
        const pill = document.createElement('div');
        pill.className = 'multiplier-pill flex-shrink-0';
        pill.textContent = value;
        multipliers.appendChild(pill);
    });
    
    // Animate multipliers
    let position = 0;
    let speed = 15;
    let deceleration = 0.93;
    let selectedMultiplier = Math.floor(Math.random() * 6) + 3; // Random between 3-8
    
    const animateMultipliers = () => {
        position += speed;
        speed *= deceleration;
        
        if (speed < 0.5 && Math.abs(position % 480) < 1) {
            // Select the center multiplier
            multipliers.style.transform = `translateX(calc(-${selectedMultiplier * 100}px + 50%))`;
            
            // Highlight the selected multiplier
            const pills = document.querySelectorAll('.multiplier-pill');
            pills.forEach((pill, index) => {
                if (index === selectedMultiplier) {
                    pill.classList.add('selected');
                } else {
                    pill.style.filter = index < selectedMultiplier - 2 || index > selectedMultiplier + 2 ? 
                        'blur(3px) opacity(0.5)' : 'blur(1px) opacity(0.8)';
                }
            });
        } else {
            multipliers.style.transform = `translateX(calc(-${position % 1200}px + 50%))`;
            requestAnimationFrame(animateMultipliers);
        }
    };
    
    animateMultipliers();
}

// Show prize popup
function showPrize(boxIndex) {
    const prizeValues = ['×1', '×1.5', '×2', '×3', '×5'];
    const prizePopup = document.getElementById('prizePopup');
    const prizeValue = document.getElementById('prizeValue');
    
    // Determine prize based on box index (just for demo)
    const prize = prizeValues[boxIndex % prizeValues.length];
    prizeValue.textContent = prize;
    
    prizePopup.classList.remove('hidden');
    
    // Add confetti effect
    setTimeout(() => {
        prizePopup.style.animation = 'none';
        void prizePopup.offsetWidth; // Trigger reflow
        prizePopup.style.animation = 'rise-up 0.5s ease-out, glow-intense 1s ease-in-out';
    }, 50);
}

// Spin button handler
document.getElementById('spinButton').addEventListener('click', () => {
    // Reset animations
    document.querySelectorAll('.loot-box, .multiplier-pill').forEach(el => {
        el.classList.remove('selected');
        el.style.filter = '';
    });
    
    // Hide prize popup
    document.getElementById('prizePopup').classList.add('hidden');
    
    // Restart animations
    document.getElementById('lootBoxes').style.transform = 'translateX(0)';
    document.getElementById('multipliers').style.transform = 'translateX(0)';
    
    setTimeout(() => {
        initLootBoxes();
        initMultipliers();
    }, 100);
});