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

Change hover preview to show bounding rectangle instead of individual squares

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

26
src/components/ChessboardRepaintPuzzle.tsx
View file

@ -190,15 +190,33 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
return squares; return squares;
}; };
const getBoundingBox = (squares: {row: number, col: number}[]) => {
if (squares.length === 0) return null;
const minRow = Math.min(...squares.map(s => s.row));
const maxRow = Math.max(...squares.map(s => s.row));
const minCol = Math.min(...squares.map(s => s.col));
const maxCol = Math.max(...squares.map(s => s.col));
return { minRow, maxRow, minCol, maxCol };
};
const renderSquare = (row: number, col: number) => { const renderSquare = (row: number, col: number) => {
const isBlack = board[row][col]; const isBlack = board[row][col];
const isBottomRow = row === 7; const isBottomRow = row === 7;
const isRightmostCol = col === 7; const isRightmostCol = col === 7;
const isBottomRight = row === 7 && col === 7; const isBottomRight = row === 7 && col === 7;
// Check if this square would be affected by hovering over the hovered square // Get bounding box for hover preview
const isAffected = hoveredSquare && getAffectedSquares(hoveredSquare.row, hoveredSquare.col) const boundingBox = hoveredSquare ? getBoundingBox(getAffectedSquares(hoveredSquare.row, hoveredSquare.col)) : null;
.some(square => square.row === row && square.col === col);
// 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)
);
return ( return (
<div <div
@ -220,7 +238,7 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
w-12 h-12 border border-gray-300 flex items-center justify-center cursor-pointer w-12 h-12 border border-gray-300 flex items-center justify-center cursor-pointer
transition-all duration-200 hover:scale-105 transition-all duration-200 hover:scale-105
${isBlack ? 'bg-gray-800' : 'bg-gray-100'} ${isBlack ? 'bg-gray-800' : 'bg-gray-100'}
${isAffected ? 'border-2 border-red-500' : ''} ${isOnBorder ? 'border-2 border-red-500' : ''}
`} `}
title={isBottomRight ? `Hover for 3s to switch mode (current: ${bottomRightMode})` : undefined} title={isBottomRight ? `Hover for 3s to switch mode (current: ${bottomRightMode})` : undefined}
/> />