Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix bounding rectangle to show only outer perimeter, not all border squares

Browse source
This commit is contained in:
Neeldhara Misra 2025-07-22 10:36:36 +05:30
parent 8d70b2b132
commit e10c5d2b3d
1 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/ChessboardRepaintPuzzle.tsx
View file

@ -210,12 +210,16 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ 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<ChessboardRepaintPuzzleProps> = ({ 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}
/>