From 85a8298352950434a3fc1a9042591a0cf202bad7 Mon Sep 17 00:00:00 2001 From: Neeldhara Misra Date: Sun, 20 Jul 2025 09:32:08 +0530 Subject: [PATCH] Fix GameOfSim component layout and add full-screen support - Add showSocialShare prop to GameOfSim component for conditional social sharing - Create GameOfSimPage.tsx for standalone access without header/footer - Create GameOfSimGreenScreen.tsx for green screen mode - Add routing for /game-of-sim and /game-of-sim/:mode - Fix GamesGallery to conditionally show header/footer (only in gallery view) - Update Games.tsx to remove Layout wrapper for proper conditional rendering - Add unique ID to social share URL for copy link functionality - Ensure consistent behavior with other interactive components --- src/App.tsx | 4 ++ src/components/GameOfSim.tsx | 22 +++--- src/components/GamesGallery.tsx | 105 +++++++++++++++-------------- src/pages/GameOfSimGreenScreen.tsx | 18 +++++ src/pages/GameOfSimPage.tsx | 13 ++++ src/pages/theme-pages/Games.tsx | 8 +-- 6 files changed, 105 insertions(+), 65 deletions(-) create mode 100644 src/pages/GameOfSimGreenScreen.tsx create mode 100644 src/pages/GameOfSimPage.tsx diff --git a/src/App.tsx b/src/App.tsx index b8705da..8ae9b8d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,6 +17,8 @@ import BinaryNumberGamePage from "./pages/BinaryNumberGamePage"; import BinaryNumberGameGreenScreen from "./pages/BinaryNumberGameGreenScreen"; import BinarySearchTrickPage from "./pages/BinarySearchTrickPage"; import BinarySearchTrickGreenScreen from "./pages/BinarySearchTrickGreenScreen"; +import GameOfSimGreenScreen from "./pages/GameOfSimGreenScreen"; +import GameOfSimPage from "./pages/GameOfSimPage"; 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"; @@ -60,6 +62,8 @@ const App = () => ( } /> } /> } /> + } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/src/components/GameOfSim.tsx b/src/components/GameOfSim.tsx index 52ca88c..455f02f 100644 --- a/src/components/GameOfSim.tsx +++ b/src/components/GameOfSim.tsx @@ -20,7 +20,11 @@ interface GameState { moveHistory: Edge[]; } -const GameOfSim = () => { +interface GameOfSimProps { + showSocialShare?: boolean; +} + +const GameOfSim: React.FC = ({ showSocialShare = true }) => { const [vertices, setVertices] = useState(6); const [gameState, setGameState] = useState(() => initializeGame(6)); @@ -268,13 +272,15 @@ const GameOfSim = () => { {/* Social Share */} -
- -
+ {showSocialShare && ( +
+ +
+ )} diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx index 669d57b..feee23d 100644 --- a/src/components/GamesGallery.tsx +++ b/src/components/GamesGallery.tsx @@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Search } from 'lucide-react'; +import Layout from '@/components/Layout'; import GameOfSim from '@/components/GameOfSim'; interface Game { @@ -10,7 +11,7 @@ interface Game { title: string; description: string; tags: string[]; - component: React.ComponentType; + component: React.ComponentType<{ showSocialShare?: boolean }>; } const games: Game[] = [ @@ -46,65 +47,69 @@ const GamesGallery = () => { ← Back to Educational Games - + ); } return ( -
-
-

Educational Games

-

- Learn through play with interactive games that reinforce computer science and mathematical concepts. -

-
+ +
+
+
+

Educational Games

+

+ Learn through play with interactive games that reinforce computer science and mathematical concepts. +

+
- {/* Search bar */} -
- - setSearchTerm(e.target.value)} - className="pl-10" - /> -
+ {/* Search bar */} +
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> +
- {/* Games Gallery */} -
- {filteredGames.map(game => ( - setSelectedGame(game)} - > - - {game.title} - - {game.description} - - - -
- {game.tags.map(tag => ( - - {tag} - - ))} -
- - - ))} -
+ {/* Games Gallery */} +
+ {filteredGames.map(game => ( + setSelectedGame(game)} + > + + {game.title} + + {game.description} + + + +
+ {game.tags.map(tag => ( + + {tag} + + ))} +
+ + + ))} +
- {filteredGames.length === 0 && ( -
-

No games found matching your search.

+ {filteredGames.length === 0 && ( +
+

No games found matching your search.

+
+ )}
- )} -
+
+ ); }; diff --git a/src/pages/GameOfSimGreenScreen.tsx b/src/pages/GameOfSimGreenScreen.tsx new file mode 100644 index 0000000..591ac7f --- /dev/null +++ b/src/pages/GameOfSimGreenScreen.tsx @@ -0,0 +1,18 @@ +import { useParams } from 'react-router-dom'; +import GameOfSim from '@/components/GameOfSim'; +import GreenScreenWrapper from '@/components/GreenScreenWrapper'; + +const GameOfSimGreenScreen = () => { + const { mode } = useParams<{ mode: 'gs-lite' | 'gs-dark' }>(); + const greenScreenMode = mode === 'gs-dark' ? 'dark' : 'lite'; + + return ( + +
+ +
+ + ); +}; + +export default GameOfSimGreenScreen; \ No newline at end of file diff --git a/src/pages/GameOfSimPage.tsx b/src/pages/GameOfSimPage.tsx new file mode 100644 index 0000000..37745b6 --- /dev/null +++ b/src/pages/GameOfSimPage.tsx @@ -0,0 +1,13 @@ +import GameOfSim from '@/components/GameOfSim'; + +const GameOfSimPage = () => { + return ( +
+
+ +
+
+ ); +}; + +export default GameOfSimPage; \ No newline at end of file diff --git a/src/pages/theme-pages/Games.tsx b/src/pages/theme-pages/Games.tsx index 7e0a5a9..6818bee 100644 --- a/src/pages/theme-pages/Games.tsx +++ b/src/pages/theme-pages/Games.tsx @@ -2,13 +2,7 @@ import Layout from "@/components/Layout"; import GamesGallery from "@/components/GamesGallery"; const Games = () => { - return ( - -
- -
- - ); + return ; }; export default Games; \ No newline at end of file