From 0207a808ef6e98955dbf42455c8dd038017799d6 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 5 Sep 2025 05:58:35 +0000
Subject: [PATCH] Add live updates to slow mode

---
 src/components/CrapsGame.tsx | 54 +++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/components/CrapsGame.tsx b/src/components/CrapsGame.tsx
index 25f5283..5847585 100644
--- a/src/components/CrapsGame.tsx
+++ b/src/components/CrapsGame.tsx
@@ -49,6 +49,12 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
     averageTurns: number;
     totalGames: number;
   } | null>(null);
+  const [liveSimulationStats, setLiveSimulationStats] = useState<{
+    wins: number;
+    losses: number;
+    totalTurns: number;
+    completedGames: number;
+  } | null>(null);
 
   const rollDice = () => {
     setIsRolling(true);
@@ -177,12 +183,16 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
   const runSimulation = async () => {
     setIsSimulating(true);
     setCurrentSimulationGame(0);
+    setLiveSimulationStats(null);
     const numGames = simulationRounds[0];
     let wins = 0;
     let losses = 0;
     let totalTurns = 0;
 
     if (slowMode) {
+      // Initialize live stats for slow mode
+      setLiveSimulationStats({ wins: 0, losses: 0, totalTurns: 0, completedGames: 0 });
+      
       // Slow mode: simulate visually
       for (let i = 0; i < numGames; i++) {
         setCurrentSimulationGame(i + 1);
@@ -192,6 +202,14 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
         else losses++;
         totalTurns += game.turns;
         
+        // Update live stats
+        setLiveSimulationStats({
+          wins,
+          losses,
+          totalTurns,
+          completedGames: i + 1
+        });
+        
         // Brief pause between games
         await new Promise(resolve => setTimeout(resolve, 500));
       }
@@ -218,6 +236,7 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
       totalGames: numGames
     });
     setCurrentSimulationGame(0);
+    setLiveSimulationStats(null);
     setIsSimulating(false);
   };
 
@@ -327,22 +346,43 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
                 }
               </Button>
               
-              {simulationResults && (
+              {(simulationResults || liveSimulationStats) && (
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 p-4 bg-muted/50 rounded-lg">
                   <div className="text-center">
-                    <div className="text-2xl font-bold text-green-600">{simulationResults.wins}</div>
+                    <div className="text-2xl font-bold text-green-600">
+                      {liveSimulationStats ? liveSimulationStats.wins : simulationResults!.wins}
+                    </div>
                     <div className="text-sm text-muted-foreground">Wins</div>
-                    <div className="text-xs">({((simulationResults.wins / simulationResults.totalGames) * 100).toFixed(1)}%)</div>
+                    <div className="text-xs">
+                      {liveSimulationStats 
+                        ? `(${((liveSimulationStats.wins / Math.max(liveSimulationStats.completedGames, 1)) * 100).toFixed(1)}%)`
+                        : `(${((simulationResults!.wins / simulationResults!.totalGames) * 100).toFixed(1)}%)`
+                      }
+                    </div>
                   </div>
                   <div className="text-center">
-                    <div className="text-2xl font-bold text-red-600">{simulationResults.losses}</div>
+                    <div className="text-2xl font-bold text-red-600">
+                      {liveSimulationStats ? liveSimulationStats.losses : simulationResults!.losses}
+                    </div>
                     <div className="text-sm text-muted-foreground">Losses</div>
-                    <div className="text-xs">({((simulationResults.losses / simulationResults.totalGames) * 100).toFixed(1)}%)</div>
+                    <div className="text-xs">
+                      {liveSimulationStats 
+                        ? `(${((liveSimulationStats.losses / Math.max(liveSimulationStats.completedGames, 1)) * 100).toFixed(1)}%)`
+                        : `(${((simulationResults!.losses / simulationResults!.totalGames) * 100).toFixed(1)}%)`
+                      }
+                    </div>
                   </div>
                   <div className="text-center">
-                    <div className="text-2xl font-bold text-blue-600">{simulationResults.averageTurns.toFixed(1)}</div>
+                    <div className="text-2xl font-bold text-blue-600">
+                      {liveSimulationStats 
+                        ? (liveSimulationStats.totalTurns / Math.max(liveSimulationStats.completedGames, 1)).toFixed(1)
+                        : simulationResults!.averageTurns.toFixed(1)
+                      }
+                    </div>
                     <div className="text-sm text-muted-foreground">Avg Turns</div>
-                    <div className="text-xs">per game</div>
+                    <div className="text-xs">
+                      {liveSimulationStats ? `(${liveSimulationStats.completedGames} games)` : 'per game'}
+                    </div>
                   </div>
                 </div>
               )}