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
This commit is contained in:
parent
8d84ac0476
commit
85a8298352
6 changed files with 105 additions and 65 deletions
|
|
@ -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 />} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
18
src/pages/GameOfSimGreenScreen.tsx
Normal file
18
src/pages/GameOfSimGreenScreen.tsx
Normal file
|
|
@ -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;
|
||||
13
src/pages/GameOfSimPage.tsx
Normal file
13
src/pages/GameOfSimPage.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue