script.js

document.addEventListener('DOMContentLoaded', function() {
    // Generate loot boxes
    const lootTrack = document.getElementById('lootTrack');
    const lootBoxes = [
        { prize: 10, rarity: 'green' },
        { prize: 15, rarity: 'blue' },
        { prize: 20, rarity: 'blue' },
        { prize: 25, rarity: 'green' },
        { prize: 30, rarity: 'purple' },
        { prize: 35, rarity: 'purple' },
        { prize: 40, rarity: 'green' },
        { prize: 45, rarity: 'blue' },
        { prize: 50, rarity: 'purple' },
        { prize: 100, rarity: 'gold' }
    ];

    lootBoxes.forEach(box => {
        const boxElement = document.createElement('div');
        boxElement.className = 'loot-box flex-shrink-0';
        boxElement.dataset.prize = box.prize;
        boxElement.dataset.rarity = box.rarity;
        
        const inner = document.createElement('div');
        inner.className = 'loot-box-inner';
        inner.innerHTML = `<span class="text-xs font-bold">${box.prize} SC</span>`;
        
        boxElement.appendChild(inner);
        lootTrack.appendChild(boxElement);
        
        // Add rarity glow
        if (box.rarity === 'green') {
            boxElement.style.boxShadow += ', 0 0 15px rgba(0, 200, 120, 0.7)';
        } else if (box.rarity === 'blue') {
            boxElement.style.boxShadow += ', 0 0 15px rgba(80, 160, 255, 0.8)';
        } else if (box.rarity === 'purple') {
            boxElement.style.boxShadow += ', 0 0 18px rgba(160, 80, 255, 0.9)';
        } else if (box.rarity === 'gold') {
            boxElement.style.boxShadow += ', 0 0 20px rgba(255, 190, 70, 1)';
        }
    });

    // Generate multipliers
    const multiTrack = document.getElementById('multiTrack');
    const multipliers = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
    
    multipliers.forEach(m => {
        const multiElement = document.createElement('div');
        multiElement.className = 'multiplier flex-shrink-0';
        multiElement.textContent = `×${m}`;
        multiElement.dataset.multiplier = m;
        multiTrack.appendChild(multiElement);
    });

    // Spin functionality
    const spinBtn = document.getElementById('spinBtn');
    const resultModal = document.getElementById('resultModal');
    const resultAmount = document.getElementById('resultAmount');
    const baseAmount = document.getElementById('baseAmount');
    const multiplier = document.getElementById('multiplier');
    const closeModal = document.getElementById('closeModal');

    spinBtn.addEventListener('click', async function() {
        if (spinBtn.classList.contains('disabled')) return;
        spinBtn.classList.add('disabled');
        
        // Add loading state
        spinBtn.innerHTML = 'SPINNING <i data-feather="loader" class="inline ml-2 animate-spin"></i>';
        feather.replace();
        
        // Simulate spinning animation
        const lootBoxes = document.querySelectorAll('.loot-box');
        const multipliers = document.querySelectorAll('.multiplier');
        
        // Reset previous selections
        lootBoxes.forEach(box => box.classList.remove('selected'));
        multipliers.forEach(m => m.classList.remove('selected'));
        
        // Randomly select loot box and multiplier
        const randomLootIndex = Math.floor(Math.random() * lootBoxes.length);
        const randomMultiIndex = Math.floor(Math.random() * multipliers.length);
        
        // Simulate spinning animation
        await spinAnimation(lootTrack, randomLootIndex, 1500);
        await spinAnimation(multiTrack, randomMultiIndex, 1200);
        
        // Select the winners
        const selectedBox = lootBoxes[randomLootIndex];
        const selectedMulti = multipliers[randomMultiIndex];
        
        selectedBox.classList.add('selected');
        selectedMulti.classList.add('selected');
        
        // Calculate prize
        const prize = parseFloat(selectedBox.dataset.prize);
        const multi = parseFloat(selectedMulti.dataset.multiplier);
        const total = prize * multi;
        
        // Show result
        resultAmount.textContent = `${total.toFixed(2)} SC`;
        baseAmount.textContent = prize;
        multiplier.textContent = multi;
        
        // Show modal with slight delay
        setTimeout(() => {
            resultModal.classList.remove('hidden');
            resultModal.classList.add('flex', 'fade-in');
        }, 500);
        
        // Reset button
        spinBtn.classList.remove('disabled');
        spinBtn.innerHTML = 'SPIN AGAIN <i data-feather="rotate-cw" class="inline ml-2"></i>';
        feather.replace();
    });
    
    closeModal.addEventListener('click', function() {
        resultModal.classList.add('hidden');
        resultModal.classList.remove('flex', 'fade-in');
    });
    
    // Helper function for spinning animation
    function spinAnimation(track, targetIndex, duration) {
        return new Promise(resolve => {
            const items = track.querySelectorAll('div');
            const itemWidth = items[0].offsetWidth + 24; // width + gap
            
            // Calculate final position to center the target item
            const wrapperWidth = track.parentElement.offsetWidth;
            const targetPosition = -((targetIndex * itemWidth) - (wrapperWidth / 2) + (itemWidth / 2));
            
            // Add some extra spins
            const extraSpins = 3 + Math.floor(Math.random() * 3);
            const extraDistance = extraSpins * items.length * itemWidth;
            const direction = Math.random() > 0.5 ? 1 : -1;
            const startPosition = targetPosition - (extraDistance * direction);
            
            // Set initial position
            track.style.transition = 'none';
            track.style.transform = `translateX(${startPosition}px)`;
            
            // Force reflow
            track.offsetHeight;
            
            // Animate to final position
            track.style.transition = `transform ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`;
            track.style.transform = `translateX(${targetPosition}px)`;
            
            setTimeout(() => {
                resolve();
            }, duration);
        });
    }
});