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;",[],[257,263,269],{"_102":277,"_95":278,"_158":279,"_160":264,"_161":138,"_162":280,"_164":116,"_104":281,"_99":282,"_166":184,"_168":283,"_169":22,"_170":-5,"_171":284,"_98":285},"2aea58e0-0646-11f0-9dfc-569c3dd06744","BlackjackTable.tsx","1504c234-38ce-48f2-9d03-9a7a0fa3c6f2",20,["D",1742555888585],2,"/** @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;",[],[257,263,278],{"_102":287,"_95":288,"_158":289,"_160":264,"_161":138,"_162":290,"_164":116,"_104":291,"_99":163,"_166":184,"_168":292,"_169":22,"_170":-5,"_171":293,"_98":294},"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;",[],[257,263,288],{"_102":296,"_95":297,"_158":298,"_160":264,"_161":138,"_162":299,"_164":116,"_104":300,"_99":163,"_166":184,"_168":301,"_169":22,"_170":-5,"_171":302,"_98":303},"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;",[],[257,263,297],{"_102":305,"_95":306,"_158":307,"_160":264,"_161":138,"_162":163,"_164":116,"_104":308,"_99":32,"_166":184,"_168":309,"_169":22,"_170":-5,"_171":310,"_98":311},"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;",[],[257,263,306],[257,263],{"_102":314,"_95":315,"_158":316,"_160":258,"_161":138,"_162":317,"_164":116,"_104":318,"_99":319,"_166":320,"_168":321,"_169":22,"_170":-5,"_171":322,"_98":323},"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",[],[257,315],{"_102":325,"_95":326,"_158":327,"_160":258,"_161":138,"_162":163,"_164":116,"_104":328,"_99":32,"_166":184,"_168":329,"_169":22,"_170":-5,"_171":330,"_98":331},"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}",[],[257,326],[257],{"_102":334,"_95":335,"_158":336,"_160":-5,"_161":138,"_162":137,"_164":116,"_104":337,"_99":338,"_166":320,"_168":72,"_169":22,"_170":-5,"_171":339,"_98":340},"a0e760a2-0744-11f0-a0f9-569c3dd06744","README.md","2b0ddb40-0587-11f0-9e73-569c3dd06744",["D",1742665178704],7,[],[335],{"_102":342,"_95":343,"_158":344,"_160":-5,"_161":138,"_162":345,"_164":116,"_104":346,"_99":32,"_166":184,"_168":347,"_169":22,"_170":-5,"_171":348,"_98":349},"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",[],[343],{"_102":351,"_95":246,"_158":352,"_160":-5,"_161":138,"_162":353,"_164":116,"_104":354,"_99":32,"_166":184,"_168":355,"_169":22,"_170":-5,"_171":356,"_98":357},"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;",[],[246],"files",[155,173,179,189,195,203,211,220,226,235,244,255,261,267,276,286,295,304,313,324,333,341,350],"counts",{"_362":32,"_363":282,"_364":32,"_365":32},"pulls","branches","forks","envVars","contents",[368,371,374,377,380],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":138,"_162":163,"_164":116,"_104":369,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":370},["D",1742472925516],[157],{"_102":256,"_95":257,"_158":258,"_160":-5,"_161":138,"_162":163,"_164":116,"_104":372,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":373},["D",1742472925516],[257],{"_102":334,"_95":335,"_158":336,"_160":-5,"_161":138,"_162":137,"_164":116,"_104":375,"_99":338,"_166":320,"_168":72,"_169":22,"_170":-5,"_98":376},["D",1742665178704],[335],{"_102":342,"_95":343,"_158":344,"_160":-5,"_161":138,"_162":345,"_164":116,"_104":378,"_99":32,"_166":184,"_168":347,"_169":22,"_170":-5,"_98":379},["D",1742558418731],[343],{"_102":351,"_95":246,"_158":352,"_160":-5,"_161":138,"_162":353,"_164":116,"_104":381,"_99":32,"_166":184,"_168":355,"_169":22,"_170":-5,"_98":382},["D",1742558404027],[246],"upstreamProject","upstreamBranch",{"_102":141,"_104":386,"_387":388,"_95":43,"_139":147,"_99":389,"_140":-5,"_142":-5,"_390":391,"_106":-5,"_152":22,"_108":145,"_151":392,"_16":149,"_150":96},["D",1742417453513],"updatedAt",["D",1742492217267],121,"lockfileKey","1745675322851-esm.town_v_varun1352_BlackJack@121-main","varun1352","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":399,"_366":404,"_415":416,"_419":420,"_423":-5,"_358":424,"_494":495},{"_102":103,"_95":96,"_104":400,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":401,"_132":402,"_135":403,"_152":22},["D",1742472925516],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":143,"_144":145,"_146":147,"_148":149,"_150":96,"_151":94},[405,407,409,411,413],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":138,"_162":163,"_164":116,"_104":369,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":406},[157],{"_102":256,"_95":257,"_158":258,"_160":-5,"_161":138,"_162":163,"_164":116,"_104":372,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":408},[257],{"_102":334,"_95":335,"_158":336,"_160":-5,"_161":138,"_162":137,"_164":116,"_104":375,"_99":338,"_166":320,"_168":72,"_169":22,"_170":-5,"_98":410},[335],{"_102":342,"_95":343,"_158":344,"_160":-5,"_161":138,"_162":345,"_164":116,"_104":378,"_99":32,"_166":184,"_168":347,"_169":22,"_170":-5,"_98":412},[343],{"_102":351,"_95":246,"_158":352,"_160":-5,"_161":138,"_162":353,"_164":116,"_104":381,"_99":32,"_166":184,"_168":355,"_169":22,"_170":-5,"_98":414},[246],"readme",{"_102":334,"_161":138,"_158":336,"_95":335,"_168":72,"_166":320,"_99":338,"_160":-5,"_104":417,"_162":137,"_170":-5,"_98":418},["D",1742665178704],[335],"upstream",{"_102":141,"_104":421,"_387":422,"_95":43,"_139":147,"_99":389,"_140":-5,"_142":-5,"_390":391,"_106":-5,"_152":22,"_108":145,"_151":392,"_16":149,"_150":96},["D",1742417453513],["D",1742492217267],"pull",[425,427,429,433,435,438,441,445,447,451,454,458,460,462,465,468,471,474,478,481,485,488,491],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":138,"_162":163,"_164":116,"_104":165,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":426,"_98":457},[427,433,445,451,454],{"_102":174,"_95":175,"_158":176,"_160":159,"_161":138,"_162":163,"_164":116,"_104":177,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":428,"_98":432},[429],{"_102":180,"_95":181,"_158":182,"_160":176,"_161":138,"_162":163,"_164":116,"_104":183,"_99":32,"_166":184,"_168":185,"_169":22,"_170":-5,"_171":430,"_98":431},[],[157,175,181],[157,175],{"_102":190,"_95":191,"_158":192,"_160":159,"_161":138,"_162":163,"_164":116,"_104":193,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":434,"_98":444},[435,438,441],{"_102":196,"_95":197,"_158":198,"_160":192,"_161":138,"_162":163,"_164":116,"_104":199,"_99":32,"_166":184,"_168":200,"_169":22,"_170":-5,"_171":436,"_98":437},[],[157,191,197],{"_102":204,"_95":205,"_158":206,"_160":192,"_161":138,"_162":163,"_164":116,"_104":207,"_99":32,"_166":184,"_168":208,"_169":22,"_170":-5,"_171":439,"_98":440},[],[157,191,205],{"_102":212,"_95":213,"_158":214,"_160":192,"_161":138,"_162":163,"_164":116,"_104":215,"_99":32,"_166":184,"_168":216,"_169":22,"_170":-5,"_171":442,"_98":443},[],[157,191,213],[157,191],{"_102":221,"_95":222,"_158":223,"_160":159,"_161":138,"_162":163,"_164":116,"_104":224,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":446,"_98":450},[447],{"_102":227,"_95":228,"_158":229,"_160":223,"_161":138,"_162":163,"_164":116,"_104":230,"_99":32,"_166":184,"_168":231,"_169":22,"_170":-5,"_171":448,"_98":449},[],[157,222,228],[157,222],{"_102":236,"_95":237,"_158":238,"_160":159,"_161":138,"_162":239,"_164":116,"_104":240,"_99":163,"_166":184,"_168":241,"_169":22,"_170":-5,"_171":452,"_98":453},[],[157,237],{"_102":245,"_95":246,"_158":114,"_160":159,"_161":138,"_162":247,"_164":116,"_104":248,"_99":249,"_166":250,"_168":251,"_169":22,"_170":-5,"_171":455,"_98":456},[],[157,246],[157],{"_102":256,"_95":257,"_158":258,"_160":-5,"_161":138,"_162":163,"_164":116,"_104":259,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":459,"_98":484},[460,478,481],{"_102":262,"_95":263,"_158":264,"_160":258,"_161":138,"_162":163,"_164":116,"_104":265,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":461,"_98":477},[462,465,468,471,474],{"_102":268,"_95":269,"_158":270,"_160":264,"_161":138,"_162":271,"_164":116,"_104":272,"_99":163,"_166":184,"_168":273,"_169":22,"_170":-5,"_171":463,"_98":464},[],[257,263,269],{"_102":277,"_95":278,"_158":279,"_160":264,"_161":138,"_162":280,"_164":116,"_104":281,"_99":282,"_166":184,"_168":283,"_169":22,"_170":-5,"_171":466,"_98":467},[],[257,263,278],{"_102":287,"_95":288,"_158":289,"_160":264,"_161":138,"_162":290,"_164":116,"_104":291,"_99":163,"_166":184,"_168":292,"_169":22,"_170":-5,"_171":469,"_98":470},[],[257,263,288],{"_102":296,"_95":297,"_158":298,"_160":264,"_161":138,"_162":299,"_164":116,"_104":300,"_99":163,"_166":184,"_168":301,"_169":22,"_170":-5,"_171":472,"_98":473},[],[257,263,297],{"_102":305,"_95":306,"_158":307,"_160":264,"_161":138,"_162":163,"_164":116,"_104":308,"_99":32,"_166":184,"_168":309,"_169":22,"_170":-5,"_171":475,"_98":476},[],[257,263,306],[257,263],{"_102":314,"_95":315,"_158":316,"_160":258,"_161":138,"_162":317,"_164":116,"_104":318,"_99":319,"_166":320,"_168":321,"_169":22,"_170":-5,"_171":479,"_98":480},[],[257,315],{"_102":325,"_95":326,"_158":327,"_160":258,"_161":138,"_162":163,"_164":116,"_104":328,"_99":32,"_166":184,"_168":329,"_169":22,"_170":-5,"_171":482,"_98":483},[],[257,326],[257],{"_102":334,"_95":335,"_158":336,"_160":-5,"_161":138,"_162":137,"_164":116,"_104":337,"_99":338,"_166":320,"_168":72,"_169":22,"_170":-5,"_171":486,"_98":487},[],[335],{"_102":342,"_95":343,"_158":344,"_160":-5,"_161":138,"_162":345,"_164":116,"_104":346,"_99":32,"_166":184,"_168":347,"_169":22,"_170":-5,"_171":489,"_98":490},[],[343],{"_102":351,"_95":246,"_158":352,"_160":-5,"_161":138,"_162":353,"_164":116,"_104":354,"_99":32,"_166":184,"_168":355,"_169":22,"_170":-5,"_171":492,"_98":493},[],[246],"previews",[454],"actionData","errors"]