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

Refactor Knights Puzzle layout

Browse source 
Restructure the Knights Puzzle layout based on the provided image, including title, description, move counter, status, interactive area, initial/target positions, and game rules.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 09:15:54 +00:00
parent 33c4e2dcb7
commit c1c5e5ca60
1 changed files with 133 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/components/KnightsPuzzle.tsx
View file

@ -171,20 +171,34 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
}; };
return ( return (
<div className="max-w-4xl mx-auto p-6"> <div className="max-w-4xl mx-auto p-6 space-y-6">
<Card> {/* Green: Title and Description */}
<CardHeader> <div className="space-y-2">
<CardTitle className="flex items-center gap-2"> <div className="flex items-center gap-2">
Knights Exchange Puzzle <h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
<Badge variant="outline">Classic</Badge> <Badge variant="outline">Classic</Badge>
</CardTitle> </div>
<CardDescription> <p className="text-muted-foreground">
Can the black and white knights swap places using legal chess moves? Move knights by clicking on them, then clicking on a valid destination. Can the black and white knights swap places using legal chess moves? Move knights by clicking on them, then clicking on a valid destination.
</CardDescription> </p>
</CardHeader> </div>
<CardContent>
<div className="flex flex-col lg:flex-row gap-8"> {/* Blue: Number of moves */}
{/* Game Board */} <div className="text-lg">
<span className="font-semibold">Moves: </span>
<span className="font-mono text-primary">{moveCount}</span>
</div>
{/* Orange: Status (without heading) */}
<div className="text-lg">
<span className="font-semibold">
{isComplete ? "🎉 Puzzle Solved!" : "🎯 In Progress"}
</span>
</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="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"> <div className="grid grid-cols-3 gap-1 border-2 border-outline rounded-lg p-4 bg-background">
{board.map((row, rowIndex) => {board.map((row, rowIndex) =>
@ -217,31 +231,17 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
</Button> </Button>
</div> </div>
</div> </div>
</CardContent>
</Card>
{/* Info Panel */} {/* Purple: Initial and Target positions side by side */}
<div className="flex-1 space-y-4"> <div className="grid grid-cols-2 gap-6">
<div className="space-y-2"> <Card className="bg-secondary/20 border-secondary">
<h3 className="text-lg font-semibold">Game Status</h3> <CardHeader className="pb-3">
<div className="space-y-1 text-sm"> <CardTitle className="text-lg">Initial Position</CardTitle>
<p>Moves: <span className="font-mono">{moveCount}</span></p> </CardHeader>
<p>Status: {isComplete ? "🎉 Solved!" : "🎯 In Progress"}</p> <CardContent>
</div> <div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded mx-auto">
</div>
<div className="space-y-2">
<h3 className="text-lg font-semibold">How to Play</h3>
<ul className="text-sm space-y-1 text-muted-foreground">
<li>• Click on a knight to select it</li>
<li>• Valid moves will be highlighted</li>
<li>• Click on a highlighted square to move</li>
<li>• Goal: Swap white and black knights</li>
<li>• Knights move in an L-shape (like in chess)</li>
</ul>
</div>
<div className="space-y-2">
<h3 className="text-lg font-semibold">Initial Position</h3>
<div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded">
{initialBoard.map((row, rowIndex) => {initialBoard.map((row, rowIndex) =>
row.map((piece, colIndex) => ( row.map((piece, colIndex) => (
<div <div
@ -255,11 +255,15 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
)) ))
)} )}
</div> </div>
</div> </CardContent>
</Card>
<div className="space-y-2"> <Card className="bg-secondary/20 border-secondary">
<h3 className="text-lg font-semibold">Target Position</h3> <CardHeader className="pb-3">
<div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded"> <CardTitle className="text-lg">Target Position</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded mx-auto">
{targetBoard.map((row, rowIndex) => {targetBoard.map((row, rowIndex) =>
row.map((piece, colIndex) => ( row.map((piece, colIndex) => (
<div <div
@ -273,8 +277,26 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
)) ))
)} )}
</div> </div>
</CardContent>
</Card>
</div> </div>
{/* Red: Game rules */}
<Card className="bg-destructive/5 border-destructive/20">
<CardHeader className="pb-3">
<CardTitle className="text-lg">How to Play</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-1 text-sm text-muted-foreground">
<li>• Click on a knight to select it</li>
<li>• Valid moves will be highlighted</li>
<li>• Click on a highlighted square to move</li>
<li>• Goal: Swap white and black knights</li>
<li>• Knights move in an L-shape (like in chess)</li>
</ul>
</CardContent>
</Card>
{/* Attribution */} {/* Attribution */}
<div className="pt-4 border-t border-outline"> <div className="pt-4 border-t border-outline">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@ -291,10 +313,6 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
</p> </p>
</div> </div>
</div> </div>
</div>
</CardContent>
</Card>
</div>
); );
}; };