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

Improve Chessboard Repaint Puzzle UI - click squares directly for cleaner interface

Browse source
This commit is contained in:
Neeldhara Misra 2025-07-22 09:57:14 +05:30
parent f8fd9ac4d8
commit 52a09f5f5e
1 changed files with 45 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/components/ChessboardRepaintPuzzle.tsx
View file

@ -93,32 +93,48 @@ 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) {
repaintRow(row);
return;
}
// If clicking on the rightmost column, repaint the entire column
if (col === 7) {
repaintColumn(col);
return;
}
// Otherwise, repaint the 2x2 square with this square as top-left
repaint2x2Square(row, col);
};
const renderSquare = (row: number, col: number) => {
const isBlack = board[row][col];
const isBottomRow = row === 7;
const isRightmostCol = col === 7;
return (
<div
key={`${row}-${col}`}
onClick={() => handleSquareClick(row, col)}
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' : ''}
`}
/>
);
};
const render2x2Button = (startRow: number, startCol: number) => {
return (
<Button
key={`2x2-${startRow}-${startCol}`}
onClick={() => repaint2x2Square(startRow, startCol)}
variant="outline"
size="sm"
className="w-6 h-6 p-0 text-xs"
disabled={isComplete}
>
2×2
</Button>
{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>
);
};
@ -176,57 +192,6 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
{/* Chessboard */}
<div className="flex justify-center">
<div className="relative">
{/* Row buttons */}
<div className="absolute -left-16 top-0 h-full flex flex-col justify-center gap-1">
{Array.from({ length: 8 }, (_, i) => (
<Button
key={`row-${i}`}
onClick={() => repaintRow(i)}
variant="outline"
size="sm"
className="w-12 h-6 text-xs"
disabled={isComplete}
>
Row {i + 1}
</Button>
))}
</div>
{/* Column buttons */}
<div className="absolute -top-16 left-0 w-full flex justify-center gap-1">
{Array.from({ length: 8 }, (_, i) => (
<Button
key={`col-${i}`}
onClick={() => repaintColumn(i)}
variant="outline"
size="sm"
className="w-12 h-6 text-xs"
disabled={isComplete}
>
Col {i + 1}
</Button>
))}
</div>
{/* 2x2 square buttons */}
<div className="absolute inset-0 pointer-events-none">
{Array.from({ length: 7 }, (_, row) =>
Array.from({ length: 7 }, (_, col) => (
<div
key={`2x2-${row}-${col}`}
className="absolute pointer-events-auto"
style={{
left: `${col * 48 + 24}px`,
top: `${row * 48 + 24}px`,
transform: 'translate(-50%, -50%)'
}}
>
{render2x2Button(row, col)}
</div>
))
)}
</div>
{/* Chessboard grid */}
<div className="grid grid-cols-8 gap-0 border-2 border-gray-400">
{board.map((row, rowIndex) =>
@ -243,7 +208,7 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
{isComplete ? (
"🎉 Congratulations! You achieved exactly one black square!"
) : (
"Click row/column buttons or 2×2 square buttons to repaint. Goal: 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!"
)}
</p>
</div>
@ -262,8 +227,16 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
<span>Black square</span>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" className="w-6 h-6 p-0 text-xs">2×2</Button>
<span>Repaint 2×2 square</span>
<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>
</div>
</div>
@ -293,9 +266,9 @@ const ChessboardRepaintPuzzle: React.FC<ChessboardRepaintPuzzleProps> = ({ showS
<div>
<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 row:</strong> Click any "Row X" button to flip all squares in that row (black becomes white, white becomes black).</li>
<li><strong>Repaint a column:</strong> Click any "Col X" button to flip all squares in that column.</li>
<li><strong>Repaint a 2×2 square:</strong> Click any "2×2" button to flip all four squares in that 2×2 region.</li>
<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>Goal:</strong> Achieve exactly one black square on the entire board.</li>
</ol>
</div>