CoinFlip - Coin Flip Game

import { CoinFlip } from '@randbox/react';
import type { CoinFlipProps, CoinFlipResult, CoinFlipStats } from '@randbox/react';

interface CoinFlipProps {
  // Optional properties
  animationDuration?: number;                      // Animation duration (ms), default 2000
  showStats?: boolean;                             // Whether to show statistics, default true
 
  // 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: CoinFlipResult) => void;  // Game end callback
  onResult?: (result: CoinFlipResult) => void;   // Result callback
}

interface CoinFlipResult {
  result: 'heads' | 'tails';  // Coin result: heads or tails
  round: number;              // Round number
  timestamp: number;          // Timestamp
}

interface CoinFlipStats {
  totalFlips: number;    // Total number of flips
  heads: number;         // Number of heads
  tails: number;         // Number of tails
  headsRate: string;     // Heads rate (percentage)
  tailsRate: string;     // Tails rate (percentage)
}

import React from 'react';
import { CoinFlip } from '@randbox/react';
 
function BasicCoinFlip() {
  const handleResult = (result) => {
    console.log('Flip result:', result);
    alert(`Result: ${result.result === 'heads' ? 'Heads' : 'Tails'}`);
  };
 
  return (
    <CoinFlip onResult={handleResult} />
  );
}

function FastCoinFlip() {
  return (
    <div>
      <h3>Fast Mode (1 second)</h3>
      <CoinFlip animationDuration={1000} />
 
      <h3>Slow Mode (3 seconds)</h3>
      <CoinFlip animationDuration={3000} />
    </div>
  );
}

{
  result: "heads",        // "heads" or "tails"
  round: 1,              // Current round number
  timestamp: 1234567890  // Timestamp
}

{
  totalFlips: 10,        // Total number of flips
  heads: 6,              // Number of heads
  tails: 4,              // Number of tails
  headsRate: "60.0",     // Heads rate (percentage)
  tailsRate: "40.0"      // Tails rate (percentage)
}