Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix GameOfSim component layout and add full-screen support

Browse source 
- 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
This commit is contained in:
Neeldhara Misra 2025-07-20 09:32:08 +05:30
parent 8d84ac0476
commit 85a8298352
6 changed files with 105 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/GameOfSim.tsx
View file

@ -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 */}
<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`}
/>
</div>
{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#game-of-sim`}
/>
</div>
)}
</CardContent>
</Card>
</div>

105
src/components/GamesGallery.tsx
View file

@ -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
</button>
</div>
<GameComponent />
<GameComponent showSocialShare={true} />
</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>
<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>
<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>
{/* 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>
{/* 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>
{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>
)}
</div>
</div>
</Layout>
);
};