From ed4c6209d79b91847af65e8a04f52023857289d3 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:28:29 +0000
Subject: [PATCH] Refactor Knights Puzzle layout

Move interactive to the left and add goal state image.
---
 src/components/KnightsPuzzle.tsx | 65 +++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/components/KnightsPuzzle.tsx b/src/components/KnightsPuzzle.tsx
index 1bbca55..9780ae9 100644
--- a/src/components/KnightsPuzzle.tsx
+++ b/src/components/KnightsPuzzle.tsx
@@ -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>))}
+      {/* 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>
+              </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>
+          </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>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      </div>
 
       {/* Purple: Initial and Target positions side by side */}
       <div className="grid grid-cols-2 gap-6">