From 6813e73b97dd4c3534f4b738b8b35134c1b8f8ae 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 17:33:19 +0000
Subject: [PATCH] Refine parity bits interactive

Update parity bits interactive to allow flipping any bit, include parity bits in highlights, display odd/even text alongside highlights, and remove red border from flipped bits.
---
 src/components/ParityBitsGame.tsx | 56 +++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/components/ParityBitsGame.tsx b/src/components/ParityBitsGame.tsx
index 8da54fb..ce21150 100644
--- a/src/components/ParityBitsGame.tsx
+++ b/src/components/ParityBitsGame.tsx
@@ -97,7 +97,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
 
   // Flip a bit in the parity grid
   const flipBit = (row: number, col: number) => {
-    if (phase !== 'parity' || row >= gridSize || col >= gridSize) return;
+    if (phase !== 'parity') return;
     
     const newGrid = [...parityGrid];
     newGrid[row][col] = !newGrid[row][col];
@@ -210,9 +210,9 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
                 const isParityCell = parityBitsAdded && (row === gridSize || col === gridSize);
                 const isFlipped = flippedCell?.row === row && flippedCell?.col === col;
                 const isError = errorDetected?.row === row && errorDetected?.col === col;
-                const isCurrentRowBeingChecked = animationState.currentRow === row && !isParityCell;
-                const isCurrentColBeingChecked = animationState.currentCol === col && !isParityCell;
-                const shouldHighlightForAnimation = (isCurrentRowBeingChecked || isCurrentColBeingChecked) && currentGrid[row]?.[col];
+                const isCurrentRowBeingChecked = animationState.currentRow === row;
+                const isCurrentColBeingChecked = animationState.currentCol === col;
+                const shouldHighlightForAnimation = isCurrentRowBeingChecked || isCurrentColBeingChecked;
                 
                 return (
                   <button
@@ -221,18 +221,16 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
                       w-12 h-12 border-2 transition-all duration-200
                       ${currentGrid[row]?.[col] ? 'bg-foreground' : 'bg-background'}
                       ${isParityCell ? 'border-primary' : 'border-foreground'}
-                      ${isFlipped ? 'ring-4 ring-destructive' : ''}
                       ${isError ? 'ring-4 ring-green-500 bg-green-500/20' : ''}
                       ${shouldHighlightForAnimation ? 'ring-4 ring-yellow-400 bg-yellow-400/30' : ''}
                       ${phase === 'setup' && !isParityCell ? 'hover:bg-accent cursor-pointer' : ''}
-                      ${phase === 'parity' && !isParityCell ? 'hover:bg-accent cursor-pointer' : ''}
-                      ${isParityCell ? 'cursor-not-allowed' : ''}
+                      ${phase === 'parity' ? 'hover:bg-accent cursor-pointer' : ''}
                     `}
                     onClick={() => {
                       if (phase === 'setup') toggleCell(row, col);
                       else if (phase === 'parity') flipBit(row, col);
                     }}
-                    disabled={isParityCell}
+                    disabled={false}
                   />
                 );
               })
@@ -240,7 +238,25 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
           </div>
           
           {/* Row parity labels */}
-          {(animationState.showRowParity || animationState.isAnimating) && (
+          {animationState.currentRow >= 0 && (
+            <div className="flex flex-col gap-1">
+              {Array(gridSize).fill(null).map((_, row) => {
+                const hasOddParity = animationState.rowParities[row];
+                const showLabel = row === animationState.currentRow;
+                return (
+                  <div key={`row-${row}`} className="w-12 h-12 flex items-center justify-center">
+                    {showLabel && (
+                      <span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
+                        {hasOddParity ? 'odd' : 'even'}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+              <div className="w-12 h-12"></div> {/* Empty space for parity cell */}
+            </div>
+          )}
+          {animationState.showRowParity && (
             <div className="flex flex-col gap-1">
               {Array(gridSize).fill(null).map((_, row) => {
                 const hasOddParity = animationState.rowParities[row];
@@ -258,7 +274,25 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
         </div>
         
         {/* Column parity labels */}
-        {(animationState.showColParity || animationState.isAnimating) && (
+        {animationState.currentCol >= 0 && (
+          <div className="flex gap-1">
+            {Array(gridSize).fill(null).map((_, col) => {
+              const hasOddParity = animationState.colParities[col];
+              const showLabel = col === animationState.currentCol;
+              return (
+                <div key={`col-${col}`} className="w-12 h-6 flex items-center justify-center">
+                  {showLabel && (
+                    <span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
+                      {hasOddParity ? 'odd' : 'even'}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+            <div className="w-12 h-6"></div> {/* Empty space for parity cell */}
+          </div>
+        )}
+        {animationState.showColParity && (
           <div className="flex gap-1">
             {Array(gridSize).fill(null).map((_, col) => {
               const hasOddParity = animationState.colParities[col];
@@ -291,7 +325,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
           <Alert>
             <AlertDescription>
               {phase === 'setup' && 'Set your grid by clicking squares to make them black. Then add parity bits.'}
-              {phase === 'parity' && 'Parity bits added! Now flip exactly one bit in the main grid (not parity cells).'}
+              {phase === 'parity' && 'Parity bits added! Now flip exactly one bit anywhere in the grid.'}
               {phase === 'flip' && 'Bit flipped! Click "Identify Flip" to see error detection in action.'}
               {phase === 'detect' && 'Animation complete! Rows and columns with odd parity were highlighted, revealing the error location in green.'}
             </AlertDescription>