diff --git a/src/components/ChessboardRepaintPuzzle.tsx b/src/components/ChessboardRepaintPuzzle.tsx index 24eeee7..79a0595 100644 --- a/src/components/ChessboardRepaintPuzzle.tsx +++ b/src/components/ChessboardRepaintPuzzle.tsx @@ -207,21 +207,6 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS const isRightmostCol = col === 7; const isBottomRight = row === 7 && col === 7; - // Get bounding box for hover preview - const boundingBox = hoveredSquare ? getBoundingBox(getAffectedSquares(hoveredSquare.row, hoveredSquare.col)) : null; - - // Check if this square is on the outer perimeter of the bounding box - const isOnPerimeter = boundingBox && ( - // Top edge (only if not also bottom edge) - (row === boundingBox.minRow && col >= boundingBox.minCol && col <= boundingBox.maxCol && boundingBox.minRow !== boundingBox.maxRow) || - // Bottom edge (only if not also top edge) - (row === boundingBox.maxRow && col >= boundingBox.minCol && col <= boundingBox.maxCol && boundingBox.minRow !== boundingBox.maxRow) || - // Left edge (only if not also right edge) - (col === boundingBox.minCol && row >= boundingBox.minRow && row <= boundingBox.maxRow && boundingBox.minCol !== boundingBox.maxCol) || - // Right edge (only if not also left edge) - (col === boundingBox.maxCol && row >= boundingBox.minRow && row <= boundingBox.maxRow && boundingBox.minCol !== boundingBox.maxCol) - ); - return (
= ({ showS 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'} - ${isOnPerimeter ? 'border-2 border-red-500' : ''} `} title={isBottomRight ? `Hover for 3s to switch mode (current: ${bottomRightMode})` : undefined} /> @@ -309,6 +293,30 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS row.map((square, colIndex) => renderSquare(rowIndex, colIndex)) )}
+ + {/* Bounding rectangle overlay */} + {hoveredSquare && (() => { + const boundingBox = getBoundingBox(getAffectedSquares(hoveredSquare.row, hoveredSquare.col)); + if (!boundingBox) return null; + + const squareSize = 48; // w-12 = 48px + const left = boundingBox.minCol * squareSize; + const top = boundingBox.minRow * squareSize; + const width = (boundingBox.maxCol - boundingBox.minCol + 1) * squareSize; + const height = (boundingBox.maxRow - boundingBox.minRow + 1) * squareSize; + + return ( +
+ ); + })()}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index b7aa019..eabe147 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -17,12 +17,10 @@ const Layout = ({ children }: LayoutProps) => {