Spinning Wheel

1"use client";
2
3import { useState, useRef } from "react";
4
5import { Button } from "@/registry/new-york/components/button";
6
7export type Reward =
8  | {
9      reward: string;
10      weight?: number;
11      bgColor: string;
12      textColor: string;
13    }
14  | {
15      reward: string;
16      weight?: number;
17    };
18
19export function SpinningWheel({
20  rewardDetails,
21  disabled = false,
22  radius = 200,
23  setReward,
24}: {
25  rewardDetails: Reward[];
26  disabled?: boolean;
27  radius?: number;
28  setReward?(reward: string | null): void;
29}) {
30  // Seperate all the properties
31  const rewards = rewardDetails.map((reward) => reward.reward);
32  const bgColors = rewardDetails.every((reward) => "bgColor" in reward)
33    ? rewardDetails.map((reward) => reward.bgColor)
34    : ["#FFF", "#000"];
35
36  const textColors = rewardDetails.every((reward) => "textColor" in reward)
37    ? rewardDetails.map((reward) => reward.textColor)
38    : ["#000", "#FFF"];
39  let weights = rewardDetails.map((reward) => reward?.weight || 1);
40  if (!weights) {
41    weights = new Array(rewards.length).fill(1);
42  }
43
44  // State variables
45  const [isSpinning, setIsSpinning] = useState(false);
46  const [rotation, setRotation] = useState(0);
47  const [finalRotation, setFinalRotation] = useState(0);
48  const wheelRef = useRef(null);
49
50  // internal calculation variables
51  const totalWeights = weights.reduce((a, b) => a + b, 0);
52  const segmentAngle = 360 / rewards.length;
53  const calcSegmentAngle = 360 / totalWeights;
54  const calcRewards = rewards
55    .map((reward, index) => new Array(weights[index]).fill(reward))
56    .flat();
57
58  const spinWheel = () => {
59    if (isSpinning) return;
60
61    setIsSpinning(true);
62    if (setReward) setReward(null);
63
64    // Determine a random position to stop (between 2 and 5 full rotations + random segment)
65    const minRotations = 5;
66    const maxRotations = 7;
67    const randomRotations =
68      minRotations + Math.random() * (maxRotations - minRotations);
69    const randomRewardIndex = Math.floor(Math.random() * totalWeights);
70    const randomAngle =
71      segmentAngle * rewards.indexOf(calcRewards[randomRewardIndex]);
72
73    const totalRotation = randomRotations * 360 + randomAngle;
74
75    // Determine the final rotation
76    const newFinalRotation = rotation + totalRotation;
77    setFinalRotation(newFinalRotation);
78
79    // Determine the selected reward based on where the wheel stops
80// … truncated