File size: 3,648 Bytes
03834ad | 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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | const canvas = document.getElementById("wheel");
const ctx = canvas.getContext("2d");
const spinBtn = document.getElementById("spinBtn");
const resultBox = document.getElementById("resultBox");
const resultText = document.getElementById("resultText");
const rewards = [
"1K Followers",
"2K Followers",
"10K Followers",
"20K Views",
"50K Views",
"100K Views"
];
// Fixed Prize (can be set server-side)
const fixedPrize = "20K Views";
let centerX = 0;
let centerY = 0;
let radius = 0;
let arc = (2 * Math.PI) / rewards.length;
let currentAngle = 0;
function setCanvasSize() {
// Match canvas pixel size to CSS size for crisp rendering on all DPRs
const rect = canvas.getBoundingClientRect();
const devicePixelRatioSafe = Math.max(1, Math.floor(window.devicePixelRatio || 1));
canvas.width = Math.floor(rect.width * devicePixelRatioSafe);
canvas.height = Math.floor(rect.height * devicePixelRatioSafe);
centerX = canvas.width / 2;
centerY = canvas.height / 2;
radius = Math.min(centerX, centerY);
ctx.setTransform(1, 0, 0, 1, 0, 0);
drawWheel();
}
function drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < rewards.length; i++) {
const startAngle = i * arc + currentAngle;
const endAngle = startAngle + arc;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.fillStyle = i % 2 === 0 ? "#ff4d6d" : "#ff9f1c";
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
// Text
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(startAngle + arc / 2);
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = `${Math.max(12, Math.floor(radius * 0.07))}px Arial`;
ctx.fillText(rewards[i], radius * 0.78, 6);
ctx.restore();
}
// Center hub
ctx.beginPath();
ctx.arc(centerX, centerY, Math.max(8, radius * 0.08), 0, Math.PI * 2);
ctx.fillStyle = "#22262c";
ctx.fill();
ctx.lineWidth = Math.max(2, radius * 0.015);
ctx.strokeStyle = "#444b57";
ctx.stroke();
}
function spinWheel() {
spinBtn.disabled = true;
const prizeIndex = rewards.indexOf(fixedPrize);
const targetAngle = (Math.PI * 3 / 2) - (prizeIndex * arc + arc / 2); // align prize to top pointer
const fullSpins = 5 * 2 * Math.PI;
const finalAngle = fullSpins + normalizeAngle(targetAngle - currentAngle);
const durationMs = 5000;
let startTs = null;
const startAngle = currentAngle;
function animate(ts) {
if (!startTs) startTs = ts;
const elapsed = ts - startTs;
const eased = easeOutCubic(Math.min(elapsed / durationMs, 1));
currentAngle = startAngle + finalAngle * eased;
drawWheel();
if (elapsed < durationMs) {
requestAnimationFrame(animate);
} else {
// Snap to final position precisely
currentAngle = startAngle + finalAngle;
drawWheel();
showResult(fixedPrize);
}
}
requestAnimationFrame(animate);
}
function normalizeAngle(angle) {
const twoPi = Math.PI * 2;
return ((angle % twoPi) + twoPi) % twoPi;
}
function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3);
}
function showResult(prize) {
resultBox.classList.remove("hidden");
resultText.textContent = `🎉 Congratulations! You won: ${prize}`;
}
function redirectToClaim() {
window.location.href = "../claim/claim.html";
}
window.addEventListener("resize", setCanvasSize);
// Initialize sizing after the canvas is in layout
setTimeout(setCanvasSize, 0);
spinBtn.addEventListener("click", spinWheel);
|