Val Town React + Hono Starter

\n\n

\n \n Expression (e.g. 2d6+1d4+3)\n \n

\n setExpr(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && doRoll()}\n placeholder=\"d20+5\"\n />\n \n

\n\n \n setSeed(e.target.value)}\n placeholder=\"Optional seed (deterministic)\"\n />\n \n

\n\n

{result}

\n\n

History

\n {err &&

{err}

}\n

\n Loading…\n
\n No rolls yet\n
\n {new Date(e.timestamp).toLocaleTimeString()}\n {e.expression}\n →\n \n rolls:[{e.rolls.map((r) => Math.abs(r)).join(\", \")}]\n \n {e.constant\n ? (\n \n {e.constant >= 0 ? ` +${e.constant}` : ` ${e.constant}`}\n \n )\n : null}\n =\n {e.total}\n

\n \n );\n}",[],[154,173,179],[154,173],{"_102":189,"_95":190,"_155":191,"_157":156,"_158":136,"_159":192,"_161":162,"_104":193,"_99":194,"_164":183,"_166":195,"_167":22,"_168":-5,"_169":196,"_98":197},"43891cd0-a581-11f0-80c0-0224a6c84d84","client.tsx","06426cfa-a581-11f0-b79f-0224a6c84d84",14,["D",1760063505076],2,"import React from \"npm:react\";\nimport { createRoot } from \"npm:react-dom/client\";\nimport App from \"./components/App.tsx\";\n\nconst rootEl = document.getElementById(\"root\")!;\ncreateRoot(rootEl).render();",[],[154,190],{"_102":199,"_95":200,"_155":201,"_157":156,"_158":136,"_159":160,"_161":162,"_104":202,"_99":32,"_164":203,"_166":204,"_167":22,"_168":-5,"_169":205,"_98":206},"6f285db2-a57f-11f0-8832-0224a6c84d84","favicon.svg","0199cbe9-c524-73d2-bbcb-0b77713bcdba",["D",1760062719185],"file","\n",[],[154,200],{"_102":208,"_95":209,"_155":210,"_157":156,"_158":136,"_159":211,"_161":162,"_104":212,"_99":160,"_164":203,"_166":213,"_167":22,"_168":-5,"_169":214,"_98":215},"1489581e-a581-11f0-8f61-0224a6c84d84","index.html","0199cbe9-c524-73d2-bbcb-0ffc82f8a0cd",11,["D",1760063426227],"\n\n \n \n Val Town React + Hono Starter\n \n \n \n \n

\n \n \n \n",[],[154,209],{"_102":217,"_95":218,"_155":219,"_157":156,"_158":136,"_159":160,"_161":162,"_104":220,"_99":32,"_164":183,"_166":221,"_167":22,"_168":-5,"_169":222,"_98":223},"6f285fe2-a57f-11f0-8832-0224a6c84d84","index.tsx","0199cbe9-c524-73d2-bbcb-10ea079262ee",["D",1760062719185],"/** @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();",[],[154,218],{"_102":225,"_95":226,"_155":227,"_157":156,"_158":136,"_159":228,"_161":162,"_104":229,"_99":160,"_164":203,"_166":230,"_167":22,"_168":-5,"_169":231,"_98":232},"169a24da-a581-11f0-80c0-0224a6c84d84","style.css","0199cbe9-c524-73d2-bbcb-176a8ad0ae5c",12,["D",1760063429666],":root {\n color-scheme: dark;\n}\n* {\n box-sizing: border-box;\n}\nbody {\n font-family:\n ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,\n \"Apple Color Emoji\", \"Segoe UI Emoji\";\n background: #1c1c1f;\n color: #e9e9ee;\n max-width: 720px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\nh1 {\n margin: 0 0 1rem 0;\n}\n.card {\n border: 1px solid #2a2a33;\n border-radius: 10px;\n padding: 1rem;\n background: #202025;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.row {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.5rem;\n}\ninput, button {\n padding: 0.65rem 0.75rem;\n font-size: 1rem;\n border-radius: 8px;\n border: 1px solid #383848;\n background: #26262d;\n color: #f0f0f5;\n}\nbutton {\n background: #2f3248;\n cursor: pointer;\n}\nbutton:hover {\n filter: brightness(1.08);\n}\n.history {\n list-style: none;\n padding: 0;\n margin: 0.75rem 0 0 0;\n}\n.history li {\n padding: 0.35rem 0;\n border-bottom: 1px solid #2a2a33;\n display: flex;\n gap: 0.5rem;\n align-items: baseline;\n}\ntime {\n color: #a0a0b0;\n font-size: 0.9rem;\n min-width: 7rem;\n display: inline-block;\n}\ncode {\n background: #1a1a22;\n padding: 0.1rem 0.35rem;\n border-radius: 6px;\n}\n.mono {\n font-family:\n ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n}",[],[154,226],[154],{"_102":235,"_95":236,"_155":237,"_157":-5,"_158":136,"_159":238,"_161":162,"_104":239,"_99":160,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":240,"_98":250},"c8022b38-a580-11f0-934a-0224a6c84d84","lib","c58571e4-a580-11f0-976f-0224a6c84d84",4,["D",1760063297835],[241],{"_102":242,"_95":243,"_155":244,"_157":237,"_158":136,"_159":245,"_161":162,"_104":246,"_99":194,"_164":183,"_166":247,"_167":22,"_168":-5,"_169":248,"_98":249},"d4ef1752-a580-11f0-976f-0224a6c84d84","dice.ts","cdf2b4d6-a580-11f0-bc2f-0224a6c84d84",7,["D",1760063319519],"// lib/dice.ts — shared parser & evaluator for server/client\n\nexport const LIMITS = {\n MAX_TERMS: 32,\n MAX_COUNT_PER_TERM: 500,\n MAX_SIDES: 1000,\n HISTORY_MAX: 50,\n};\n\nexport type RNG = () => number; // [0,1)\n\nexport interface DiceTerm {\n kind: \"dice\";\n sign: 1 | -1;\n count: number; // >=1\n sides: number; // >=2\n}\n\nexport interface ConstTerm {\n kind: \"const\";\n value: number; // signed\n}\n\nexport type Term = DiceTerm | ConstTerm;\n\nexport interface RollEntry {\n timestamp: string;\n expression: string;\n total: number;\n rolls: number[]; // signed per-die rolls for UI compatibility\n constant: number;\n seed?: number;\n}\n\nexport function secureRandom(): number {\n if (globalThis.crypto?.getRandomValues) {\n const u32 = new Uint32Array(1);\n globalThis.crypto.getRandomValues(u32);\n return u32[0] / 0xffffffff;\n }\n return Math.random();\n}\n\nexport function makeSeededRNG(seed: number): RNG {\n let x = (seed >>> 0) || 0x9e3779b9;\n return () => {\n x = (1664525 * x + 1013904223) >>> 0;\n return x / 0x100000000;\n };\n}\n\nexport function makeRNG(seedMaybe: unknown): RNG {\n return typeof seedMaybe === \"number\" && Number.isFinite(seedMaybe)\n ? makeSeededRNG(seedMaybe)\n : secureRandom;\n}\n\nexport function rollDie(sides: number, rng: RNG): number {\n return 1 + Math.floor(rng() * sides);\n}\n\nconst TOKEN_RE = /([+-]?\\d*d\\d+|[+-]?\\d+)/gi;\n\n/** Minimal D&D tokens: [+|-]NdS and [+|-]number */\nexport function parseExpressionToTerms(expr: string): Term[] {\n const s = expr.replace(/\\s+/g, \"\");\n if (!s) throw new Error(\"Empty expression.\");\n\n const tokens = s.match(TOKEN_RE);\n if (!tokens) throw new Error(\"Invalid expression: no recognizable tokens.\");\n\n if (tokens.length > LIMITS.MAX_TERMS) {\n throw new Error(`Too many terms. Max is ${LIMITS.MAX_TERMS}.`);\n }\n\n const terms: Term[] = [];\n\n for (const raw of tokens) {\n const t = raw.trim();\n\n // Dice: [+|-]NdS (N may be empty → 1)\n const dm = /^([+-]?)(\\d*)d(\\d+)$/i.exec(t);\n if (dm) {\n const sign: 1 | -1 = dm[1] === \"-\" ? -1 : 1;\n const countStr = dm[2];\n const count = countStr === \"\" ? 1 : parseInt(countStr, 10);\n const sides = parseInt(dm[3], 10);\n\n if (!(count >= 1 && count <= LIMITS.MAX_COUNT_PER_TERM)) {\n throw new Error(\n `Invalid count in '${t}'. Allowed 1..${LIMITS.MAX_COUNT_PER_TERM}.`,\n );\n }\n if (!(sides >= 2 && sides <= LIMITS.MAX_SIDES)) {\n throw new Error(\n `Invalid sides in '${t}'. Allowed 2..${LIMITS.MAX_SIDES}.`,\n );\n }\n terms.push({ kind: \"dice\", sign, count, sides });\n continue;\n }\n\n // Constant: [+|-]\\d+\n const cm = /^[+-]?\\d+$/.exec(t);\n if (cm) {\n terms.push({ kind: \"const\", value: parseInt(t, 10) });\n continue;\n }\n\n throw new Error(`Unrecognized token: '${t}'`);\n }\n\n return terms;\n}\n\nexport function evaluateTerms(terms: Term[], rng: RNG): {\n total: number;\n constant: number;\n flatRolls: number[];\n} {\n let total = 0;\n let constant = 0;\n const flatRolls: number[] = [];\n\n for (const term of terms) {\n if (term.kind === \"const\") {\n constant += term.value;\n total += term.value;\n continue;\n }\n let termSum = 0;\n for (let i = 0; i < term.count; i++) {\n const r = rollDie(term.sides, rng);\n termSum += r;\n flatRolls.push(term.sign * r);\n }\n total += term.sign * termSum;\n }\n\n return { total, constant, flatRolls };\n}",[],[236,243],[236],{"_102":252,"_95":253,"_155":254,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":255,"_99":32,"_164":203,"_166":256,"_167":22,"_168":-5,"_169":257,"_98":258},"6f28632a-a57f-11f0-8832-0224a6c84d84","README.md","0199cbe9-c524-73d2-bbcb-1e2b054087eb",["D",1760062719185],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[],[253],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":263,"_99":264,"_164":265,"_166":266,"_167":22,"_168":-5,"_169":267,"_98":268},"38fb61b4-a582-11f0-b846-0224a6c84d84","index.ts","0199cbe9-c524-73d2-bbcb-2260ff8d433d",["D",1760063916868],6,"http","// index.ts — Hono server for Val Town (multi-file)\n// Routes:\n// GET / → serves /frontend/index.html\n// GET /frontend/** → serves static frontend files\n// GET /api/history → JSON history\n// POST /api/roll → { expression, seed? }\n// POST /api/clear → reset history\n\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { logger } from \"npm:hono/logger\";\nimport { prettyJSON } from \"npm:hono/pretty-json\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nimport {\n evaluateTerms,\n LIMITS,\n makeRNG,\n parseExpressionToTerms,\n type RollEntry,\n} from \"https://esm.town/v/yakuzadave/reactHonoStarter/lib/dice.ts\";\n\nconst HISTORY_KEY = \"dice-history-hono-react\";\n\nconst app = new Hono();\n\n// Middleware\napp.use(\"*\", logger());\napp.use(\"/api/*\", prettyJSON());\n\n// Static pages\napp.get(\"/\", async (c) => await serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**\", async (c) => await serveFile(c.req.path));\n\n// API: history\napp.get(\"/api/history\", async (c) => {\n const history = (await blob.getJSON(HISTORY_KEY)) || [];\n return c.json(history);\n});\n\n// API: clear\napp.post(\"/api/clear\", async (c) => {\n await blob.setJSON(HISTORY_KEY, []);\n return c.json({ ok: true });\n});\n\n// API: roll\napp.post(\"/api/roll\", async (c) => {\n let payload: unknown;\n try {\n payload = await c.req.json();\n } catch {\n return c.json({ error: \"Invalid JSON.\" }, 400);\n }\n\n if (\n !payload ||\n typeof payload !== \"object\" ||\n typeof (payload as any).expression !== \"string\"\n ) {\n return c.json({ error: \"Missing or invalid 'expression'.\" }, 400);\n }\n\n const expr = ((payload as any).expression as string).trim();\n if (!expr) return c.json({ error: \"Expression cannot be empty.\" }, 400);\n\n const seedVal = (payload as any).seed;\n const rng = makeRNG(seedVal);\n\n let entry: RollEntry;\n try {\n const terms = parseExpressionToTerms(expr);\n const { total, constant, flatRolls } = evaluateTerms(terms, rng);\n\n entry = {\n timestamp: new Date().toISOString(),\n expression: expr,\n total,\n rolls: flatRolls,\n constant,\n seed: typeof seedVal === \"number\" && Number.isFinite(seedVal)\n ? seedVal\n : undefined,\n };\n } catch (e: any) {\n const msg = typeof e?.message === \"string\"\n ? e.message\n : \"Failed to parse/evaluate expression.\";\n return c.json({ error: msg }, 400);\n }\n\n const history = (await blob.getJSON(HISTORY_KEY)) || [];\n history.unshift(entry);\n if (history.length > LIMITS.HISTORY_MAX) history.length = LIMITS.HISTORY_MAX;\n await blob.setJSON(HISTORY_KEY, history);\n\n return c.json(entry);\n});\n\n// Error propagation (so Val shows real stack traces in traces)\napp.onError((err) => Promise.reject(err));\n\n// Export fetch handler\nexport default app.fetch;",[],[261],"files",[152,171,177,188,198,207,216,224,234,241,251,259],"counts",{"_273":32,"_274":160,"_275":32,"_276":277},"pulls","branches","forks","envVars",{"_278":279,"_280":32},"count",3,"emptyCount","contents",[283,286,289,292],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":284,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":285},["D",1760062719185],[154],{"_102":235,"_95":236,"_155":237,"_157":-5,"_158":136,"_159":238,"_161":162,"_104":287,"_99":160,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":288},["D",1760063297835],[236],{"_102":252,"_95":253,"_155":254,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":290,"_99":32,"_164":203,"_166":256,"_167":22,"_168":-5,"_98":291},["D",1760062719185],[253],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":293,"_99":264,"_164":265,"_166":266,"_167":22,"_168":-5,"_98":294},["D",1760063916868],[261],"upstreamProject",{"_102":144,"_95":96,"_110":297,"_111":-5,"_108":109,"_23":298},"Starter template with client-side React & Hono server",{"_93":299,"_128":300},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_102":139,"_104":303,"_304":305,"_95":43,"_137":144,"_99":141,"_138":-5,"_140":-5,"_306":307,"_106":-5,"_149":22,"_108":109,"_148":299,"_16":146,"_147":96},["D",1740674013689],"updatedAt",["D",1755284984205],"lockfileKey","1755284987385-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":314,"_276":319},{"_102":103,"_95":96,"_104":315,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":316,"_130":317,"_133":318,"_149":22},["D",1760062719185],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},[320,325,328],{"_321":322,"_104":323,"_304":-5,"_110":72,"_324":22},"key","GROQ_API_KEY",["D",1760063088613],"isEmpty",{"_321":326,"_104":327,"_304":-5,"_110":72,"_324":22},"GROQ_BASE_URL",["D",1760063071447],{"_321":329,"_104":330,"_304":-5,"_110":331,"_324":22},"AIRTABLE_PAT",["D",1760063037108],"airtable PAT","actionData","errors"]

Key	Description
GROQ_API_KEY
GROQ_BASE_URL
AIRTABLE_PAT	airtable PAT

yakuzadave

reactHonoStarter

Environment variables