File size: 5,209 Bytes
cfea9c9 |
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 |
// Loot Box Generator
function initLootBoxes() {
const lootBoxes = document.getElementById('lootBoxes');
const rarities = ['common', 'rare', 'epic', 'legendary'];
const colors = {
'common': '#2ecc71',
'rare': '#3498db',
'epic': '#9b59b6',
'legendary': '#f1c40f'
};
// Create 24 loot boxes (12 visible, 12 for seamless looping)
for (let i = 0; i < 24; i++) {
const rarity = rarities[Math.floor(Math.random() * rarities.length)];
const box = document.createElement('div');
box.className = `loot-box ${rarity} flex-shrink-0`;
box.innerHTML = `<i data-feather="box" stroke="${colors[rarity]}"></i>`;
lootBoxes.appendChild(box);
}
// Animate the loot boxes
let position = 0;
let speed = 20;
let deceleration = 0.95;
let selectedBox = Math.floor(Math.random() * 12) + 6; // Random box between 6-18
const animate = () => {
position += speed;
speed *= deceleration;
// Stop when we reach the selected box
if (speed < 0.5 && Math.abs(position % 120) < 1) {
// Select the center box
lootBoxes.style.transform = `translateX(calc(-${selectedBox * 110}px + 50%))`;
// Highlight the selected box
const boxes = document.querySelectorAll('.loot-box');
boxes.forEach((box, index) => {
if (index === selectedBox) {
box.classList.add('selected');
// Show prize popup after slight delay
setTimeout(() => {
showPrize(selectedBox);
}, 800);
} else {
box.style.filter = index < selectedBox - 3 || index > selectedBox + 3 ?
'blur(3px) opacity(0.5)' : 'blur(1px) opacity(0.8)';
}
});
} else {
lootBoxes.style.transform = `translateX(calc(-${position % 2400}px + 50%))`;
requestAnimationFrame(animate);
}
};
animate();
}
// Multiplier Generator
function initMultipliers() {
const multipliers = document.getElementById('multipliers');
multiplierValues = ['×1', '×1.25', '×1.5', '×2', '×3', '×5', '×1', '×1.25', '×1.5', '×2', '×3', '×5'];
multiplierValues.forEach(value => {
const pill = document.createElement('div');
pill.className = 'multiplier-pill flex-shrink-0';
pill.textContent = value;
multipliers.appendChild(pill);
});
// Animate multipliers
let position = 0;
let speed = 15;
let deceleration = 0.93;
let selectedMultiplier = Math.floor(Math.random() * 6) + 3; // Random between 3-8
const animateMultipliers = () => {
position += speed;
speed *= deceleration;
if (speed < 0.5 && Math.abs(position % 480) < 1) {
// Select the center multiplier
multipliers.style.transform = `translateX(calc(-${selectedMultiplier * 100}px + 50%))`;
// Highlight the selected multiplier
const pills = document.querySelectorAll('.multiplier-pill');
pills.forEach((pill, index) => {
if (index === selectedMultiplier) {
pill.classList.add('selected');
} else {
pill.style.filter = index < selectedMultiplier - 2 || index > selectedMultiplier + 2 ?
'blur(3px) opacity(0.5)' : 'blur(1px) opacity(0.8)';
}
});
} else {
multipliers.style.transform = `translateX(calc(-${position % 1200}px + 50%))`;
requestAnimationFrame(animateMultipliers);
}
};
animateMultipliers();
}
// Show prize popup
function showPrize(boxIndex) {
const prizeValues = ['×1', '×1.5', '×2', '×3', '×5'];
const prizePopup = document.getElementById('prizePopup');
const prizeValue = document.getElementById('prizeValue');
// Determine prize based on box index (just for demo)
const prize = prizeValues[boxIndex % prizeValues.length];
prizeValue.textContent = prize;
prizePopup.classList.remove('hidden');
// Add confetti effect
setTimeout(() => {
prizePopup.style.animation = 'none';
void prizePopup.offsetWidth; // Trigger reflow
prizePopup.style.animation = 'rise-up 0.5s ease-out, glow-intense 1s ease-in-out';
}, 50);
}
// Spin button handler
document.getElementById('spinButton').addEventListener('click', () => {
// Reset animations
document.querySelectorAll('.loot-box, .multiplier-pill').forEach(el => {
el.classList.remove('selected');
el.style.filter = '';
});
// Hide prize popup
document.getElementById('prizePopup').classList.add('hidden');
// Restart animations
document.getElementById('lootBoxes').style.transform = 'translateX(0)';
document.getElementById('multipliers').style.transform = 'translateX(0)';
setTimeout(() => {
initLootBoxes();
initMultipliers();
}, 100);
}); |