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

Refactor Knights Puzzle layout

Browse source 
Move interactive to the left and add goal state image.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:28:29 +00:00
parent a335b3af6f
commit ed4c6209d7
1 changed files with 43 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/components/KnightsPuzzle.tsx
View file

@ -183,30 +183,51 @@ const KnightsPuzzle = ({
</div>
</div>
{/* Yellow: Main interactive with controls */}
<Card className="bg-primary/5 border-primary/20">
<CardContent className="pt-6">
<div className="flex flex-col items-center gap-4">
<div className="grid grid-cols-3 gap-1 border-2 border-outline rounded-lg p-4 bg-background">
{board.map((row, rowIndex) => row.map((piece, colIndex) => <div key={`${rowIndex}-${colIndex}`} className={getSquareClass(rowIndex, colIndex)} onClick={() => handleSquareClick(rowIndex, colIndex)}>
{renderPiece(piece)}
</div>))}
</div>
{/* Interactive and Goal State side by side */}
<div className="grid grid-cols-2 gap-6">
{/* Left: Interactive game */}
<Card className="bg-primary/5 border-primary/20">
<CardContent className="pt-6">
<div className="flex flex-col items-center gap-4">
<div className="grid grid-cols-3 gap-1 border-2 border-outline rounded-lg p-4 bg-background">
{board.map((row, rowIndex) => row.map((piece, colIndex) => <div key={`${rowIndex}-${colIndex}`} className={getSquareClass(rowIndex, colIndex)} onClick={() => handleSquareClick(rowIndex, colIndex)}>
{renderPiece(piece)}
</div>))}
</div>
{/* Controls */}
<div className="flex gap-2">
<Button onClick={resetPuzzle} variant="outline" size="sm">
<RefreshCw className="w-4 h-4 mr-2" />
Reset
</Button>
<Button onClick={undoLastMove} variant="outline" size="sm" disabled={moveHistory.length === 0}>
<RotateCcw className="w-4 h-4 mr-2" />
Undo
</Button>
{/* Controls */}
<div className="flex gap-2">
<Button onClick={resetPuzzle} variant="outline" size="sm">
<RefreshCw className="w-4 h-4 mr-2" />
Reset
</Button>
<Button onClick={undoLastMove} variant="outline" size="sm" disabled={moveHistory.length === 0}>
<RotateCcw className="w-4 h-4 mr-2" />
Undo
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
</CardContent>
</Card>
{/* Right: Goal state */}
<Card className="bg-green-500/5 border-green-500/20">
<CardContent className="pt-6">
<div className="flex flex-col items-center gap-4">
<div className="grid grid-cols-3 gap-1 border-2 border-outline rounded-lg p-4 bg-background">
{targetBoard.map((row, rowIndex) => row.map((piece, colIndex) => <div key={`goal-${rowIndex}-${colIndex}`} className="w-16 h-16 border-2 border-outline flex items-center justify-center bg-surface">
{renderPiece(piece)}
</div>))}
</div>
{/* Goal label */}
<div className="text-center">
<p className="text-sm font-medium text-green-700 dark:text-green-300">Goal State</p>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Purple: Initial and Target positions side by side */}
<div className="grid grid-cols-2 gap-6">