<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>גלגל רולטה משודרג עם סבבים מרובים</title>
<style>
body {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}
.container {
display: flex;
gap: 40px;
align-items: flex-start;
}
.wheel-container {
display: flex;
flex-direction: column;
align-items: center;
}
#wheel {
width: 500px;
height: 500px;
border-radius: 50%;
border: 10px solid #333;
position: relative;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
#wheel canvas {
width: 100%;
height: 100%;
border-radius: 50%;
}
.participants-container, .results-container {
width: 300px;
}
.participants-container h2, .results-container h2 {
text-align: center;
margin-bottom: 10px;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.1s;
}
button:hover {
background-color: #45a049;
transform: scale(1.05);
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
input[type="text"], input[type="number"] {
margin-top: 20px;
padding: 10px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
#nameList, #resultsList {
margin-top: 10px;
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 10px;
background-color: white;
}
#nameList div {
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
border-radius: 3px;
}
#nameList button {
margin-top: 0;
padding: 2px 5px;
font-size: 14px;
background-color: #f44336;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
min-height: 50px;
}
#winnerAnimation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
#winnerAnimation span {
font-size: 48px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: winnerPulse 1s infinite alternate;
}
@keyframes winnerPulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
</style>
</head>
<body>
<div class="container">
<div class="wheel-container">
<div id="wheel">
<canvas id="canvas"></canvas>
</div>
<input type="number" id="roundsInput" min="1" value="1" placeholder="מספר סבבים">
<button id="spinButton">סובב</button>
<div id="result"></div>
</div>
<div class="participants-container">
<h2>רשימת המשתתפים</h2>
<input type="text" id="nameInput" placeholder="הכנס שם">
<button id="addButton">הוסף שם</button>
<div id="nameList"></div>
<button id="clearButton">נקה רשימה</button>
</div>
<div class="results-container">
<h2>תוצאות הסבבים</h2>
<input type="text" id="prizeInput" placeholder="הכנס פרס (אופציונלי)">
<div id="resultsList"></div>
<button id="exportButton">יצוא תוצאות</button>
</div>
</div>
<div id="winnerAnimation">
<span></span>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const spinButton = document.getElementById('spinButton');
const addButton = document.getElementById('addButton');
const clearButton = document.getElementById('clearButton');
const exportButton = document.getElementById('exportButton');
const nameInput = document.getElementById('nameInput');
const prizeInput = document.getElementById('prizeInput');
const roundsInput = document.getElementById('roundsInput');
const nameList = document.getElementById('nameList');
const resultDiv = document.getElementById('result');
const resultsList = document.getElementById('resultsList');
const winnerAnimation = document.getElementById('winnerAnimation');
let names = [];
let roundResults = [];
const colors = [
'#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F',
'#BB8FCE', '#F1948A', '#82E0AA', '#D7BDE2', '#A3E4D7', '#F8C471'
];
const size = canvas.width = canvas.height = 500;
const radius = size / 2;
let arc = 0;
let angle = 0;
let isSpinning = false;
let currentRound = 1;
let totalRounds = 1;
const drawWheel = () => {
if (names.length === 0) {
ctx.clearRect(0, 0, size, size);
return;
}
arc = (Math.PI * 2) / names.length;
names.forEach((name, i) => {
const startAngle = i * arc;
const endAngle = startAngle + arc;
ctx.beginPath();
ctx.arc(radius, radius, radius, startAngle, endAngle, false);
ctx.lineTo(radius, radius);
ctx.fillStyle = colors[i % colors.length];
ctx.fill();
ctx.save();
ctx.translate(radius, radius);
ctx.rotate((startAngle + endAngle) / 2);
ctx.fillStyle = '#000';
ctx.font = 'bold 16px Arial';
ctx.textAlign = 'right';
ctx.fillText(name, radius - 10, 5);
ctx.restore();
});
};
const spinWheel = () => {
if (isSpinning || names.length === 0) return;
totalRounds = parseInt(roundsInput.value) || 1;
roundResults = [];
currentRound = 1;
startSpin();
};
const startSpin = () => {
isSpinning = true;
spinButton.disabled = true;
resultDiv.textContent = `מסובב... (סבב ${currentRound} מתוך ${totalRounds})`;
let spinTime = Math.random() * 3000 + 3000;
const endAngle = Math.random() * Math.PI * 2;
let currentSpeed = 50;
const spinInterval = setInterval(() => {
spinTime -= 30;
angle += currentSpeed / 100;
currentSpeed *= 0.97;
if (spinTime <= 0 && currentSpeed < 0.1) {
clearInterval(spinInterval);
const winningIndex = Math.floor(((angle % (Math.PI * 2)) + (Math.PI * 2)) % (Math.PI * 2) / arc);
const winner = names[winningIndex];
roundResults.push({ round: currentRound, winner: winner });
showWinner(winner, currentRound, totalRounds);
currentRound++;
if (currentRound <= totalRounds) {
isSpinning = false;
spinButton.disabled = false;
resultDiv.textContent = `לחץ על "סובב" כדי להתחיל את סבב ${currentRound}`;
} else {
isSpinning = false;
spinButton.disabled = false;
updateResultsList();
resultDiv.textContent = `כל הסבבים הסתיימו`;
}
}
draw();
}, 30);
};
const showWinner = (winner, currentRound, totalRounds) => {
const prize = prizeInput.value.trim();
const resultText = prize ? `${winner} זכה/זכתה ב${prize}` : `${winner} זכה/זכתה בסבב ${currentRound}`;
resultDiv.textContent = resultText;
winnerAnimation.style.display = 'flex';
winnerAnimation.querySelector('span').textContent = resultText;
setTimeout(() => {
winnerAnimation.style.display = 'none';
}, 2000);
};
const updateResultsList = () => {
resultsList.innerHTML = '';
roundResults.forEach(result => {
const div = document.createElement('div');
const prize = prizeInput.value.trim();
div.textContent = prize ? `סבב ${result.round}: ${result.winner} זכה/זכתה ב${prize}` : `סבב ${result.round}: ${result.winner}`;
resultsList.appendChild(div);
});
};
const draw = () => {
ctx.clearRect(0, 0, size, size);
ctx.save();
ctx.translate(radius, radius);
ctx.rotate(angle);
ctx.translate(-radius, -radius);
drawWheel();
ctx.restore();
};
const addName = () => {
const newName = nameInput.value.trim();
if (newName !== "" && !names.includes(newName)) {
names.push(newName);
nameInput.value = "";
updateNameList();
draw();
}
};
const removeName = (name) => {
names = names.filter(n => n !== name);
updateNameList();
draw();
};
const updateNameList = () => {
nameList.innerHTML = '';
names.forEach((name, index) => {
const div = document.createElement('div');
div.textContent = name;
div.style.backgroundColor = colors[index % colors.length];
div.style.color = 'white';
const removeButton = document.createElement('button');
removeButton.textContent = 'הסר';
removeButton.onclick = () => removeName(name);
div.appendChild(removeButton);
nameList.appendChild(div);
});
spinButton.disabled = names.length === 0;
};
const clearNames = () => {
names = [];
updateNameList();
draw();
resultDiv.textContent = '';
resultsList.innerHTML = '';
roundResults = [];
};
const exportResults = () => {
const prize = prizeInput.value.trim();
let exportText = 'תוצאות הסבבים:\n';
roundResults.forEach(result => {
exportText += prize ? `סבב ${result.round}: ${result.winner} זכה/זכתה ב${prize}\n` : `סבב ${result.round}: ${result.winner}\n`;
});
const blob = new Blob([exportText], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'roulette_results.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
addButton.addEventListener('click', addName);
spinButton.addEventListener('click', spinWheel);
clearButton.addEventListener('click', clearNames);
exportButton.addEventListener('click', exportResults);
nameInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addName();
});
draw();
</script>
</body>
</html>
הנושאים החמים
