Add custom rules modal

src/components/CrapsGame.tsx

@@ -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 {
@@ -28,6 +30,12 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = 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);
     setGameResult(null);
@@ -42,10 +50,13 @@ const CrapsGame: React.FC<CrapsGameProps> = ({ showSocialShare = false }) => {
       setDice2(newDice2);
       setRollCount(prev => prev + 1);
       
-      // Determine game result based on craps rules
+      // Determine game result based on current rules
-      if (sum === 2 || sum === 3 || sum === 12) {
+      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>
+            <CardHeader className="flex flex-row items-center justify-between">
-              <CardTitle className="text-xl">Rules</CardTitle>
+              <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>