إنشاء لعبة كارد

import React, { useState, useEffect } from 'react';
import './App.css';

const suits = ['hearts', 'diamonds', 'clubs', 'spades'];
const ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

const App = () => {
  const [deck, setDeck] = useState([]);
  const [playerHand, setPlayerHand] = useState([]);
  const [dealerHand, setDealerHand] = useState([]);
  const [gameStarted, setGameStarted] = useState(false);

  useEffect(() => {
    initializeDeck();
  }, []);

  const initializeDeck = () => {
    const newDeck = [];
    for (let suit of suits) {
      for (let rank of ranks) {
        newDeck.push({ suit, rank });
      }
    }
    setDeck(shuffle(newDeck));
  };

  const shuffle = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  };

  const startGame = () => {
    setPlayerHand([deck.pop(), deck.pop()]);
    setDealerHand([deck.pop(), deck.pop()]);
    setGameStarted(true);
  };

  const hit = () => {
    setPlayerHand([...playerHand, deck.pop()]);
  };

  const stand = () => {
    // Dealer's turn logic here
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-green-800 text-white">
      <h1 className="text-4xl mb-8">Card Game</h1>
      {!gameStarted ? (
        <button onClick={startGame} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Start Game
        </button>
      ) : (
        <div>
          <div className="mb-8">
            <h2 className="text-2xl">Your Hand</h2>
            <div className="flex">
              {playerHand.map((card, index) => (
                <div key={index} className="m-2 p-4 border rounded">
                  {card.rank} of {card.suit}
                </div>
              ))}
            </div>
          </div>
          <div className="mb-8">
            <h2 className="text-2xl">Dealer's Hand</h2>
            <div className="flex">
              {dealerHand.map((card, index) => (
                <div key={index} className="m-2 p-4 border rounded">
                  {card.rank} of {card.suit}
                </div>
              ))}
            </div>
          </div>
          <div>
            <button onClick={hit} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">
              Hit
            </button>
            <button onClick={stand} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
              Stand
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;