Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add live updates to slow mode

Browse source
This commit is contained in:
gpt-engineer-app[bot] 2025-09-05 05:58:35 +00:00
parent c3e5790ee5
commit 0207a808ef
1 changed files with 47 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/components/CrapsGame.tsx
View file

@ -49,6 +49,12 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
averageTurns: number; averageTurns: number;
totalGames: number; totalGames: number;
} | null>(null); } | null>(null);
const [liveSimulationStats, setLiveSimulationStats] = useState<{
wins: number;
losses: number;
totalTurns: number;
completedGames: number;
} | null>(null);
const rollDice = () => { const rollDice = () => {
setIsRolling(true); setIsRolling(true);
@ -177,12 +183,16 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
const runSimulation = async () => { const runSimulation = async () => {
setIsSimulating(true); setIsSimulating(true);
setCurrentSimulationGame(0); setCurrentSimulationGame(0);
setLiveSimulationStats(null);
const numGames = simulationRounds[0]; const numGames = simulationRounds[0];
let wins = 0; let wins = 0;
let losses = 0; let losses = 0;
let totalTurns = 0; let totalTurns = 0;
if (slowMode) { if (slowMode) {
// Initialize live stats for slow mode
setLiveSimulationStats({ wins: 0, losses: 0, totalTurns: 0, completedGames: 0 });
// Slow mode: simulate visually // Slow mode: simulate visually
for (let i = 0; i < numGames; i++) { for (let i = 0; i < numGames; i++) {
setCurrentSimulationGame(i + 1); setCurrentSimulationGame(i + 1);
@ -192,6 +202,14 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
else losses++; else losses++;
totalTurns += game.turns; totalTurns += game.turns;
// Update live stats
setLiveSimulationStats({
wins,
losses,
totalTurns,
completedGames: i + 1
});
// Brief pause between games // Brief pause between games
await new Promise(resolve => setTimeout(resolve, 500)); await new Promise(resolve => setTimeout(resolve, 500));
} }
@ -218,6 +236,7 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
totalGames: numGames totalGames: numGames
}); });
setCurrentSimulationGame(0); setCurrentSimulationGame(0);
setLiveSimulationStats(null);
setIsSimulating(false); setIsSimulating(false);
}; };
@ -327,22 +346,43 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
} }
</Button> </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="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-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-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>
<div className="text-center"> <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-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>
<div className="text-center"> <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-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>
</div> </div>
)} )}