Fix Chessboard Repaint Puzzle - correct row/column roles and add hover preview

src/components/ChessboardRepaintPuzzle.tsx

@@ -96,14 +96,14 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
   const handleSquareClick = (row: number, col: number) => {
     if (isComplete) return;
     
-    // If clicking on the bottom row, repaint the entire row
+    // If clicking on the rightmost column, repaint the entire row
-    if (row === 7) {
+    if (col === 7) {
       repaintRow(row);
       return;
     }
     
-    // If clicking on the rightmost column, repaint the entire column
+    // If clicking on the bottom row, repaint the entire column
-    if (col === 7) {
+    if (row === 7) {
       repaintColumn(col);
       return;
     }
@@ -112,29 +112,58 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
     repaint2x2Square(row, col);
   };
 
+  const [hoveredSquare, setHoveredSquare] = useState<{row: number, col: number} | null>(null);
+
+  const getAffectedSquares = (row: number, col: number) => {
+    const squares: {row: number, col: number}[] = [];
+    
+    // If clicking on the rightmost column, repaint the entire row
+    if (col === 7) {
+      for (let c = 0; c < 8; c++) {
+        squares.push({row, col: c});
+      }
+      return squares;
+    }
+    
+    // If clicking on the bottom row, repaint the entire column
+    if (row === 7) {
+      for (let r = 0; r < 8; r++) {
+        squares.push({row: r, col});
+      }
+      return squares;
+    }
+    
+    // Otherwise, repaint the 2x2 square with this square as top-left
+    for (let r = row; r < row + 2 && r < 8; r++) {
+      for (let c = col; c < col + 2 && c < 8; c++) {
+        squares.push({row: r, col: c});
+      }
+    }
+    return squares;
+  };
+
   const renderSquare = (row: number, col: number) => {
     const isBlack = board[row][col];
     const isBottomRow = row === 7;
     const isRightmostCol = col === 7;
     
+    // Check if this square would be affected by hovering over the hovered square
+    const isAffected = hoveredSquare && getAffectedSquares(hoveredSquare.row, hoveredSquare.col)
+      .some(square => square.row === row && square.col === col);
+    
     return (
       <div
         key={`${row}-${col}`}
         onClick={() => handleSquareClick(row, col)}
+        onMouseEnter={() => setHoveredSquare({row, col})}
+        onMouseLeave={() => setHoveredSquare(null)}
         className={`
           w-12 h-12 border border-gray-300 flex items-center justify-center cursor-pointer
           transition-all duration-200 hover:scale-105
           ${isBlack ? 'bg-gray-800' : 'bg-gray-100'}
-          ${isBottomRow || isRightmostCol ? 'hover:bg-blue-100' : ''}
+          ${isAffected ? 'border-2 border-red-500' : ''}
         `}
-      >
+      />
-        {isBottomRow && (
-          <span className="text-xs font-bold text-blue-600">Row</span>
-        )}
-        {isRightmostCol && !isBottomRow && (
-          <span className="text-xs font-bold text-blue-600">Col</span>
-        )}
-      </div>
     );
   };
 
@@ -208,7 +237,7 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
                 {isComplete ? (
                   "🎉 Congratulations! You achieved exactly one black square!"
                 ) : (
-                  "Click any square to repaint the 2×2 region with that square as top-left. Click bottom row or rightmost column to repaint entire row/column. Goal: exactly one black square!"
+                  "Click any square to repaint the 2×2 region with that square as top-left. Click rightmost column to repaint entire row, or bottom row to repaint entire column. Hover to preview affected squares!"
                 )}
               </p>
             </div>
@@ -227,16 +256,8 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
                 <span>Black square</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-5 h-5 bg-blue-100 border border-blue-300 flex items-center justify-center">
+                <div className="w-5 h-5 border-2 border-red-500"></div>
-                  <span className="text-xs font-bold text-blue-600">Row</span>
+                <span>Hover to preview affected squares</span>
-                </div>
-                <span>Click to repaint entire row</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-5 h-5 bg-blue-100 border border-blue-300 flex items-center justify-center">
-                  <span className="text-xs font-bold text-blue-600">Col</span>
-                </div>
-                <span>Click to repaint entire column</span>
               </div>
             </div>
           </div>
@@ -267,8 +288,9 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
               <h4 className="font-semibold mb-2 text-lg">How to Play</h4>
               <ol className="list-decimal list-inside space-y-2 ml-4 text-gray-700">
                 <li><strong>Repaint a 2×2 square:</strong> Click any square to flip all four squares in the 2×2 region with that square as the top-left corner.</li>
-                <li><strong>Repaint a row:</strong> Click any square in the bottom row (marked "Row") to flip all squares in that entire row.</li>
+                <li><strong>Repaint a row:</strong> Click any square in the rightmost column to flip all squares in that entire row.</li>
-                <li><strong>Repaint a column:</strong> Click any square in the rightmost column (marked "Col") to flip all squares in that entire column.</li>
+                <li><strong>Repaint a column:</strong> Click any square in the bottom row to flip all squares in that entire column.</li>
+                <li><strong>Preview:</strong> Hover over any square to see which squares will be affected (highlighted with red border).</li>
                 <li><strong>Goal:</strong> Achieve exactly one black square on the entire board.</li>
               </ol>
             </div>