LuckyWheel - Lucky Wheel

import { LuckyWheel } from '@randbox/react';
import type { LuckyWheelProps, LuckyWheelResult } from '@randbox/react';

interface LuckyWheelProps {
  // Required properties
  prizes: string[];                                    // Prize list
 
  // Optional properties
  weights?: number[];                                  // Prize weights
  colors?: string[];                                   // Custom colors
  animationDuration?: number;                          // Animation duration (ms), default 4000
  buttonText?: string;                                 // Button text, default "Start Lottery"
 
  // Base properties (inherited from BaseGameProps)
  className?: string;                                  // CSS class name
  style?: React.CSSProperties;                        // Inline styles
  disabled?: boolean;                                  // Whether disabled
 
  // Callback functions
  onGameStart?: () => void;                           // Game start callback
  onGameEnd?: (result: LuckyWheelResult) => void;    // Game end callback
  onResult?: (result: LuckyWheelResult) => void;     // Result callback
}

interface LuckyWheelResult {
  prizeIndex: number;    // Won prize index
  prize: string;         // Won prize
  angle: number;         // Final rotation angle
  round: number;         // Round number
}

interface LuckyWheelStats {
  totalSpins: number;              // Total number of spins
  prizeHistory: Record<string, number>; // Prize history record
}

import React from 'react';
import { LuckyWheel } from '@randbox/react';
 
function BasicLuckyWheel() {
  const prizes = ['First Prize', 'Second Prize', 'Third Prize', 'Fourth Prize', 'Fifth Prize', 'Sixth Prize'];
 
  const handleResult = (result) => {
    console.log('Lottery result:', result);
    alert(`Congratulations! You won: ${result.prize}`);
  };
 
  return (
    <LuckyWheel
      prizes={prizes}
      onResult={handleResult}
    />
  );
}

function CustomLuckyWheel() {
  const prizes = [
    'iPhone 15 Pro',
    'iPad Air',
    'AirPods Pro',
    'Apple Watch',
    'Coupon',
    'Points',
    'Voucher',
    'Thank you for playing'
  ];
 
  // Higher weights = higher probability
  const weights = [1, 3, 5, 8, 15, 20, 25, 23];
 
  // Custom colors (blue-purple theme)
  const colors = [
    '#A8B9F5',
    '#C9D5F7',
    '#A8B9F5',
    '#C9D5F7',
    '#A8B9F5',
    '#C9D5F7',
    '#A8B9F5',
    '#C9D5F7'
  ];
 
  return (
    <LuckyWheel
      prizes={prizes}
      weights={weights}
      colors={colors}
      animationDuration={5000}
      buttonText="Start Spin"
      onResult={(result) => {
        if (result.prizeIndex < 4) {
          alert(`🎉 Congratulations! You won ${result.prize}!`);
        }
      }}
    />
  );
}

{
  prizeIndex: 0,              // Won prize index (0-based)
  prize: "iPhone 15 Pro",     // Won prize name
  angle: 12.566370614359172,  // Final rotation angle (radians)
  round: 1                    // Current round number
}