function MainComponent() { const suits = [ 'H', 'D', 'C', 'S' ]; const values = [ '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A' ]; const initialState = { playerHand: [], dealerHand: [], deck: [], playerTurn: true, gameOver: false, playerScore: 0, dealerScore: 0 }; const [state, dispatch] = React.useReducer(reducer, initialState); function reducer(state, action) { switch(action.type){ case 'SET_DECK': return { ...state, deck: action.deck }; case 'START_GAME': return { ...state, playerHand: [ action.playerCard1, action.playerCard2 ], dealerHand: [ action.dealerCard ], playerScore: calculateHandValue([ action.playerCard1, action.playerCard2 ]), dealerScore: calculateHandValue([ action.dealerCard ]), playerTurn: true }; case 'HIT': const newPlayerHand = [ ...state.playerHand, action.card ]; return { ...state, playerHand: newPlayerHand, playerScore: calculateHandValue(newPlayerHand), playerTurn: state.playerTurn }; case 'STAND': return { ...state, playerTurn: false }; case 'DEALER_HIT': const newDealerHand = [ ...state.dealerHand, action.card ]; return { ...state, dealerHand: newDealerHand, dealerScore: calculateHandValue(newDealerHand) }; case 'END_GAME': return { ...state, gameOver: true }; default: return state; } } function initializeDeck() { let newDeck = []; for (let suit of suits){ for (let value of values){ newDeck.push({ suit, value }); } } newDeck = newDeck.sort(()=>Math.random() - 0.5); dispatch({ type: 'SET_DECK', deck: newDeck }); startGame(newDeck); } function startGame(deck) { if (deck.length < 4) return; dispatch({ type: 'START_GAME', playerCard1: deck.pop(), playerCard2: deck.pop(), dealerCard: deck.pop() }); } function calculateHandValue(hand) { let value = 0; let aceCount = 0; for (let card of hand){ if (card.value === 'A') { aceCount += 1; value += 11; } else if ([ 'J', 'Q', 'K' ].includes(card.value)) { value += 10; } else { value += parseInt(card.value); } } while(value > 21 && aceCount > 0){ value -= 10; aceCount -= 1; } return value; } function hit() { if (!state.gameOver && state.playerTurn) { const card = state.deck.pop(); dispatch({ type: 'HIT', card }); const playerValue = calculateHandValue([ ...state.playerHand, card ]); if (playerValue > 21) { endGame(); } } } function stand() { if (!state.gameOver) { dispatch({ type: 'STAND' }); dealerPlay(); } } function dealerPlay() { let deck = state.deck; let dealerHand = state.dealerHand; let dealerValue = calculateHandValue(dealerHand); while(dealerValue < 17){ const card = deck.pop(); dealerHand.push(card); dealerValue = calculateHandValue(dealerHand); dispatch({ type: 'DEALER_HIT', card }); } endGame(); } function endGame() { dispatch({ type: 'END_GAME' }); } function cardLabel({ suit, value }) { const suitSymbol = { H: '♥️', D: '♦️', C: '♣️', S: '♠️' }; const suitColor = [ 'H', 'D' ].includes(suit) ? 'text-[#e63946]' : 'text-[#1d3557]'; return /*#__PURE__*/ React.createElement("div", { className: `rounded-lg border-2 p-3 flex flex-col justify-center items-center ${suitColor} bg-white card-shadow`, __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, value), /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, suitSymbol[suit]), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-semibold w-full text-left", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, calculateHandValue([ { suit, value } ]))); } React.useEffect(()=>{ initializeDeck(); }, []); const renderedDealerHand = state.dealerHand.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "card m-1", style: { animationDelay: `${index * 0.2}s` }, __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, cardLabel(card))); const renderedPlayerHand = state.playerHand.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "card m-1", style: { animationDelay: `${index * 0.2}s` }, __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, cardLabel(card))); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#0a043c] text-white", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-6xl font-crimson-text text-shadow", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, "Blackjack"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-10 mb-10", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffdd00] text-[#03071e] py-3 px-6 rounded-xl text-xl font-semibold tracking-wider shadow-lg transition-colors hover:bg-[#f77f00]", onClick: hit, __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, "Hit"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffdd00] text-[#03071e] py-3 px-6 rounded-xl text-xl font-semibold tracking-wider shadow-lg transition-colors hover:bg-[#f77f00]", onClick: stand, __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, "Stand")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-5xl px-4 pb-10", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-16", __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4 font-crimson-text text-shadow", __source: { fileName: "", lineNumber: 197, columnNumber: 25 }, __self: this }, "Dealer's Hand (", state.dealerScore, ")"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2", __source: { fileName: "", lineNumber: 198, columnNumber: 25 }, __self: this }, renderedDealerHand)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4 font-crimson-text text-shadow", __source: { fileName: "", lineNumber: 201, columnNumber: 25 }, __self: this }, "Your Hand (", state.playerScore, ")"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2", __source: { fileName: "", lineNumber: 202, columnNumber: 25 }, __self: this }, renderedPlayerHand)), state.gameOver && /*#__PURE__*/ React.createElement("div", { className: "mt-12 px-6 py-3 rounded bg-[#6a040f] text-xl font-bold text-center text-shadow", __source: { fileName: "", lineNumber: 205, columnNumber: 25 }, __self: this }, "Game Over"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card-shadow { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .text-shadow { text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); } .card { animation: fadeIn 0.5s ease-in-out forwards; } `)); }

Blackjack

Dealer's Hand (0)

Your Hand (0)