diff --git a/src/components/ChessboardRepaintPuzzle.tsx b/src/components/ChessboardRepaintPuzzle.tsx index 931b34d..e1b1b99 100644 --- a/src/components/ChessboardRepaintPuzzle.tsx +++ b/src/components/ChessboardRepaintPuzzle.tsx @@ -96,6 +96,16 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS const handleSquareClick = (row: number, col: number) => { if (isComplete) return; + // Special case for bottom-right corner + if (row === 7 && col === 7) { + if (bottomRightMode === 'row') { + repaintRow(7); + } else { + repaintColumn(7); + } + return; + } + // If clicking on the rightmost column, repaint the entire row if (col === 7) { repaintRow(row); @@ -112,11 +122,49 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS repaint2x2Square(row, col); }; + const handleBottomRightHover = () => { + // Clear any existing timer + if (hoverTimer) { + clearTimeout(hoverTimer); + } + + // Set a new timer to switch mode after 3 seconds + const timer = setTimeout(() => { + setBottomRightMode(prev => prev === 'row' ? 'column' : 'row'); + }, 3000); + + setHoverTimer(timer); + }; + + const handleBottomRightLeave = () => { + // Clear the timer when leaving the square + if (hoverTimer) { + clearTimeout(hoverTimer); + setHoverTimer(null); + } + }; + const [hoveredSquare, setHoveredSquare] = useState<{row: number, col: number} | null>(null); + const [bottomRightMode, setBottomRightMode] = useState<'row' | 'column'>('row'); + const [hoverTimer, setHoverTimer] = useState(null); const getAffectedSquares = (row: number, col: number) => { const squares: {row: number, col: number}[] = []; + // Special case for bottom-right corner + if (row === 7 && col === 7) { + if (bottomRightMode === 'row') { + for (let c = 0; c < 8; c++) { + squares.push({row: 7, col: c}); + } + } else { + for (let r = 0; r < 8; r++) { + squares.push({row: r, col: 7}); + } + } + return squares; + } + // If clicking on the rightmost column, repaint the entire row if (col === 7) { for (let c = 0; c < 8; c++) { @@ -146,6 +194,7 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS const isBlack = board[row][col]; const isBottomRow = row === 7; const isRightmostCol = col === 7; + const isBottomRight = row === 7 && col === 7; // Check if this square would be affected by hovering over the hovered square const isAffected = hoveredSquare && getAffectedSquares(hoveredSquare.row, hoveredSquare.col) @@ -155,14 +204,26 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS
handleSquareClick(row, col)} - onMouseEnter={() => setHoveredSquare({row, col})} - onMouseLeave={() => setHoveredSquare(null)} + onMouseEnter={() => { + setHoveredSquare({row, col}); + if (isBottomRight) { + handleBottomRightHover(); + } + }} + onMouseLeave={() => { + setHoveredSquare(null); + if (isBottomRight) { + handleBottomRightLeave(); + } + }} 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'} ${isAffected ? 'border-2 border-red-500' : ''} + ${isBottomRight ? 'bg-yellow-50' : ''} `} + title={isBottomRight ? `Hover for 3s to switch mode (current: ${bottomRightMode})` : undefined} /> ); }; @@ -237,7 +298,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 rightmost column to repaint entire row, or bottom row to repaint entire column. Hover to preview affected squares!" + "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. Bottom-right corner switches between row/column mode on 3s hover. Hover to preview affected squares!" )}

@@ -259,6 +320,10 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS
Hover to preview affected squares +
+
+ Bottom-right corner (switchable mode) +
@@ -290,6 +355,7 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS
  • 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.
  • Repaint a row: Click any square in the rightmost column to flip all squares in that entire row.
  • Repaint a column: Click any square in the bottom row to flip all squares in that entire column.
  • +
  • Bottom-right corner: Hover for 3 seconds to switch between row and column mode. The corner square is highlighted in light yellow.
  • Preview: Hover over any square to see which squares will be affected (highlighted with red border).
  • Goal: Achieve exactly one black square on the entire board.