diff --git a/src/components/ChessboardRepaintPuzzle.tsx b/src/components/ChessboardRepaintPuzzle.tsx index b96345c..931b34d 100644 --- a/src/components/ChessboardRepaintPuzzle.tsx +++ b/src/components/ChessboardRepaintPuzzle.tsx @@ -96,14 +96,14 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS const handleSquareClick = (row: number, col: number) => { if (isComplete) return; - // If clicking on the bottom row, repaint the entire row - if (row === 7) { + // If clicking on the rightmost column, repaint the entire row + if (col === 7) { repaintRow(row); return; } - // If clicking on the rightmost column, repaint the entire column - if (col === 7) { + // If clicking on the bottom row, repaint the entire column + if (row === 7) { repaintColumn(col); return; } @@ -112,29 +112,58 @@ const ChessboardRepaintPuzzle: React.FC = ({ 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 (
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 && ( - Row - )} - {isRightmostCol && !isBottomRow && ( - Col - )} -
+ /> ); }; @@ -208,7 +237,7 @@ const ChessboardRepaintPuzzle: React.FC = ({ 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!" )}

@@ -227,16 +256,8 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS Black square
-
- Row -
- Click to repaint entire row -
-
-
- Col -
- Click to repaint entire column +
+ Hover to preview affected squares
@@ -267,8 +288,9 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS

How to Play

  1. Repaint a 2×2 square: Click any square to flip all four squares in the 2×2 region with that square as the top-left corner.
  2. -
  3. Repaint a row: Click any square in the bottom row (marked "Row") to flip all squares in that entire row.
  4. -
  5. Repaint a column: Click any square in the rightmost column (marked "Col") to flip all squares in that entire column.
  6. +
  7. Repaint a row: Click any square in the rightmost column to flip all squares in that entire row.
  8. +
  9. Repaint a column: Click any square in the bottom row to flip all squares in that entire column.
  10. +
  11. Preview: Hover over any square to see which squares will be affected (highlighted with red border).
  12. Goal: Achieve exactly one black square on the entire board.