import { useState, useEffect } from 'react'; import { Button } from "/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card"; import { Trash } from "lucide-react"; type WasteStation = { id: number; name: string; }; type Recyclable = { id: number; name: string; correctStationId: number; }; const wasteStations: WasteStation[] = [ { id: 1, name: 'Paper' }, { id: 2, name: 'Plastic' }, { id: 3, name: 'Glass' }, { id: 4, name: 'Metal' }, { id: 5, name: 'Organic' }, { id: 6, name: 'Electronic' }, { id: 7, name: 'Textile' }, { id: 8, name: 'Hazardous' }, ]; const recyclables: Recyclable[] = [ { id: 1, name: 'Newspaper', correctStationId: 1 }, { id: 2, name: 'Plastic Bottle', correctStationId: 2 }, { id: 3, name: 'Glass Jar', correctStationId: 3 }, { id: 4, name: 'Aluminum Can', correctStationId: 4 }, { id: 5, name: 'Food Waste', correctStationId: 5 }, { id: 6, name: 'Old Phone', correctStationId: 6 }, { id: 7, name: 'T-Shirt', correctStationId: 7 }, { id: 8, name: 'Battery', correctStationId: 8 }, { id: 9, name: 'Cardboard Box', correctStationId: 1 }, { id: 10, name: 'Soda Can', correctStationId: 4 }, { id: 11, name: 'Wine Bottle', correctStationId: 3 }, { id: 12, name: 'Newspaper', correctStationId: 1 }, { id: 13, name: 'Yogurt Container', correctStationId: 2 }, { id: 14, name: 'Old Computer', correctStationId: 6 }, { id: 15, name: 'Jeans', correctStationId: 7 }, { id: 16, name: 'Light Bulb', correctStationId: 8 }, ]; const getRandomRecyclables = (): Recyclable[] => { const shuffled = recyclables.sort(() => 0.5 - Math.random()); return shuffled.slice(0, 8); }; export default function NundigoGame() { const [currentRecyclables, setCurrentRecyclables] = useState(getRandomRecyclables()); const [timeLeft, setTimeLeft] = useState(120); const [gameOver, setGameOver] = useState(false); const [score, setScore] = useState(0); const [draggedItem, setDraggedItem] = useState(null); useEffect(() => { const timer = setInterval(() => { if (timeLeft > 0 && !gameOver) { setTimeLeft(timeLeft - 1); } else { setGameOver(true); clearInterval(timer); } }, 1000); return () => clearInterval(timer); }, [timeLeft, gameOver]); const handleDragStart = (recyclable: Recyclable) => { setDraggedItem(recyclable); }; const handleDragOver = (event: React.DragEvent) => { event.preventDefault(); }; const handleDrop = (station: WasteStation) => { if (draggedItem && draggedItem.correctStationId === station.id) { setScore(score + 1); } setCurrentRecyclables(currentRecyclables.filter(recyclable => recyclable.id !== draggedItem?.id)); setDraggedItem(null); }; const handlePlayAgain = () => { setCurrentRecyclables(getRandomRecyclables()); setTimeLeft(120); setGameOver(false); setScore(0); }; return ( NUNDIGO Recycling Game

Time Left: {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}

Score: {score}

{wasteStations.map(station => (

handleDrop(station)} className="bg-gray-100 p-4 rounded-lg text-center" >

{station.name}

))}

{currentRecyclables.map(recyclable => (

handleDragStart(recyclable)} className="bg-white p-4 rounded-lg border border-gray-200 text-center" > {recyclable.name}

))}

{gameOver && (

Game Over! Your final score is {score} out of {currentRecyclables.length + score}.

)} ); }