script.js

document.addEventListener('DOMContentLoaded', () => {
    const carousel = document.querySelector('.loot-carousel');
    const multiplierTrack = document.querySelector('.multiplier-track');
    const rollButton = document.getElementById('rollButton');
    const spinMultiplierButton = document.getElementById('spinMultiplierButton');
    const motionBlur = document.querySelector('.motion-blur');
const rarities = ['common', 'rare', 'rare', 'common', 'epic', 'common', 'legendary', 'rare', 'common', 'epic', 'rare', 'common'];
    const multipliers = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
const rewards = [
        { rarity: 'common', name: 'Basic Skin', description: 'A standard cosmetic item for your collection' },
        { rarity: 'common', name: '100 Coins', description: 'Use them to purchase items in the shop' },
        { rarity: 'rare', name: 'Rare Emote', description: 'Show off with this exclusive animation' },
        { rarity: 'rare', name: '500 Coins', description: 'A nice boost to your wallet' },
        { rarity: 'epic', name: 'Epic Weapon', description: 'Powerful gear to dominate the battlefield' },
        { rarity: 'epic', name: 'Premium Pass', description: '7 days of premium benefits' },
        { rarity: 'legendary', name: 'Legendary Character', description: 'The rarest hero in the game' },
        { rarity: 'legendary', name: '10,000 Coins', description: 'Enough to buy anything you want' }
    ];
    // Generate loot boxes
    rarities.forEach((rarity, index) => {
const box = document.createElement('div');
        box.className = `loot-box ${rarity} flex items-center justify-center cursor-pointer`;
        box.innerHTML = `
            <div class="box-front w-full h-full bg-premium-charcoal/90 backdrop-blur-sm rounded-lg border border-current flex items-center justify-center">
                <i data-feather="box" class="text-current"></i>
            </div>
            <div class="box-top absolute top-0 left-0 w-full h-4 bg-current/20 rounded-t-lg"></div>
            <div class="box-lid absolute top-0 left-0 w-full h-4 bg-current/30 rounded-t-lg transition-transform duration-500"></div>
        `;
        carousel.appendChild(box);
    });
    // Generate premium multiplier pills
    multipliers.forEach((multiplier, index) => {
        const pill = document.createElement('div');
        pill.className = 'multiplier-pill px-8 mx-1';
        pill.innerHTML = `
            <span class="relative z-10">×${multiplier}</span>
            <span class="absolute inset-0 rounded-xl bg-premium-gold/5 blur-md opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span>
        `;
        multiplierTrack.appendChild(pill);
    });
feather.replace();
    // Spin multiplier track
    function spinMultiplier() {
        spinMultiplierButton.disabled = true;
        
        // Calculate random position
        const multiplierCount = multipliers.length;
        const multiplierWidth = 96 + 8; // width + gap
        const randomIndex = Math.floor(Math.random() * multiplierCount);
        const targetPosition = -(randomIndex * multiplierWidth) + (window.innerWidth / 2 - multiplierWidth / 2);
        
        // Start animation
        multiplierTrack.style.transitionDuration = '0ms';
        multiplierTrack.style.transform = `translateX(${-multiplierWidth * multiplierCount}px)`;
        
        setTimeout(() => {
            multiplierTrack.style.transitionDuration = '4000ms';
            multiplierTrack.style.transform = `translateX(${targetPosition}px)`;
        }, 10);
        
        // Final selection
        setTimeout(() => {
            // Highlight selected multiplier
            const allMultipliers = document.querySelectorAll('.multiplier-pill');
            allMultipliers.forEach(pill => pill.classList.remove('selected', 'blurred'));
            const selectedMultiplier = allMultipliers[randomIndex];
            selectedMultiplier.classList.add('selected');
            
            // Blur others
            allMultipliers.forEach((pill, idx) => {
                if (idx !== randomIndex) {
                    pill.classList.add('blurred');
                }
            });
            
            // Reset button
            setTimeout(() => {
                spinMultiplierButton.disabled = false;
            }, 1000);
        }, 4000);
    }

    // Roll animation
    function spinBoxes() {
        rollButton.disabled = true;
        motionBlur.classList.add('active');
        
        // Calculate random position
        const boxCount = rarities.length;
        const boxWidth = 140 + 32; // width + gap
        const randomIndex = Math.floor(Math.random() * boxCount);
        const targetPosition = -(randomIndex * boxWidth) + (window.innerWidth / 2 - boxWidth / 2);
        
        // Start animation
        carousel.style.transitionDuration = '0ms';
        carousel.style.transform = `translateX(${-boxWidth * boxCount}px)`;
        
        setTimeout(() => {
            carousel.style.transitionDuration = '4000ms';
            carousel.style.transform = `translateX(${targetPosition}px)`;
        }, 10);
        
        // Final selection
        setTimeout(() => {
            motionBlur.classList.remove('active');
            const selectedBox = carousel.children[randomIndex];
            selectedBox.classList.add('selected');

            // Open lid animation
            setTimeout(() => {
                selectedBox.querySelector('.box-lid').style.transform = 'translateY(-20px) rotateX(60deg)';
                // Create coins burst and show reward
                createCoinBurst(selectedBox);
                
                // Get random reward based on rarity
                const possibleRewards = rewards.filter(r => r.rarity === rarities[randomIndex]);
                const reward = possibleRewards[Math.floor(Math.random() * possibleRewards.length)];
                
                const popup = document.createElement('reward-popup');
                document.body.appendChild(popup);
                setTimeout(() => popup.show(reward), 1000);
                
                // Reset after animation
                setTimeout(() => {
                    selectedBox.classList.remove('selected');
                    selectedBox.querySelector('.box-lid').style.transform = '';
                    rollButton.disabled = false;
                }, 3000);
            }, 800);
        }, 4000);
    }

    // Event listeners
    rollButton.addEventListener('click', spinBoxes);
    spinMultiplierButton.addEventListener('click', spinMultiplier);
function createCoinBurst(box) {
        for (let i = 0; i < 12; i++) {
            const coin = document.createElement('div');
            coin.className = 'coin-particle';
            
            // Random position and movement
            const angle = Math.random() * Math.PI * 2;
            const distance = 50 + Math.random() * 100;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;
            
            coin.style.setProperty('--tx', `${tx}px`);
            coin.style.setProperty('--ty', `${ty}px`);
            coin.style.left = `${50 + Math.random() * 20 - 10}px`;
            coin.style.top = `${20 + Math.random() * 20}px`;
            coin.style.animation = `particle-burst ${1 + Math.random() * 0.5}s forwards`;
            
            box.appendChild(coin);
            
            // Remove after animation
            setTimeout(() => {
                coin.remove();
            }, 1000);
        }
    }
});