Add Game of Sim interactive
Port the Game of Sim from https://game-of-sim.lovable.app/ to the games theme.
This commit is contained in:
gpt-engineer-app[bot]
parent
e591bed158
commit
55b50ddfdd
3 changed files with 392 additions and 5 deletions
274
src/components/GameOfSim.tsx
Normal file
274
src/components/GameOfSim.tsx
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
import React, { useState, useCallback } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { RotateCcw, Undo2 } from 'lucide-react';
|
||||
|
||||
interface Edge {
|
||||
from: number;
|
||||
to: number;
|
||||
color: 'red' | 'blue' | null;
|
||||
}
|
||||
|
||||
interface GameState {
|
||||
edges: Edge[];
|
||||
currentPlayer: 'red' | 'blue';
|
||||
gameOver: boolean;
|
||||
winner: 'red' | 'blue' | null;
|
||||
moveHistory: Edge[];
|
||||
}
|
||||
|
||||
const GameOfSim = () => {
|
||||
const [vertices, setVertices] = useState(6);
|
||||
const [gameState, setGameState] = useState<GameState>(() => initializeGame(6));
|
||||
|
||||
function initializeGame(numVertices: number): GameState {
|
||||
const edges: Edge[] = [];
|
||||
|
||||
// Create all possible edges between vertices
|
||||
for (let i = 0; i < numVertices; i++) {
|
||||
for (let j = i + 1; j < numVertices; j++) {
|
||||
edges.push({ from: i, to: j, color: null });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
edges,
|
||||
currentPlayer: 'red',
|
||||
gameOver: false,
|
||||
winner: null,
|
||||
moveHistory: []
|
||||
};
|
||||
}
|
||||
|
||||
const resetGame = useCallback(() => {
|
||||
setGameState(initializeGame(vertices));
|
||||
}, [vertices]);
|
||||
|
||||
const undoMove = useCallback(() => {
|
||||
if (gameState.moveHistory.length === 0) return;
|
||||
|
||||
const lastMove = gameState.moveHistory[gameState.moveHistory.length - 1];
|
||||
const newEdges = gameState.edges.map(edge => {
|
||||
if (edge.from === lastMove.from && edge.to === lastMove.to) {
|
||||
return { ...edge, color: null };
|
||||
}
|
||||
return edge;
|
||||
});
|
||||
|
||||
setGameState(prev => ({
|
||||
...prev,
|
||||
edges: newEdges,
|
||||
currentPlayer: prev.currentPlayer === 'red' ? 'blue' : 'red',
|
||||
moveHistory: prev.moveHistory.slice(0, -1),
|
||||
gameOver: false,
|
||||
winner: null
|
||||
}));
|
||||
}, [gameState.moveHistory, gameState.edges]);
|
||||
|
||||
const checkForTriangle = useCallback((edges: Edge[], player: 'red' | 'blue'): boolean => {
|
||||
const playerEdges = edges.filter(edge => edge.color === player);
|
||||
|
||||
// Check all possible triangles
|
||||
for (let i = 0; i < vertices; i++) {
|
||||
for (let j = i + 1; j < vertices; j++) {
|
||||
for (let k = j + 1; k < vertices; k++) {
|
||||
// Check if all three edges of triangle exist for this player
|
||||
const edge1 = playerEdges.find(e => (e.from === i && e.to === j) || (e.from === j && e.to === i));
|
||||
const edge2 = playerEdges.find(e => (e.from === i && e.to === k) || (e.from === k && e.to === i));
|
||||
const edge3 = playerEdges.find(e => (e.from === j && e.to === k) || (e.from === k && e.to === j));
|
||||
|
||||
if (edge1 && edge2 && edge3) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}, [vertices]);
|
||||
|
||||
const handleEdgeClick = useCallback((edgeIndex: number) => {
|
||||
if (gameState.gameOver || gameState.edges[edgeIndex].color !== null) return;
|
||||
|
||||
const newEdges = [...gameState.edges];
|
||||
const clickedEdge = { ...newEdges[edgeIndex], color: gameState.currentPlayer };
|
||||
newEdges[edgeIndex] = clickedEdge;
|
||||
|
||||
// Check if this move creates a triangle
|
||||
const hasTriangle = checkForTriangle(newEdges, gameState.currentPlayer);
|
||||
|
||||
setGameState(prev => ({
|
||||
edges: newEdges,
|
||||
currentPlayer: hasTriangle ? prev.currentPlayer : (prev.currentPlayer === 'red' ? 'blue' : 'red'),
|
||||
gameOver: hasTriangle,
|
||||
winner: hasTriangle ? (prev.currentPlayer === 'red' ? 'blue' : 'red') : null,
|
||||
moveHistory: [...prev.moveHistory, clickedEdge]
|
||||
}));
|
||||
}, [gameState, checkForTriangle]);
|
||||
|
||||
const getVertexPosition = (index: number, total: number) => {
|
||||
const angle = (2 * Math.PI * index) / total;
|
||||
const radius = 120;
|
||||
const centerX = 150;
|
||||
const centerY = 150;
|
||||
|
||||
return {
|
||||
x: centerX + radius * Math.cos(angle - Math.PI / 2),
|
||||
y: centerY + radius * Math.sin(angle - Math.PI / 2)
|
||||
};
|
||||
};
|
||||
|
||||
const handleVerticesChange = (value: string) => {
|
||||
const newVertices = parseInt(value);
|
||||
setVertices(newVertices);
|
||||
setGameState(initializeGame(newVertices));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold text-center">Game of Sim</CardTitle>
|
||||
<CardDescription className="text-center">
|
||||
Take turns coloring the lines between dots. Avoid creating a triangle of your color - first player to make one loses!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Game Controls */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<label htmlFor="vertices-select" className="text-sm font-medium">
|
||||
Vertices:
|
||||
</label>
|
||||
<Select value={vertices.toString()} onValueChange={handleVerticesChange}>
|
||||
<SelectTrigger className="w-20">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="3">3</SelectItem>
|
||||
<SelectItem value="4">4</SelectItem>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="6">6</SelectItem>
|
||||
<SelectItem value="7">7</SelectItem>
|
||||
<SelectItem value="8">8</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={undoMove}
|
||||
disabled={gameState.moveHistory.length === 0}
|
||||
>
|
||||
<Undo2 className="w-4 h-4 mr-1" />
|
||||
Undo
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={resetGame}>
|
||||
<RotateCcw className="w-4 h-4 mr-1" />
|
||||
Reset Game
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Turn Indicator */}
|
||||
<div className="text-center">
|
||||
{gameState.gameOver ? (
|
||||
<div className="space-y-2">
|
||||
<Badge variant="destructive" className="text-lg px-4 py-2">
|
||||
Game Over!
|
||||
</Badge>
|
||||
<p className="text-lg font-medium">
|
||||
<span className={gameState.winner === 'blue' ? 'text-blue-600' : 'text-red-600'}>
|
||||
{gameState.winner === 'blue' ? 'Blue' : 'Red'} Player
|
||||
</span>{' '}
|
||||
wins!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">Current Turn:</p>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-lg px-4 py-2 ${
|
||||
gameState.currentPlayer === 'red'
|
||||
? 'border-red-500 text-red-600'
|
||||
: 'border-blue-500 text-blue-600'
|
||||
}`}
|
||||
>
|
||||
{gameState.currentPlayer === 'red' ? 'Red' : 'Blue'} Player
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Game Board */}
|
||||
<div className="flex justify-center">
|
||||
<div className="bg-surface rounded-lg p-8 border">
|
||||
<svg width="300" height="300" viewBox="0 0 300 300">
|
||||
{/* Draw edges */}
|
||||
{gameState.edges.map((edge, index) => {
|
||||
const pos1 = getVertexPosition(edge.from, vertices);
|
||||
const pos2 = getVertexPosition(edge.to, vertices);
|
||||
|
||||
return (
|
||||
<line
|
||||
key={index}
|
||||
x1={pos1.x}
|
||||
y1={pos1.y}
|
||||
x2={pos2.x}
|
||||
y2={pos2.y}
|
||||
stroke={edge.color || '#e2e8f0'}
|
||||
strokeWidth={edge.color ? 3 : 2}
|
||||
className="cursor-pointer hover:stroke-gray-400 transition-colors"
|
||||
onClick={() => handleEdgeClick(index)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Draw vertices */}
|
||||
{Array.from({ length: vertices }, (_, i) => {
|
||||
const pos = getVertexPosition(i, vertices);
|
||||
return (
|
||||
<g key={i}>
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="8"
|
||||
fill="hsl(var(--primary))"
|
||||
stroke="hsl(var(--background))"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y + 20}
|
||||
textAnchor="middle"
|
||||
className="text-sm font-medium fill-foreground"
|
||||
>
|
||||
{i + 1}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="text-center space-y-2 p-4 bg-muted rounded-lg">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Click on the lines between dots to color them with your color.
|
||||
</p>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
Avoid creating a triangle of your own color!
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GameOfSim;
|
||||
111
src/components/GamesGallery.tsx
Normal file
111
src/components/GamesGallery.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
import ComingSoon from "@/components/ComingSoon";
|
||||
import Layout from "@/components/Layout";
|
||||
import GamesGallery from "@/components/GamesGallery";
|
||||
|
||||
const Games = () => {
|
||||
return (
|
||||
<ComingSoon
|
||||
title="Educational Games"
|
||||
description="Learn through play with educational games that reinforce computer science and mathematical concepts. Interactive challenges that make learning engaging and memorable."
|
||||
/>
|
||||
<Layout>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<GamesGallery />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue