Add Craps game interactive
This commit is contained in:
gpt-engineer-app[bot]
parent
f72073358b
commit
36d3b20bff
3 changed files with 277 additions and 0 deletions
257
src/components/CrapsGame.tsx
Normal file
257
src/components/CrapsGame.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6, RotateCcw } from 'lucide-react';
|
||||
import SocialShare from '@/components/SocialShare';
|
||||
|
||||
interface CrapsGameProps {
|
||||
showSocialShare?: boolean;
|
||||
}
|
||||
|
||||
const getDiceIcon = (value: number) => {
|
||||
switch (value) {
|
||||
case 1: return <Dice1 className="w-12 h-12" />;
|
||||
case 2: return <Dice2 className="w-12 h-12" />;
|
||||
case 3: return <Dice3 className="w-12 h-12" />;
|
||||
case 4: return <Dice4 className="w-12 h-12" />;
|
||||
case 5: return <Dice5 className="w-12 h-12" />;
|
||||
case 6: return <Dice6 className="w-12 h-12" />;
|
||||
default: return <Dice1 className="w-12 h-12" />;
|
||||
}
|
||||
};
|
||||
|
||||
const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
|
||||
const [dice1, setDice1] = useState<number | null>(null);
|
||||
const [dice2, setDice2] = useState<number | null>(null);
|
||||
const [isRolling, setIsRolling] = useState(false);
|
||||
const [gameResult, setGameResult] = useState<'win' | 'lose' | 'continue' | null>(null);
|
||||
const [rollCount, setRollCount] = useState(0);
|
||||
|
||||
const rollDice = () => {
|
||||
setIsRolling(true);
|
||||
setGameResult(null);
|
||||
|
||||
// Simulate rolling animation
|
||||
setTimeout(() => {
|
||||
const newDice1 = Math.floor(Math.random() * 6) + 1;
|
||||
const newDice2 = Math.floor(Math.random() * 6) + 1;
|
||||
const sum = newDice1 + newDice2;
|
||||
|
||||
setDice1(newDice1);
|
||||
setDice2(newDice2);
|
||||
setRollCount(prev => prev + 1);
|
||||
|
||||
// Determine game result based on craps rules
|
||||
if (sum === 2 || sum === 3 || sum === 12) {
|
||||
setGameResult('lose');
|
||||
} else if (sum === 7 || sum === 11) {
|
||||
setGameResult('win');
|
||||
} else {
|
||||
setGameResult('continue');
|
||||
}
|
||||
|
||||
setIsRolling(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const resetGame = () => {
|
||||
setDice1(null);
|
||||
setDice2(null);
|
||||
setGameResult(null);
|
||||
setRollCount(0);
|
||||
};
|
||||
|
||||
const sum = dice1 && dice2 ? dice1 + dice2 : null;
|
||||
|
||||
const getResultMessage = () => {
|
||||
if (!gameResult) return null;
|
||||
|
||||
switch (gameResult) {
|
||||
case 'win':
|
||||
return (
|
||||
<div className="text-center space-y-2">
|
||||
<Badge variant="default" className="bg-green-600 text-white text-lg px-4 py-2">
|
||||
🎉 You Win! 🎉
|
||||
</Badge>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Rolling {sum} on the first throw wins immediately!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
case 'lose':
|
||||
return (
|
||||
<div className="text-center space-y-2">
|
||||
<Badge variant="destructive" className="text-lg px-4 py-2">
|
||||
💸 You Lose! 💸
|
||||
</Badge>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Rolling {sum} on the first throw loses immediately!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
case 'continue':
|
||||
return (
|
||||
<div className="text-center space-y-2">
|
||||
<Badge variant="secondary" className="text-lg px-4 py-2">
|
||||
🎲 Game Continues 🎲
|
||||
</Badge>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your point is {sum}. Keep playing to win or lose!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6 space-y-6">
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-3xl font-bold text-foreground">Craps: First Throw</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
Roll two dice and see what happens on the opening throw of craps!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Rules */}
|
||||
<Card className="bg-muted/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Rules</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div className="text-center">
|
||||
<Badge variant="destructive" className="mb-2">Immediate Loss</Badge>
|
||||
<p>Rolling 2, 3, or 12</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Badge variant="default" className="mb-2 bg-green-600">Immediate Win</Badge>
|
||||
<p>Rolling 7 or 11</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Badge variant="secondary" className="mb-2">Game Continues</Badge>
|
||||
<p>Rolling 4, 5, 6, 8, 9, or 10</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dice Display */}
|
||||
<div className="flex justify-center items-center gap-8">
|
||||
<div className="text-center space-y-2">
|
||||
<div className={`p-4 rounded-lg border-2 ${isRolling ? 'animate-spin' : ''} ${dice1 ? 'border-primary' : 'border-muted'}`}>
|
||||
{dice1 ? getDiceIcon(dice1) : <div className="w-12 h-12 bg-muted rounded border-2 border-dashed"></div>}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Die 1</p>
|
||||
{dice1 && <p className="font-bold text-lg">{dice1}</p>}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">+</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<div className={`p-4 rounded-lg border-2 ${isRolling ? 'animate-spin' : ''} ${dice2 ? 'border-primary' : 'border-muted'}`}>
|
||||
{dice2 ? getDiceIcon(dice2) : <div className="w-12 h-12 bg-muted rounded border-2 border-dashed"></div>}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Die 2</p>
|
||||
{dice2 && <p className="font-bold text-lg">{dice2}</p>}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">=</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<div className={`p-4 rounded-lg border-2 min-w-[80px] ${sum ? 'border-primary bg-primary/10' : 'border-muted'}`}>
|
||||
{sum ? (
|
||||
<div className="text-3xl font-bold text-primary">{sum}</div>
|
||||
) : (
|
||||
<div className="w-12 h-12 bg-muted rounded border-2 border-dashed mx-auto"></div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Result */}
|
||||
{getResultMessage()}
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-muted-foreground">Rolls: {rollCount}</p>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button
|
||||
onClick={rollDice}
|
||||
disabled={isRolling}
|
||||
className="px-8 py-3 text-lg"
|
||||
>
|
||||
{isRolling ? 'Rolling...' : 'Roll Dice'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={resetGame}
|
||||
className="px-8 py-3"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Educational Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">About Craps</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
Craps is a classic casino dice game that demonstrates interesting probability concepts.
|
||||
The first throw (called the "come out roll") immediately determines the outcome in certain cases:
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Losing Numbers (Craps)</h4>
|
||||
<ul className="space-y-1">
|
||||
<li>• 2 (Snake Eyes): 1/36 probability</li>
|
||||
<li>• 3: 2/36 probability</li>
|
||||
<li>• 12 (Boxcars): 1/36 probability</li>
|
||||
<li><strong>Total losing probability: 4/36 = 11.1%</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Winning Numbers (Natural)</h4>
|
||||
<ul className="space-y-1">
|
||||
<li>• 7: 6/36 probability</li>
|
||||
<li>• 11: 2/36 probability</li>
|
||||
<li><strong>Total winning probability: 8/36 = 22.2%</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
If you roll 4, 5, 6, 8, 9, or 10, that becomes your "point" and the game continues with different rules.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{showSocialShare && (
|
||||
<div className="flex justify-center">
|
||||
<SocialShare
|
||||
title="Craps: First Throw"
|
||||
description="Learn about probability through the classic casino game of craps!"
|
||||
url={`${window.location.origin}/craps-game`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CrapsGame;
|
||||
|
|
@ -12,6 +12,7 @@ import GoldCoinGame from '@/components/GoldCoinGame';
|
|||
import GuessingGame from '@/components/GuessingGame';
|
||||
import SubtractionGame from '@/components/SubtractionGame';
|
||||
import ParityBitsGame from '@/components/ParityBitsGame';
|
||||
import CrapsGame from '@/components/CrapsGame';
|
||||
|
||||
interface Game {
|
||||
id: string;
|
||||
|
|
@ -22,6 +23,13 @@ interface Game {
|
|||
}
|
||||
|
||||
const games: Game[] = [
|
||||
{
|
||||
id: 'craps-game',
|
||||
title: 'Craps: First Throw',
|
||||
description: 'Experience the classic casino dice game! Roll two dice and learn about probability as you discover the rules of the opening throw.',
|
||||
tags: ['probability', 'dice', 'casino', 'mathematics', 'statistics', 'gambling'],
|
||||
component: CrapsGame
|
||||
},
|
||||
{
|
||||
id: 'parity-magic',
|
||||
title: 'Parity Magic',
|
||||
|
|
|
|||
12
src/pages/CrapsGamePage.tsx
Normal file
12
src/pages/CrapsGamePage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import CrapsGame from "@/components/CrapsGame";
|
||||
|
||||
const CrapsGamePage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<CrapsGame showSocialShare={true} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default CrapsGamePage;
|
||||
Loading…
Add table
Add a link
Reference in a new issue