From 02714359af8977a90820fdaedafdf9fd71bb964b 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:41:41 +0000
Subject: [PATCH] Fix parity counts and spacing

Updated parity counts to include parity bits. Fixed column spacing and displayed counts on the last row and column. Set default grid size to 5x5.
---
 src/components/ParityBitsGame.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/ParityBitsGame.tsx b/src/components/ParityBitsGame.tsx
index fa3ce72..df51a43 100644
--- a/src/components/ParityBitsGame.tsx
+++ b/src/components/ParityBitsGame.tsx
@@ -10,9 +10,9 @@ interface ParityBitsGameProps {
 }
 
 const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
-  const [gridSize, setGridSize] = useState(3);
+  const [gridSize, setGridSize] = useState(5);
   const [grid, setGrid] = useState<boolean[][]>(() => 
-    Array(gridSize).fill(null).map(() => Array(gridSize).fill(false))
+    Array(5).fill(null).map(() => Array(5).fill(false))
   );
   const [parityBitsAdded, setParityBitsAdded] = useState(false);
   const [parityGrid, setParityGrid] = useState<boolean[][]>([]);
@@ -120,19 +120,19 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
     const rowCounts: number[] = [];
     const colCounts: number[] = [];
     
-    for (let i = 0; i < gridSize; i++) {
-      const rowBits = parityGrid[i].slice(0, gridSize);
+    for (let i = 0; i <= gridSize; i++) {
+      const rowBits = parityGrid[i] || [];
       const rowCount = rowBits.filter(bit => bit).length;
-      const expectedParity = calculateParity(rowBits);
-      rowParities[i] = expectedParity !== parityGrid[i][gridSize];
+      const expectedParity = calculateParity(rowBits.slice(0, gridSize));
+      rowParities[i] = i < gridSize ? (expectedParity !== parityGrid[i][gridSize]) : false;
       rowCounts[i] = rowCount;
     }
     
-    for (let j = 0; j < gridSize; j++) {
-      const colBits = parityGrid.slice(0, gridSize).map(row => row[j]);
+    for (let j = 0; j <= gridSize; j++) {
+      const colBits = parityGrid.map(row => row?.[j] || false);
       const colCount = colBits.filter(bit => bit).length;
-      const expectedParity = calculateParity(colBits);
-      colParities[j] = expectedParity !== parityGrid[gridSize][j];
+      const expectedParity = calculateParity(colBits.slice(0, gridSize));
+      colParities[j] = j < gridSize ? (expectedParity !== parityGrid[gridSize][j]) : false;
       colCounts[j] = colCount;
     }
     
@@ -218,6 +218,8 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
     
     setGrid(newGrid);
   };
+
+  // Reset the game
   const resetGame = () => {
     setGrid(Array(gridSize).fill(null).map(() => Array(gridSize).fill(false)));
     setParityBitsAdded(false);
@@ -284,7 +286,7 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
           {/* Row parity labels */}
           {(animationState.currentRow >= 0 || animationState.showRowParity) && (
             <div className="flex flex-col gap-1">
-              {Array(gridSize).fill(null).map((_, row) => {
+              {Array(gridSize + 1).fill(null).map((_, row) => {
                 const hasOddParity = animationState.rowParities[row];
                 const count = animationState.rowCounts[row];
                 const showLabel = (row === animationState.currentRow) || animationState.showRowParity;
@@ -298,15 +300,14 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
                   </div>
                 );
               })}
-              <div className="w-12 h-12"></div> {/* Empty space for parity cell */}
             </div>
           )}
         </div>
         
         {/* Column parity labels */}
         {(animationState.currentCol >= 0 || animationState.showColParity) && (
-          <div className="flex gap-1 justify-center">
-            {Array(gridSize).fill(null).map((_, col) => {
+          <div className="grid gap-1" style={{gridTemplateColumns: `repeat(${gridSize + 1}, 1fr)`}}>
+            {Array(gridSize + 1).fill(null).map((_, col) => {
               const hasOddParity = animationState.colParities[col];
               const count = animationState.colCounts[col];
               const showLabel = (col === animationState.currentCol) || animationState.showColParity;
@@ -320,7 +321,6 @@ const ParityBitsGame = ({ showSocialShare = true }: ParityBitsGameProps) => {
                 </div>
               );
             })}
-            <div className="w-12 h-6"></div> {/* Empty space for parity cell */}
           </div>
         )}
       </div>