File size: 4,558 Bytes
54f31d6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
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();
}); |