Add Game of Sim interactive

Port the Game of Sim from https://game-of-sim.lovable.app/ to the games theme.

src/components/GamesGallery.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Search } from 'lucide-react';
+import GameOfSim from '@/components/GameOfSim';
+
+interface Game {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  component: React.ComponentType;
+}
+
+const games: Game[] = [
+  {
+    id: 'game-of-sim',
+    title: 'Game of Sim',
+    description: 'A strategic two-player game where you take turns coloring edges between vertices, trying to avoid creating a triangle of your own color.',
+    tags: ['strategy', 'graph-theory', 'two-player', 'logic', 'game-theory'],
+    component: GameOfSim
+  }
+];
+
+const GamesGallery = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedGame, setSelectedGame] = useState<Game | null>(null);
+
+  const filteredGames = games.filter(game => 
+    game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    game.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    game.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  if (selectedGame) {
+    const GameComponent = selectedGame.component;
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <button 
+            onClick={() => setSelectedGame(null)}
+            className="text-primary hover:text-primary/80 font-medium"
+          >
+            ← Back to Educational Games
+          </button>
+        </div>
+        <div className="bg-background border rounded-lg p-6">
+          <GameComponent />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold text-foreground">Educational Games</h1>
+        <p className="text-muted-foreground text-lg">
+          Learn through play with interactive games that reinforce computer science and mathematical concepts.
+        </p>
+      </div>
+
+      {/* Search bar */}
+      <div className="relative max-w-md">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+        <Input 
+          placeholder="Search games..." 
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      {/* Games Gallery */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredGames.map(game => (
+          <Card 
+            key={game.id}
+            className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105"
+            onClick={() => setSelectedGame(game)}
+          >
+            <CardHeader className="space-y-3">
+              <CardTitle className="text-xl text-foreground">{game.title}</CardTitle>
+              <CardDescription className="text-muted-foreground line-clamp-3">
+                {game.description}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-2">
+                {game.tags.map(tag => (
+                  <Badge key={tag} variant="secondary" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredGames.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground text-lg">No games found matching your search.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GamesGallery;