`, 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 \n \n \n {[\n \"#\",\n \"Deelnemer\",\n \"Punten\",\n \"Gespeeld\",\n \"Nog\",\n \"Startmoy.\",\n \"Actueel moy.\",\n ].map((t) => (\n \n ))}\n \n \n \n {standings(state).map((p: any, i: number) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

{t}
{i + 1}	{p.shortName ?? p.name}	\n {p.points}\n	{p.played}	{p.remaining}	{fmt(p.start)}	{fmt(p.average)}

\n );\n}\nexport function MatchForm({ state, match, save, cancel, busy }: any) {\n const [draft, setDraft] = useState(\n match ?? { a: \"\", b: \"\", ca: \"\", cb: \"\", date: today() },\n );\n const edit = (k: string, v: any) => setDraft({ ...draft, [k]: v });\n return (\n {\n e.preventDefault();\n save({\n type: \"match\",\n match: {\n ...draft,\n a: Number(draft.a),\n b: Number(draft.b),\n ca: draft.ca === \"\" ? null : Number(draft.ca),\n cb: draft.cb === \"\" ? null : Number(draft.cb),\n },\n });\n }}\n className=\"p-5 rounded-xl bg-emerald-50 border border-emerald-200 mb-6\"\n >\n

\n {match ? \"Uitslag corrigeren\" : \"Nieuwe uitslag\"}\n

\n \n edit(\"date\", e.target.value)}\n />\n \n {[[\"a\", \"Speler A\"], [\"ca\", \"Caramboles A\"], [\"b\", \"Speler B\"], [\n \"cb\",\n \"Caramboles B\",\n ]].map(([k, l]) => (\n \n {k.length === 1\n ? (\n edit(k, e.target.value)}\n >\n \n {state.players.map((p: any) => (\n \n ))}\n \n )\n : (\n edit(k, e.target.value)}\n />\n )}\n \n ))}\n

\n \n \n

\n Beide spelers krijgen 20 beurten. Een score van 0 telt mee; een leeg\n veld niet.\n

\n \n );\n}\nexport function PlayerRow({ p, save, busy }: any) {\n const [name, N] = useState(p.name), [start, S] = useState(p.start ?? \"\");\n return (\n {\n e.preventDefault();\n save({\n type: \"player\",\n player: {\n id: p.id,\n name,\n start: start === \"\" ? null : Number(start),\n },\n });\n }}\n >\n N(e.target.value)}\n />\n S(e.target.value)}\n />\n \n \n );\n}\n",1,"01a0ab70-d5fe-737e-9de0-b3ec205856e5",["D",1789584973559],"branchVersion","label",[165,166,66],"frontend","components","pulls","branches","forks","envVars",{"_174":176,"_177":26},"connections",{"_174":26,"_175":26},"count","unfilledCount",2,"emptyCount",{"_33":374,"_13":165,"_64":248,"_43":-5,"_35":36,"_162":159,"_204":95,"_37":375,"_39":26,"_67":242,"_157":-5,"_69":24,"_163":-5,"_210":376,"_17":377},{"_33":370,"_13":166,"_64":160,"_43":248,"_35":36,"_162":159,"_204":95,"_37":371,"_39":26,"_67":242,"_157":-5,"_69":24,"_163":-5,"_210":372,"_17":373},{"_33":362,"_13":363,"_64":364,"_43":160,"_35":36,"_162":365,"_204":95,"_37":366,"_39":176,"_67":68,"_157":367,"_69":24,"_163":-5,"_210":368,"_17":369},{"_33":354,"_13":355,"_64":356,"_43":160,"_35":36,"_162":121,"_204":95,"_37":357,"_39":358,"_67":68,"_157":359,"_69":24,"_163":-5,"_210":360,"_17":361},{"_33":347,"_13":348,"_64":349,"_43":160,"_35":36,"_162":159,"_204":95,"_37":350,"_39":26,"_67":68,"_157":351,"_69":24,"_163":-5,"_210":352,"_17":353},{"_33":156,"_13":66,"_64":65,"_43":160,"_35":36,"_162":75,"_204":95,"_37":344,"_39":159,"_67":68,"_157":158,"_69":24,"_163":-5,"_210":345,"_17":346},{"_33":336,"_13":337,"_64":338,"_43":160,"_35":36,"_162":339,"_204":95,"_37":340,"_39":159,"_67":68,"_157":341,"_69":24,"_163":-5,"_210":342,"_17":343},{"_33":327,"_13":328,"_64":329,"_43":160,"_35":36,"_162":330,"_204":95,"_37":331,"_39":332,"_67":68,"_157":333,"_69":24,"_163":-5,"_210":334,"_17":335},{"_33":319,"_13":320,"_64":321,"_43":160,"_35":36,"_162":322,"_204":95,"_37":323,"_39":268,"_67":68,"_157":324,"_69":24,"_163":-5,"_210":325,"_17":326},{"_33":311,"_13":312,"_64":313,"_43":160,"_35":36,"_162":314,"_204":95,"_37":315,"_39":176,"_67":68,"_157":316,"_69":24,"_163":-5,"_210":317,"_17":318},{"_33":304,"_13":305,"_64":306,"_43":248,"_35":36,"_162":159,"_204":95,"_37":307,"_39":26,"_67":21,"_157":308,"_69":24,"_163":-5,"_210":309,"_17":310},{"_33":296,"_13":297,"_64":298,"_43":248,"_35":36,"_162":299,"_204":95,"_37":300,"_39":159,"_67":68,"_157":301,"_69":24,"_163":-5,"_210":302,"_17":303},{"_33":288,"_13":289,"_64":290,"_43":248,"_35":36,"_162":291,"_204":95,"_37":292,"_39":268,"_67":68,"_157":293,"_69":24,"_163":-5,"_210":294,"_17":295},{"_33":280,"_13":281,"_64":282,"_43":248,"_35":36,"_162":283,"_204":95,"_37":284,"_39":26,"_67":68,"_157":285,"_69":24,"_163":-5,"_210":286,"_17":287},{"_33":272,"_13":273,"_64":274,"_43":248,"_35":36,"_162":275,"_204":95,"_37":276,"_39":176,"_67":21,"_157":277,"_69":24,"_163":-5,"_210":278,"_17":279},{"_33":263,"_13":264,"_64":265,"_43":248,"_35":36,"_162":266,"_204":95,"_37":267,"_39":268,"_67":68,"_157":269,"_69":24,"_163":-5,"_210":270,"_17":271},{"_33":254,"_13":255,"_64":256,"_43":248,"_35":36,"_162":257,"_204":95,"_37":258,"_39":259,"_67":21,"_157":260,"_69":24,"_163":-5,"_210":261,"_17":262},{"_33":245,"_13":246,"_64":247,"_43":248,"_35":36,"_162":249,"_204":95,"_37":250,"_39":26,"_67":68,"_157":251,"_69":24,"_163":-5,"_210":252,"_17":253},{"_33":239,"_13":238,"_64":232,"_43":-5,"_35":36,"_162":240,"_204":95,"_37":241,"_39":26,"_67":242,"_157":-5,"_69":24,"_163":-5,"_210":243,"_17":244},{"_33":229,"_13":230,"_64":231,"_43":232,"_35":36,"_162":233,"_204":95,"_37":234,"_39":176,"_67":68,"_157":235,"_69":24,"_163":-5,"_210":236,"_17":237},{"_33":222,"_13":223,"_64":224,"_43":-5,"_35":36,"_162":159,"_204":95,"_37":225,"_39":26,"_67":21,"_157":226,"_69":24,"_163":-5,"_210":227,"_17":228},{"_33":213,"_13":214,"_64":215,"_43":-5,"_35":36,"_162":216,"_204":95,"_37":217,"_39":218,"_67":21,"_157":219,"_69":24,"_163":-5,"_210":220,"_17":221},{"_33":201,"_13":202,"_64":93,"_43":-5,"_35":36,"_162":203,"_204":95,"_37":205,"_39":206,"_67":207,"_157":208,"_69":24,"_163":209,"_210":211,"_17":212},"7d08e693-0634-483c-b8b3-3142f5539c5e","index.ts",60,"latest",["D",1789589116067],8,"http","import {\n parseVal,\n serveImmutableFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { applyAction, displayState } from \"./frontend/logic.ts\";\nimport {\n digest,\n needsEditPassword,\n SESSION_MS,\n sessionCookie,\n sessionToken,\n token,\n verifyPassword,\n VISITOR_COOKIE,\n VISITOR_SECONDS,\n} from \"./server/auth.ts\";\nconst app = new Hono();\nasync function visitorSession(c: any) {\n const value = sessionToken(c.req.raw, VISITOR_COOKIE);\n if (!value) return false;\n const tokenHash = await digest(value);\n const r = await sqlite.execute({\n sql:\n \"SELECT credential_kind,credential_hash FROM visitor_sessions WHERE token_hash=? AND expires_at>?\",\n args: [tokenHash, Date.now()],\n });\n if (!r.rows.length) return false;\n const row = r.rows[0];\n const verifier = Deno.env.get(\n row.credential_kind === \"admin\"\n ? \"BOS_EDIT_PASSWORD_HASH\"\n : \"BOS_VISITOR_PASSWORD_HASH\",\n );\n if (!verifier || row.credential_hash !== await digest(verifier)) return false;\n if (c.req.path === \"/api/state\") {\n await sqlite.execute({\n sql: \"UPDATE visitor_sessions SET expires_at=? WHERE token_hash=?\",\n args: [Date.now() + VISITOR_SECONDS * 1000, tokenHash],\n });\n const adminVerifier = Deno.env.get(\"BOS_EDIT_PASSWORD_HASH\");\n if (adminVerifier) {\n await sqlite.execute({\n sql:\n \"UPDATE edit_sessions SET expires_at=? WHERE token_hash=? AND credential_hash=? AND expires_at>?\",\n args: [\n Date.now() + SESSION_MS,\n tokenHash,\n await digest(adminVerifier),\n Date.now(),\n ],\n });\n }\n c.header(\n \"Set-Cookie\",\n sessionCookie(value, VISITOR_COOKIE, VISITOR_SECONDS),\n { append: true },\n );\n }\n return true;\n}\nasync function startVisitorSession(c: any, verifier: string, kind: string) {\n const value = token();\n await sqlite.batch([\n {\n sql: \"DELETE FROM visitor_sessions WHERE expires_at<=?\",\n args: [Date.now()],\n },\n {\n sql:\n \"INSERT INTO visitor_sessions(token_hash,credential_hash,credential_kind,expires_at) VALUES(?,?,?,?)\",\n args: [\n await digest(value),\n await digest(verifier),\n kind,\n Date.now() + VISITOR_SECONDS * 1000,\n ],\n },\n ], \"write\");\n c.header(\n \"Set-Cookie\",\n sessionCookie(value, VISITOR_COOKIE, VISITOR_SECONDS),\n { append: true },\n );\n return value;\n}\nasync function canEdit(req: Request) {\n const value = sessionToken(req, VISITOR_COOKIE),\n verifier = Deno.env.get(\"BOS_EDIT_PASSWORD_HASH\");\n if (!value || !verifier) return false;\n const r = await sqlite.execute({\n sql:\n \"SELECT 1 FROM edit_sessions WHERE token_hash=? AND credential_hash=? AND expires_at>?\",\n args: [await digest(value), await digest(verifier), Date.now()],\n });\n return r.rows.length > 0;\n}\nasync function identity(req: Request) {\n const session = await getOAuthUserData(req);\n if (!session?.user) return { editor: false, owner: false, username: null };\n const r = await sqlite.execute({\n sql:\n \"SELECT role FROM admins WHERE user_id=? OR (user_id IS NULL AND lower(username)=lower(?))\",\n args: [session.user.id, session.user.username ?? \"\"],\n });\n return {\n editor: r.rows.length > 0,\n owner: r.rows.some((r) => r.role === \"owner\"),\n username: session.user.username,\n };\n}\nasync function current() {\n const r = await sqlite.execute(\n \"SELECT version,data FROM competition WHERE id=1\",\n );\n if (!r.rows.length) throw new Error(\"Competitie nog niet ingericht\");\n return {\n version: Number(r.rows[0].version),\n state: JSON.parse(String(r.rows[0].data)),\n };\n}\napp.use(\"/api/*\", async (c, next) => {\n c.header(\"Cache-Control\", \"no-store\");\n c.header(\"X-Content-Type-Options\", \"nosniff\");\n if (![\"GET\", \"HEAD\"].includes(c.req.method)) {\n if (\n c.req.header(\"Origin\") !== new URL(c.req.url).origin ||\n !c.req.header(\"Content-Type\")?.startsWith(\"application/json\")\n ) return c.json({ error: \"Ongeldige aanvraag.\" }, 403);\n }\n if (\n ![\n \"/api/login\",\n \"/api/logout\",\n \"/api/edit-session\",\n \"/api/edit-session/logout\",\n ].includes(c.req.path) && !await visitorSession(c)\n ) {\n return c.json({\n error: \"Vul het bezoekerswachtwoord in.\",\n code: \"VISITOR_PASSWORD_REQUIRED\",\n }, 401);\n }\n await next();\n});\napp.get(\"/api/state\", async (c) => {\n const data = await current(), user = await identity(c.req.raw);\n return c.json({\n ...data,\n state: displayState(data.state, user.editor),\n user,\n canEdit: await canEdit(c.req.raw),\n });\n});\napp.post(\"/api/login\", login);\napp.post(\"/api/edit-session\", login);\nasync function login(c: any) {\n const adminVerifier = Deno.env.get(\"BOS_EDIT_PASSWORD_HASH\");\n const visitorVerifier = Deno.env.get(\"BOS_VISITOR_PASSWORD_HASH\");\n if (!adminVerifier || !visitorVerifier) {\n return c.json({ error: \"Het wachtwoord is nog niet ingesteld.\" }, 503);\n }\n const raw = await c.req.text();\n if (raw.length > 2048) return c.json({ error: \"Aanvraag te groot.\" }, 413);\n let password;\n try {\n password = JSON.parse(raw).password;\n } catch {\n return c.json({ error: \"Ongeldige aanvraag.\" }, 400);\n }\n // Atomic, account-wide cap; never trust a client-supplied IP header.\n const bucket = Math.floor(Date.now() / (15 * 60 * 1000));\n const attempts = await sqlite.execute({\n sql:\n \"INSERT INTO edit_login_limits(bucket,attempts) VALUES(?,1) ON CONFLICT(bucket) DO UPDATE SET attempts=attempts+1 WHERE attempts<30 RETURNING attempts\",\n args: [bucket],\n });\n if (!attempts.rows.length) {\n c.header(\n \"Retry-After\",\n String(Math.ceil(((bucket + 1) * 900000 - Date.now()) / 1000)),\n );\n return c.json({\n error: \"Te veel pogingen. Probeer het over een kwartier opnieuw.\",\n }, 429);\n }\n const isAdmin = await verifyPassword(password, adminVerifier);\n const isVisitor = c.req.path === \"/api/login\" && !isAdmin &&\n await verifyPassword(password, visitorVerifier);\n if (!isAdmin && !isVisitor) {\n return c.json({ error: \"Het wachtwoord klopt niet.\" }, 401);\n }\n const verifier = isAdmin ? adminVerifier : visitorVerifier;\n const value = await startVisitorSession(\n c,\n verifier,\n isAdmin ? \"admin\" : \"visitor\",\n );\n if (!isAdmin) return c.json({ canEdit: false });\n await sqlite.batch([\n {\n sql: \"DELETE FROM edit_sessions WHERE expires_at<=?\",\n args: [Date.now()],\n },\n { sql: \"DELETE FROM edit_login_limits WHERE bucket {\n const value = sessionToken(c.req.raw, VISITOR_COOKIE);\n if (value) {\n await sqlite.execute({\n sql: \"DELETE FROM visitor_sessions WHERE token_hash=?\",\n args: [await digest(value)],\n });\n }\n if (value) {\n await sqlite.execute({\n sql: \"DELETE FROM edit_sessions WHERE token_hash=?\",\n args: [await digest(value)],\n });\n }\n c.header(\"Set-Cookie\", sessionCookie(\"\", VISITOR_COOKIE), { append: true });\n return c.json({ ok: true });\n});\napp.post(\"/api/edit-session/logout\", async (c) => {\n const value = sessionToken(c.req.raw, VISITOR_COOKIE);\n if (value) {\n await sqlite.execute({\n sql: \"DELETE FROM edit_sessions WHERE token_hash=?\",\n args: [await digest(value)],\n });\n }\n return c.json({ canEdit: false });\n});\napp.get(\"/api/history\", async (c) => {\n if (!(await identity(c.req.raw)).editor) {\n return c.json({ error: \"Log in als beheerder.\" }, 401);\n }\n const r = await sqlite.execute(\n \"SELECT id,version,actor,action,created_at FROM history ORDER BY id DESC LIMIT 150\",\n );\n return c.json(r.rows);\n});\napp.get(\"/api/export\", async (c) => {\n if (!(await identity(c.req.raw)).editor) {\n return c.json({ error: \"Log in als beheerder.\" }, 401);\n }\n const results = await sqlite.batch([{\n sql: \"SELECT version,data FROM competition WHERE id=1\",\n }, { sql: \"SELECT * FROM history ORDER BY id\" }], \"read\");\n return new Response(\n JSON.stringify(\n {\n format: \"biljartcompetitie-v1\",\n exportedAt: new Date().toISOString(),\n version: Number(results[0].rows[0].version),\n state: JSON.parse(String(results[0].rows[0].data)),\n history: results[1].rows,\n },\n null,\n 2,\n ),\n {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Content-Disposition\":\n 'attachment; filename=\"biljartcompetitie-backup.json\"',\n \"Cache-Control\": \"no-store\",\n },\n },\n );\n});\napp.get(\"/api/results.csv\", async (c) => {\n const { state: raw } = await current();\n const state = displayState(raw);\n const q = (s: any) =>\n '\"' + String(s).replace(/^([=+@-])/, \"'$1\").replaceAll('\"', '\"\"') + '\"';\n const name = (id: number) => state.players.find((p: any) => p.id === id).name;\n const lines = [\n [\n \"Demonstratie\",\n \"Datum\",\n \"Speler A\",\n \"Caramboles A\",\n \"Speler B\",\n \"Caramboles B\",\n ],\n ...state.matches.map((\n m: any,\n ) => [state.demo ? \"JA\" : \"NEE\", m.date, name(m.a), m.ca, name(m.b), m.cb]),\n ];\n return new Response(\n \"\\uFEFF\" + lines.map((r) => r.map(q).join(\";\")).join(\"\\r\\n\"),\n {\n headers: {\n \"Content-Type\": \"text/csv; charset=utf-8\",\n \"Content-Disposition\": 'attachment; filename=\"uitslagen.csv\"',\n },\n },\n );\n});\napp.post(\"/api/action\", async (c) => {\n const u = await identity(c.req.raw);\n if (Number(c.req.header(\"Content-Length\") ?? 0) > 10000) {\n return c.json({ error: \"Aanvraag te groot.\" }, 413);\n }\n const body = await c.req.json();\n if (needsEditPassword(body?.action) && !await canEdit(c.req.raw)) {\n return c.json({\n error: \"Vul het wachtwoord in om een partij te wijzigen of verwijderen.\",\n code: \"EDIT_PASSWORD_REQUIRED\",\n }, 401);\n }\n if (!u.editor && ![\"match\", \"deleteMatch\"].includes(body?.action?.type)) {\n return c.json({ error: \"Deze wijziging is alleen voor beheerders.\" }, 403);\n }\n const old = await current();\n if (!Number.isSafeInteger(body.version) || body.version !== old.version) {\n return c.json({\n error:\n \"Iemand heeft intussen gegevens gewijzigd. Vernieuw de pagina en voer je wijziging opnieuw in.\",\n }, 409);\n }\n let state;\n try {\n state = applyAction(old.state, body.action, u.owner);\n } catch (e) {\n return c.json({ error: e.message }, 400);\n }\n const r = await sqlite.execute({\n sql:\n \"UPDATE competition SET data=?,version=version+1,actor=?,action=? WHERE id=1 AND version=? RETURNING version\",\n args: [\n JSON.stringify(state),\n u.username ??\n (needsEditPassword(body.action)\n ? \"spelleider (wachtwoord)\"\n : \"openbare invoer\"),\n JSON.stringify(body.action),\n body.version,\n ],\n });\n if (!r.rows.length) {\n return c.json({\n error:\n \"Gelijktijdige wijziging. Vernieuw de pagina voordat je opnieuw opslaat.\",\n }, 409);\n }\n return c.json({\n state: displayState(state, u.editor),\n version: Number(r.rows[0].version),\n user: u,\n });\n});\napp.get(\"/api/admins\", async (c) => {\n if (!(await identity(c.req.raw)).owner) {\n return c.json({ error: \"Alleen de eigenaar.\" }, 403);\n }\n return c.json(\n (await sqlite.execute(\n \"SELECT username,role FROM admins ORDER BY role,username\",\n )).rows,\n );\n});\napp.post(\"/api/admins\", async (c) => {\n const u = await identity(c.req.raw);\n if (!u.owner) return c.json({ error: \"Alleen de eigenaar.\" }, 403);\n const b = await c.req.json();\n if (\n typeof b.username !== \"string\" || !/^[a-zA-Z0-9_-]{1,40}$/.test(b.username)\n ) {\n return c.json(\n { error: \"Vul een geldige Val Town-gebruikersnaam in.\" },\n 400,\n );\n }\n if (b.remove) {\n await sqlite.execute({\n sql:\n \"DELETE FROM admins WHERE lower(username)=lower(?) AND role='editor'\",\n args: [b.username],\n });\n } else {await sqlite.execute({\n sql:\n \"INSERT OR IGNORE INTO admins(username,role) VALUES(lower(?),'editor')\",\n args: [b.username],\n });}\n return c.json({ ok: true });\n});\napp.get(\"/\", (c) => {\n c.header(\"Cache-Control\", \"no-store\");\n return c.html(Root());\n});\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.onError((err) => {\n console.error(err);\n return Response.json({\n error:\n \"Opslaan of laden is niet gelukt. Probeer opnieuw; je invoer blijft staan.\",\n }, { status: 500 });\n});\nexport default oauthMiddleware(app.fetch);\n","bos","children",[],[202],"eb5daa04-66b8-439f-ba01-4b49fd912161","README.md","01a0ab70-d5fe-737e-9de0-cbc1b6eaafd1",46,["D",1789587970208],4,"# Biljartcompetitie\n\nApp: [Open de app](url:index.ts) — https://bos.val.run/ Val:\nhttps://www.val.town/x/raymondv/biljartcompetitie\n\n## Actuele richting: eenvoudig mobiel ontwerp\n\nDe homepage toont nu de tussenstand en daaronder alle partijen, nieuwste datum\neerst. **Nieuwe partij** is voor iedereen klikbaar: kies jezelf, kies een nog\nbeschikbare tegenstander, vul beide scores en de datum in. Vandaag is vooraf\ningevuld.\n\nDit is bewust een frontendprototype: toevoegen past uitsluitend de tijdelijke\nbrowserweergave aan. Vernieuwen herstelt de online stand. Er worden geen\nopenbare wijzigingen naar de database geschreven. Formulieren, login en beheer\nzijn uit de nieuwe voorkant gehaald; de eerdere serverfuncties zijn behouden\nvoor later.\n\nVormgeving: `frontend/style.css`. Invoer: `frontend/components/PartyForm.tsx`.\nLokale voorbeeldserver: `node tests/preview-server.ts` (poort 4173), met een\nkopie van de getranspileerde clientmodules in `preview/`. Testdata blijven\nlokaal.\n\nDe onderstaande beschrijving documenteert de eerdere versie en backend.\n\n## Eerdere versie: gebruik\n\n- Bezoekers zien standen, uitslagen, nog mogelijke tegenstanders en\n weekformulieren.\n- Alle openbare namen zijn unieke afkortingen van 4 letters; bij botsingen 5\n letters en zo nodig een deelnemersnummer. Volledige namen worden uitsluitend\n aan ingelogde beheerders geleverd.\n- Log in met Val Town. De eigenaar beheert de toegang van spelleiders via hun\n exacte Val Town-gebruikersnaam. Een gratis account volstaat.\n- De app start als demonstratie met 60 fictieve uitslagen uit het aangeleverde\n Excelbestand. De eigenaar kan via Beheer expliciet een lege echte competitie\n starten. Startmoyennes zijn onbekend en worden niet verzonnen.\n- De 16 deelnemers kunnen hernoemd worden en hebben bewerkbare startmoyennes.\n Naamscorrecties gelden ook voor eerdere uitslagen; een persoon vervangen\n midden in een seizoen vereist aparte migratie.\n- Elke speler heeft 20 beurten. Winst 2 punten, gelijk 1, verlies 0. Sortering:\n punten, actueel moyenne, bij volledige gelijkstand oorspronkelijke\n deelnemersvolgorde. Geen handicapberekening.\n- Download wekelijks de JSON-back-up onder Beheer. Deze bevat de volledige stand\n en alle wijzigingsmomenten. CSV bevat uitslagen met afkortingen. Geen\n automatische externe back-up ingesteld.\n- Print: Weekformulier, kies actueel of blanco. A4 staand, 100%, browserkop- en\n voetteksten uit. Het blanco formulier toont geen uitslagstatus of actuele\n punten.\n\n## Techniek en onderhoud\n\nReact 18.2, Hono en Val Town SQLite (`std/sqlite/main.ts`, val-scoped). Geen\nbetaald extern systeem, geen persoonlijke cloudschijven.\n\n- `index.ts`: API, OAuth-rollencontrole, CSRF-controle, export en\n frontend-routes.\n- `frontend/logic.ts`: spelregels, validatie en afkortingen.\n- `frontend/components/App.tsx`: navigatie en schermen.\n- `frontend/components/Forms.tsx`: uitslagformulier, stand, deelnemersbeheer.\n- `frontend/components/WeekForm.tsx` en `frontend/print.css`: A4-formulieren.\n- `frontend/root.tsx`: HTML-shell en versiegebonden assets.\n\nDatabase:\n\n- `competition`: één JSON-document met spelers/uitslagen en een integer\n `version`.\n- `history`: SQLite-trigger bewaart elke wijziging atomair met oude/nieuwe\n stand, actor en actie.\n- `admins`: eigenaar op onveranderlijk Val Town-user-ID; spelleiders op\n toegekende gebruikersnaam.\n- `access_check`: lege tabel voor toegangstests.\n\nUpdates gebruiken `WHERE version = ?` plus `RETURNING`; een verouderde update\ngeeft HTTP 409. Servervalidatie weigert ontbrekende scores,\nnegatieve/breuk-scores, ongeldige datums, dezelfde speler en dubbele paren in\nbeide richtingen.\n\nCodex kan via de Val Town-plugin code en de val-database onderhouden. Namen en\nuitslagen staan in de database, niet in de publieke broncode. Publiceer geen\nlokale `data/` of back-upbestanden als broncode.\n\nHerstel door Codex: valideer een JSON-back-up, exporteer eerst de huidige stand,\nvoer daarna een parametergebonden update van `competition` uit met\nversiecontrole, hogere versie en herstelactie. De trigger bewaart de eerdere\nstand. Verwijder de geschiedenis niet stilzwijgend.\n",[],[214],"acbbe75b-ff67-4cfd-b38a-7945edc6d22a","CHANGELOG.md","01a0ab70-d5fe-737e-9de0-c50f1a113208",["D",1789582693703],"# 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

History · Forms.tsx