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

@@ -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 = () => (
           <Route path="/binary-number-game/:mode" element={<BinaryNumberGameGreenScreen />} />
           <Route path="/binary-search-trick" element={<BinarySearchTrickPage />} />
           <Route path="/binary-search-trick/:mode" element={<BinarySearchTrickGreenScreen />} />
+          <Route path="/game-of-sim" element={<GameOfSimPage />} />
+          <Route path="/game-of-sim/:mode" element={<GameOfSimGreenScreen />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />

src/components/GameOfSim.tsx

@@ -20,7 +20,11 @@ interface GameState {
   moveHistory: Edge[];
 }
 
-const GameOfSim = () => {
+interface GameOfSimProps {
+  showSocialShare?: boolean;
+}
+
+const GameOfSim: React.FC<GameOfSimProps> = ({ showSocialShare = true }) => {
   const [vertices, setVertices] = useState(6);
   const [gameState, setGameState] = useState<GameState>(() => initializeGame(6));
 
@@ -268,13 +272,15 @@ const GameOfSim = () => {
           </div>
 
           {/* Social Share */}
+          {showSocialShare && (
             <div className="flex justify-center">
               <SocialShare 
                 title="Game of Sim"
                 description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
-              url={`${window.location.origin}/themes/games`}
+                url={`${window.location.origin}/themes/games#game-of-sim`}
               />
             </div>
+          )}
         </CardContent>
       </Card>
     </div>

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,13 +47,15 @@ const GamesGallery = () => {
               ← Back to Educational Games
             </button>
           </div>
-          <GameComponent />
+          <GameComponent showSocialShare={true} />
         </div>
       </div>
     );
   }
 
   return (
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
         <div className="space-y-6">
           <div className="space-y-4">
             <h1 className="text-3xl font-bold text-foreground">Educational Games</h1>
@@ -105,6 +108,8 @@ const GamesGallery = () => {
             </div>
           )}
         </div>
+      </div>
+    </Layout>
   );
 };
 

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 (
+    <GreenScreenWrapper mode={greenScreenMode}>
+      <div className="space-y-6">
+        <GameOfSim showSocialShare={false} />
+      </div>
+    </GreenScreenWrapper>
+  );
+};
+
+export default GameOfSimGreenScreen; 

src/pages/GameOfSimPage.tsx

@@ -0,0 +1,13 @@
+import GameOfSim from '@/components/GameOfSim';
+
+const GameOfSimPage = () => {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-8">
+        <GameOfSim showSocialShare={true} />
+      </div>
+    </div>
+  );
+};
+
+export default GameOfSimPage; 

src/pages/theme-pages/Games.tsx

@@ -2,13 +2,7 @@ import Layout from "@/components/Layout";
 import GamesGallery from "@/components/GamesGallery";
 
 const Games = () => {
-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <GamesGallery />
-      </div>
-    </Layout>
-  );
+  return <GamesGallery />;
 };
 
 export default Games;