[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_314":315,"_316":317},"routes/_app.x.$handle.$name",{"_109":108,"_38":50,"_117":95,"_33":118,"_13":14,"_119":-5,"_11":120,"_121":122,"_123":124,"_125":126,"_127":128,"_26":-5,"_129":130,"_131":132,"_133":31,"_134":135,"_136":65,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",15,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","0df27f39-a74c-4f61-9cc9-c3ae7a9d9146","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019e7d43-79e3-70dd-b64d-5b5d7bcf8e58","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n","# ♠ Royal Blackjack ♣\n\nカジノ風の装飾にこだわったブラウザ版ブラックジャック。緑のフェルトテーブル、\n金縁の装飾、本物のチップ風ベット、カード配布アニメーションつき。\n\n## 遊び方\n\n1. チップ（$5 / $25 / $100 / $500）をタップしてベット額を積む\n2. **配る** でゲーム開始\n3. **ヒット**（カードを引く）か **スタンド**（勝負）を選ぶ\n4. ディーラーは17で必ずスタンド、ブラックジャックは **3:2** の配当\n\n- 残高は `localStorage` に保存され、再訪しても引き継がれます\n- 残高が $0 になると自動で $1,000 補充されます\n\n## ルール詳細\n\n- 6デッキのシュー（残りが少なくなると自動でシャッフル）\n- エースは 1 / 11 を自動で有利に判定（ソフトハンド対応）\n- プッシュ（引き分け）はベット返却\n\n## アーキテクチャ\n\n```mermaid\ngraph TD\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"frontend/index.html
フェルト + アニメCSS\"]\n HTML --> Entry[\"index.tsx\"]\n Entry --> App[\"App.tsx (テーブル全体)\"]\n App --> Hook[\"lib/useBlackjack.ts
(状態 + 進行管理)\"]\n Hook --> Logic[\"lib/blackjack.ts
(デッキ / スコア計算)\"]\n App --> Hand[\"Hand.tsx\"]\n Hand --> Card[\"PlayingCard.tsx\"]\n App --> Bet[\"BetControls.tsx → Chip.tsx\"]\n App --> Action[\"ActionBar.tsx\"]\n```\n\n## ファイル構成\n\n```\nindex.ts ← Hono サーバー（静的配信）\nfrontend/\n index.html ← HTML シェル（背景・フェルト・配布アニメCSS）\n index.tsx ← React エントリ\n favicon.svg ← ♠ アイコン\n lib/\n blackjack.ts ← 純粋なゲームロジック（デッキ・スコア）\n useBlackjack.ts ← ゲーム進行を管理する React フック\n components/\n App.tsx ← テーブル全体のレイアウト\n Hand.tsx ← 手札表示（合計値・バッジ）\n PlayingCard.tsx ← トランプ1枚（表/裏の装飾）\n Chip.tsx ← カジノチップ\n BetControls.tsx ← ベット用UI\n ActionBar.tsx ← ヒット/スタンド/次へ\n```\n","createdAt",["D",1780218214584],"branchVersion","branchId","2f4872c4-5ccf-11f1-982a-1607ee4eb77e","id","2f3bc7d6-5ccf-11f1-982a-1607ee4eb77e","casino-blackjack",["D",1780218034536],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789592399&sig=9f2b8198a6bd290c0e4cd558a371acaf6bae0541324daebbd1636993bd403dce","799d1374-5edb-4b95-b926-715d7dde110f","pinnedFileId","019e7d43-79e3-70dd-b64d-5e0793f55a22","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e7d34-bbda-77a9-bb61-63a163d1dee8","tursoName","2f3bc7d65ccf11f1982a1607ee4eb77e","tursoHostname","2f3bc7d65ccf11f1982a1607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789529498250],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_116":-5},"org",{"_109":108,"_110":111,"_112":-5,"_19":61,"_113":114,"_115":31},"branch",{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","hmpd","handle","displayName","bbbb","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":309,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":310,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":311,"_90":312,"_92":313,"_94":31},"tree",[183,197,198],"files",[183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198],"counts",{"_173":69,"_174":157,"_175":69,"_176":177,"_178":179},"contents",[151,152,153],"upstreamProject",{"_48":103,"_38":148,"_57":58,"_59":60,"_54":55,"_88":149},"upstreamBranch",{"_48":98,"_43":141,"_142":143,"_38":95,"_96":103,"_13":144,"_97":-5,"_99":-5,"_145":146,"_52":-5,"_94":31,"_54":55,"_107":147,"_70":105,"_106":148},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter",{"_109":147,"_116":150},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592399&sig=e3667930a878fd5db49e47cce78fe270a8ba33317e34775a1ada2dd4a7c49d8d",{"_48":167,"_38":168,"_36":169,"_156":-5,"_46":47,"_45":157,"_158":65,"_43":170,"_13":69,"_39":171,"_40":-5,"_30":31,"_162":-5,"_33":172},{"_48":164,"_38":34,"_36":37,"_156":-5,"_46":47,"_45":14,"_158":65,"_43":165,"_13":157,"_39":26,"_40":42,"_30":31,"_162":-5,"_33":166},{"_48":154,"_38":155,"_36":63,"_156":-5,"_46":47,"_45":157,"_158":65,"_43":159,"_13":69,"_39":160,"_40":161,"_30":31,"_162":-5,"_33":163},"2f50ef3a-5ccf-11f1-982a-1607ee4eb77e","index.ts","parentId",1,"latest",["D",1780218034536],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[155],"9a8aa21e-5ccf-11f1-ac8b-1607ee4eb77e",["D",1780218214584],[34],"2f50d69e-5ccf-11f1-982a-1607ee4eb77e","frontend","019e7d43-79e3-70dd-b64d-55970a4f8f53",["D",1780218034536],"directory",[168],"pulls","branches","forks","envVars",{"_180":69,"_182":69},"connections",{"_180":69,"_181":69},"count","unfilledCount","emptyCount",{"_48":167,"_38":168,"_36":169,"_156":-5,"_46":47,"_45":157,"_158":65,"_43":306,"_13":69,"_39":171,"_40":-5,"_30":31,"_162":-5,"_200":307,"_33":308},{"_48":302,"_38":261,"_36":255,"_156":169,"_46":47,"_45":157,"_158":65,"_43":303,"_13":69,"_39":171,"_40":-5,"_30":31,"_162":-5,"_200":304,"_33":305},{"_48":294,"_38":295,"_36":296,"_156":255,"_46":47,"_45":297,"_158":65,"_43":298,"_13":69,"_39":210,"_40":299,"_30":31,"_162":-5,"_200":300,"_33":301},{"_48":286,"_38":287,"_36":288,"_156":255,"_46":47,"_45":289,"_158":65,"_43":290,"_13":256,"_39":210,"_40":291,"_30":31,"_162":-5,"_200":292,"_33":293},{"_48":278,"_38":279,"_36":280,"_156":255,"_46":47,"_45":281,"_158":65,"_43":282,"_13":69,"_39":210,"_40":283,"_30":31,"_162":-5,"_200":284,"_33":285},{"_48":270,"_38":271,"_36":272,"_156":255,"_46":47,"_45":273,"_158":65,"_43":274,"_13":69,"_39":210,"_40":275,"_30":31,"_162":-5,"_200":276,"_33":277},{"_48":262,"_38":263,"_36":264,"_156":255,"_46":47,"_45":265,"_158":65,"_43":266,"_13":69,"_39":210,"_40":267,"_30":31,"_162":-5,"_200":268,"_33":269},{"_48":252,"_38":253,"_36":254,"_156":255,"_46":47,"_45":256,"_158":65,"_43":257,"_13":69,"_39":210,"_40":258,"_30":31,"_162":-5,"_200":259,"_33":260},{"_48":248,"_38":239,"_36":233,"_156":169,"_46":47,"_45":243,"_158":65,"_43":249,"_13":69,"_39":171,"_40":-5,"_30":31,"_162":-5,"_200":250,"_33":251},{"_48":240,"_38":241,"_36":242,"_156":233,"_46":47,"_45":243,"_158":65,"_43":244,"_13":69,"_39":210,"_40":245,"_30":31,"_162":-5,"_200":246,"_33":247},{"_48":230,"_38":231,"_36":232,"_156":233,"_46":47,"_45":234,"_158":65,"_43":235,"_13":69,"_39":210,"_40":236,"_30":31,"_162":-5,"_200":237,"_33":238},{"_48":222,"_38":223,"_36":224,"_156":169,"_46":47,"_45":225,"_158":65,"_43":226,"_13":157,"_39":26,"_40":227,"_30":31,"_162":-5,"_200":228,"_33":229},{"_48":214,"_38":215,"_36":216,"_156":169,"_46":47,"_45":217,"_158":65,"_43":218,"_13":157,"_39":26,"_40":219,"_30":31,"_162":-5,"_200":220,"_33":221},{"_48":206,"_38":207,"_36":208,"_156":169,"_46":47,"_45":157,"_158":65,"_43":209,"_13":69,"_39":210,"_40":211,"_30":31,"_162":-5,"_200":212,"_33":213},{"_48":164,"_38":34,"_36":37,"_156":-5,"_46":47,"_45":14,"_158":65,"_43":203,"_13":157,"_39":26,"_40":42,"_30":31,"_162":-5,"_200":204,"_33":205},{"_48":154,"_38":155,"_36":63,"_156":-5,"_46":47,"_45":157,"_158":65,"_43":199,"_13":69,"_39":160,"_40":161,"_30":31,"_162":-5,"_200":201,"_33":202},["D",1780218034536],"children",[],[155],["D",1780218214584],[],[34],"2f50d324-5ccf-11f1-982a-1607ee4eb77e","index.tsx","019e7d43-79e3-70dd-b64d-5245367ac348",["D",1780218034536],"script","/** @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\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[168,207],"7dee14e2-5ccf-11f1-bacf-1607ee4eb77e","index.html","019e7d43-79e3-70dd-b64d-4d32f4d21c94",10,["D",1780218166585],"\n\n \n \n \n ♠ Royal Blackjack ♣ — カジノ\n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[],[168,215],"819256bc-5ccf-11f1-a7e5-1607ee4eb77e","favicon.svg","019e7d43-79e3-70dd-b64d-48783466c0f0",12,["D",1780218172673],"\n\n",[],[168,223],"5bc7e8f2-5ccf-11f1-9502-1607ee4eb77e","useBlackjack.ts","5bc7ea96-5ccf-11f1-9502-1607ee4eb77e","04158e38-64db-4ac4-9769-9ef2ea99be89",6,["D",1780218109293],"import { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n buildShoe,\n type Card,\n handValue,\n isBlackjack,\n isBust,\n} from \"./blackjack.ts\";\n\nexport type Phase = \"betting\" | \"player\" | \"dealer\" | \"result\";\nexport type Outcome = \"win\" | \"lose\" | \"push\" | \"blackjack\" | null;\n\nconst BANK_KEY = \"casino-blackjack-bank\";\nconst STARTING_BANK = 1000;\n\nfunction loadBank(): number {\n const raw = localStorage.getItem(BANK_KEY);\n const n = raw ? parseInt(raw, 10) : NaN;\n return Number.isFinite(n) && n > 0 ? n : STARTING_BANK;\n}\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nexport interface BlackjackState {\n phase: Phase;\n bank: number;\n bet: number;\n player: Card[];\n dealer: Card[];\n outcome: Outcome;\n message: string;\n busy: boolean;\n}\n\nexport function useBlackjack() {\n const shoe = useRef(buildShoe());\n const [phase, setPhase] = useState(\"betting\");\n const [bank, setBank] = useState(loadBank);\n const [bet, setBet] = useState(0);\n const [player, setPlayer] = useState([]);\n const [dealer, setDealer] = useState([]);\n const [outcome, setOutcome] = useState(null);\n const [message, setMessage] = useState(\"チップを置いてベットしてください\");\n const [busy, setBusy] = useState(false);\n\n const persistBank = useCallback((value: number) => {\n setBank(value);\n localStorage.setItem(BANK_KEY, String(value));\n }, []);\n\n const draw = useCallback((): Card => {\n if (shoe.current.length < 15) shoe.current = buildShoe();\n return shoe.current.pop()!;\n }, []);\n\n const addChip = useCallback((value: number) => {\n if (phase !== \"betting\") return;\n if (value > bank - bet) return;\n setBet((b) => b + value);\n setMessage(`ベット: $${bet + value}`);\n }, [phase, bank, bet]);\n\n const clearBet = useCallback(() => {\n if (phase !== \"betting\") return;\n setBet(0);\n setMessage(\"チップを置いてベットしてください\");\n }, [phase]);\n\n const settle = useCallback(\n async (playerCards: Card[], dealerCards: Card[], currentBet: number) => {\n const pv = handValue(playerCards);\n const dv = handValue(dealerCards);\n let result: Outcome;\n let payout = 0; // net change to bank (bet already deducted at deal time)\n\n if (isBust(playerCards)) {\n result = \"lose\";\n } else if (isBlackjack(playerCards) && !isBlackjack(dealerCards)) {\n result = \"blackjack\";\n payout = currentBet + Math.floor(currentBet * 1.5); // 3:2\n } else if (isBust(dealerCards) || pv > dv) {\n result = \"win\";\n payout = currentBet * 2;\n } else if (pv < dv) {\n result = \"lose\";\n } else {\n result = \"push\";\n payout = currentBet; // return the bet\n }\n\n setOutcome(result);\n setPhase(\"result\");\n const msgs: Record, string> = {\n blackjack: `ブラックジャック！ +$${payout - currentBet} 🎉`,\n win: `あなたの勝ち！ +$${payout - currentBet} 🤑`,\n push: \"プッシュ（引き分け）。ベットは返却されます\",\n lose: `ディーラーの勝ち。 -$${currentBet} 😩`,\n };\n setMessage(msgs[result]);\n if (payout > 0) persistBank(bankRef.current + payout);\n },\n [persistBank],\n );\n\n // keep a live ref of bank for async settlement\n const bankRef = useRef(bank);\n bankRef.current = bank;\n\n const dealerPlay = useCallback(\n async (playerCards: Card[], startDealer: Card[], currentBet: number) => {\n setPhase(\"dealer\");\n let dealerCards = [...startDealer];\n setDealer([...dealerCards]);\n await sleep(550);\n // Dealer hits until 17 (stands on all 17)\n while (handValue(dealerCards) < 17) {\n dealerCards = [...dealerCards, draw()];\n setDealer([...dealerCards]);\n await sleep(650);\n }\n await sleep(350);\n await settle(playerCards, dealerCards, currentBet);\n },\n [draw, settle],\n );\n\n const deal = useCallback(async () => {\n if (phase !== \"betting\" || bet <= 0 || busy) return;\n setBusy(true);\n setOutcome(null);\n persistBank(bank - bet); // take the bet\n const currentBet = bet;\n\n const p: Card[] = [];\n const d: Card[] = [];\n setPlayer([]);\n setDealer([]);\n setPhase(\"player\");\n\n // deal in casino order: player, dealer, player, dealer\n p.push(draw());\n setPlayer([...p]);\n await sleep(300);\n d.push(draw());\n setDealer([...d]);\n await sleep(300);\n p.push(draw());\n setPlayer([...p]);\n await sleep(300);\n d.push(draw());\n setDealer([...d]);\n await sleep(450);\n\n setBusy(false);\n\n // Immediate blackjack check\n if (isBlackjack(p) || isBlackjack(d)) {\n await dealerPlay(p, d, currentBet);\n return;\n }\n setMessage(\"ヒット？それともスタンド？\");\n }, [phase, bet, busy, bank, draw, persistBank, dealerPlay]);\n\n const hit = useCallback(async () => {\n if (phase !== \"player\" || busy) return;\n setBusy(true);\n const next = [...player, draw()];\n setPlayer(next);\n await sleep(300);\n setBusy(false);\n if (isBust(next)) {\n await settle(next, dealer, bet);\n } else if (handValue(next) === 21) {\n await dealerPlay(next, dealer, bet);\n }\n }, [phase, busy, player, dealer, bet, draw, settle, dealerPlay]);\n\n const stand = useCallback(async () => {\n if (phase !== \"player\" || busy) return;\n await dealerPlay(player, dealer, bet);\n }, [phase, busy, player, dealer, bet, dealerPlay]);\n\n const nextRound = useCallback(() => {\n setPlayer([]);\n setDealer([]);\n setOutcome(null);\n setBet(0);\n setPhase(\"betting\");\n if (bankRef.current <= 0) {\n persistBank(STARTING_BANK);\n setMessage(`残高がなくなったので $${STARTING_BANK} 補充しました！`);\n } else {\n setMessage(\"チップを置いてベットしてください\");\n }\n }, [persistBank]);\n\n return {\n state: { phase, bank, bet, player, dealer, outcome, message, busy },\n actions: { addChip, clearBet, deal, hit, stand, nextRound },\n } as const;\n}\n",[],[168,239,231],"lib","37d6e092-5ccf-11f1-8c4a-1607ee4eb77e","blackjack.ts","37d6e16e-5ccf-11f1-8c4a-1607ee4eb77e",2,["D",1780218048990],"// Core Blackjack game logic — pure, framework-agnostic.\n\nexport type Suit = \"♠\" | \"♥\" | \"♦\" | \"♣\";\nexport type Rank =\n | \"A\"\n | \"2\"\n | \"3\"\n | \"4\"\n | \"5\"\n | \"6\"\n | \"7\"\n | \"8\"\n | \"9\"\n | \"10\"\n | \"J\"\n | \"Q\"\n | \"K\";\n\nexport interface Card {\n id: string;\n suit: Suit;\n rank: Rank;\n}\n\nexport const SUITS: Suit[] = [\"♠\", \"♥\", \"♦\", \"♣\"];\nexport const RANKS: Rank[] = [\n \"A\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n \"10\",\n \"J\",\n \"Q\",\n \"K\",\n];\n\nexport function isRed(suit: Suit): boolean {\n return suit === \"♥\" || suit === \"♦\";\n}\n\n/** Build a fresh, shuffled multi-deck shoe (6 decks like a real casino). */\nexport function buildShoe(deckCount = 6): Card[] {\n const cards: Card[] = [];\n for (let d = 0; d < deckCount; d++) {\n for (const suit of SUITS) {\n for (const rank of RANKS) {\n cards.push({ id: `${d}-${suit}-${rank}-${Math.random().toString(36).slice(2)}`, suit, rank });\n }\n }\n }\n // Fisher–Yates shuffle\n for (let i = cards.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [cards[i], cards[j]] = [cards[j], cards[i]];\n }\n return cards;\n}\n\nfunction rankValue(rank: Rank): number {\n if (rank === \"A\") return 11;\n if (rank === \"K\" || rank === \"Q\" || rank === \"J\") return 10;\n return parseInt(rank, 10);\n}\n\n/** Compute the best (highest non-busting if possible) hand total. */\nexport function handValue(cards: Card[]): number {\n let total = 0;\n let aces = 0;\n for (const c of cards) {\n total += rankValue(c.rank);\n if (c.rank === \"A\") aces++;\n }\n // Demote aces from 11 to 1 while busting\n while (total > 21 && aces > 0) {\n total -= 10;\n aces--;\n }\n return total;\n}\n\nexport function isBlackjack(cards: Card[]): boolean {\n return cards.length === 2 && handValue(cards) === 21;\n}\n\nexport function isBust(cards: Card[]): boolean {\n return handValue(cards) > 21;\n}\n\n/** Whether a soft total exists (an ace still counted as 11). */\nexport function isSoft(cards: Card[]): boolean {\n let total = 0;\n let aces = 0;\n for (const c of cards) {\n total += rankValue(c.rank);\n if (c.rank === \"A\") aces++;\n }\n return aces > 0 && total <= 21;\n}\n",[],[168,239,241],"37d73bfa-5ccf-11f1-8c4a-1607ee4eb77e",["D",1780218048990],[192,193],[168,239],"400ec6a8-5ccf-11f1-8c4a-1607ee4eb77e","PlayingCard.tsx","400ec770-5ccf-11f1-8c4a-1607ee4eb77e","019e7d43-79e3-70dd-b64d-45d609e561df",3,["D",1780218062781],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Card, isRed } from \"../lib/blackjack.ts\";\n\ninterface Props {\n card?: Card;\n faceDown?: boolean;\n // index used to stagger the deal animation\n index?: number;\n}\n\nexport function PlayingCard({ card, faceDown, index = 0 }: Props) {\n const delay = `${index * 0.12}s`;\n\n if (faceDown || !card) {\n return (\n \n

\n \n

\n ♠\n

\n );\n }\n\n const red = isRed(card.suit);\n const color = red ? \"text-rose-600\" : \"text-gray-900\";\n\n return (\n \n {/* top-left corner */}\n

\n {card.rank}\n {card.suit}\n

\n {/* center pip */}\n

\n {card.suit}\n

\n {/* bottom-right corner (rotated) */}\n

\n {card.rank}\n {card.suit}\n

\n );\n}\n",[],[168,261,253],"components","4b87c642-5ccf-11f1-bacf-1607ee4eb77e","Hand.tsx","4b87c714-5ccf-11f1-bacf-1607ee4eb77e",5,["D",1780218082030],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Card, handValue } from \"../lib/blackjack.ts\";\nimport { PlayingCard } from \"./PlayingCard.tsx\";\n\ninterface Props {\n label: string;\n cards: Card[];\n // hide the dealer's hole card during the player's turn\n hideHole?: boolean;\n badge?: string | null;\n}\n\nexport function Hand({ label, cards, hideHole, badge }: Props) {\n const visibleCards = hideHole ? cards.slice(0, 1) : cards;\n const shownValue = hideHole ? handValue(cards.slice(0, 1)) : handValue(cards);\n\n return (\n

\n \n {label}\n \n {cards.length > 0 && (\n \n {hideHole ? `${shownValue} +?` : shownValue}\n \n )}\n {badge && (\n \n {badge}\n \n )}\n

\n {cards.length === 0\n ?

\n : cards.map((card, i) => (\n

\n \n

\n ))}\n

\n );\n}\n",[],[168,261,263],"45d17fe0-5ccf-11f1-80ac-1607ee4eb77e","Chip.tsx","45d18076-5ccf-11f1-80ac-1607ee4eb77e",4,["D",1780218072399],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ChipStyle {\n body: string;\n ring: string;\n text: string;\n}\n\n// Classic casino chip color coding\nconst CHIP_STYLES: Record = {\n 5: { body: \"from-red-500 to-red-700\", ring: \"border-red-200\", text: \"text-white\" },\n 25: { body: \"from-green-500 to-green-700\", ring: \"border-green-200\", text: \"text-white\" },\n 100: { body: \"from-gray-800 to-black\", ring: \"border-gray-400\", text: \"text-amber-300\" },\n 500: { body: \"from-violet-500 to-violet-800\", ring: \"border-violet-200\", text: \"text-white\" },\n};\n\ninterface Props {\n value: number;\n onClick?: () => void;\n disabled?: boolean;\n size?: number;\n}\n\nexport function Chip({ value, onClick, disabled, size = 60 }: Props) {\n const style = CHIP_STYLES[value] ?? CHIP_STYLES[5];\n return (\n \n {/* dashed inner ring like real chips */}\n \n \n \n {value}\n \n \n );\n}\n",[],[168,261,271],"61699ddc-5ccf-11f1-a7e5-1607ee4eb77e","BetControls.tsx","61699eb8-5ccf-11f1-a7e5-1607ee4eb77e",7,["D",1780218118742],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Chip } from \"./Chip.tsx\";\n\ninterface Props {\n bank: number;\n bet: number;\n onAddChip: (value: number) => void;\n onClear: () => void;\n onDeal: () => void;\n}\n\nconst CHIP_VALUES = [5, 25, 100, 500];\n\nexport function BetControls({ bank, bet, onAddChip, onClear, onDeal }: Props) {\n return (\n

\n {CHIP_VALUES.map((v) => (\n onAddChip(v)}\n disabled={v > bank - bet}\n />\n ))}\n

\n \n クリア\n \n \n 配る ▸\n \n

\n );\n}\n",[],[168,261,279],"8fd8f5d2-5ccf-11f1-ac8b-1607ee4eb77e","App.tsx","019e7d43-79e3-70dd-b64d-3de5940817d5",14,["D",1780218196645],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useBlackjack } from \"../lib/useBlackjack.ts\";\nimport { Hand } from \"./Hand.tsx\";\nimport { BetControls } from \"./BetControls.tsx\";\nimport { ActionBar } from \"./ActionBar.tsx\";\n\nexport function App() {\n const { state, actions } = useBlackjack();\n const { phase, bank, bet, player, dealer, outcome, message } = state;\n\n const playerBadge = phase === \"result\" && outcome === \"blackjack\" ? \"BLACKJACK\" : null;\n\n const resultGlow = outcome === \"win\" || outcome === \"blackjack\"\n ? \"shadow-[0_0_60px_-5px_rgba(251,191,36,0.55)]\"\n : outcome === \"lose\"\n ? \"shadow-[0_0_60px_-5px_rgba(244,63,94,0.5)]\"\n : \"\";\n\n return (\n

\n {/* Header */}\n

\n ♠{\" \"}\n \n ROYAL BLACKJACK\n {\" \"}\n ♣\n

\n 残高\n ${bank.toLocaleString()}\n

\n\n {/* The felt table */}\n \n {/* gold inner trim */}\n

\n {/* arc text */}\n

\n Blackjack pays 3 to 2 · Dealer stands on 17\n

\n\n {/* Dealer */}\n \n\n {/* Message banner */}\n

\n \n {message}\n

\n\n {/* Player */}\n \n\n {/* Bet display */}\n {bet > 0 && (\n

\n ベット{\" \"}\n ${bet}\n

\n )}\n

\n\n {/* Controls */}\n

\n {phase === \"betting\"\n ? (\n \n )\n : (\n \n )}\n

\n\n \n

\n );\n}\n",[],[168,261,287],"68786e6e-5ccf-11f1-8c4a-1607ee4eb77e","ActionBar.tsx","68786f4a-5ccf-11f1-8c4a-1607ee4eb77e",8,["D",1780218130583],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Phase } from \"../lib/useBlackjack.ts\";\n\ninterface Props {\n phase: Phase;\n busy: boolean;\n onHit: () => void;\n onStand: () => void;\n onNext: () => void;\n}\n\nexport function ActionBar({ phase, busy, onHit, onStand, onNext }: Props) {\n if (phase === \"player\") {\n return (\n

\n \n ヒット\n \n \n スタンド\n \n

\n );\n }\n\n if (phase === \"result\") {\n return (\n \n 次のゲーム ↻\n \n );\n }\n\n if (phase === \"dealer\") {\n return (\n

\n ディーラーがプレイ中…\n

\n );\n }\n\n return null;\n}\n",[],[168,261,295],"2f50ca00-5ccf-11f1-982a-1607ee4eb77e",["D",1780218034536],[185,186,187,188,189,190],[168,261],["D",1780218034536],[184,191,194,195,196],[168],["D",1780218034536],["D",1789529498250],{"_109":108,"_116":-5},{"_109":108,"_110":111,"_112":-5,"_19":61,"_113":114,"_115":31},{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_88":-5,"_138":347,"_348":349,"_350":351,"_352":31,"_353":31,"_354":31,"_355":65,"_356":-5,"_357":-7,"_358":-7,"_359":69,"_360":31,"_361":31,"_362":-5,"_363":31,"_364":31,"_365":31,"_366":-5},"ENV",{"_318":319,"_320":321,"_322":95,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v15