Spaces:
Sleeping
Sleeping
| import { useState, useEffect } from 'react'; | |
| import Card from './Card'; | |
| const GameBoard = () => { | |
| const emojis = ['🎮', '🎲', '🎯', '🎨', '🎭', '🎪', '🎸', '🎺']; | |
| const [cards, setCards] = useState([]); | |
| const [selectedCards, setSelectedCards] = useState([]); | |
| const [matchedPairs, setMatchedPairs] = useState(0); | |
| const [moves, setMoves] = useState(0); | |
| const [isChecking, setIsChecking] = useState(false); | |
| const [gameWon, setGameWon] = useState(false); | |
| const initializeGame = () => { | |
| const gameCards = [...emojis, ...emojis] | |
| .sort(() => Math.random() - 0.5) | |
| .map((emoji, index) => ({ id: index, emoji, isFlipped: false, isMatched: false })); | |
| setCards(gameCards); | |
| setSelectedCards([]); | |
| setMatchedPairs(0); | |
| setMoves(0); | |
| setGameWon(false); | |
| setIsChecking(false); | |
| }; | |
| useEffect(() => { | |
| initializeGame(); | |
| }, []); | |
| useEffect(() => { | |
| if (selectedCards.length === 2) { | |
| setIsChecking(true); | |
| setMoves(moves + 1); | |
| const [first, second] = selectedCards; | |
| if (first.emoji === second.emoji) { | |
| setTimeout(() => { | |
| setCards(cards.map(card => | |
| card.id === first.id || card.id === second.id | |
| ? { ...card, isMatched: true } | |
| : card | |
| )); | |
| setMatchedPairs(matchedPairs + 1); | |
| setSelectedCards([]); | |
| setIsChecking(false); | |
| }, 600); | |
| } else { | |
| setTimeout(() => { | |
| setCards(cards.map(card => | |
| card.id === first.id || card.id === second.id | |
| ? { ...card, isFlipped: false } | |
| : card | |
| )); | |
| setSelectedCards([]); | |
| setIsChecking(false); | |
| }, 1000); | |
| } | |
| } | |
| }, [selectedCards]); | |
| useEffect(() => { | |
| if (matchedPairs === emojis.length && emojis.length > 0) { | |
| setGameWon(true); | |
| } | |
| }, [matchedPairs]); | |
| const handleCardClick = (clickedCard) => { | |
| if (isChecking || clickedCard.isFlipped || clickedCard.isMatched) return; | |
| setCards(cards.map(card => | |
| card.id === clickedCard.id | |
| ? { ...card, isFlipped: true } | |
| : card | |
| )); | |
| setSelectedCards([...selectedCards, clickedCard]); | |
| }; | |
| return ( | |
| <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-100 to-purple-100 p-4"> | |
| <div className="text-center mb-8"> | |
| <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Memory Game</h1> | |
| <p className="text-lg text-gray-600">Match the pairs to win!</p> | |
| </div> | |
| <div className="bg-white rounded-xl shadow-xl p-6 mb-6"> | |
| <div className="flex justify-between items-center mb-4"> | |
| <div className="text-lg font-semibold text-gray-700"> | |
| Moves: <span className="text-blue-600">{moves}</span> | |
| </div> | |
| <div className="text-lg font-semibold text-gray-700"> | |
| Pairs: <span className="text-green-600">{matchedPairs}/{emojis.length}</span> | |
| </div> | |
| </div> | |
| <div className="grid grid-cols-4 gap-3 md:gap-4"> | |
| {cards.map((card) => ( | |
| <Card | |
| key={card.id} | |
| card={card} | |
| onClick={() => handleCardClick(card)} | |
| isFlipped={card.isFlipped} | |
| isMatched={card.isMatched} | |
| /> | |
| ))} | |
| </div> | |
| </div> | |
| <button | |
| onClick={initializeGame} | |
| className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:from-blue-600 hover:to-purple-700 transform hover:scale-105 transition-all duration-200" | |
| > | |
| New Game | |
| </button> | |
| {gameWon && ( | |
| <div className="mt-6 p-4 bg-green-100 border-2 border-green-400 rounded-lg"> | |
| <p className="text-xl font-bold text-green-800">Congratulations! You won in {moves} moves!</p> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| }; | |
| export default GameBoard; |