From cbe125d8717e17f62f396b923753de2f7728fa2c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 11:07:06 +0000
Subject: [PATCH] Add hover effect to circles

Add a hover effect to the yellow circles where hovering over a circle turns it and all circles to its right a muted shade of red.
---
 src/components/SubtractionGame.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/SubtractionGame.tsx b/src/components/SubtractionGame.tsx
index d26cef4..e9574f0 100644
--- a/src/components/SubtractionGame.tsx
+++ b/src/components/SubtractionGame.tsx
@@ -11,6 +11,7 @@ const SubtractionGame = () => {
   const [currentPlayer, setCurrentPlayer] = useState<'Lata' | 'Raj'>('Lata');
   const [winner, setWinner] = useState<string | null>(null);
   const [highlightedIndices, setHighlightedIndices] = useState<number[]>([]);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
   // Update k slider max when n changes
   useEffect(() => {
@@ -45,6 +46,7 @@ const SubtractionGame = () => {
     setWinner(null);
     setCurrentPlayer('Lata');
     setHighlightedIndices([]);
+    setHoveredIndex(null);
   };
 
   const handleCircleClick = (index: number) => {
@@ -80,8 +82,18 @@ const SubtractionGame = () => {
 
   const getCircleClass = (index: number) => {
     const isHighlighted = highlightedIndices.includes(index);
+    const isHovered = hoveredIndex !== null && index >= hoveredIndex;
     const baseClass = `w-8 h-8 rounded-full border-2 border-black transition-colors ${isHighlighted ? 'cursor-pointer' : ''}`;
-    const fillClass = isHighlighted ? 'bg-yellow-200 hover:bg-yellow-300' : 'bg-gray-300';
+    
+    let fillClass;
+    if (isHovered && isHighlighted) {
+      fillClass = 'bg-red-300 hover:bg-red-400';
+    } else if (isHighlighted) {
+      fillClass = 'bg-yellow-200 hover:bg-yellow-300';
+    } else {
+      fillClass = 'bg-gray-300';
+    }
+    
     return `${baseClass} ${fillClass}`;
   };
 
@@ -171,6 +183,8 @@ const SubtractionGame = () => {
                     key={index}
                     className={getCircleClass(index)}
                     onClick={() => handleCircleClick(index)}
+                    onMouseEnter={() => highlightedIndices.includes(index) ? setHoveredIndex(index) : null}
+                    onMouseLeave={() => setHoveredIndex(null)}
                     title={highlightedIndices.includes(index) ? 'Click to select' : 'Not selectable'}
                   />
                 ))}