script.js

document.addEventListener('DOMContentLoaded', function() {
  const lootBoxesContainer = document.getElementById('lootBoxes');
  const multiplierSlider = document.getElementById('multiplierSlider');
  const spinButton = document.getElementById('spinButton');
  const resultModal = document.getElementById('resultModal');
  const closeModal = document.getElementById('closeModal');
  const spinnerIcon = document.getElementById('spinnerIcon');
  
  // Loot box data
  const lootBoxes = [
    { value: 10, rarity: 'common', color: 'text-gray-300' },
    { value: 20, rarity: 'uncommon', color: 'text-green-400' },
    { value: 50, rarity: 'rare', color: 'text-blue-400' },
    { value: 100, rarity: 'epic', color: 'text-purple-400' },
    { value: 200, rarity: 'legendary', color: 'text-amber-400' },
    { value: 5, rarity: 'common', color: 'text-gray-300' },
    { value: 15, rarity: 'uncommon', color: 'text-green-400' },
    { value: 30, rarity: 'rare', color: 'text-blue-400' },
    { value: 75, rarity: 'epic', color: 'text-purple-400' },
    { value: 150, rarity: 'legendary', color: 'text-amber-400' }
  ];
  
  // Multiplier options
  const multipliers = [1, 1.5, 2, 2.5, 3, 5, 10];
  
  // Generate loot boxes
  lootBoxes.forEach((box, index) => {
    const boxElement = document.createElement('div');
    boxElement.className = 'loot-box flex flex-col items-center justify-center';
    boxElement.dataset.value = box.value;
    boxElement.dataset.rarity = box.rarity;
    
    boxElement.innerHTML = `
      <i data-feather="package" class="w-10 h-10 ${box.color}"></i>
      <span class="mt-2 font-medium ${box.color}">${box.value} SC</span>
      <span class="text-xs text-gray-400">${box.rarity}</span>
    `;
    
    lootBoxesContainer.appendChild(boxElement);
  });
  
  // Generate multiplier options
  multipliers.forEach(multiplier => {
    const option = document.createElement('div');
    option.className = 'multiplier-option';
    option.textContent = `×${multiplier}`;
    option.dataset.multiplier = multiplier;
    
    option.addEventListener('click', function() {
      document.querySelectorAll('.multiplier-option').forEach(opt => {
        opt.classList.remove('selected');
      });
      this.classList.add('selected');
    });
    
    multiplierSlider.appendChild(option);
  });
  
  // Set first multiplier as default selected
  multiplierSlider.firstElementChild?.classList.add('selected');
  
  // Spin button functionality
  spinButton.addEventListener('click', function() {
    const selectedMultiplier = parseFloat(document.querySelector('.multiplier-option.selected')?.dataset.multiplier || '1');
    const lootBoxElements = document.querySelectorAll('.loot-box');
    
    // Show loading state
    spinButton.disabled = true;
    spinnerIcon.classList.remove('hidden');
    
    // Clear previous selection
    lootBoxElements.forEach(box => box.classList.remove('active'));
    
    // Random selection animation
    let counter = 0;
    const totalIterations = 20;
    const interval = setInterval(() => {
      // Remove active class from all
      lootBoxElements.forEach(box => box.classList.remove('active'));
      
      // Select random box
      const randomIndex = Math.floor(Math.random() * lootBoxElements.length);
      lootBoxElements[randomIndex].classList.add('active');
      
      counter++;
      
      // Slow down at the end
      if (counter > totalIterations * 0.7) {
        clearInterval(interval);
        setTimeout(() => {
          // Final selection
          const finalIndex = Math.floor(Math.random() * lootBoxElements.length);
          lootBoxElements.forEach(box => box.classList.remove('active'));
          lootBoxElements[finalIndex].classList.add('active');
          
          // Show result
          const prize = parseFloat(lootBoxElements[finalIndex].dataset.value);
          const total = prize * selectedMultiplier;
          
          document.getElementById('basePrize').textContent = prize;
          document.getElementById('multiplierValue').textContent = selectedMultiplier;
          document.getElementById('totalPrize').textContent = total.toFixed(2);
          
          resultModal.classList.remove('hidden');
          
          // Reset button
          spinButton.disabled = false;
          spinnerIcon.classList.add('hidden');
        }, 300);
      }
    }, 100);
  });
  
  // Close modal
  closeModal.addEventListener('click', function() {
    resultModal.classList.add('hidden');
  });
  
  // Replace feather icons
  feather.replace();
});