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

Fix Chessboard Repaint Puzzle - correct row/column roles and add hover preview

Browse source
This commit is contained in:
Neeldhara Misra 2025-07-22 10:20:27 +05:30
parent 52a09f5f5e
commit 5ebfa1a3ce
1 changed files with 48 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/components/ChessboardRepaintPuzzle.tsx
View file

@ -96,14 +96,14 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
const handleSquareClick = (row: number, col: number) => {
if (isComplete) return;
// If clicking on the bottom row, repaint the entire row
if (row === 7) {
// If clicking on the rightmost column, repaint the entire row
if (col === 7) {
repaintRow(row);
return;
}
// If clicking on the rightmost column, repaint the entire column
if (col === 7) {
// If clicking on the bottom row, repaint the entire column
if (row === 7) {
repaintColumn(col);
return;
}
@ -112,29 +112,58 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
repaint2x2Square(row, col);
};
const [hoveredSquare, setHoveredSquare] = useState<{row: number, col: number} | null>(null);
const getAffectedSquares = (row: number, col: number) => {
const squares: {row: number, col: number}[] = [];
// If clicking on the rightmost column, repaint the entire row
if (col === 7) {
for (let c = 0; c < 8; c++) {
squares.push({row, col: c});
}
return squares;
}
// If clicking on the bottom row, repaint the entire column
if (row === 7) {
for (let r = 0; r < 8; r++) {
squares.push({row: r, col});
}
return squares;
}
// Otherwise, repaint the 2x2 square with this square as top-left
for (let r = row; r < row + 2 && r < 8; r++) {
for (let c = col; c < col + 2 && c < 8; c++) {
squares.push({row: r, col: c});
}
}
return squares;
};
const renderSquare = (row: number, col: number) => {
const isBlack = board[row][col];
const isBottomRow = row === 7;
const isRightmostCol = col === 7;
// Check if this square would be affected by hovering over the hovered square
const isAffected = hoveredSquare && getAffectedSquares(hoveredSquare.row, hoveredSquare.col)
.some(square => square.row === row && square.col === col);
return (
<div
key={`${row}-${col}`}
onClick={() => handleSquareClick(row, col)}
onMouseEnter={() => setHoveredSquare({row, col})}
onMouseLeave={() => setHoveredSquare(null)}
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'}
${isBottomRow || isRightmostCol ? 'hover:bg-blue-100' : ''}
${isAffected ? 'border-2 border-red-500' : ''}
`}
>
{isBottomRow && (
<span className="text-xs font-bold text-blue-600">Row</span>
)}
{isRightmostCol && !isBottomRow && (
<span className="text-xs font-bold text-blue-600">Col</span>
)}
</div>
/>
);
};
@ -208,7 +237,7 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ 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 bottom row or rightmost column to repaint entire row/column. Goal: 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!"
)}
</p>
</div>
@ -227,16 +256,8 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
<span>Black square</span>
</div>
<div className="flex items-center gap-2">
<div className="w-5 h-5 bg-blue-100 border border-blue-300 flex items-center justify-center">
<span className="text-xs font-bold text-blue-600">Row</span>
</div>
<span>Click to repaint entire row</span>
</div>
<div className="flex items-center gap-2">
<div className="w-5 h-5 bg-blue-100 border border-blue-300 flex items-center justify-center">
<span className="text-xs font-bold text-blue-600">Col</span>
</div>
<span>Click to repaint entire column</span>
<div className="w-5 h-5 border-2 border-red-500"></div>
<span>Hover to preview affected squares</span>
</div>
</div>
</div>
@ -267,8 +288,9 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
<h4 className="font-semibold mb-2 text-lg">How to Play</h4>
<ol className="list-decimal list-inside space-y-2 ml-4 text-gray-700">
<li><strong>Repaint a 2×2 square:</strong> Click any square to flip all four squares in the 2×2 region with that square as the top-left corner.</li>
<li><strong>Repaint a row:</strong> Click any square in the bottom row (marked "Row") to flip all squares in that entire row.</li>
<li><strong>Repaint a column:</strong> Click any square in the rightmost column (marked "Col") to flip all squares in that entire column.</li>
<li><strong>Repaint a row:</strong> Click any square in the rightmost column to flip all squares in that entire row.</li>
<li><strong>Repaint a column:</strong> Click any square in the bottom row to flip all squares in that entire column.</li>
<li><strong>Preview:</strong> Hover over any square to see which squares will be affected (highlighted with red border).</li>
<li><strong>Goal:</strong> Achieve exactly one black square on the entire board.</li>
</ol>
</div>