Blackjack with React + Hono

{message}

\n {result &&

{result}

}\n \n \n \n \n \n \n \n \n \n

Booze level increases your bet and risk-taking. Be careful!

\n \n View source\n \n

\n );\n};\n\nexport default App;",[],[251,257,263],{"_107":271,"_99":272,"_152":273,"_154":258,"_155":139,"_156":274,"_158":121,"_109":275,"_104":94,"_160":178,"_162":276,"_163":27,"_164":-5,"_165":277,"_102":278},"2aea58e0-0646-11f0-9dfc-569c3dd06744","BlackjackTable.tsx","1504c234-38ce-48f2-9d03-9a7a0fa3c6f2",20,["D",1742555888585],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface Card {\n suit: string;\n value: string;\n}\n\ninterface BlackjackTableProps {\n playerHand: Card[];\n dealerHand: Card[];\n playerScore: number;\n dealerScore: number;\n gameOver: boolean;\n loading: boolean;\n onStart: () => void;\n onHit: () => void;\n onStand: () => void;\n}\n\n// Helper function to get card color\nconst getCardColor = (suit: string): string => {\n return ['Hearts', 'Diamonds'].includes(suit) ? 'red' : 'black';\n};\n\n// Helper function to get suit symbol\nconst getSuitSymbol = (suit: string): string => {\n switch (suit) {\n case 'Hearts': return '♥';\n case 'Diamonds': return '♦';\n case 'Clubs': return '♣';\n case 'Spades': return '♠';\n default: return '';\n }\n};\n\n// Component to display a single card\nconst Card: React.FC<{ card: Card, hidden?: boolean }> = ({ card, hidden = false }) => {\n if (hidden) {\n return (\n

\n ?\n

\n );\n }\n\n const color = getCardColor(card.suit);\n const symbol = getSuitSymbol(card.suit);\n\n return (\n

\n {card.value}\n

\n {symbol}\n

\n {card.value}\n

\n );\n};\n\nconst BlackjackTable: React.FC = ({\n playerHand,\n dealerHand,\n playerScore,\n dealerScore,\n gameOver,\n loading,\n onStart,\n onHit,\n onStand,\n}) => {\n return (\n

Blackjack Table

\n \n

Dealer's Hand {gameOver && `(Score: ${dealerScore})`}

\n {dealerHand.length > 0 ? (\n

\n {dealerHand.map((card, index) => (\n

\n ) : (\n

No cards dealt yet

\n )}\n

\n\n

Your Hand (Score: {playerScore})

\n {playerHand.length > 0 ? (\n

\n {playerHand.map((card, index) => (\n \n ))}\n

\n ) : (\n

No cards dealt yet

\n )}\n

\n\n

\n \n \n \n \n \n

\n );\n};\n\nexport default BlackjackTable;",[],[251,257,272],{"_107":280,"_99":281,"_152":282,"_154":258,"_155":139,"_156":283,"_158":121,"_109":284,"_104":157,"_160":178,"_162":285,"_163":27,"_164":-5,"_165":286,"_102":287},"dad31ad6-0645-11f0-b22e-569c3dd06744","BoozeButton.tsx","96343ff7-cf69-44f7-ae0f-977cdfd1b3e4",18,["D",1742555754218],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface BoozeButtonProps {\n onBooze: () => void;\n disabled: boolean;\n}\n\nconst BoozeButton: React.FC = ({ onBooze, disabled }) => {\n return (\n

\n \n

\n Warning: Boozing may cause unexpected play decisions!\n

\n );\n};\n\nexport default BoozeButton;",[],[251,257,281],{"_107":289,"_99":290,"_152":291,"_154":258,"_155":139,"_156":292,"_158":121,"_109":293,"_104":157,"_160":178,"_162":294,"_163":27,"_164":-5,"_165":295,"_102":296},"7ae4785a-0586-11f0-a2b9-569c3dd06744","BoozeMeter.tsx","9c7126bc-76ca-471b-8604-3bca47553c96",10,["D",1742473559395],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface BoozeMeterProps {\n level: number;\n}\n\nconst BoozeMeter: React.FC = ({ level }) => {\n const meterWidth = Math.min(level * 10, 100);\n return (\n

Booze Meter

\n \n

Level: {level}

\n \n );\n};\n\nexport default BoozeMeter;",[],[251,257,290],{"_107":298,"_99":299,"_152":300,"_154":258,"_155":139,"_156":157,"_158":121,"_109":301,"_104":33,"_160":178,"_162":302,"_163":27,"_164":-5,"_165":303,"_102":304},"01176826-0585-11f0-b475-569c3dd06744","Scoreboard.tsx","e1ff416d-9ceb-46fb-8c5f-b5bcba3f5896",["D",1742472925516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface ScoreboardProps {\n bet: number;\n profit: number;\n bank: number;\n}\n\nconst Scoreboard: React.FC = ({ bet, profit, bank }) => {\n return (\n

Scoreboard

Bet: ${bet}

Profit: ${profit}

Bank: ${bank}

\n );\n};\n\nexport default Scoreboard;",[],[251,257,299],[251,257],{"_107":307,"_99":308,"_152":309,"_154":252,"_155":139,"_156":310,"_158":121,"_109":311,"_104":312,"_160":313,"_162":314,"_163":27,"_164":-5,"_165":315,"_102":316},"34bd5868-0646-11f0-9e21-569c3dd06744","index.html","4ea2d98a-0586-11f0-bbae-569c3dd06744",21,["D",1742555905068],3,"file","\n\n \n \n Blackjack with React + Hono\n \n \n \n \n

\n \n \n \n",[],[251,308],{"_107":318,"_99":319,"_152":320,"_154":252,"_155":139,"_156":157,"_158":121,"_109":321,"_104":33,"_160":178,"_162":322,"_163":27,"_164":-5,"_165":323,"_102":324},"01176cae-0585-11f0-b475-569c3dd06744","index.tsx","f62d2c17-3fb0-4482-9f4d-439a47e092e8",["D",1742472925516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nif (typeof document !== \"undefined\") {\n const root = document.getElementById(\"root\");\n if (!root) {\n throw new Error(\"No root element found\");\n }\n createRoot(root).render();\n}",[],[251,319],[251],{"_107":327,"_99":328,"_152":329,"_154":-5,"_155":139,"_156":138,"_158":121,"_109":330,"_104":331,"_160":313,"_162":70,"_163":27,"_164":-5,"_165":332,"_102":333},"a0e760a2-0744-11f0-a0f9-569c3dd06744","README.md","2b0ddb40-0587-11f0-9e73-569c3dd06744",["D",1742665178704],7,[],[328],{"_107":335,"_99":336,"_152":337,"_154":-5,"_155":139,"_156":338,"_158":121,"_109":339,"_104":33,"_160":178,"_162":340,"_163":27,"_164":-5,"_165":341,"_102":342},"0eff754c-064c-11f0-acdb-569c3dd06744","frontend.html","0eff7632-064c-11f0-acdb-569c3dd06744",24,["D",1742558418731],"\n\n\n \n \n Val Town Greeting Example\n \n \n\n\n

Val Town Greeting Example

\n \n

\n Enter your name:\n \n

\n \n \n \n

\n\n

\n \n View Source\n \n

\n\n \n\n",[],[336],{"_107":344,"_99":240,"_152":345,"_154":-5,"_155":139,"_156":346,"_158":121,"_109":347,"_104":33,"_160":178,"_162":348,"_163":27,"_164":-5,"_165":349,"_102":350},"063b99d6-064c-11f0-bd55-569c3dd06744","063b9a80-064c-11f0-bd55-569c3dd06744",23,["D",1742558404027],"import { Hono } from \"https://esm.sh/hono@3.12.3\";\nimport { serveStatic } from \"https://esm.sh/@hono/node-server@1.2.0/serve-static\";\nimport { serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\n\n// Define response type for our API\ntype GreetingResponse = {\n message: string;\n timestamp: string;\n user?: string;\n};\n\n// Create a new Hono app\nconst app = new Hono();\n\n// API endpoint that returns a greeting\napp.get(\"/api/greeting\", (c) => {\n try {\n const name = c.req.query(\"name\");\n \n const response: GreetingResponse = {\n message: name ? `Hello, ${name}!` : \"Hello, World!\",\n timestamp: new Date().toISOString(),\n };\n \n if (name) {\n response.user = name;\n }\n \n return c.json(response);\n } catch (error) {\n console.error(\"Error in greeting endpoint:\", error);\n return c.json({ error: \"Failed to process request\" }, 500);\n }\n});\n\n// Serve the frontend HTML file\napp.get(\"/\", (c) => serveFile(\"/frontend.html\", import.meta.url));\n\n// Add a view source link\napp.get(\"/source\", (c) => {\n const sourceUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n return c.redirect(sourceUrl);\n});\n\n// Export the app as the default handler\nexport default app.fetch;",[],[240],"files",[149,167,173,183,189,197,205,214,220,229,238,249,255,261,270,279,288,297,306,317,326,334,343],"counts",{"_355":33,"_356":94,"_357":33,"_358":33},"pulls","branches","forks","envVars","contents",[],{"_107":289,"_99":290,"_152":291,"_154":258,"_155":139,"_156":292,"_158":121,"_109":362,"_104":157,"_160":178,"_162":294,"_163":27,"_164":-5,"_102":363},["D",1742473559395],[251,257,290],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":369,"_147":373,"_351":443,"_313":444,"_359":446,"_364":-5,"_447":27,"_448":-5},{"_107":108,"_99":100,"_109":370,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":371,"_136":372},["D",1742472925516],{"_97":98,"_134":135},{"_104":138,"_99":43,"_107":139,"_140":108,"_141":-5,"_142":-5,"_143":144,"_145":146},[374,407,434,437,440],{"_107":150,"_99":151,"_152":153,"_154":-5,"_155":139,"_156":157,"_158":121,"_109":159,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":375,"_102":406},[376,382,394,400,403],{"_107":168,"_99":169,"_152":170,"_154":153,"_155":139,"_156":157,"_158":121,"_109":171,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":377,"_102":381},[378],{"_107":174,"_99":175,"_152":176,"_154":170,"_155":139,"_156":157,"_158":121,"_109":177,"_104":33,"_160":178,"_162":179,"_163":27,"_164":-5,"_165":379,"_102":380},[],[151,169,175],[151,169],{"_107":184,"_99":185,"_152":186,"_154":153,"_155":139,"_156":157,"_158":121,"_109":187,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":383,"_102":393},[384,387,390],{"_107":190,"_99":191,"_152":192,"_154":186,"_155":139,"_156":157,"_158":121,"_109":193,"_104":33,"_160":178,"_162":194,"_163":27,"_164":-5,"_165":385,"_102":386},[],[151,185,191],{"_107":198,"_99":199,"_152":200,"_154":186,"_155":139,"_156":157,"_158":121,"_109":201,"_104":33,"_160":178,"_162":202,"_163":27,"_164":-5,"_165":388,"_102":389},[],[151,185,199],{"_107":206,"_99":207,"_152":208,"_154":186,"_155":139,"_156":157,"_158":121,"_109":209,"_104":33,"_160":178,"_162":210,"_163":27,"_164":-5,"_165":391,"_102":392},[],[151,185,207],[151,185],{"_107":215,"_99":216,"_152":217,"_154":153,"_155":139,"_156":157,"_158":121,"_109":218,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":395,"_102":399},[396],{"_107":221,"_99":222,"_152":223,"_154":217,"_155":139,"_156":157,"_158":121,"_109":224,"_104":33,"_160":178,"_162":225,"_163":27,"_164":-5,"_165":397,"_102":398},[],[151,216,222],[151,216],{"_107":230,"_99":231,"_152":232,"_154":153,"_155":139,"_156":233,"_158":121,"_109":234,"_104":157,"_160":178,"_162":235,"_163":27,"_164":-5,"_165":401,"_102":402},[],[151,231],{"_107":239,"_99":240,"_152":119,"_154":153,"_155":139,"_156":241,"_158":121,"_109":242,"_104":243,"_160":244,"_162":245,"_163":27,"_164":-5,"_165":404,"_102":405},[],[151,240],[151],{"_107":250,"_99":251,"_152":252,"_154":-5,"_155":139,"_156":157,"_158":121,"_109":253,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":408,"_102":433},[409,427,430],{"_107":256,"_99":257,"_152":258,"_154":252,"_155":139,"_156":157,"_158":121,"_109":259,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":410,"_102":426},[411,414,417,420,423],{"_107":262,"_99":263,"_152":264,"_154":258,"_155":139,"_156":265,"_158":121,"_109":266,"_104":157,"_160":178,"_162":267,"_163":27,"_164":-5,"_165":412,"_102":413},[],[251,257,263],{"_107":271,"_99":272,"_152":273,"_154":258,"_155":139,"_156":274,"_158":121,"_109":275,"_104":94,"_160":178,"_162":276,"_163":27,"_164":-5,"_165":415,"_102":416},[],[251,257,272],{"_107":280,"_99":281,"_152":282,"_154":258,"_155":139,"_156":283,"_158":121,"_109":284,"_104":157,"_160":178,"_162":285,"_163":27,"_164":-5,"_165":418,"_102":419},[],[251,257,281],{"_107":289,"_99":290,"_152":291,"_154":258,"_155":139,"_156":292,"_158":121,"_109":293,"_104":157,"_160":178,"_162":294,"_163":27,"_164":-5,"_165":421,"_102":422},[],[251,257,290],{"_107":298,"_99":299,"_152":300,"_154":258,"_155":139,"_156":157,"_158":121,"_109":301,"_104":33,"_160":178,"_162":302,"_163":27,"_164":-5,"_165":424,"_102":425},[],[251,257,299],[251,257],{"_107":307,"_99":308,"_152":309,"_154":252,"_155":139,"_156":310,"_158":121,"_109":311,"_104":312,"_160":313,"_162":314,"_163":27,"_164":-5,"_165":428,"_102":429},[],[251,308],{"_107":318,"_99":319,"_152":320,"_154":252,"_155":139,"_156":157,"_158":121,"_109":321,"_104":33,"_160":178,"_162":322,"_163":27,"_164":-5,"_165":431,"_102":432},[],[251,319],[251],{"_107":327,"_99":328,"_152":329,"_154":-5,"_155":139,"_156":138,"_158":121,"_109":330,"_104":331,"_160":313,"_162":70,"_163":27,"_164":-5,"_165":435,"_102":436},[],[328],{"_107":335,"_99":336,"_152":337,"_154":-5,"_155":139,"_156":338,"_158":121,"_109":339,"_104":33,"_160":178,"_162":340,"_163":27,"_164":-5,"_165":438,"_102":439},[],[336],{"_107":344,"_99":240,"_152":345,"_154":-5,"_155":139,"_156":346,"_158":121,"_109":347,"_104":33,"_160":178,"_162":348,"_163":27,"_164":-5,"_165":441,"_102":442},[],[240],[374,376,378,382,384,387,390,394,396,400,403,407,409,411,414,417,420,423,427,430,434,437,440],{"_107":289,"_99":290,"_152":291,"_154":258,"_155":139,"_156":292,"_158":121,"_109":362,"_104":157,"_160":178,"_162":294,"_163":27,"_164":-5,"_102":445},[251,257,290],[],"showCompareCallout","pull","routes/_app","actionData","errors"]