Add slow mode toggle

src/components/CrapsGame.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
 import { Slider } from '@/components/ui/slider';
 import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6, RotateCcw, Settings, Play } from 'lucide-react';
 import SocialShare from '@/components/SocialShare';
@@ -40,6 +41,8 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
   // Simulation state
   const [simulationRounds, setSimulationRounds] = useState([10]);
   const [isSimulating, setIsSimulating] = useState(false);
+  const [slowMode, setSlowMode] = useState(false);
+  const [currentSimulationGame, setCurrentSimulationGame] = useState(0);
   const [simulationResults, setSimulationResults] = useState<{
     wins: number;
     losses: number;
@@ -92,9 +95,9 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
       if (point === null) {
         // First roll (come out roll)
         if (loseSums.includes(sum)) {
-          return { result: 'lose', turns };
+          return { result: 'lose', turns, die1, die2, sum };
         } else if (winSums.includes(sum)) {
-          return { result: 'win', turns };
+          return { result: 'win', turns, die1, die2, sum };
         } else {
           point = sum;
           turns++;
@@ -102,9 +105,9 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
       } else {
         // Subsequent rolls
         if (sum === point) {
-          return { result: 'win', turns };
+          return { result: 'win', turns, die1, die2, sum };
         } else if (sum === 7) {
-          return { result: 'lose', turns };
+          return { result: 'lose', turns, die1, die2, sum };
         } else {
           turns++;
         }
@@ -112,14 +115,88 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
     }
   };
 
+  const simulateGameSlow = async (gameNumber: number) => {
+    const winSums = isCustomRules ? customWinSums : [7, 11];
+    const loseSums = isCustomRules ? customLoseSums : [2, 3, 12];
+    
+    let turns = 1;
+    let point: number | null = null;
+    
+    while (true) {
+      // Show rolling animation
+      setIsRolling(true);
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      const die1 = Math.floor(Math.random() * 6) + 1;
+      const die2 = Math.floor(Math.random() * 6) + 1;
+      const sum = die1 + die2;
+      
+      // Update dice display
+      setDice1(die1);
+      setDice2(die2);
+      setIsRolling(false);
+      
+      // Wait to show the result
+      await new Promise(resolve => setTimeout(resolve, 800));
+      
+      if (point === null) {
+        // First roll (come out roll)
+        if (loseSums.includes(sum)) {
+          setGameResult('lose');
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          return { result: 'lose', turns };
+        } else if (winSums.includes(sum)) {
+          setGameResult('win');
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          return { result: 'win', turns };
+        } else {
+          setGameResult('continue');
+          point = sum;
+          turns++;
+          await new Promise(resolve => setTimeout(resolve, 800));
+        }
+      } else {
+        // Subsequent rolls
+        if (sum === point) {
+          setGameResult('win');
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          return { result: 'win', turns };
+        } else if (sum === 7) {
+          setGameResult('lose');
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          return { result: 'lose', turns };
+        } else {
+          setGameResult('continue');
+          turns++;
+          await new Promise(resolve => setTimeout(resolve, 600));
+        }
+      }
+    }
+  };
+
   const runSimulation = async () => {
     setIsSimulating(true);
+    setCurrentSimulationGame(0);
     const numGames = simulationRounds[0];
     let wins = 0;
     let losses = 0;
     let totalTurns = 0;
 
-    // Add small delays to show progress
+    if (slowMode) {
+      // Slow mode: simulate visually
+      for (let i = 0; i < numGames; i++) {
+        setCurrentSimulationGame(i + 1);
+        setGameResult(null);
+        const game = await simulateGameSlow(i + 1);
+        if (game.result === 'win') wins++;
+        else losses++;
+        totalTurns += game.turns;
+        
+        // Brief pause between games
+        await new Promise(resolve => setTimeout(resolve, 500));
+      }
+    } else {
+      // Fast mode: simulate in background
       for (let i = 0; i < numGames; i++) {
         const game = simulateGame();
         if (game.result === 'win') wins++;
@@ -128,9 +205,11 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
         
         // Add a small delay every 10 games to show progress
         if (i % 10 === 0) {
+          setCurrentSimulationGame(i + 1);
           await new Promise(resolve => setTimeout(resolve, 50));
         }
       }
+    }
 
     setSimulationResults({
       wins,
@@ -138,6 +217,7 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
       averageTurns: totalTurns / numGames,
       totalGames: numGames
     });
+    setCurrentSimulationGame(0);
     setIsSimulating(false);
   };
 
@@ -204,11 +284,21 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
         <CardContent className="space-y-6">
           {/* Simulation Controls */}
           <Card className="bg-accent/5">
-            <CardHeader>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
                 <CardTitle className="text-lg">Simulation</CardTitle>
                 <CardDescription>
                   Run multiple games to analyze win/loss statistics
                 </CardDescription>
+              </div>
+              <div className="flex items-center space-x-2">
+                <label htmlFor="slow-mode" className="text-sm font-medium">Slow Mode</label>
+                <Switch
+                  id="slow-mode"
+                  checked={slowMode}
+                  onCheckedChange={setSlowMode}
+                />
+              </div>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -228,7 +318,13 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
                 className="w-full gap-2"
               >
                 <Play className="w-4 h-4" />
-                {isSimulating ? 'Simulating...' : 'Simulate'}
+                {isSimulating 
+                  ? (slowMode 
+                      ? `Simulating Game ${currentSimulationGame}/${simulationRounds[0]}...` 
+                      : 'Simulating...'
+                    ) 
+                  : 'Simulate'
+                }
               </Button>
               
               {simulationResults && (