function MainComponent() { const [playerHands, setPlayerHands] = React.useState([ [], [], [] ]); const [dealerCards, setDealerCards] = React.useState([]); const [playerScores, setPlayerScores] = React.useState([ 0, 0, 0 ]); const [dealerScore, setDealerScore] = React.useState(0); const [activePlayer, setActivePlayer] = React.useState(0); const [gameStatus, setGameStatus] = React.useState('new'); const hit = ()=>{ if (gameStatus !== 'active' || activePlayer === 0) return; const newCard = Math.ceil(Math.random() * 10); const newHands = [ ...playerHands ]; const scores = [ ...playerScores ]; newHands[activePlayer].push(newCard); scores[activePlayer] += newCard; if (scores[activePlayer] > 21) { setGameStatus('busted'); } setPlayerHands(newHands); setPlayerScores(scores); }; const stand = ()=>{ if (activePlayer === playerHands.length - 1) { setGameStatus('dealer'); dealerTurn(); } else { const nextPlayer = activePlayer + 1; setActivePlayer(nextPlayer); } }; const dealerTurn = ()=>{ while(dealerScore < 17){ const newCard = Math.ceil(Math.random() * 10); setDealerCards((prevCards)=>[ ...prevCards, newCard ]); setDealerScore((prevScore)=>prevScore + newCard); } if (dealerScore > 21) { setGameStatus('dealerBusted'); } else { setGameStatus('result'); } }; const startGame = ()=>{ setDealerCards([ Math.ceil(Math.random() * 10), Math.ceil(Math.random() * 10) ]); setPlayerHands(playerHands.map(()=>[ Math.ceil(Math.random() * 10), Math.ceil(Math.random() * 10) ])); setPlayerScores(playerScores.map((_, index)=>playerHands[index].reduce((acc, card)=>acc + card, 0))); setDealerScore(dealerCards.reduce((acc, card)=>acc + card, 0)); setGameStatus('active'); setActivePlayer(1); }; let buttonText = 'Start Game'; let buttonAction = startGame; if (gameStatus === 'active') { buttonText = 'Hit'; buttonAction = hit; } else if (gameStatus === 'busted' || gameStatus === 'dealerBusted' || gameStatus === 'result') { buttonText = 'Play Again'; buttonAction = startGame; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Blackjack Game"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl px-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Dealer's Hand"), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, dealerCards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: `dealer-card-${index}`, className: "w-[100px] h-[150px] flex items-center justify-center bg-white text-black m-1", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, card))), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Score: ", dealerScore)), playerHands.map((hand, index)=>/*#__PURE__*/ React.createElement("div", { key: `player-${index}`, className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, `Player ${index + 1}'s Hand`), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, hand.map((card, cardIndex)=>/*#__PURE__*/ React.createElement("div", { key: `player-${index}-card-${cardIndex}`, className: "w-[100px] h-[150px] flex items-center justify-center bg-white text-black m-1", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, card))), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Score: ", playerScores[index]))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#10b981] text-white font-semibold py-2 px-4 rounded", onClick: buttonAction, name: "action-button", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, buttonText), gameStatus === 'active' && /*#__PURE__*/ React.createElement("button", { className: "bg-[#dc2626] text-white font-semibold py-2 px-4 rounded ml-4", onClick: stand, name: "stand", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Stand")), /*#__PURE__*/ React.createElement("p", { className: "mt-8", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, "Status: ", gameStatus === 'new' ? 'Game not started' : gameStatus === 'active' ? `Player ${activePlayer + 1}'s turn` : gameStatus)); }

Blackjack Game

Dealer's Hand

Player 1's Hand

Player 2's Hand

Player 3's Hand

Blackjack Game

Dealer's Hand

Player 1's Hand

Player 2's Hand

Player 3's Hand