function MainComponent() { const [dealersHand, setDealersHand] = React.useState([]); const [playersHand, setPlayersHand] = React.useState([]); const [deck, setDeck] = React.useState([]); const [dealersTurn, setDealersTurn] = React.useState(false); const [gameOver, setGameOver] = React.useState(false); const [result, setResult] = React.useState(''); const [chips, setChips] = React.useState(50000); const [bet, setBet] = React.useState(0); React.useEffect(()=>{ initializeGame(); }, []); function initializeGame() { const newDeck = generateDeck(); setDeck(newDeck); dealCards(newDeck); setGameOver(false); setResult(''); setDealersTurn(false); setBet(0); } function generateDeck() { const suits = [ '♠', '♥', '♦', '♣' ]; const values = [ '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A' ]; let deck = []; for (let suit of suits){ for (let value of values){ deck.push({ suit, value }); } } return shuffleDeck(deck); } function shuffleDeck(deck) { let currentIndex = deck.length, randomIndex; while(currentIndex !== 0){ randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [deck[currentIndex], deck[randomIndex]] = [ deck[randomIndex], deck[currentIndex] ]; } return deck; } function dealCards(deck) { if (bet === 0) setBet(500); // Default bet when game starts setDeck(deck.slice(4)); setPlayersHand([ deck[0], deck[1] ]); setDealersHand([ deck[2], deck[3] ]); } function hit() { if (deck.length > 0 && !gameOver && bet <= chips) { const newHand = [ ...playersHand, deck[0] ]; setPlayersHand(newHand); setDeck(deck.slice(1)); if (calculateScore(newHand) > 21) { endGame("You Lost"); } } } function stand() { setDealersTurn(true); } React.useEffect(()=>{ if (dealersTurn && !gameOver) { let timerId = setTimeout(()=>{ const dealerScore = calculateScore(dealersHand); if (dealerScore < 17) { setDealersHand((currentHand)=>[ ...currentHand, deck[0] ]); setDeck(deck.slice(1)); } else { endGame(dealerScore > 21 || dealerScore < calculateScore(playersHand) ? "You Won" : "You Lost"); } }, 1000); return ()=>clearTimeout(timerId); } }, [ dealersHand, dealersTurn, gameOver ]); function endGame(message) { setGameOver(true); setResult(message); setDealersTurn(false); if (message === "You Won") { setChips(chips + bet); } else { setChips(chips - bet); } } function calculateScore(hand) { let score = 0; let aceCount = 0; hand.forEach((card)=>{ if ('JQK'.includes(card.value)) { score += 10; } else if (card.value === 'A') { score += 11; aceCount += 1; } else { score += parseInt(card.value); } }); while(score > 21 && aceCount > 0){ score -= 10; aceCount -= 1; } return score; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto text-4xl mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, "AI Blackjack Game"), /*#__PURE__*/ React.createElement("h2", { className: "text-white font-roboto text-xl mb-8", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, "Chips: ", chips), /*#__PURE__*/ React.createElement("input", { type: "number", name: "bet", value: bet, onChange: (e)=>setBet(Math.min(parseInt(e.target.value, 10), chips)), className: "mb-4 px-2 py-1 w-32", disabled: gameOver === false, __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row justify-between items-center mb-10", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-white text-2xl", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, "Dealer's Hand"), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, dealersHand.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[100px] h-[140px] bg-[#ffffff] mr-2 flex items-center justify-center", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, card.value, card.suit))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-white text-2xl", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, "Your Hand"), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, playersHand.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[100px] h-[140px] bg-[#ffffff] mr-2 flex items-center justify-center", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, card.value, card.suit)))))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, !gameOver && /*#__PURE__*/ React.createElement("button", { onClick: hit, className: "bg-[#ffffff] text-[#121212] font-roboto text-xl px-8 py-2 mr-4", __source: { fileName: "", lineNumber: 143, columnNumber: 23 }, __self: this }, "Hit"), !gameOver && /*#__PURE__*/ React.createElement("button", { onClick: stand, className: "bg-[#ffffff] text-[#121212] font-roboto text-xl px-8 py-2", __source: { fileName: "", lineNumber: 144, columnNumber: 23 }, __self: this }, "Stand")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, gameOver && /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto text-2xl", __source: { fileName: "", lineNumber: 147, columnNumber: 22 }, __self: this }, result), gameOver && /*#__PURE__*/ React.createElement("button", { onClick: initializeGame, className: "bg-[#ffffff] text-[#121212] font-roboto text-xl px-8 py-2 mt-4", __source: { fileName: "", lineNumber: 148, columnNumber: 22 }, __self: this }, "Restart"))); }

AI Blackjack Game

Chips: 50000

Dealer's Hand

Your Hand