從 jQuery 到 TypeScript：打造轉盤抽獎元件

let currentAngle = 0;
let totalAngle = 0;
let isSpinning = false;
 
const prizes = [
  { name: "頭獎", range: [[350, 368]] },
  { name: "二獎", range: [[140, 158]] },
  { name: "三獎", range: [[230, 248], [80, 98]] },
  // ...
];
 
function getTargetAngle(_prize) {
  let prize = prizes.find((p) => p.name === _prize);
  let [min, max] = prize.range[Math.floor(Math.random() * prize.range.length)];
  let rawTarget = Math.floor(Math.random() * (max - min + 1)) + min;
  let targetAngle = rawTarget - currentAngle;
  if (targetAngle < 0) targetAngle += 360;
  return targetAngle;
}
 
$(".btn_start").click(() => {
  if (isSpinning) return;
  isSpinning = true;
 
  const _prize = fetchRandomPrizeApi();
  let targetAngle = getTargetAngle(_prize);
  let extraRotations = 10 * 360;
  totalAngle += extraRotations + targetAngle;
 
  $(".lunpan").css({
    transition: "transform 8s cubic-bezier(.21,.02,.14,.98)",
    transform: `rotate(${totalAngle}deg)`,
  });
 
  setTimeout(() => {
    isSpinning = false;
    currentAngle = totalAngle % 360;
    $(".lunpan").css({ transition: "none", transform: `rotate(${currentAngle}deg)` });
    totalAngle = currentAngle;
  }, 8000);
});

function drawWheel(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
 
  const size = canvas.width;
  const cx = size / 2;
  const cy = size / 2;
  const outerR = size / 2 - 4;
  const innerR = 28;
  const SEG_ANGLE = 360 / PRIZES.length;
 
  ctx.clearRect(0, 0, size, size);
 
  for (let i = 0; i < PRIZES.length; i++) {
    // -90° 讓第一格從 12 點鐘方向開始
    const startRad = ((-90 + i * SEG_ANGLE) * Math.PI) / 180;
    const endRad = ((-90 + (i + 1) * SEG_ANGLE) * Math.PI) / 180;
    const midRad = (startRad + endRad) / 2;
 
    // 扇形
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, outerR, startRad, endRad);
    ctx.closePath();
    ctx.fillStyle = PRIZES[i].color;
    ctx.fill();
 
    // 文字：旋轉到扇形中心方向再繪製
    const textR = (outerR + innerR) / 2 + 8;
    ctx.save();
    ctx.translate(cx + textR * Math.cos(midRad), cy + textR * Math.sin(midRad));
    ctx.rotate(midRad + Math.PI / 2);
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = PRIZES[i].textColor;
    ctx.font = `bold ${Math.round(size / 15)}px sans-serif`;
    ctx.fillText(PRIZES[i].name, 0, 0);
    ctx.restore();
  }
}

const targetBase = (360 - (prizeIdx + 0.5) * SEG_ANGLE + 360) % 360;

const variation = (Math.random() - 0.5) * SEG_ANGLE * 0.7;
const targetInRound = ((targetBase + variation) % 360 + 360) % 360;
 
// 從目前角度補差值，再多轉 10 圈
let delta = targetInRound - currentAngleRef.current % 360;
if (delta < 0) delta += 360;  // 確保往前轉
totalAngleRef.current = currentAngleRef.current + 10 * 360 + delta;

const SEG_ANGLE = 360 / PRIZES.length;
 
function calcTargetAngle(prizeIdx: number, currentAngle: number): number {
  const targetBase = (360 - (prizeIdx + 0.5) * SEG_ANGLE + 360) % 360;
  const variation = (Math.random() - 0.5) * SEG_ANGLE * 0.7;
  const targetInRound = ((targetBase + variation) % 360 + 360) % 360;
  let delta = targetInRound - currentAngle % 360;
  if (delta < 0) delta += 360;
  return currentAngle + 10 * 360 + delta;
}

// 旋轉角度用 ref：不需要觸發 re-render，setTimeout 內也能正確讀值
const currentAngleRef = useRef(0);
const totalAngleRef = useRef(0);
const isSpinning = useRef(false);
 
// 需要更新畫面的部分才用 state
const [spinning, setSpinning] = useState(false);
const [cssTransform, setCssTransform] = useState("rotate(0deg)");
const [cssTransition, setCssTransition] = useState("none");
const [result, setResult] = useState<Prize | null>(null);

const handleSpin = useCallback(() => {
  if (isSpinning.current) return;
  isSpinning.current = true;
  setSpinning(true);
  setShowResult(false);
 
  // 實際場景：const prizeIdx = await fetchPrizeFromApi();
  const prizeIdx = Math.floor(Math.random() * SEG_COUNT); // Demo 用
 
  const targetBase = (360 - (prizeIdx + 0.5) * SEG_ANGLE + 360) % 360;
  const variation = (Math.random() - 0.5) * SEG_ANGLE * 0.7;
  const targetInRound = ((targetBase + variation) % 360 + 360) % 360;
 
  let delta = targetInRound - currentAngleRef.current % 360;
  if (delta < 0) delta += 360;
 
  totalAngleRef.current = currentAngleRef.current + 10 * 360 + delta;
 
  // 設定 CSS transition + transform → 觸發動畫
  setCssTransition("transform 8s cubic-bezier(.21,.02,.14,.98)");
  setCssTransform(`rotate(${totalAngleRef.current}deg)`);
 
  setTimeout(() => {
    isSpinning.current = false;
 
    // 動畫結束後正規化角度，避免數值無限累積
    currentAngleRef.current = totalAngleRef.current % 360;
    totalAngleRef.current = currentAngleRef.current;
 
    setCssTransition("none");
    setCssTransform(`rotate(${currentAngleRef.current}deg)`);
    setSpinning(false);
    setResult(PRIZES[prizeIdx]);
    setShowResult(true);
  }, 8100);
}, []);