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 BinaryNumberGameGreenScreen from "./pages/BinaryNumberGameGreenScreen";
|
||||||
import BinarySearchTrickPage from "./pages/BinarySearchTrickPage";
|
import BinarySearchTrickPage from "./pages/BinarySearchTrickPage";
|
||||||
import BinarySearchTrickGreenScreen from "./pages/BinarySearchTrickGreenScreen";
|
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 Foundations from "./pages/theme-pages/discrete-math/Foundations";
|
||||||
import Proofs from "./pages/theme-pages/discrete-math/Proofs";
|
import Proofs from "./pages/theme-pages/discrete-math/Proofs";
|
||||||
import Counting from "./pages/theme-pages/discrete-math/Counting";
|
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-number-game/:mode" element={<BinaryNumberGameGreenScreen />} />
|
||||||
<Route path="/binary-search-trick" element={<BinarySearchTrickPage />} />
|
<Route path="/binary-search-trick" element={<BinarySearchTrickPage />} />
|
||||||
<Route path="/binary-search-trick/:mode" element={<BinarySearchTrickGreenScreen />} />
|
<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 */}
|
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,11 @@ interface GameState {
|
||||||
moveHistory: Edge[];
|
moveHistory: Edge[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const GameOfSim = () => {
|
interface GameOfSimProps {
|
||||||
|
showSocialShare?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GameOfSim: React.FC<GameOfSimProps> = ({ showSocialShare = true }) => {
|
||||||
const [vertices, setVertices] = useState(6);
|
const [vertices, setVertices] = useState(6);
|
||||||
const [gameState, setGameState] = useState<GameState>(() => initializeGame(6));
|
const [gameState, setGameState] = useState<GameState>(() => initializeGame(6));
|
||||||
|
|
||||||
|
|
@ -268,13 +272,15 @@ const GameOfSim = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Social Share */}
|
{/* Social Share */}
|
||||||
<div className="flex justify-center">
|
{showSocialShare && (
|
||||||
<SocialShare
|
<div className="flex justify-center">
|
||||||
title="Game of Sim"
|
<SocialShare
|
||||||
description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
|
title="Game of Sim"
|
||||||
url={`${window.location.origin}/themes/games`}
|
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>
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Search } from 'lucide-react';
|
import { Search } from 'lucide-react';
|
||||||
|
import Layout from '@/components/Layout';
|
||||||
import GameOfSim from '@/components/GameOfSim';
|
import GameOfSim from '@/components/GameOfSim';
|
||||||
|
|
||||||
interface Game {
|
interface Game {
|
||||||
|
|
@ -10,7 +11,7 @@ interface Game {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
tags: string[];
|
tags: string[];
|
||||||
component: React.ComponentType;
|
component: React.ComponentType<{ showSocialShare?: boolean }>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const games: Game[] = [
|
const games: Game[] = [
|
||||||
|
|
@ -46,65 +47,69 @@ const GamesGallery = () => {
|
||||||
← Back to Educational Games
|
← Back to Educational Games
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<GameComponent />
|
<GameComponent showSocialShare={true} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<Layout>
|
||||||
<div className="space-y-4">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<h1 className="text-3xl font-bold text-foreground">Educational Games</h1>
|
<div className="space-y-6">
|
||||||
<p className="text-muted-foreground text-lg">
|
<div className="space-y-4">
|
||||||
Learn through play with interactive games that reinforce computer science and mathematical concepts.
|
<h1 className="text-3xl font-bold text-foreground">Educational Games</h1>
|
||||||
</p>
|
<p className="text-muted-foreground text-lg">
|
||||||
</div>
|
Learn through play with interactive games that reinforce computer science and mathematical concepts.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Search bar */}
|
{/* Search bar */}
|
||||||
<div className="relative max-w-md">
|
<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" />
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="Search games..."
|
placeholder="Search games..."
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
className="pl-10"
|
className="pl-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Games Gallery */}
|
{/* Games Gallery */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{filteredGames.map(game => (
|
{filteredGames.map(game => (
|
||||||
<Card
|
<Card
|
||||||
key={game.id}
|
key={game.id}
|
||||||
className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105"
|
className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105"
|
||||||
onClick={() => setSelectedGame(game)}
|
onClick={() => setSelectedGame(game)}
|
||||||
>
|
>
|
||||||
<CardHeader className="space-y-3">
|
<CardHeader className="space-y-3">
|
||||||
<CardTitle className="text-xl text-foreground">{game.title}</CardTitle>
|
<CardTitle className="text-xl text-foreground">{game.title}</CardTitle>
|
||||||
<CardDescription className="text-muted-foreground line-clamp-3">
|
<CardDescription className="text-muted-foreground line-clamp-3">
|
||||||
{game.description}
|
{game.description}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{game.tags.map(tag => (
|
{game.tags.map(tag => (
|
||||||
<Badge key={tag} variant="secondary" className="text-xs">
|
<Badge key={tag} variant="secondary" className="text-xs">
|
||||||
{tag}
|
{tag}
|
||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{filteredGames.length === 0 && (
|
{filteredGames.length === 0 && (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<p className="text-muted-foreground text-lg">No games found matching your search.</p>
|
<p className="text-muted-foreground text-lg">No games found matching your search.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</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";
|
import GamesGallery from "@/components/GamesGallery";
|
||||||
|
|
||||||
const Games = () => {
|
const Games = () => {
|
||||||
return (
|
return <GamesGallery />;
|
||||||
<Layout>
|
|
||||||
<div className="container mx-auto px-4 py-8">
|
|
||||||
<GamesGallery />
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Games;
|
export default Games;
|
||||||
Loading…
Add table
Add a link
Reference in a new issue