`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_298":299,"_300":301},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_225":-5,"_20":226,"_22":227,"_228":229,"_230":231,"_26":232,"_24":233,"_234":-5,"_235":-5,"_236":54,"_237":238,"_239":45,"_240":-5,"_241":-5,"_242":243},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","wojtekglizda","name","colorful-particles-touch-physics","branchName","main","version","path","frontend/components/SlotMachine.tsx","project",{"_33":167,"_13":14,"_46":168,"_169":-5,"_170":54,"_171":172,"_173":172,"_174":175,"_176":-5,"_177":178,"_179":65,"_180":45,"_181":-5,"_182":-5,"_183":68,"_184":185,"_186":187,"_188":189,"_190":191,"_192":-5,"_193":194,"_195":194,"_196":197,"_198":197,"_199":197,"_200":194,"_201":194,"_202":203,"_204":205,"_206":207,"_208":54},"tree",[59,60,61,62],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","57ad9f6f-a749-4282-9e86-4cf740a3eefc","SlotMachine.tsx","fileId","0b840cec-a97b-11f1-b2cb-1607ee4eb77e","parentId","01a073af-870d-72a2-918f-9bd1843cc539","branchId","6a98474c-0d22-4f97-b47f-ba97c320c2fc","branchVersion",24,"latest",true,"createdAt",["D",1788648348333],8,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n SYMBOLS,\n roll,\n type SpinResult,\n type SymbolId,\n} from \"../game.ts\";\n\nconst ALL: SymbolId[] = Object.keys(SYMBOLS) as SymbolId[];\n\nfunction demoGrid(): SymbolId[][] {\n return [\n [ALL[Math.floor(Math.random() * ALL.length)], ALL[0], ALL[0]],\n [ALL[Math.floor(Math.random() * ALL.length)], ALL[0], ALL[0]],\n [ALL[Math.floor(Math.random() * ALL.length)], ALL[0], ALL[0]],\n ];\n}\n\nexport function SlotMachine({\n spins,\n freeIn,\n onSpin,\n}: {\n spins: number;\n freeIn: number; // sekundy do następnego darmowego obrotu\n onSpin: (r: SpinResult) => void;\n}) {\n const [spinning, setSpinning] = useState(false);\n const [grid, setGrid] = useState(demoGrid());\n const lineRef = useRef | null>(null);\n const rafRef = useRef(null);\n\n useEffect(() => () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }, []);\n\n const spin = () => {\n if (spinning || spins <= 0) return;\n setSpinning(true);\n const res = roll();\n const final = res.grid;\n\n // Płynny, wyhamowujący obrót: całość ~1.7s, bębny zatrzymują się po kolei\n // (od lewej do prawej) ze schodkowym opóźnieniem.\n const DURATION = 1700;\n const STAGGER = 450;\n const start = performance.now();\n\n const step = (now: number) => {\n const t = now - start;\n const g: SymbolId[][] = [\n [final[0][0], final[0][1], final[0][2]],\n [final[1][0], final[1][1], final[1][2]],\n [final[2][0], final[2][1], final[2][2]],\n ];\n for (let c = 0; c < 3; c++) {\n // bęben c zatrzymuje się w chwili land\n const land = DURATION - (2 - c) * STAGGER;\n if (t < land) {\n // deceleracja: im bliżej zatrzymania, tym rzadziej zmieniamy symbol\n const progress = t / land; // 0..1 (0 szybko, 1 tuż przed stopem)\n const chance = 0.65 * (1 - progress) + 0.06;\n if (Math.random() < chance) {\n g[0][c] = ALL[Math.floor(Math.random() * ALL.length)];\n if (Math.random() < 0.35) g[1][c] = ALL[Math.floor(Math.random() * ALL.length)];\n }\n } else {\n // bęben stanął — pokaż finalny wynik\n g[0][c] = final[0][c];\n g[1][c] = final[1][c];\n g[2][c] = final[2][c];\n }\n }\n setGrid(g);\n if (t < DURATION) {\n rafRef.current = requestAnimationFrame(step);\n } else {\n lineRef.current = new Set(res.lines.map((l) => l.row));\n setSpinning(false);\n onSpin(res);\n }\n };\n\n rafRef.current = requestAnimationFrame(step);\n };\n\n const mins = Math.floor(freeIn / 60);\n const secs = freeIn % 60;\n const timeLabel = mins > 0 ? `${mins}m ${String(secs).padStart(2, \"0\")}s` : `${secs}s`;\n\n return (\n

\n {/* Reels */}\n \n

\n {[0, 1, 2].map((row) => (\n

\n {[0, 1, 2].map((col) => {\n const id = grid[row][col];\n const def = SYMBOLS[id];\n const win = !spinning && lineRef.current?.has(row);\n return (\n \n {def.emoji}\n {win && (\n \n WIN\n \n )}\n

\n );\n })}\n

\n ))}\n \n {/* payline indicators */}\n

\n {[0, 1, 2].map((r) => (\n \n linia {r + 1}\n \n ))}\n

\n \n\n {/* Spin button + counters */}\n

\n \n {spinning ? \"Kręć się…\" : \"🎡 OBRÓT\"}\n \n

\n {spins} obrotów\n

\n {spins >= 5 ? \"max\" : `darmowy za ${timeLabel}`}\n

\n\n

\n );\n}\n","deleted",false,"label",[57,58,35],"frontend","components",{"_33":90,"_13":57,"_36":91,"_38":-5,"_40":41,"_42":66,"_44":45,"_46":92,"_17":68,"_49":93,"_51":-5,"_53":54,"_55":-5,"_71":94,"_18":95},{"_33":83,"_13":84,"_36":85,"_38":-5,"_40":41,"_42":66,"_44":45,"_46":86,"_17":68,"_49":24,"_51":87,"_53":54,"_55":-5,"_71":88,"_18":89},{"_33":74,"_13":75,"_36":76,"_38":-5,"_40":41,"_42":77,"_44":45,"_46":78,"_17":79,"_49":24,"_51":80,"_53":54,"_55":-5,"_71":81,"_18":82},{"_33":63,"_13":64,"_36":65,"_38":-5,"_40":41,"_42":66,"_44":45,"_46":67,"_17":68,"_49":69,"_51":70,"_53":54,"_55":-5,"_71":72,"_18":73},"1afa3c53-eb71-4621-bf80-4cc6a83f2bd0","index.ts","01a073af-870d-72a2-918f-b743e851b5aa",1,["D",1788647278269],0,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(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","children",[],[64],"0161c57e-d376-4181-8f9d-789e60833a81","README.md","01a073af-870d-72a2-918f-b2177b046558",21,["D",1788648184443],2,"# Bobr Master 🦫\n\nGra w stylu **Coin Master**, ale z **bobrem** zamiast świnki — i **bez mikropłatności**.\n\nDziałająca gra: [Otwórz Bobr Master](url:frontend/components/App.tsx)\n\n## O co chodzi\n\nKręcisz maszyną z emotkami (slot), zdobywasz monety i obroty, a za monety\nbudujesz i ulepszasz wioskę bobra. Każda ukończona wioska przenosi cię do\nkolejnej, trudniejszej krainy.\n\n### Jak zdobywasz obroty (zamiast kupować)\n\n- ⏳ **Darmowy obrót co 4 minuty** (maks. 5 zapasowych),\n- 🏗️ **Budowa wioski nagradza obrotami** — każdy ulepszony budynek,\n- 🎰 **Duże symbole na maszynie dają obroty** — to główny zamiennik\n mikropłatności:\n\n| Symbol | Co robi, gdy trafisz 3 w rzędzie |\n| --- | --- |\n| 🪙 Moneta | +60 monet |\n| 💰 Gruby worek | +260 monet |\n| 🎁 **Wielki skarb** (duży) | +700 monet **i +2 obroty** |\n| 🔄 Obrót | +3 obroty |\n| 🔨 Najazd | +450 monet |\n| 🦫 **BÓBR** (duży, jackpot) | **+3000 monet i +6 obrotów** |\n\n### Budynki\n\n🏠 Chata, 🌾 Młyn, 🌲 Tartak, 🪚 Warsztat, ⚔️ Wieża obronna, 🏰 Zamek —\nkażdy można ulepszyć do poziomu 4. Koszty rosną z poziomem i numerem wioski.\n\n## Jak to zbudowano\n\n- **Backend** (`index.ts`) — Hono serwuje shell HTML i wersjonowane moduły.\n- **Frontend** (React 18, Twind/Tailwind) w `frontend/`:\n - `game.ts` — cała logika: maszyna, płatności, wioska, koszty, stan.\n - `components/SlotMachine.tsx` — animowane bębny i guzik „OBRÓT\".\n - `components/Village.tsx` — siatka budynków z ulepszeniami.\n - `components/Beaver.tsx` — rysunkowy bóbr (inline SVG) jako maskotka.\n\nPostęp gracza (monety, obroty, poziomy budynków, numer wioski) zapisywany\njest w `localStorage` — nic nie trzeba kupować ani instalować.\n\n## Własne egzemplarze\n\nNaciśnij **Remix**, żeby dostać własną kopię tej gry.\n\n## Podziękowania\n\nUruchomiono na [Val Town](https://www.val.town) z basisowy pełny stack React + Hono.\n",[],[75],"c58504c7-68ed-4547-b7f2-1ff552664275","CHANGELOG.md","01a073af-870d-72a2-918f-acd733961368",["D",1788647278269],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n