File size: 3,857 Bytes
6d7a5d2 |
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 |
document.addEventListener('DOMContentLoaded', function() {
// Initialize loot boxes
const lootTrack = document.getElementById('lootTrack');
const lootBoxes = [
{ value: 10, rarity: 'common' },
{ value: 25, rarity: 'uncommon' },
{ value: 50, rarity: 'rare' },
{ value: 100, rarity: 'epic' },
{ value: 250, rarity: 'legendary' },
{ value: 500, rarity: 'mythic' },
{ value: 1000, rarity: 'divine' }
];
lootBoxes.forEach((box, index) => {
const boxElement = document.createElement('div');
boxElement.className = 'loot-box flex-shrink-0';
boxElement.dataset.value = box.value;
boxElement.dataset.rarity = box.rarity;
const icon = document.createElement('i');
icon.setAttribute('data-feather', 'box');
icon.className = 'text-white';
boxElement.appendChild(icon);
lootTrack.appendChild(boxElement);
// Add duplicate boxes for infinite scroll effect
if (index < 3) {
const clone = boxElement.cloneNode(true);
lootTrack.appendChild(clone);
}
});
// Initialize multipliers
const multiTrack = document.getElementById('multiTrack');
const multipliers = [1, 1.5, 2, 2.5, 3, 5, 10];
multipliers.forEach((mult, index) => {
const multElement = document.createElement('div');
multElement.className = 'multiplier flex-shrink-0';
multElement.textContent = `×${mult}`;
multElement.dataset.multiplier = mult;
multiTrack.appendChild(multElement);
// Add duplicate multipliers for infinite scroll effect
if (index < 3) {
const clone = multElement.cloneNode(true);
multiTrack.appendChild(clone);
}
});
// Spin functionality
const spinBtn = document.getElementById('spinBtn');
const resultModal = document.getElementById('resultModal');
const resultAmount = document.getElementById('resultAmount');
const resultDetails = document.getElementById('resultDetails');
const closeModal = document.getElementById('closeModal');
spinBtn.addEventListener('click', function() {
// Disable button during spin
spinBtn.disabled = true;
spinBtn.classList.add('opacity-50', 'cursor-not-allowed');
spinBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i><span>SPINNING...</span>';
feather.replace();
// Simulate spinning animation
lootTrack.style.transition = 'transform 4s cubic-bezier(0.1, 0.7, 0.1, 1)';
multiTrack.style.transition = 'transform 3.5s cubic-bezier(0.1, 0.7, 0.1, 1)';
// Random final positions
const lootPosition = -Math.floor(Math.random() * lootBoxes.length) * 108 - 54;
const multiPosition = -Math.floor(Math.random() * multipliers.length) * 86 - 43;
lootTrack.style.transform = `translateX(${lootPosition}px)`;
multiTrack.style.transform = `translateX(${multiPosition}px)`;
// After spin completes
setTimeout(() => {
// Get results
const lootResult = Math.floor(Math.random() * lootBoxes.length);
const multiResult = Math.floor(Math.random() * multipliers.length);
const prize = lootBoxes[lootResult].value;
const multiplier = multipliers[multiResult];
const total = prize * multiplier;
// Show result
resultAmount.textContent = `${total} SC`;
resultDetails.innerHTML = `
<div>Base: ${prize} SC</div>
<div>Multiplier: ×${multiplier}</div>
`;
resultModal.classList.remove('hidden');
// Reset button
spinBtn.disabled = false;
spinBtn.classList.remove('opacity-50', 'cursor-not-allowed');
spinBtn.innerHTML = '<i data-feather="rotate-cw"></i><span>SPIN AGAIN</span>';
feather.replace();
}, 4000);
});
closeModal.addEventListener('click', function() {
resultModal.classList.add('hidden');
});
// Replace icons again after dynamic content
feather.replace();
}); |