Spaces:
Sleeping
Sleeping
File size: 4,012 Bytes
d4fc579 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 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; |