From 36d3b20bff0732a92decca77e9a368e67d39ecf0 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 04:07:43 +0000 Subject: [PATCH] Add Craps game interactive --- src/components/CrapsGame.tsx | 257 ++++++++++++++++++++++++++++++++ src/components/GamesGallery.tsx | 8 + src/pages/CrapsGamePage.tsx | 12 ++ 3 files changed, 277 insertions(+) create mode 100644 src/components/CrapsGame.tsx create mode 100644 src/pages/CrapsGamePage.tsx diff --git a/src/components/CrapsGame.tsx b/src/components/CrapsGame.tsx new file mode 100644 index 0000000..88ae92a --- /dev/null +++ b/src/components/CrapsGame.tsx @@ -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 ; + case 2: return ; + case 3: return ; + case 4: return ; + case 5: return ; + case 6: return ; + default: return ; + } +}; + +const CrapsGame: React.FC = ({ showSocialShare = false }) => { + const [dice1, setDice1] = useState(null); + const [dice2, setDice2] = useState(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 ( +
+ + 🎉 You Win! 🎉 + +

+ Rolling {sum} on the first throw wins immediately! +

+
+ ); + case 'lose': + return ( +
+ + 💸 You Lose! 💸 + +

+ Rolling {sum} on the first throw loses immediately! +

+
+ ); + case 'continue': + return ( +
+ + 🎲 Game Continues 🎲 + +

+ Your point is {sum}. Keep playing to win or lose! +

+
+ ); + default: + return null; + } + }; + + return ( +
+ + + Craps: First Throw + + Roll two dice and see what happens on the opening throw of craps! + + + + {/* Rules */} + + + Rules + + +
+
+ Immediate Loss +

Rolling 2, 3, or 12

+
+
+ Immediate Win +

Rolling 7 or 11

+
+
+ Game Continues +

Rolling 4, 5, 6, 8, 9, or 10

+
+
+ + + + {/* Dice Display */} +
+
+
+ {dice1 ? getDiceIcon(dice1) :
} +
+

Die 1

+ {dice1 &&

{dice1}

} +
+ +
+
+
+
+ +
+
+ {dice2 ? getDiceIcon(dice2) :
} +
+

Die 2

+ {dice2 &&

{dice2}

} +
+ +
+
=
+
+ +
+
+ {sum ? ( +
{sum}
+ ) : ( +
+ )} +
+

Total

+
+
+ + {/* Result */} + {getResultMessage()} + + {/* Statistics */} +
+

Rolls: {rollCount}

+
+ + {/* Controls */} +
+ + +
+ + + + {/* Educational Information */} + + + About Craps + + +

+ 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: +

+
+
+

Losing Numbers (Craps)

+
    +
  • • 2 (Snake Eyes): 1/36 probability
    • +
  • • 3: 2/36 probability
    • +
  • • 12 (Boxcars): 1/36 probability
    • +
  • Total losing probability: 4/36 = 11.1%
    • +
+
+
+

Winning Numbers (Natural)

+
    +
  • • 7: 6/36 probability
    • +
  • • 11: 2/36 probability
    • +
  • Total winning probability: 8/36 = 22.2%
    • +
+
+
+

+ If you roll 4, 5, 6, 8, 9, or 10, that becomes your "point" and the game continues with different rules. +

+ + + + {showSocialShare && ( +
+ +
+ )} +
+ ); +}; + +export default CrapsGame; \ No newline at end of file diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx index a39de1f..d602fa0 100644 --- a/src/components/GamesGallery.tsx +++ b/src/components/GamesGallery.tsx @@ -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', diff --git a/src/pages/CrapsGamePage.tsx b/src/pages/CrapsGamePage.tsx new file mode 100644 index 0000000..157f624 --- /dev/null +++ b/src/pages/CrapsGamePage.tsx @@ -0,0 +1,12 @@ +import Layout from "@/components/Layout"; +import CrapsGame from "@/components/CrapsGame"; + +const CrapsGamePage = () => { + return ( + + + + ); +}; + +export default CrapsGamePage; \ No newline at end of file