NikolaRHristov · July 16, 2024 14:27
diff --git a/spinwheel.html b/spinwheel.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<style>
 			canvas {
 				border: 1px solid black;
 			}
 		</style>
 	</head>
 	<body>
 		<canvas height="400" id="magicWheel" width="400"></canvas>
 		<button onclick="spinWheel()">Spin</button>

 		<script>
 			const canvas = document.getElementById("magicWheel");
 			const ctx = canvas.getContext("2d");
 			const centerX = canvas.width / 2;
 			const centerY = canvas.height / 2;
 			const radius = 150;
 			const sectorColors = [
 				"red",
 				"blue",
 				"green",
 				"yellow",
 				"purple",
 				"orange",
 			];
 			const sectorLabels = ["A", "B", "C", "D", "E", "F"];

 			function generateRandomAngles(numSectors) {
 				const minAngle = (2 * Math.PI) / 32;
 				const angles = [];
 				let totalAngle = 0;

 				for (let i = 0; i < numSectors; i++) {
 					const randomAngle =
 						minAngle +
 						Math.random() * ((2 * Math.PI) / numSectors - minAngle);
 					totalAngle += randomAngle;
 					angles.push(totalAngle);
 				}

 				const scaleFactor = (2 * Math.PI) / totalAngle;
 				return angles.map((angle) => angle * scaleFactor);
 			}

 			const sectorAngles = generateRandomAngles(sectorColors.length);

 			function drawSector(startAngle, endAngle, color) {
 				ctx.beginPath();
 				ctx.moveTo(centerX, centerY);
 				ctx.arc(centerX, centerY, radius, startAngle, endAngle);
 				ctx.closePath();
 				ctx.fillStyle = color;
 				ctx.fill();
 			}

 			function drawPointer() {
 				ctx.beginPath();
 				ctx.moveTo(centerX, centerY - radius - 20);
 				ctx.lineTo(centerX - 10, centerY - radius + 10);
 				ctx.lineTo(centerX + 10, centerY - radius + 10);
 				ctx.closePath();
 				ctx.fillStyle = "black";
 				ctx.fill();
 			}

 			function drawWheel() {
 				const numSectors = sectorColors.length;

 				for (let i = 0; i < numSectors; i++) {
 					const startAngle = sectorAngles[i];
 					const endAngle = sectorAngles[(i + 1) % numSectors];
 					const color = sectorColors[i];
 					drawSector(startAngle, endAngle, color);
 				}
 			}

 			function spinWheel() {
 				const spinTime = 5000;
 				const minRotations = 5;
 				const rotations = minRotations + Math.random() * 5;
 				const randomStopAngle = Math.random() * 2 * Math.PI;
 				const angle = 2 * Math.PI * rotations + randomStopAngle;

 				let start = null;

 				function animate(timestamp) {
 					if (!start) {
 						start = timestamp;
 					}

 					const progress = timestamp - start;
 					const currentAngle = (angle * progress) / spinTime;

 					ctx.clearRect(0, 0, canvas.width, canvas.height);
 					ctx.save();
 					ctx.translate(centerX, centerY);
 					ctx.rotate(currentAngle);
 					ctx.translate(-centerX, -centerY);
 					drawWheel();
 					ctx.restore();

 					drawPointer();

 					if (progress < spinTime) {
 						requestAnimationFrame(animate);
 					} else {
 						const finalAngle = angle % (2 * Math.PI);
 						const winningSectorIndex = sectorAngles.findIndex(
 							(a) => finalAngle <= a
 						);
 						console.log(
 							`Winning sector: ${sectorLabels[winningSectorIndex]}`
 						);
 					}
 				}
 				requestAnimationFrame(animate);
 			}

 			drawWheel();
 			drawPointer();
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	canvas {
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<canvas height="400" id="magicWheel" width="400"></canvas>
	<button onclick="spinWheel()">Spin</button>

	<script>
	const canvas = document.getElementById("magicWheel");
	const ctx = canvas.getContext("2d");
	const centerX = canvas.width / 2;
	const centerY = canvas.height / 2;
	const radius = 150;
	const sectorColors = [
	"red",
	"blue",
	"green",
	"yellow",
	"purple",
	"orange",
	];
	const sectorLabels = ["A", "B", "C", "D", "E", "F"];

	function generateRandomAngles(numSectors) {
	const minAngle = (2 * Math.PI) / 32;
	const angles = [];
	let totalAngle = 0;

	for (let i = 0; i < numSectors; i++) {
	const randomAngle =
	minAngle +
	Math.random() * ((2 * Math.PI) / numSectors - minAngle);
	totalAngle += randomAngle;
	angles.push(totalAngle);
	}

	const scaleFactor = (2 * Math.PI) / totalAngle;
	return angles.map((angle) => angle * scaleFactor);
	}

	const sectorAngles = generateRandomAngles(sectorColors.length);

	function drawSector(startAngle, endAngle, color) {
	ctx.beginPath();
	ctx.moveTo(centerX, centerY);
	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
	ctx.closePath();
	ctx.fillStyle = color;
	ctx.fill();
	}

	function drawPointer() {
	ctx.beginPath();
	ctx.moveTo(centerX, centerY - radius - 20);
	ctx.lineTo(centerX - 10, centerY - radius + 10);
	ctx.lineTo(centerX + 10, centerY - radius + 10);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.fill();
	}

	function drawWheel() {
	const numSectors = sectorColors.length;

	for (let i = 0; i < numSectors; i++) {
	const startAngle = sectorAngles[i];
	const endAngle = sectorAngles[(i + 1) % numSectors];
	const color = sectorColors[i];
	drawSector(startAngle, endAngle, color);
	}
	}

	function spinWheel() {
	const spinTime = 5000;
	const minRotations = 5;
	const rotations = minRotations + Math.random() * 5;
	const randomStopAngle = Math.random() * 2 * Math.PI;
	const angle = 2 * Math.PI * rotations + randomStopAngle;

	let start = null;

	function animate(timestamp) {
	if (!start) {
	start = timestamp;
	}

	const progress = timestamp - start;
	const currentAngle = (angle * progress) / spinTime;

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.save();
	ctx.translate(centerX, centerY);
	ctx.rotate(currentAngle);
	ctx.translate(-centerX, -centerY);
	drawWheel();
	ctx.restore();

	drawPointer();

	if (progress < spinTime) {
	requestAnimationFrame(animate);
	} else {
	const finalAngle = angle % (2 * Math.PI);
	const winningSectorIndex = sectorAngles.findIndex(
	(a) => finalAngle <= a
	);
	console.log(
	`Winning sector: ${sectorLabels[winningSectorIndex]}`
	);
	}
	}
	requestAnimationFrame(animate);
	}

	drawWheel();
	drawPointer();
	</script>
	</body>
	</html>