import React, { useState, useEffect } from 'react'; import Card from 'Card'; import { shuffleCards } from 'utils'; import { levelData } from 'animalData'; const Game = () => { const [cards, setCards] = useState([]); const [flipped, setFlipped] = useState([]); const [solved, setSolved] = useState([]); const [moves, setMoves] = useState(0); const [disabled, setDisabled] = useState(false); const [currentLevel, setCurrentLevel] = useState(1); const [showLevelSelect, setShowLevelSelect] = useState(false); const [highScores, setHighScores] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); // Initialize game useEffect(() => { startGame(currentLevel); }, [currentLevel]); const startGame = (level) => { const levelIndex = level - 1; setCards(shuffleCards(levelData[levelIndex].cards)); setFlipped([]); setSolved([]); setMoves(0); }; // Handle card click const handleClick = (id) => { // Don't allow clicks when two cards are flipped or card is already flipped/solved if (disabled || flipped.includes(id) || solved.includes(id)) return; // Add card to flipped array const newFlipped = [...flipped, id]; setFlipped(newFlipped); // If two cards flipped, check for match if (newFlipped.length === 2) { setDisabled(true); setMoves(prev => prev + 1); const [first, second] = newFlipped; const firstCard = cards.find(card => card.id === first); const secondCard = cards.find(card => card.id === second); if (firstCard.type === secondCard.type) { // Match found setSolved(prev => [...prev, first, second]); setFlipped([]); setDisabled(false); } else { // No match, flip back after delay setTimeout(() => { setFlipped([]); setDisabled(false); }, 1000); } } }; // Win condition check const isWon = solved.length === cards.length && cards.length > 0; // Update high score when winning useEffect(() => { if (isWon && moves > 0) { const currentHighScore = highScores[currentLevel - 1]; if (currentHighScore === 0 || moves < currentHighScore) { const newHighScores = [...highScores]; newHighScores[currentLevel - 1] = moves; setHighScores(newHighScores); } } }, [isWon, moves, currentLevel, highScores]); const handleLevelChange = (level) => { setCurrentLevel(level); setShowLevelSelect(false); }; const difficultyLabels = ["Very Easy", "Easy", "Medium", "Hard", "Expert", "Master", "Champion", "Legend", "Hero", "Ultimate"]; return (

Moves: {moves}

Level: {currentLevel} - {difficultyLabels[currentLevel-1]}

{showLevelSelect && (

Select Level:

{levelData.map((level, index) => ( ))}

)} {isWon ? (

You Won! 🎉

You completed level {currentLevel} in {moves} moves!

{currentLevel < 10 ? ( ) : (

You've completed all levels! You are the Ultimate Animal Matching Champion!

)}

) : null}

7 ? '80px' : currentLevel > 5 ? '90px' : '100px'}, 1fr))`, gap: `${currentLevel > 7 ? '8px' : '10px'}`, marginTop: '10px' }}> {cards.map(card => ( handleClick(card.id)} /> ))}

{/* Progress tracker */}

Your Progress

{highScores.map((score, index) => (

Level {index + 1}

0 ? '#4CAF50' : '#999' }}> {score > 0 ? score : '-'}

))}

); }; export default Game;