Spaces:

ProjectGenesis
/

lootbox-bonanza-spinner

Running

<!DOCTYPE html>

0dfe679 verified 12 months ago

6.61 kB

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();
});

	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();
	});