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;
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>
)}