From e10c5d2b3df5a0749fe68e31838e82e64bde6935 Mon Sep 17 00:00:00 2001 From: Neeldhara Misra Date: Tue, 22 Jul 2025 10:36:36 +0530 Subject: [PATCH] Fix bounding rectangle to show only outer perimeter, not all border squares --- src/components/ChessboardRepaintPuzzle.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/ChessboardRepaintPuzzle.tsx b/src/components/ChessboardRepaintPuzzle.tsx index eb91b2f..24eeee7 100644 --- a/src/components/ChessboardRepaintPuzzle.tsx +++ b/src/components/ChessboardRepaintPuzzle.tsx @@ -210,12 +210,16 @@ const ChessboardRepaintPuzzle: React.FC = ({ showS // Get bounding box for hover preview const boundingBox = hoveredSquare ? getBoundingBox(getAffectedSquares(hoveredSquare.row, hoveredSquare.col)) : null; - // Check if this square is on the border of the bounding box - const isOnBorder = boundingBox && ( - (row === boundingBox.minRow && col >= boundingBox.minCol && col <= boundingBox.maxCol) || - (row === boundingBox.maxRow && col >= boundingBox.minCol && col <= boundingBox.maxCol) || - (col === boundingBox.minCol && row >= boundingBox.minRow && row <= boundingBox.maxRow) || - (col === boundingBox.maxCol && row >= boundingBox.minRow && row <= boundingBox.maxRow) + // 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 ( @@ -238,7 +242,7 @@ const ChessboardRepaintPuzzle: React.FC = ({ 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'} - ${isOnBorder ? 'border-2 border-red-500' : ''} + ${isOnPerimeter ? 'border-2 border-red-500' : ''} `} title={isBottomRight ? `Hover for 3s to switch mode (current: ${bottomRightMode})` : undefined} />