8917e1a66f
Add a new interactive game where users place pebbles on an integer line from 1 to 35. The rules are: - A pebble can only be placed on position `i` if position `i-1` has a pebble. - Position 1 can always have a pebble placed on it. - Users start with `n` pebbles (chosen via a slider from 2 to 5). - The goal is to find the largest integer position for which a pebble can be placed.
114 lines
No EOL
5 KiB
TypeScript
114 lines
No EOL
5 KiB
TypeScript
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 Layout from '@/components/Layout';
|
||
import BinarySearchTrick from '@/components/BinarySearchTrick';
|
||
import TernarySearchTrick from '@/components/TernarySearchTrick';
|
||
import GuessingGame from '@/components/GuessingGame';
|
||
import PebblePlacementGame from '@/components/PebblePlacementGame';
|
||
|
||
interface Interactive {
|
||
id: string;
|
||
title: string;
|
||
description: string;
|
||
tags: string[];
|
||
component: React.ComponentType<{ showSocialShare?: boolean }>;
|
||
}
|
||
|
||
const interactives: Interactive[] = [
|
||
{
|
||
id: 'guessing-game',
|
||
title: 'Number Guessing Game',
|
||
description: 'Experience different search algorithms through interactive gameplay. Compare random, linear, and binary search strategies!',
|
||
tags: ['algorithms', 'search', 'educational', 'interactive', 'binary-search', 'computer-science'],
|
||
component: GuessingGame
|
||
},
|
||
{
|
||
id: 'binary-search-trick',
|
||
title: 'Binary Search Magic Trick',
|
||
description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
|
||
tags: ['binary', 'magic', 'numbers', 'trick', 'data-structures'],
|
||
component: BinarySearchTrick
|
||
},
|
||
{
|
||
id: 'ternary-search-trick',
|
||
title: 'Ternary Search Magic Trick',
|
||
description: 'Experience the magic of ternary search! Think of a number and watch as the cards reveal it through mathematical calculations.',
|
||
tags: ['ternary', 'magic', 'numbers', 'trick', 'data-structures', 'search'],
|
||
component: TernarySearchTrick
|
||
},
|
||
{
|
||
id: 'pebble-placement-game',
|
||
title: 'Pebble Placement Strategy Game',
|
||
description: 'Test your strategic thinking! Place pebbles following specific rules to reach the furthest position possible.',
|
||
tags: ['strategy', 'logic', 'game', 'placement', 'optimization', 'puzzle'],
|
||
component: PebblePlacementGame
|
||
},
|
||
];
|
||
const InteractiveGallery = () => {
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null);
|
||
const filteredInteractives = interactives.filter(interactive => interactive.title.toLowerCase().includes(searchTerm.toLowerCase()) || interactive.description.toLowerCase().includes(searchTerm.toLowerCase()) || interactive.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())));
|
||
if (selectedInteractive) {
|
||
const InteractiveComponent = selectedInteractive.component;
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<div className="container mx-auto px-4 py-8 space-y-6">
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={() => setSelectedInteractive(null)}
|
||
className="text-primary hover:text-primary/80 font-medium"
|
||
>
|
||
← Back to Data Structures and Algorithms
|
||
</button>
|
||
</div>
|
||
<InteractiveComponent showSocialShare={true} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<Layout>
|
||
<div className="max-w-7xl mx-auto p-6">
|
||
<div className="space-y-6">
|
||
<div className="space-y-4">
|
||
<h1 className="text-3xl font-bold text-foreground">Data Structures and Algorithms</h1>
|
||
<p className="text-muted-foreground text-lg">Interactive explorations of elementary data structures and algorithms.</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 interactives..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
|
||
</div>
|
||
|
||
{/* Gallery */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredInteractives.map(interactive => <Card key={interactive.id} className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105" onClick={() => setSelectedInteractive(interactive)}>
|
||
<CardHeader className="space-y-3">
|
||
<CardTitle className="text-xl text-foreground">{interactive.title}</CardTitle>
|
||
<CardDescription className="text-muted-foreground line-clamp-3">
|
||
{interactive.description}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap gap-2">
|
||
{interactive.tags.map(tag => <Badge key={tag} variant="secondary" className="text-xs">
|
||
{tag}
|
||
</Badge>)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>)}
|
||
</div>
|
||
|
||
{filteredInteractives.length === 0 && <div className="text-center py-12">
|
||
<p className="text-muted-foreground text-lg">No interactives found matching your search.</p>
|
||
</div>}
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
export default InteractiveGallery; |