From 33c4e2dcb74f70b7b07dbe3e31564196a9a24b68 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:04:17 +0000
Subject: [PATCH] Add Knights Exchange Puzzle

Make the Knights Exchange Puzzle a standalone interactive and add it to the puzzles theme.
---
 src/App.tsx                       |  2 ++
 src/pages/KnightsPuzzlePage.tsx   | 12 +++++++++++
 src/pages/theme-pages/Puzzles.tsx | 34 +++++++++++++++++++++++++++----
 3 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/KnightsPuzzlePage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0b31034..fd21542 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,6 +28,7 @@ import GameOfSimPage from "./pages/GameOfSimPage";
 import TernarySearchTrickPage from "./pages/TernarySearchTrickPage";
 import TernarySearchTrickGreenScreen from "./pages/TernarySearchTrickGreenScreen";
 import NorthcottsGamePage from "./pages/NorthcottsGamePage";
+import KnightsPuzzlePage from "./pages/KnightsPuzzlePage";
 import Foundations from "./pages/theme-pages/discrete-math/Foundations";
 import Proofs from "./pages/theme-pages/discrete-math/Proofs";
 import Counting from "./pages/theme-pages/discrete-math/Counting";
@@ -82,6 +83,7 @@ const App = () => (
           <Route path="/ternary-search-trick" element={<TernarySearchTrickPage />} />
           <Route path="/ternary-search-trick/:mode" element={<TernarySearchTrickGreenScreen />} />
           <Route path="/northcotts-game" element={<NorthcottsGamePage />} />
+          <Route path="/knights-puzzle" element={<KnightsPuzzlePage />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
diff --git a/src/pages/KnightsPuzzlePage.tsx b/src/pages/KnightsPuzzlePage.tsx
new file mode 100644
index 0000000..ed99cd4
--- /dev/null
+++ b/src/pages/KnightsPuzzlePage.tsx
@@ -0,0 +1,12 @@
+import Layout from "@/components/Layout";
+import KnightsPuzzle from "@/components/KnightsPuzzle";
+
+const KnightsPuzzlePage = () => {
+  return (
+    <Layout>
+      <KnightsPuzzle showSocialShare={true} />
+    </Layout>
+  );
+};
+
+export default KnightsPuzzlePage;
\ No newline at end of file
diff --git a/src/pages/theme-pages/Puzzles.tsx b/src/pages/theme-pages/Puzzles.tsx
index b9f6b7c..51f39f2 100644
--- a/src/pages/theme-pages/Puzzles.tsx
+++ b/src/pages/theme-pages/Puzzles.tsx
@@ -1,8 +1,23 @@
 import Layout from "@/components/Layout";
-import KnightsPuzzle from "@/components/KnightsPuzzle";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import InteractiveCard from "@/components/InteractiveCard";
+import { useNavigate } from "react-router-dom";
 
 const Puzzles = () => {
+  const navigate = useNavigate();
+  
+  const puzzles = [
+    {
+      id: "knights-puzzle",
+      title: "Knights Exchange Puzzle",
+      description: "Can the black and white knights swap places using legal chess moves? A classic puzzle on a 3×3 board.",
+      path: "/knights-puzzle",
+      tags: ["Chess", "Logic", "Classic"],
+      difficulty: "Intermediate" as const,
+      duration: "5-15 min",
+      participants: "1 player"
+    }
+  ];
+
   return (
     <Layout>
       <div className="py-12 px-4">
@@ -14,8 +29,19 @@ const Puzzles = () => {
             </p>
           </div>
           
-          <div className="space-y-8">
-            <KnightsPuzzle showSocialShare={true} />
+          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
+            {puzzles.map((puzzle) => (
+              <InteractiveCard
+                key={puzzle.id}
+                title={puzzle.title}
+                description={puzzle.description}
+                tags={puzzle.tags}
+                difficulty={puzzle.difficulty}
+                duration={puzzle.duration}
+                participants={puzzle.participants}
+                onClick={() => navigate(puzzle.path)}
+              />
+            ))}
           </div>
         </div>
       </div>