[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_419":420,"_421":422},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_74":306,"_40":-7,"_307":-5,"_17":308,"_309":310,"_311":312,"_313":314,"_315":316,"_93":-5,"_317":318,"_319":320,"_321":48,"_322":323,"_324":26,"_325":-5,"_326":-5,"_327":328},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","hmpd","name","casino-blackjack","branchName","main","project",{"_32":59,"_13":14,"_34":262,"_46":-5,"_263":48,"_49":50,"_264":50,"_265":266,"_267":268,"_269":270,"_271":272,"_273":26,"_274":-5,"_275":-5,"_276":176,"_53":277,"_278":279,"_280":281,"_282":283,"_284":-5,"_285":286,"_287":286,"_288":289,"_290":289,"_291":289,"_292":286,"_293":286,"_294":295,"_296":297,"_298":28,"_47":48},"ahead",14,"behind",2,"diff",{"_64":65,"_66":67,"_68":69},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744","version",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",15,"2f4872c4-5ccf-11f1-982a-1607ee4eb77e","2f3bc7d6-5ccf-11f1-982a-1607ee4eb77e",89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[180,181,182,183,184,185,186,187],"deleted",[168],"modified",[70,71,72,73],{"_74":152,"_76":153,"_78":154},{"_74":129,"_76":130,"_78":131},{"_74":111,"_76":112,"_78":113},{"_74":75,"_76":77,"_78":79},"path","frontend/index.html","targetFile",{"_32":102,"_13":81,"_82":103,"_84":104,"_86":33,"_87":105,"_89":48,"_34":106,"_40":107,"_92":93,"_94":108,"_66":48,"_96":-5,"_97":-7,"_74":109,"_99":110},"sourceFile",{"_32":80,"_13":81,"_82":83,"_84":85,"_86":58,"_87":88,"_89":26,"_34":90,"_40":91,"_92":93,"_94":95,"_66":48,"_96":-5,"_97":-7,"_74":98,"_99":100},"7dee14e2-5ccf-11f1-bacf-1607ee4eb77e","index.html","fileId","019e7d43-79e3-70dd-b64d-4d32f4d21c94","parentId","019e7d43-79e3-70dd-b64d-55970a4f8f53","branchId","branchVersion",10,"latest",["D",1780218166585],1,"fileType","file","content","\n\n \n \n \n ♠ Royal Blackjack ♣ — カジノ\n \n \n \n \n \n \n \n \n

\n \n \n \n\n","label","children",[101,81],"contentHash","11047b6704bcf87c1b07af4fe65c44794e1e095fc2547247b0da4d4b5f399524","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[101,81],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/favicon.svg",{"_32":122,"_13":115,"_82":123,"_84":104,"_86":33,"_87":124,"_89":26,"_34":125,"_40":91,"_92":93,"_94":126,"_66":48,"_96":-5,"_97":-7,"_74":127,"_99":128},{"_32":114,"_13":115,"_82":116,"_84":85,"_86":58,"_87":117,"_89":26,"_34":118,"_40":91,"_92":93,"_94":119,"_66":48,"_96":-5,"_97":-7,"_74":120,"_99":121},"819256bc-5ccf-11f1-a7e5-1607ee4eb77e","favicon.svg","019e7d43-79e3-70dd-b64d-48783466c0f0",12,["D",1780218172673],"\n\n",[101,115],"7c871b065a533434a8fa31caf5d37222d13c021735b089b584e6078ffdceb7df","82a730d4-3261-11f0-aa46-569c3dd06744","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"\n",[101,115],"1b9cfa9bc87dc0db12471f908bb8438c469ac9b2a59379157b627909cb30fc53","frontend/components/App.tsx",{"_32":143,"_13":133,"_82":144,"_84":145,"_86":33,"_87":146,"_89":26,"_34":147,"_40":148,"_92":138,"_94":149,"_66":48,"_96":-5,"_97":-7,"_74":150,"_99":151},{"_32":132,"_13":133,"_82":134,"_84":135,"_86":58,"_87":20,"_89":26,"_34":136,"_40":137,"_92":138,"_94":139,"_66":48,"_96":-5,"_97":-7,"_74":140,"_99":141},"8fd8f5d2-5ccf-11f1-ac8b-1607ee4eb77e","App.tsx","019e7d43-79e3-70dd-b64d-3de5940817d5","019e7d43-79e3-70dd-b64d-45d609e561df",["D",1780218196645],3,"script","/** @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",[101,142,133],"76b31d6f9176cc864f9b3b60b07c636efe5dfcd7a221b184a8a6bdd6b80ca6f5","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[101,142,133],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":161,"_13":152,"_82":162,"_84":-5,"_86":33,"_87":60,"_89":48,"_34":163,"_40":164,"_92":93,"_94":165,"_66":48,"_96":-5,"_97":-7,"_74":166,"_99":167},{"_32":155,"_13":152,"_82":156,"_84":-5,"_86":58,"_87":57,"_89":26,"_34":157,"_40":91,"_92":93,"_94":158,"_66":48,"_96":-5,"_97":-7,"_74":159,"_99":160},"9a8aa21e-5ccf-11f1-ac8b-1607ee4eb77e","019e7d43-79e3-70dd-b64d-5b5d7bcf8e58",["D",1780218214584],"# ♠ 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",[152],"f8111b9a6818d1cc5212e8e25ac6d58e35823cbdb2755a88dd5714efe6d6af89","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# 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",[152],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":169,"_76":170,"_78":-7},"frontend/components/Counter.tsx",{"_32":171,"_13":172,"_82":173,"_84":145,"_86":33,"_87":174,"_89":26,"_34":175,"_40":176,"_92":138,"_94":177,"_66":48,"_96":-5,"_97":-7,"_74":178,"_99":179},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[101,142,172],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":253,"_76":-7,"_78":254},{"_74":243,"_76":-7,"_78":244},{"_74":233,"_76":-7,"_78":234},{"_74":224,"_76":-7,"_78":225},{"_74":215,"_76":-7,"_78":216},{"_74":209,"_76":-7,"_78":210},{"_74":200,"_76":-7,"_78":201},{"_74":188,"_76":-7,"_78":189},"frontend/lib/useBlackjack.ts",{"_32":190,"_13":191,"_82":192,"_84":193,"_86":58,"_87":194,"_89":26,"_34":195,"_40":176,"_92":138,"_94":196,"_66":48,"_96":-5,"_97":-7,"_74":197,"_99":198},"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",[101,199,191],"930adf8f649df24996d3789a50023e8e10bc2a0990b6583fd92b53b6fba4c7c4","lib","frontend/lib/blackjack.ts",{"_32":202,"_13":203,"_82":204,"_84":193,"_86":58,"_87":22,"_89":26,"_34":205,"_40":176,"_92":138,"_94":206,"_66":48,"_96":-5,"_97":-7,"_74":207,"_99":208},"37d6e092-5ccf-11f1-8c4a-1607ee4eb77e","blackjack.ts","37d6e16e-5ccf-11f1-8c4a-1607ee4eb77e",["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",[101,199,203],"bc89227bc0f52f61bb8be4df11782b077de614607b56113f196bb9440d52d163","frontend/lib",{"_32":211,"_13":199,"_82":193,"_84":85,"_86":58,"_87":22,"_89":26,"_34":212,"_40":176,"_92":213,"_94":-5,"_66":48,"_96":-5,"_97":-7,"_74":214,"_99":-5},"37d73bfa-5ccf-11f1-8c4a-1607ee4eb77e",["D",1780218048990],"directory",[101,199],"frontend/components/PlayingCard.tsx",{"_32":217,"_13":218,"_82":219,"_84":135,"_86":58,"_87":137,"_89":26,"_34":220,"_40":176,"_92":138,"_94":221,"_66":48,"_96":-5,"_97":-7,"_74":222,"_99":223},"400ec6a8-5ccf-11f1-8c4a-1607ee4eb77e","PlayingCard.tsx","400ec770-5ccf-11f1-8c4a-1607ee4eb77e",["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",[101,142,218],"c13e4b52a6b851bb11e2f97eedf1a8bfaa7fb7e2a41cbe798bfdeae3cf8f489f","frontend/components/Hand.tsx",{"_32":226,"_13":227,"_82":228,"_84":135,"_86":58,"_87":148,"_89":26,"_34":229,"_40":176,"_92":138,"_94":230,"_66":48,"_96":-5,"_97":-7,"_74":231,"_99":232},"4b87c642-5ccf-11f1-bacf-1607ee4eb77e","Hand.tsx","4b87c714-5ccf-11f1-bacf-1607ee4eb77e",["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",[101,142,227],"fa211d199197caa873f20713825570cc33c34236e5eb2155fea9455fb11e2102","frontend/components/Chip.tsx",{"_32":235,"_13":236,"_82":237,"_84":135,"_86":58,"_87":238,"_89":26,"_34":239,"_40":176,"_92":138,"_94":240,"_66":48,"_96":-5,"_97":-7,"_74":241,"_99":242},"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",[101,142,236],"288b0c3581aa34f95b4ca3b768aed338a34799d2a4bcce1e335a18be42fb8cf5","frontend/components/BetControls.tsx",{"_32":245,"_13":246,"_82":247,"_84":135,"_86":58,"_87":248,"_89":26,"_34":249,"_40":176,"_92":138,"_94":250,"_66":48,"_96":-5,"_97":-7,"_74":251,"_99":252},"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",[101,142,246],"46f876e3c4d34f4ddde5d6f49305b2fe2cf0f17b62581853a27e3f8c5d70b52c","frontend/components/ActionBar.tsx",{"_32":255,"_13":256,"_82":257,"_84":135,"_86":58,"_87":107,"_89":26,"_34":258,"_40":176,"_92":138,"_94":259,"_66":48,"_96":-5,"_97":-7,"_74":260,"_99":261},"68786e6e-5ccf-11f1-8c4a-1607ee4eb77e","ActionBar.tsx","68786f4a-5ccf-11f1-8c4a-1607ee4eb77e",["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",[101,142,256],"ada9986c16f9cc79d14a22d50099b31788f3bcb5147f9c654022362d8c805611",["D",1780218034536],"legacyEnvVars","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","userId","799d1374-5edb-4b95-b926-715d7dde110f","pinnedFileId","019e7d43-79e3-70dd-b64d-5e0793f55a22","pinPreview","pinMigrated","screenshotVersion","likeCount","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",{"_11":12,"_305":-5},"org",{"_11":12,"_299":300,"_301":-5,"_269":270,"_302":303,"_304":48},"branch","displayName","bbbb","avatar","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":414,"_46":-5,"_263":48,"_49":50,"_264":50,"_265":266,"_267":268,"_269":270,"_271":272,"_273":26,"_274":-5,"_275":-5,"_276":176,"_53":277,"_278":279,"_280":281,"_282":415,"_284":-5,"_285":286,"_287":286,"_288":289,"_290":289,"_291":289,"_292":286,"_293":286,"_294":416,"_296":417,"_298":418,"_47":48},"tree",[357,371,372],"files",[357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372],"counts",{"_347":176,"_348":91,"_349":176,"_350":351,"_352":353},"contents",[333,334,335],"upstreamProject",{"_32":39,"_13":56,"_265":266,"_267":268,"_49":50,"_294":331},"upstreamBranch",{"_32":33,"_34":329,"_36":330,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":52,"_305":332},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592399&sig=e3667930a878fd5db49e47cce78fe270a8ba33317e34775a1ada2dd4a7c49d8d",{"_32":344,"_13":101,"_82":85,"_84":-5,"_86":58,"_87":91,"_89":26,"_34":345,"_40":176,"_92":213,"_94":-5,"_66":48,"_96":-5,"_74":346},{"_32":155,"_13":152,"_82":156,"_84":-5,"_86":58,"_87":57,"_89":26,"_34":342,"_40":91,"_92":93,"_94":158,"_66":48,"_96":-5,"_74":343},{"_32":336,"_13":337,"_82":272,"_84":-5,"_86":58,"_87":91,"_89":26,"_34":338,"_40":176,"_92":339,"_94":340,"_66":48,"_96":-5,"_74":341},"2f50ef3a-5ccf-11f1-982a-1607ee4eb77e","index.ts",["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",[337],["D",1780218214584],[152],"2f50d69e-5ccf-11f1-982a-1607ee4eb77e",["D",1780218034536],[101],"pulls","branches","forks","envVars",{"_354":176,"_356":176},"connections",{"_354":176,"_355":176},"count","unfilledCount","emptyCount",{"_32":344,"_13":101,"_82":85,"_84":-5,"_86":58,"_87":91,"_89":26,"_34":411,"_40":176,"_92":213,"_94":-5,"_66":48,"_96":-5,"_97":412,"_74":413},{"_32":407,"_13":142,"_82":135,"_84":85,"_86":58,"_87":91,"_89":26,"_34":408,"_40":176,"_92":213,"_94":-5,"_66":48,"_96":-5,"_97":409,"_74":410},{"_32":255,"_13":256,"_82":257,"_84":135,"_86":58,"_87":107,"_89":26,"_34":258,"_40":176,"_92":138,"_94":259,"_66":48,"_96":-5,"_97":405,"_74":406},{"_32":132,"_13":133,"_82":134,"_84":135,"_86":58,"_87":20,"_89":26,"_34":136,"_40":137,"_92":138,"_94":139,"_66":48,"_96":-5,"_97":403,"_74":404},{"_32":245,"_13":246,"_82":247,"_84":135,"_86":58,"_87":248,"_89":26,"_34":249,"_40":176,"_92":138,"_94":250,"_66":48,"_96":-5,"_97":401,"_74":402},{"_32":235,"_13":236,"_82":237,"_84":135,"_86":58,"_87":238,"_89":26,"_34":239,"_40":176,"_92":138,"_94":240,"_66":48,"_96":-5,"_97":399,"_74":400},{"_32":226,"_13":227,"_82":228,"_84":135,"_86":58,"_87":148,"_89":26,"_34":229,"_40":176,"_92":138,"_94":230,"_66":48,"_96":-5,"_97":397,"_74":398},{"_32":217,"_13":218,"_82":219,"_84":135,"_86":58,"_87":137,"_89":26,"_34":220,"_40":176,"_92":138,"_94":221,"_66":48,"_96":-5,"_97":395,"_74":396},{"_32":211,"_13":199,"_82":193,"_84":85,"_86":58,"_87":22,"_89":26,"_34":212,"_40":176,"_92":213,"_94":-5,"_66":48,"_96":-5,"_97":393,"_74":394},{"_32":202,"_13":203,"_82":204,"_84":193,"_86":58,"_87":22,"_89":26,"_34":205,"_40":176,"_92":138,"_94":206,"_66":48,"_96":-5,"_97":391,"_74":392},{"_32":190,"_13":191,"_82":192,"_84":193,"_86":58,"_87":194,"_89":26,"_34":195,"_40":176,"_92":138,"_94":196,"_66":48,"_96":-5,"_97":389,"_74":390},{"_32":114,"_13":115,"_82":116,"_84":85,"_86":58,"_87":117,"_89":26,"_34":118,"_40":91,"_92":93,"_94":119,"_66":48,"_96":-5,"_97":387,"_74":388},{"_32":80,"_13":81,"_82":83,"_84":85,"_86":58,"_87":88,"_89":26,"_34":90,"_40":91,"_92":93,"_94":95,"_66":48,"_96":-5,"_97":385,"_74":386},{"_32":378,"_13":379,"_82":380,"_84":85,"_86":58,"_87":91,"_89":26,"_34":381,"_40":176,"_92":138,"_94":382,"_66":48,"_96":-5,"_97":383,"_74":384},{"_32":155,"_13":152,"_82":156,"_84":-5,"_86":58,"_87":57,"_89":26,"_34":157,"_40":91,"_92":93,"_94":158,"_66":48,"_96":-5,"_97":376,"_74":377},{"_32":336,"_13":337,"_82":272,"_84":-5,"_86":58,"_87":91,"_89":26,"_34":373,"_40":176,"_92":339,"_94":340,"_66":48,"_96":-5,"_97":374,"_74":375},["D",1780218034536],[],[337],[],[152],"2f50d324-5ccf-11f1-982a-1607ee4eb77e","index.tsx","019e7d43-79e3-70dd-b64d-5245367ac348",["D",1780218034536],"/** @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();",[],[101,379],[],[101,81],[],[101,115],[],[101,199,191],[],[101,199,203],[366,367],[101,199],[],[101,142,218],[],[101,142,227],[],[101,142,236],[],[101,142,246],[],[101,142,133],[],[101,142,256],"2f50ca00-5ccf-11f1-982a-1607ee4eb77e",["D",1780218034536],[359,360,361,362,363,364],[101,142],["D",1780218034536],[358,365,368,369,370],[101],["D",1780218034536],["D",1789529498250],{"_11":12,"_305":-5},{"_11":12,"_299":300,"_301":-5,"_269":270,"_302":303,"_304":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_294":-5,"_326":452,"_453":454,"_455":456,"_457":48,"_458":48,"_459":48,"_460":26,"_461":-5,"_462":-7,"_463":-7,"_464":176,"_465":48,"_466":48,"_467":-5,"_468":48,"_469":48,"_470":48,"_471":-5},"ENV",{"_423":424,"_425":426,"_427":16,"_428":429,"_430":431,"_432":433,"_434":435,"_436":437,"_438":439,"_440":441,"_442":443,"_444":445,"_446":447,"_448":449,"_450":451},"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"]

Compare

Mergehmpd/mainintotemplates/main

README.md+41-48

frontend/components/App.tsx+106-7

frontend/favicon.svg+4-3

frontend/index.html+60-7

frontend/components/ActionBar.tsx+54-0

frontend/components/BetControls.tsx+45-0

frontend/components/Chip.tsx+46-0

frontend/components/Hand.tsx+49-0

frontend/components/PlayingCard.tsx+62-0

frontend/lib

frontend/lib/blackjack.ts+103-0

frontend/lib/useBlackjack.ts+201-0

frontend/components/Counter.tsx+0-18