Max Bet Chip

frontend/components/BettingChips.tsx

@@ -20,6 +20,7 @@ const CHIP_OPTIONS = [
   { value: 50, color: '#10B981', bg: 'bg-emerald-500 hover:bg-emerald-400 border-emerald-400' },
   { value: 100, color: '#EAB308', bg: 'bg-yellow-500 hover:bg-yellow-400 border-yellow-400' },
   { value: 500, color: '#F97316', bg: 'bg-orange-500 hover:bg-orange-400 border-orange-400' },
+  { value: -1, color: '#DC2626', isMax: true, bg: 'bg-red-600 hover:bg-red-500 border-red-500' },
 ];
 
 export default function ChipControls({
@@ -33,13 +34,22 @@ export default function ChipControls({
 
   return (
     <div className="flex flex-wrap gap-2 justify-center mb-5">
-      {CHIP_OPTIONS.map(({ value, color, bg }) => {
+      {CHIP_OPTIONS.map(({ value, color, isMax, bg }) => {
         const isCurrent = selectedChip?.value === value;
+
+        let betValue: number;
+        if (isMax) {
+          betValue = userBalance;
+        }
+        else {
+          betValue = value;
+        }
+
         const canAfford = userBalance >= value;
 
         return (
           <button
-            key={value}
+            key={isMax ? 'MAX' : value}
             data-cy={`chip-${value}`}
             disabled={!canAfford}
             className={`chip-button mr-2 transition duration-200 ${
@@ -48,13 +58,15 @@ export default function ChipControls({
               !isSelected && canAfford ? (isDarkMode ? 'glow-pulse-dark' : 'glow-pulse-light') : ''
             } ${
               !canAfford ? (isDarkMode ? 'bg-gray-900' : 'bg-gray-400') + ' cursor-not-allowed opacity-50' : bg
-            }`}
+            } ${
+              isMax ? 'text-[1.70rem]' : 'text-[2rem]'}
+            `}
             onClick={() => {
-              handleChipSelect(value, color);
+              handleChipSelect(betValue, color, isMax);
               setIsSelected(true);
             }}
           >
-            {value}
+            {isMax ? 'MAX' : value}
           </button>
         );
       })}

frontend/css/game.css

@@ -93,7 +93,6 @@
     justify-content: center;
     border-width: 0.125rem;
     transition: background-color 0.2s;
-    font-size: 2rem;
     cursor: pointer;
     user-select: none;
 }

frontend/hooks/useBetting.ts

@@ -53,7 +53,7 @@
     };
 
     // User selecting chips in game
-    const handleChipSelect = (value: number, color: string) => {
+    const handleChipSelect = (value: number, color: string, isMax?: boolean) => {
         if (userBalance >= value) {
             setSelectedChip({ value, color });
         }

frontend/types/chips.ts

@@ -2,6 +2,7 @@
 export interface Chip {
     value: number;
     color: string;
+    isMax?: boolean;
 }
 
 // Define Bet

frontend/utils/chipFormatting.ts

@@ -1,22 +1,30 @@
-// Decides what color the betting chip should be based on amount
+// Decides what color the bet chip should be based on amount
 const updateChipColor = (bet: number) => {
     if (bet >= 500) {
         return "#F97316"; // orange-500
-    } else if (bet >= 100) {
+    }
+    else if (bet >= 100) {
         return "#EAB308"; // yellow-500
-    } else if (bet >= 50) {
+    }
+    else if (bet >= 50) {
         return "#10B981"; // emerald-500
-    } else if (bet >= 20) {
+    }
+    else if (bet >= 20) {
         return "#06B6D4"; // cyan-500
-    } else if (bet >= 10) {
+    }
+    else if (bet >= 10) {
         return "#EC4899"; // pink-500
-    } else if (bet >= 5) {
+    }
+    else if (bet >= 5) {
         return "#A855F7"; // purple-500
-    } else if (bet >= 2) {
+    }
+    else if (bet >= 2) {
         return "#3B82F6"; // blue-500
-    } else if (bet >= 1) {
+    }
+    else if (bet >= 1) {
         return "#6366F1"; // indigo-500
-    } else {
+    }
+    else {
         return "#6B7280"; // gray-500
     }
 };