From de640b5029840e9d10aceec8d1bef734a2c0b7cf 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:39:03 +0000
Subject: [PATCH] Fix parity bits highlighting and labels

Updated parity bits game to make labels persistent after animation. Highlights now use yellow for white cells and orange for black cells, including the last row and column. Also fixed spacing issues with column labels.
---
 src/components/ParityBitsGame.tsx | 70 ++++++++-----------------------
 1 file changed, 18 insertions(+), 52 deletions(-)

diff --git a/src/components/ParityBitsGame.tsx b/src/components/ParityBitsGame.tsx
index 5897284..fa3ce72 100644
--- a/src/components/ParityBitsGame.tsx
+++ b/src/components/ParityBitsGame.tsx
@@ -148,8 +148,8 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
       colCounts
     });
     
-    // Animate through rows
-    for (let i = 0; i < gridSize; i++) {
+    // Animate through rows (including parity row)
+    for (let i = 0; i <= gridSize; i++) {
       setAnimationState(prev => ({...prev, currentRow: i}));
       await new Promise(resolve => setTimeout(resolve, 800));
     }
@@ -158,13 +158,13 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
     setAnimationState(prev => ({...prev, currentRow: -1, showRowParity: true}));
     await new Promise(resolve => setTimeout(resolve, 1000));
     
-    // Animate through columns
-    for (let j = 0; j < gridSize; j++) {
+    // Animate through columns (including parity column)
+    for (let j = 0; j <= gridSize; j++) {
       setAnimationState(prev => ({...prev, currentCol: j}));
       await new Promise(resolve => setTimeout(resolve, 800));
     }
     
-    // Show column parities
+    // Show column parities and keep them persistent
     setAnimationState(prev => ({...prev, currentCol: -1, showColParity: true}));
     await new Promise(resolve => setTimeout(resolve, 1000));
     
@@ -176,17 +176,13 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
       setErrorDetected({row: errorRow, col: errorCol});
     }
     
-    setAnimationState({
+    // Keep labels persistent - don't reset them
+    setAnimationState(prev => ({
+      ...prev,
       isAnimating: false,
       currentRow: -1,
-      currentCol: -1,
-      showRowParity: false,
-      showColParity: false,
-      rowParities: [],
-      colParities: [],
-      rowCounts: [],
-      colCounts: []
-    });
+      currentCol: -1
+    }));
     
     setPhase('detect');
   };
@@ -259,6 +255,8 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
                 const isCurrentRowBeingChecked = animationState.currentRow === row;
                 const isCurrentColBeingChecked = animationState.currentCol === col;
                 const shouldHighlightForAnimation = isCurrentRowBeingChecked || isCurrentColBeingChecked;
+                const isBlackCell = currentGrid[row]?.[col];
+                const highlightColor = isBlackCell ? 'ring-2 ring-orange-400 bg-orange-400/20' : 'ring-2 ring-yellow-400 bg-yellow-400/15';
                 
                 return (
                   <button
@@ -268,7 +266,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
                       ${currentGrid[row]?.[col] ? 'bg-foreground' : 'bg-background'}
                       ${isParityCell ? 'border-primary' : 'border-foreground'}
                       ${isError ? 'ring-4 ring-green-500 bg-green-500/20' : ''}
-                      ${shouldHighlightForAnimation ? 'ring-2 ring-yellow-400 bg-yellow-400/15' : ''}
+                      ${shouldHighlightForAnimation ? highlightColor : ''}
                       ${phase === 'setup' && !isParityCell ? 'hover:bg-accent cursor-pointer' : ''}
                       ${phase === 'parity' ? 'hover:bg-accent cursor-pointer' : ''}
                     `}
@@ -284,12 +282,12 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
           </div>
           
           {/* Row parity labels */}
-          {animationState.currentRow >= 0 && (
+          {(animationState.currentRow >= 0 || animationState.showRowParity) && (
             <div className="flex flex-col gap-1">
               {Array(gridSize).fill(null).map((_, row) => {
                 const hasOddParity = animationState.rowParities[row];
                 const count = animationState.rowCounts[row];
-                const showLabel = row === animationState.currentRow;
+                const showLabel = (row === animationState.currentRow) || animationState.showRowParity;
                 return (
                   <div key={`row-${row}`} className="w-12 h-12 flex items-center justify-center">
                     {showLabel && (
@@ -303,31 +301,15 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
               <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];
-                const count = animationState.rowCounts[row];
-                return (
-                  <div key={`row-${row}`} className="w-12 h-12 flex items-center justify-center">
-                    <span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
-                      {count}
-                    </span>
-                  </div>
-                );
-              })}
-              <div className="w-12 h-12"></div> {/* Empty space for parity cell */}
-            </div>
-          )}
         </div>
         
         {/* Column parity labels */}
-        {animationState.currentCol >= 0 && (
-          <div className="flex gap-1">
+        {(animationState.currentCol >= 0 || animationState.showColParity) && (
+          <div className="flex gap-1 justify-center">
             {Array(gridSize).fill(null).map((_, col) => {
               const hasOddParity = animationState.colParities[col];
               const count = animationState.colCounts[col];
-              const showLabel = col === animationState.currentCol;
+              const showLabel = (col === animationState.currentCol) || animationState.showColParity;
               return (
                 <div key={`col-${col}`} className="w-12 h-6 flex items-center justify-center">
                   {showLabel && (
@@ -341,22 +323,6 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
             <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];
-              const count = animationState.colCounts[col];
-              return (
-                <div key={`col-${col}`} className="w-12 h-6 flex items-center justify-center">
-                  <span className={`text-xs font-medium ${hasOddParity ? 'text-red-500' : 'text-foreground'}`}>
-                    {count}
-                  </span>
-                </div>
-              );
-            })}
-            <div className="w-12 h-6"></div> {/* Empty space for parity cell */}
-          </div>
-        )}
       </div>
     );
   };