Improve Chessboard Repaint Puzzle UI - click squares directly for cleaner interface

src/components/ChessboardRepaintPuzzle.tsx

@@ -93,32 +93,48 @@ 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 (row === 7) {
+      repaintRow(row);
+      return;
+    }
+    
+    // If clicking on the rightmost column, repaint the entire column
+    if (col === 7) {
+      repaintColumn(col);
+      return;
+    }
+    
+    // Otherwise, repaint the 2x2 square with this square as top-left
+    repaint2x2Square(row, col);
+  };
+
   const renderSquare = (row: number, col: number) => {
     const isBlack = board[row][col];
+    const isBottomRow = row === 7;
+    const isRightmostCol = col === 7;
+    
     return (
       <div
         key={`${row}-${col}`}
+        onClick={() => handleSquareClick(row, col)}
         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' : ''}
         `}
-      />
-    );
-  };
-
-  const render2x2Button = (startRow: number, startCol: number) => {
-    return (
-      <Button
-        key={`2x2-${startRow}-${startCol}`}
-        onClick={() => repaint2x2Square(startRow, startCol)}
-        variant="outline"
-        size="sm"
-        className="w-6 h-6 p-0 text-xs"
-        disabled={isComplete}
       >
-        2×2
+        {isBottomRow && (
-      </Button>
+          <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>
     );
   };
 
@@ -176,57 +192,6 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
           {/* Chessboard */}
           <div className="flex justify-center">
             <div className="relative">
-              {/* Row buttons */}
-              <div className="absolute -left-16 top-0 h-full flex flex-col justify-center gap-1">
-                {Array.from({ length: 8 }, (_, i) => (
-                  <Button
-                    key={`row-${i}`}
-                    onClick={() => repaintRow(i)}
-                    variant="outline"
-                    size="sm"
-                    className="w-12 h-6 text-xs"
-                    disabled={isComplete}
-                  >
-                    Row {i + 1}
-                  </Button>
-                ))}
-              </div>
-
-              {/* Column buttons */}
-              <div className="absolute -top-16 left-0 w-full flex justify-center gap-1">
-                {Array.from({ length: 8 }, (_, i) => (
-                  <Button
-                    key={`col-${i}`}
-                    onClick={() => repaintColumn(i)}
-                    variant="outline"
-                    size="sm"
-                    className="w-12 h-6 text-xs"
-                    disabled={isComplete}
-                  >
-                    Col {i + 1}
-                  </Button>
-                ))}
-              </div>
-
-              {/* 2x2 square buttons */}
-              <div className="absolute inset-0 pointer-events-none">
-                {Array.from({ length: 7 }, (_, row) =>
-                  Array.from({ length: 7 }, (_, col) => (
-                    <div
-                      key={`2x2-${row}-${col}`}
-                      className="absolute pointer-events-auto"
-                      style={{
-                        left: `${col * 48 + 24}px`,
-                        top: `${row * 48 + 24}px`,
-                        transform: 'translate(-50%, -50%)'
-                      }}
-                    >
-                      {render2x2Button(row, col)}
-                    </div>
-                  ))
-                )}
-              </div>
-
               {/* Chessboard grid */}
               <div className="grid grid-cols-8 gap-0 border-2 border-gray-400">
                 {board.map((row, rowIndex) =>
@@ -243,7 +208,7 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
                 {isComplete ? (
                   "🎉 Congratulations! You achieved exactly one black square!"
                 ) : (
-                  "Click row/column buttons or 2×2 square buttons to repaint. Goal: 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!"
                 )}
               </p>
             </div>
@@ -262,8 +227,16 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
                 <span>Black square</span>
               </div>
               <div className="flex items-center gap-2">
-                <Button variant="outline" size="sm" className="w-6 h-6 p-0 text-xs">2×2</Button>
+                <div className="w-5 h-5 bg-blue-100 border border-blue-300 flex items-center justify-center">
-                <span>Repaint 2×2 square</span>
+                  <span className="text-xs font-bold text-blue-600">Row</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>
@@ -293,9 +266,9 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
             <div>
               <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 row:</strong> Click any "Row X" button to flip all squares in that row (black becomes white, white becomes black).</li>
+                <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 column:</strong> Click any "Col X" button to flip all squares in that column.</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 2×2 square:</strong> Click any "2×2" button to flip all four squares in that 2×2 region.</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>Goal:</strong> Achieve exactly one black square on the entire board.</li>
               </ol>
             </div>