Spaces:
Running
Running
File size: 6,242 Bytes
f2768a5 |
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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
document.addEventListener('DOMContentLoaded', function() {
// Generate loot boxes
const lootTrack = document.getElementById('lootTrack');
const lootBoxes = [
{ prize: 10, rarity: 'green' },
{ prize: 15, rarity: 'blue' },
{ prize: 20, rarity: 'blue' },
{ prize: 25, rarity: 'green' },
{ prize: 30, rarity: 'purple' },
{ prize: 35, rarity: 'purple' },
{ prize: 40, rarity: 'green' },
{ prize: 45, rarity: 'blue' },
{ prize: 50, rarity: 'purple' },
{ prize: 100, rarity: 'gold' }
];
lootBoxes.forEach(box => {
const boxElement = document.createElement('div');
boxElement.className = 'loot-box flex-shrink-0';
boxElement.dataset.prize = box.prize;
boxElement.dataset.rarity = box.rarity;
const inner = document.createElement('div');
inner.className = 'loot-box-inner';
inner.innerHTML = `<span class="text-xs font-bold">${box.prize} SC</span>`;
boxElement.appendChild(inner);
lootTrack.appendChild(boxElement);
// Add rarity glow
if (box.rarity === 'green') {
boxElement.style.boxShadow += ', 0 0 15px rgba(0, 200, 120, 0.7)';
} else if (box.rarity === 'blue') {
boxElement.style.boxShadow += ', 0 0 15px rgba(80, 160, 255, 0.8)';
} else if (box.rarity === 'purple') {
boxElement.style.boxShadow += ', 0 0 18px rgba(160, 80, 255, 0.9)';
} else if (box.rarity === 'gold') {
boxElement.style.boxShadow += ', 0 0 20px rgba(255, 190, 70, 1)';
}
});
// Generate multipliers
const multiTrack = document.getElementById('multiTrack');
const multipliers = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
multipliers.forEach(m => {
const multiElement = document.createElement('div');
multiElement.className = 'multiplier flex-shrink-0';
multiElement.textContent = `×${m}`;
multiElement.dataset.multiplier = m;
multiTrack.appendChild(multiElement);
});
// Spin functionality
const spinBtn = document.getElementById('spinBtn');
const resultModal = document.getElementById('resultModal');
const resultAmount = document.getElementById('resultAmount');
const baseAmount = document.getElementById('baseAmount');
const multiplier = document.getElementById('multiplier');
const closeModal = document.getElementById('closeModal');
spinBtn.addEventListener('click', async function() {
if (spinBtn.classList.contains('disabled')) return;
spinBtn.classList.add('disabled');
// Add loading state
spinBtn.innerHTML = 'SPINNING <i data-feather="loader" class="inline ml-2 animate-spin"></i>';
feather.replace();
// Simulate spinning animation
const lootBoxes = document.querySelectorAll('.loot-box');
const multipliers = document.querySelectorAll('.multiplier');
// Reset previous selections
lootBoxes.forEach(box => box.classList.remove('selected'));
multipliers.forEach(m => m.classList.remove('selected'));
// Randomly select loot box and multiplier
const randomLootIndex = Math.floor(Math.random() * lootBoxes.length);
const randomMultiIndex = Math.floor(Math.random() * multipliers.length);
// Simulate spinning animation
await spinAnimation(lootTrack, randomLootIndex, 1500);
await spinAnimation(multiTrack, randomMultiIndex, 1200);
// Select the winners
const selectedBox = lootBoxes[randomLootIndex];
const selectedMulti = multipliers[randomMultiIndex];
selectedBox.classList.add('selected');
selectedMulti.classList.add('selected');
// Calculate prize
const prize = parseFloat(selectedBox.dataset.prize);
const multi = parseFloat(selectedMulti.dataset.multiplier);
const total = prize * multi;
// Show result
resultAmount.textContent = `${total.toFixed(2)} SC`;
baseAmount.textContent = prize;
multiplier.textContent = multi;
// Show modal with slight delay
setTimeout(() => {
resultModal.classList.remove('hidden');
resultModal.classList.add('flex', 'fade-in');
}, 500);
// Reset button
spinBtn.classList.remove('disabled');
spinBtn.innerHTML = 'SPIN AGAIN <i data-feather="rotate-cw" class="inline ml-2"></i>';
feather.replace();
});
closeModal.addEventListener('click', function() {
resultModal.classList.add('hidden');
resultModal.classList.remove('flex', 'fade-in');
});
// Helper function for spinning animation
function spinAnimation(track, targetIndex, duration) {
return new Promise(resolve => {
const items = track.querySelectorAll('div');
const itemWidth = items[0].offsetWidth + 24; // width + gap
// Calculate final position to center the target item
const wrapperWidth = track.parentElement.offsetWidth;
const targetPosition = -((targetIndex * itemWidth) - (wrapperWidth / 2) + (itemWidth / 2));
// Add some extra spins
const extraSpins = 3 + Math.floor(Math.random() * 3);
const extraDistance = extraSpins * items.length * itemWidth;
const direction = Math.random() > 0.5 ? 1 : -1;
const startPosition = targetPosition - (extraDistance * direction);
// Set initial position
track.style.transition = 'none';
track.style.transform = `translateX(${startPosition}px)`;
// Force reflow
track.offsetHeight;
// Animate to final position
track.style.transition = `transform ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`;
track.style.transform = `translateX(${targetPosition}px)`;
setTimeout(() => {
resolve();
}, duration);
});
}
}); |