From 3dd074b62c099ddbc02141df2d273b580c940fea Mon Sep 17 00:00:00 2001
From: Justin Manion <jmanion32@gmail.com>
Date: Sat, 30 Aug 2025 12:07:22 -0400
Subject: [PATCH] Adding Max Bet

---
 frontend/components/BettingChips.tsx | 22 +++++++++++++++++-----
 frontend/css/game.css                |  1 -
 frontend/hooks/useBetting.ts         |  2 +-
 frontend/types/chips.ts              |  1 +
 frontend/utils/chipFormatting.ts     | 26 +++++++++++++++++---------
 5 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/frontend/components/BettingChips.tsx b/frontend/components/BettingChips.tsx
index 0f13830..5a93c4c 100644
--- a/frontend/components/BettingChips.tsx
+++ b/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>
         );
       })}
diff --git a/frontend/css/game.css b/frontend/css/game.css
index 3e881db..7fa7670 100644
--- a/frontend/css/game.css
+++ b/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;
 }
diff --git a/frontend/hooks/useBetting.ts b/frontend/hooks/useBetting.ts
index b6829e8..4121ea3 100644
--- a/frontend/hooks/useBetting.ts
+++ b/frontend/hooks/useBetting.ts
@@ -53,7 +53,7 @@ export function useBetting({
     };
 
     // 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 });
         }
diff --git a/frontend/types/chips.ts b/frontend/types/chips.ts
index 77f0245..8d97dc1 100644
--- a/frontend/types/chips.ts
+++ b/frontend/types/chips.ts
@@ -2,6 +2,7 @@
 export interface Chip {
     value: number;
     color: string;
+    isMax?: boolean;
 }
 
 // Define Bet
diff --git a/frontend/utils/chipFormatting.ts b/frontend/utils/chipFormatting.ts
index 69ceb66..563438a 100644
--- a/frontend/utils/chipFormatting.ts
+++ b/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
     }
 };