roperezparra/custom_cute_spin_wheel.html

## custom_cute_spin_wheel.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Custom Cute Spin Wheel</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    canvas {
      border-radius: 50%;
      background: transparent;
    }

    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1rem;
      border: none;
      border-radius: 10px;
      background-color: #f7c8e0;
      color: #333;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #f9a8d4;
    }
  </style>
</head>
<body>
  <canvas id="wheel" width="500" height="500"></canvas>
  <button onclick="spin()">Spin</button>
  <audio id="tick" src="https://freesound.org/data/previews/341/341695_6261194-lq.mp3"></audio>
  <script>
    const topics = [
      "My favorite food",
      "A place I like to go on the weekend",
      "My favorite drink and when I like to have it",
      "What I do every morning",
      "My typical Sunday",
      "A person in my family I admire",
      "My favorite season of the year",
      "A hobby I enjoy",
      "My daily routine",
      "What I usually do after work/school"
    ];

    const colors = [
      "#ffd6e0", "#ffeacc", "#cce5ff", "#e0ccff",
      "#d1f7c4", "#ffdfba", "#ffb3c1", "#c2f0fc",
      "#ffe5ec", "#d9f9a5"
    ];

    const canvas = document.getElementById("wheel");
    const ctx = canvas.getContext("2d");
    const tick = document.getElementById("tick");

    const size = canvas.width;
    const center = size / 2;
    const radius = center;
    let angleCurrent = 0;
    let spinning = false;
    let remainingTopics = [...topics];

    function drawWheel(items) {
      const anglePerSlice = (2 * Math.PI) / items.length;
      for (let i = 0; i < items.length; i++) {
        ctx.beginPath();
        ctx.moveTo(center, center);
        ctx.fillStyle = colors[i % colors.length];
        ctx.arc(center, center, radius, anglePerSlice * i, anglePerSlice * (i + 1));
        ctx.fill();

        ctx.save();
        ctx.translate(center, center);
        ctx.rotate(anglePerSlice * i + anglePerSlice / 2);
        ctx.textAlign = "right";
        ctx.fillStyle = "#333";
        ctx.font = "16px Inter";
        ctx.fillText(items[i], radius - 10, 5);
        ctx.restore();
      }
    }

    function spin() {
      if (spinning || remainingTopics.length === 0) return;
      spinning = true;

      const totalSpins = 20 + Math.floor(Math.random() * 10);
      let spinCount = 0;
      let lastAngle = 0;

      const spinInterval = setInterval(() => {
        angleCurrent += (Math.PI / 15);
        angleCurrent %= (2 * Math.PI);
        ctx.clearRect(0, 0, size, size);
        ctx.save();
        ctx.translate(center, center);
        ctx.rotate(angleCurrent);
        ctx.translate(-center, -center);
        drawWheel(remainingTopics);
        ctx.restore();
        tick.play();

        spinCount++;
        if (spinCount > totalSpins) {
          clearInterval(spinInterval);
          setTimeout(() => {
            const winnerIndex = Math.floor((remainingTopics.length * ((2 * Math.PI - angleCurrent) % (2 * Math.PI))) / (2 * Math.PI));
            alert("🎉 " + remainingTopics[winnerIndex] + " 🎉");
            remainingTopics.splice(winnerIndex, 1);
            ctx.clearRect(0, 0, size, size);
            drawWheel(remainingTopics);
            spinning = false;
          }, 300);
        }
      }, 100);
    }

    drawWheel(remainingTopics);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Custom Cute Spin Wheel</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

	body {
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}

	canvas {
	border-radius: 50%;
	background: transparent;
	}

	button {
	margin-top: 20px;
	padding: 10px 20px;
	font-size: 1rem;
	border: none;
	border-radius: 10px;
	background-color: #f7c8e0;
	color: #333;
	cursor: pointer;
	transition: background-color 0.3s;
	}

	button:hover {
	background-color: #f9a8d4;
	}
	</style>
	</head>
	<body>
	<canvas id="wheel" width="500" height="500"></canvas>
	<button onclick="spin()">Spin</button>
	<audio id="tick" src="https://freesound.org/data/previews/341/341695_6261194-lq.mp3"></audio>
	<script>
	const topics = [
	"My favorite food",
	"A place I like to go on the weekend",
	"My favorite drink and when I like to have it",
	"What I do every morning",
	"My typical Sunday",
	"A person in my family I admire",
	"My favorite season of the year",
	"A hobby I enjoy",
	"My daily routine",
	"What I usually do after work/school"
	];

	const colors = [
	"#ffd6e0", "#ffeacc", "#cce5ff", "#e0ccff",
	"#d1f7c4", "#ffdfba", "#ffb3c1", "#c2f0fc",
	"#ffe5ec", "#d9f9a5"
	];

	const canvas = document.getElementById("wheel");
	const ctx = canvas.getContext("2d");
	const tick = document.getElementById("tick");

	const size = canvas.width;
	const center = size / 2;
	const radius = center;
	let angleCurrent = 0;
	let spinning = false;
	let remainingTopics = [...topics];

	function drawWheel(items) {
	const anglePerSlice = (2 * Math.PI) / items.length;
	for (let i = 0; i < items.length; i++) {
	ctx.beginPath();
	ctx.moveTo(center, center);
	ctx.fillStyle = colors[i % colors.length];
	ctx.arc(center, center, radius, anglePerSlice * i, anglePerSlice * (i + 1));
	ctx.fill();

	ctx.save();
	ctx.translate(center, center);
	ctx.rotate(anglePerSlice * i + anglePerSlice / 2);
	ctx.textAlign = "right";
	ctx.fillStyle = "#333";
	ctx.font = "16px Inter";
	ctx.fillText(items[i], radius - 10, 5);
	ctx.restore();
	}
	}

	function spin() {
	if (spinning \|\| remainingTopics.length === 0) return;
	spinning = true;

	const totalSpins = 20 + Math.floor(Math.random() * 10);
	let spinCount = 0;
	let lastAngle = 0;

	const spinInterval = setInterval(() => {
	angleCurrent += (Math.PI / 15);
	angleCurrent %= (2 * Math.PI);
	ctx.clearRect(0, 0, size, size);
	ctx.save();
	ctx.translate(center, center);
	ctx.rotate(angleCurrent);
	ctx.translate(-center, -center);
	drawWheel(remainingTopics);
	ctx.restore();
	tick.play();

	spinCount++;
	if (spinCount > totalSpins) {
	clearInterval(spinInterval);
	setTimeout(() => {
	const winnerIndex = Math.floor((remainingTopics.length * ((2 * Math.PI - angleCurrent) % (2 * Math.PI))) / (2 * Math.PI));
	alert("🎉 " + remainingTopics[winnerIndex] + " 🎉");
	remainingTopics.splice(winnerIndex, 1);
	ctx.clearRect(0, 0, size, size);
	drawWheel(remainingTopics);
	spinning = false;
	}, 300);
	}
	}, 100);
	}

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