script.js

document.addEventListener('DOMContentLoaded', function() {
  // Initialize game state
  let coins = 5000;
  let currentPrize = 0;
  let lootBoxes = [];
  let multipliers = [];
  
  // DOM elements
  const lootBoxTrack = document.getElementById('lootBoxTrack');
  const multiplierTrack = document.getElementById('multiplierTrack');
  const spinLootBtn = document.getElementById('spinLootBtn');
  const spinMultiplierBtn = document.getElementById('spinMultiplierBtn');
  const prizeDisplay = document.getElementById('prizeDisplay');
  const prizeDetails = document.getElementById('prizeDetails');
  const claimBtn = document.getElementById('claimBtn');
  const winModal = document.getElementById('winModal');
  const modalPrize = document.getElementById('modalPrize');
  const modalCloseBtn = document.getElementById('modalCloseBtn');
  
  // Initialize loot boxes
  function initLootBoxes() {
    const boxTypes = [
      { type: 'common', value: 10, color: 'gray-500' },
      { type: 'common', value: 15, color: 'gray-500' },
      { type: 'common', value: 20, color: 'gray-500' },
      { type: 'rare', value: 30, color: 'blue-500' },
      { type: 'rare', value: 40, color: 'blue-500' },
      { type: 'epic', value: 60, color: 'purple-500' },
      { type: 'epic', value: 80, color: 'purple-500' },
      { type: 'legendary', value: 120, color: 'yellow-500' },
      { type: 'legendary', value: 150, color: 'yellow-500' },
      { type: 'jackpot', value: 300, color: 'orange-500' }
    ];
    
    // Create enough boxes for smooth scrolling
    for (let i = 0; i < 30; i++) {
      const box = boxTypes[i % boxTypes.length];
      lootBoxes.push(box);
      
      const boxElement = document.createElement('div');
      boxElement.className = `loot-box ${box.type} flex-shrink-0 mx-2`;
      boxElement.innerHTML = `
        <div class="text-${box.color} text-2xl mb-1">
          ${box.type === 'common' ? '📦' : 
            box.type === 'rare' ? '🎁' : 
            box.type === 'epic' ? '💎' : 
            box.type === 'legendary' ? '🏆' : '💰'}
        </div>
        <div class="text-white text-sm">${box.value} SC</div>
      `;
      lootBoxTrack.appendChild(boxElement);
    }
  }
  
  // Initialize multipliers
  function initMultipliers() {
    const multiplierValues = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
    
    // Create enough multipliers for smooth scrolling
    for (let i = 0; i < 24; i++) {
      const value = multiplierValues[i % multiplierValues.length];
      multipliers.push(value);
      
      const chip = document.createElement('div');
      chip.className = 'multiplier-chip flex-shrink-0 mx-1';
      chip.textContent = `×${value}`;
      chip.dataset.value = value;
      multiplierTrack.appendChild(chip);
    }
  }
  
  // Spin animation
  function spin(element, items, spinTime, callback) {
    const startTime = Date.now();
    const speed = 0.5; // pixels per millisecond
    
    function animate() {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / spinTime, 1);
      
      // Ease-out function
      const easeProgress = 1 - Math.pow(1 - progress, 3);
      
      // Calculate distance (more at start, less at end)
      const distance = speed * spinTime * (1 - easeProgress * 0.9);
      
      element.style.transform = `translateX(-${distance}px)`;
      
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        // Snap to nearest item
        const itemWidth = items[0].offsetWidth + 8; // 8px for margin
        const totalDistance = parseInt(element.style.transform.replace('translateX(-', '').replace('px)', ''));
        const itemIndex = Math.round(totalDistance / itemWidth) % items.length;
        const snapDistance = itemIndex * itemWidth;
        
        element.style.transition = 'transform 0.5s ease-out';
        element.style.transform = `translateX(-${snapDistance}px)`;
        
        setTimeout(() => {
          element.style.transition = '';
          if (callback) callback(itemIndex);
        }, 500);
      }
    }
    
    animate();
  }
  
  // Spin loot box
  spinLootBtn.addEventListener('click', function() {
    if (coins < 10) {
      alert('Not enough coins!');
      return;
    }
    
    coins -= 10;
    updateCoinDisplay();
    spinLootBtn.disabled = true;
    
    spin(lootBoxTrack, lootBoxTrack.children, 3000, function(index) {
      const selectedBox = lootBoxes[index % lootBoxes.length];
      currentPrize = selectedBox.value;
      
      prizeDisplay.textContent = currentPrize;
      prizeDetails.innerHTML = `
        You got a <span class="text-${selectedBox.color} font-bold">${selectedBox.type}</span> loot box!
      `;
      
      spinLootBtn.disabled = false;
      claimBtn.classList.remove('hidden');
    });
  });
  
  // Spin multiplier
  spinMultiplierBtn.addEventListener('click', function() {
    if (coins < 5) {
      alert('Not enough coins!');
      return;
    }
    
    if (currentPrize === 0) {
      alert('Spin a loot box first!');
      return;
    }
    
    coins -= 5;
    updateCoinDisplay();
    spinMultiplierBtn.disabled = true;
    
    spin(multiplierTrack, multiplierTrack.children, 2500, function(index) {
      const selectedMultiplier = multipliers[index % multipliers.length];
      const totalPrize = Math.round(currentPrize * selectedMultiplier);
      
      prizeDisplay.textContent = totalPrize;
      prizeDetails.innerHTML += `
        <div class="mt-2">Multiplier: <span class="text-yellow-400 font-bold">×${selectedMultiplier}</span></div>
      `;
      
      currentPrize = totalPrize;
      spinMultiplierBtn.disabled = false;
      
      // Show win modal for big prizes
      if (totalPrize >= 100) {
        modalPrize.textContent = totalPrize;
        winModal.classList.remove('hidden');
        prizeDisplay.classList.add('winner-animation');
      }
    });
  });
  
  // Claim prize
  claimBtn.addEventListener('click', function() {
    coins += currentPrize;
    currentPrize = 0;
    updateCoinDisplay();
    
    prizeDisplay.textContent = '0';
    prizeDetails.textContent = 'Spin to win amazing prizes!';
    prizeDisplay.classList.remove('winner-animation');
    claimBtn.classList.add('hidden');
  });
  
  // Close modal
  modalCloseBtn.addEventListener('click', function() {
    winModal.classList.add('hidden');
  });
  
  // Update coin display
  function updateCoinDisplay() {
    document.querySelector('.bg-gray-700 span').textContent = coins.toLocaleString();
  }
  
  // Initialize the game
  initLootBoxes();
  initMultipliers();
});