const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d');
const spinButton = document.getElementById('spinButton');
const addNameButton = document.getElementById('addName');
const nameInput = document.getElementById('nameInput');
const winnerDisplay = document.getElementById('winner');
let names = [];
let isSpinning = false;
// Add name to the list
addNameButton.addEventListener('click', () => {
const name = nameInput.value.trim();
if (name) {
names.push(name);
nameInput.value = '';
drawWheel();
}
});
// Draw the wheel
function drawWheel() {
const segments = names.length;
const angle = (2 * Math.PI) / segments;
ctx.clearRect(0, 0, canvas.width, canvas.height);
names.forEach((name, index) => {
const startAngle = index * angle;
const endAngle = startAngle + angle;
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.arc(250, 250, 250, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = index % 2 === 0 ? '#FF5733' : '#33FFBD';
ctx.fill();
ctx.stroke();
ctx.save();
ctx.translate(250, 250);
ctx.rotate(startAngle + angle / 2);
ctx.textAlign = 'center';
ctx.fillStyle = '#000';
ctx.fillText(name, 150, 10);
ctx.restore();
});
}
// Spin the wheel
spinButton.addEventListener('click', () => {
if (isSpinning || names.length === 0) return;
isSpinning = true;
const winnerIndex = Math.floor(Math.random() * names.length);
let spinAngle = (360 * 5) + (winnerIndex * (360 / names.length));
let currentAngle = 0;
const spinInterval = setInterval(() => {
currentAngle += 10;
ctx.translate(250, 250);
ctx.rotate((10 * Math.PI) / 180);
ctx.translate(-250, -250);
drawWheel();
if (currentAngle >= spinAngle) {
clearInterval(spinInterval);
isSpinning = false;
winnerDisplay.textContent = `Fituesi: ${names[winnerIndex]}`;
}
}, 20);
});
Skip to content
