Spaces:
Running
Running
File size: 3,541 Bytes
8f231d6 13f17c9 8f231d6 13f17c9 8f231d6 | 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 | document.addEventListener('DOMContentLoaded', function() {
// Wheel configuration
const prizes = [
{ text: "Try Again", color: "#F87171" },
{ text: "10% Off", color: "#60A5FA" },
{ text: "Free Spin", color: "#34D399" },
{ text: "20% Off", color: "#A78BFA" },
{ text: "Jackpot", color: "#FBBF24" },
{ text: "5% Off", color: "#F472B6" }
];
const wheel = document.querySelector('.wheel');
const spinBtn = document.getElementById('spin-btn');
let canSpin = true;
// Create wheel segments
function createWheelSegments() {
const segmentAngle = 360 / prizes.length;
prizes.forEach((prize, index) => {
const segment = document.createElement('div');
segment.className = 'wheel-segment';
segment.style.transform = `rotate(${segmentAngle * index}deg)`;
segment.style.backgroundColor = prize.color;
const text = document.createElement('div');
text.className = prize.text === 'Jackpot' ? 'transform -rotate-45 translate-x-8 translate-y-8 hovered-element' : 'transform -rotate-45 translate-x-8 translate-y-8';
text.textContent = prize.text;
segment.appendChild(text);
wheel.appendChild(segment);
});
}
// Spin the wheel
function spinWheel() {
if (!canSpin) return;
canSpin = false;
spinBtn.disabled = true;
// Add spinning class
wheel.classList.add('spinning');
// Determine result after spin
setTimeout(() => {
const randomPrize = Math.floor(Math.random() * prizes.length);
showResult(prizes[randomPrize]);
// Reset wheel
setTimeout(() => {
wheel.classList.remove('spinning');
wheel.style.transform = `rotate(${0}deg)`;
canSpin = true;
spinBtn.disabled = false;
}, 500);
}, 5500);
}
// Show result modal
function showResult(prize) {
const modal = document.createElement('div');
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content">
<h2 class="text-3xl font-bold mb-4">${prize.text}!</h2>
<p class="text-xl mb-6">${getPrizeMessage(prize.text)}</p>
<button class="close-modal bg-${prize.color} hover:bg-opacity-90 text-white font-bold py-2 px-6 rounded-full">
Awesome!
</button>
</div>
`;
document.body.appendChild(modal);
modal.style.display = 'flex';
modal.querySelector('.close-modal').addEventListener('click', () => {
modal.style.display = 'none';
setTimeout(() => modal.remove(), 300);
});
}
// Get prize message
function getPrizeMessage(prize) {
const messages = {
"Try Again": "Better luck next time!",
"5% Off": "A small discount for your next spin!",
"10% Off": "Nice! You got a decent discount.",
"20% Off": "Great! That's a solid discount.",
"Free Spin": "You get to spin again for free!",
"Jackpot": "Congratulations! You hit the jackpot!"
};
return messages[prize] || "Thanks for playing!";
}
// Initialize
createWheelSegments();
spinBtn.addEventListener('click', spinWheel);
}); |