From ba5dac212e4af5746ffe5348384dc2eb90e5e3be Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:59:06 +0000
Subject: [PATCH] Refactor interactive links

Update interactive links to generate unique URLs and categorize the pebble placement interactive under "Puzzles" while removing it from "DSA" and "Games".
---
 src/App.tsx                           |  2 ++
 src/components/GamesGallery.tsx       |  8 --------
 src/components/InteractiveGallery.tsx |  8 --------
 src/pages/PebblePlacementGamePage.tsx |  7 +++++++
 src/pages/theme-pages/Puzzles.tsx     | 10 ++++++++++
 5 files changed, 19 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/PebblePlacementGamePage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 9f56c04..c8c7298 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -50,6 +50,7 @@ import SunnyLinesPuzzlePage from './pages/SunnyLinesPuzzlePage';
 import SikiniaParliamentPuzzlePage from './pages/SikiniaParliamentPuzzlePage';
 import NQueensPuzzlePage from './pages/NQueensPuzzlePage';
 import RulesOfInferencePlaygroundPage from './pages/RulesOfInferencePlaygroundPage';
+import PebblePlacementGamePage from './pages/PebblePlacementGamePage';
 
 const queryClient = new QueryClient();
 
@@ -102,6 +103,7 @@ const App = () => (
           <Route path="/games/nim" element={<NimGamePage />} />
           <Route path="/games/assisted-nim" element={<AssistedNimGamePage />} />
                   <Route path="/games/gold-coin" element={<GoldCoinGamePage />} />
+        <Route path="/puzzles/pebble-placement" element={<PebblePlacementGamePage />} />
         <Route path="/puzzles/sikinia-parliament" element={<SikiniaParliamentPuzzlePage />} />
         <Route path="/puzzles/plate-swap" element={<PlateSwapPuzzlePage />} />
         <Route path="/puzzles/chessboard-repaint" element={<ChessboardRepaintPuzzlePage />} />
diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx
index e85f5d5..d148fb4 100644
--- a/src/components/GamesGallery.tsx
+++ b/src/components/GamesGallery.tsx
@@ -10,7 +10,6 @@ import NimGame from '@/components/NimGame';
 import AssistedNimGame from '@/components/AssistedNimGame';
 import GoldCoinGame from '@/components/GoldCoinGame';
 import GuessingGame from '@/components/GuessingGame';
-import PebblePlacementGame from '@/components/PebblePlacementGame';
 
 interface Game {
   id: string;
@@ -21,13 +20,6 @@ interface Game {
 }
 
 const games: Game[] = [
-  {
-    id: 'pebble-placement-game',
-    title: 'Pebble Placement Strategy Game',
-    description: 'Test your strategic thinking! Place pebbles following specific rules to reach the furthest position possible.',
-    tags: ['strategy', 'logic', 'game', 'placement', 'optimization', 'puzzle'],
-    component: PebblePlacementGame
-  },
   {
     id: 'guessing-game',
     title: 'Number Guessing Game',
diff --git a/src/components/InteractiveGallery.tsx b/src/components/InteractiveGallery.tsx
index 0856788..1086712 100644
--- a/src/components/InteractiveGallery.tsx
+++ b/src/components/InteractiveGallery.tsx
@@ -7,7 +7,6 @@ import Layout from '@/components/Layout';
 import BinarySearchTrick from '@/components/BinarySearchTrick';
 import TernarySearchTrick from '@/components/TernarySearchTrick';
 import GuessingGame from '@/components/GuessingGame';
-import PebblePlacementGame from '@/components/PebblePlacementGame';
 
 interface Interactive {
   id: string;
@@ -39,13 +38,6 @@ const interactives: Interactive[] = [
     tags: ['ternary', 'magic', 'numbers', 'trick', 'data-structures', 'search'],
     component: TernarySearchTrick
   },
-  {
-    id: 'pebble-placement-game',
-    title: 'Pebble Placement Strategy Game',
-    description: 'Test your strategic thinking! Place pebbles following specific rules to reach the furthest position possible.',
-    tags: ['strategy', 'logic', 'game', 'placement', 'optimization', 'puzzle'],
-    component: PebblePlacementGame
-  },
 ];
 const InteractiveGallery = () => {
   const [searchTerm, setSearchTerm] = useState('');
diff --git a/src/pages/PebblePlacementGamePage.tsx b/src/pages/PebblePlacementGamePage.tsx
new file mode 100644
index 0000000..642ab5c
--- /dev/null
+++ b/src/pages/PebblePlacementGamePage.tsx
@@ -0,0 +1,7 @@
+import PebblePlacementGame from "@/components/PebblePlacementGame";
+
+const PebblePlacementGamePage = () => {
+  return <PebblePlacementGame showSocialShare={true} />;
+};
+
+export default PebblePlacementGamePage;
\ No newline at end of file
diff --git a/src/pages/theme-pages/Puzzles.tsx b/src/pages/theme-pages/Puzzles.tsx
index 3cf3896..15d3d7a 100644
--- a/src/pages/theme-pages/Puzzles.tsx
+++ b/src/pages/theme-pages/Puzzles.tsx
@@ -6,6 +6,16 @@ const Puzzles = () => {
   const navigate = useNavigate();
   
   const puzzles = [
+    {
+      id: "pebble-placement",
+      title: "Pebble Placement Strategy Game",
+      description: "Place pebbles following specific rules to reach the furthest position possible. A strategic optimization puzzle!",
+      path: "/puzzles/pebble-placement",
+      tags: ["Strategy", "Logic", "Placement", "Optimization"],
+      difficulty: "Intermediate" as const,
+      duration: "5-15 min",
+      participants: "1 player"
+    },
     {
       id: "sikinia-parliament",
       title: "Parliament of Sikinia Puzzle",