Upload components/GameBoard.jsx with huggingface_hub

components/GameBoard.jsx

@@ -0,0 +1,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;