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

Add custom rules modal

Browse source
This commit is contained in:
gpt-engineer-app[bot] 2025-09-05 04:59:01 +00:00
parent f71baee308
commit 0a7bfe4389
1 changed files with 105 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/components/CrapsGame.tsx
View file

@ -2,7 +2,9 @@ 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 { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6, RotateCcw, Settings } from 'lucide-react';
import SocialShare from '@/components/SocialShare';
interface CrapsGameProps {
@ -27,6 +29,12 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
const [isRolling, setIsRolling] = useState(false);
const [gameResult, setGameResult] = useState<'win' | 'lose' | 'continue' | null>(null);
const [rollCount, setRollCount] = useState(0);
// Custom rules state
const [customWinSums, setCustomWinSums] = useState<number[]>([7, 11]);
const [customLoseSums, setCustomLoseSums] = useState<number[]>([2, 3, 12]);
const [isCustomRules, setIsCustomRules] = useState(false);
const [isRulesModalOpen, setIsRulesModalOpen] = useState(false);
const rollDice = () => {
setIsRolling(true);
@ -42,10 +50,13 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
setDice2(newDice2);
setRollCount(prev => prev + 1);
// Determine game result based on craps rules
if (sum === 2 || sum === 3 || sum === 12) {
// Determine game result based on current rules
const winSums = isCustomRules ? customWinSums : [7, 11];
const loseSums = isCustomRules ? customLoseSums : [2, 3, 12];
if (loseSums.includes(sum)) {
setGameResult('lose');
} else if (sum === 7 || sum === 11) {
} else if (winSums.includes(sum)) {
setGameResult('win');
} else {
setGameResult('continue');
@ -118,22 +129,107 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
<CardContent className="space-y-6">
{/* Rules */}
<Card className="bg-muted/50">
<CardHeader>
<CardTitle className="text-xl">Rules</CardTitle>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-xl">
{isCustomRules ? 'Custom Rules' : 'Classic Rules'}
</CardTitle>
<Dialog open={isRulesModalOpen} onOpenChange={setIsRulesModalOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm" className="gap-2">
<Settings className="w-4 h-4" />
Make Your Own Rules
</Button>
</DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Customize Craps Rules</DialogTitle>
<DialogDescription>
Select which dice sums result in immediate wins or losses on the first throw.
</DialogDescription>
</DialogHeader>
<div className="grid grid-cols-2 gap-6 py-6">
<div>
<h3 className="font-semibold mb-4 text-red-600">Loss Sums</h3>
<div className="grid grid-cols-3 gap-2">
{Array.from({ length: 12 }, (_, i) => i + 1).map((sum) => (
<div key={`loss-${sum}`} className="flex items-center space-x-2">
<Checkbox
id={`loss-${sum}`}
checked={customLoseSums.includes(sum)}
onCheckedChange={(checked) => {
if (checked) {
setCustomLoseSums([...customLoseSums.filter(s => s !== sum), sum]);
setCustomWinSums(customWinSums.filter(s => s !== sum));
} else {
setCustomLoseSums(customLoseSums.filter(s => s !== sum));
}
}}
/>
<label htmlFor={`loss-${sum}`} className="text-sm">{sum}</label>
</div>
))}
</div>
</div>
<div>
<h3 className="font-semibold mb-4 text-green-600">Win Sums</h3>
<div className="grid grid-cols-3 gap-2">
{Array.from({ length: 12 }, (_, i) => i + 1).map((sum) => (
<div key={`win-${sum}`} className="flex items-center space-x-2">
<Checkbox
id={`win-${sum}`}
checked={customWinSums.includes(sum)}
onCheckedChange={(checked) => {
if (checked) {
setCustomWinSums([...customWinSums.filter(s => s !== sum), sum]);
setCustomLoseSums(customLoseSums.filter(s => s !== sum));
} else {
setCustomWinSums(customWinSums.filter(s => s !== sum));
}
}}
/>
<label htmlFor={`win-${sum}`} className="text-sm">{sum}</label>
</div>
))}
</div>
</div>
</div>
<div className="flex justify-between gap-4">
<Button
variant="outline"
onClick={() => {
setCustomWinSums([7, 11]);
setCustomLoseSums([2, 3, 12]);
setIsCustomRules(false);
}}
>
Reset to Classic
</Button>
<Button
onClick={() => {
setIsCustomRules(true);
setIsRulesModalOpen(false);
resetGame();
}}
>
Apply Custom Rules
</Button>
</div>
</DialogContent>
</Dialog>
</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>
<p>{isCustomRules ? (customLoseSums.length > 0 ? customLoseSums.join(', ') : 'None') : '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>
<p>{isCustomRules ? (customWinSums.length > 0 ? customWinSums.join(', ') : 'None') : '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>
<p>All other sums</p>
</div>
</div>
</CardContent>