`, 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",{"_300":301,"_302":303},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":91,"_27":103,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":60,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",31,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/logic.ts","latestPath","fileId","6bd6a9c2-b1fc-11f1-af05-1607ee4eb77e","name","logic.ts","fileType","script","content","export function standings(s: any) {\n return s.players.map((p: any) => {\n const games = s.matches.filter((m: any) => m.a === p.id || m.b === p.id);\n let points = 0, car = 0, wins = 0, draws = 0;\n for (const m of games) {\n const a = m.a === p.id ? m.ca : m.cb, b = m.a === p.id ? m.cb : m.ca;\n car += a;\n points += a > b ? 2 : a === b ? 1 : 0;\n wins += a > b ? 1 : 0;\n draws += a === b ? 1 : 0;\n }\n return {\n ...p,\n played: games.length,\n remaining: s.players.length - 1 - games.length,\n points,\n car,\n wins,\n draws,\n average: games.length ? car / (games.length * 20) : null,\n };\n }).sort((a: any, b: any) =>\n b.points - a.points || (b.average ?? 0) - (a.average ?? 0) || a.id - b.id\n );\n}\nexport function applyAction(state: any, action: any, owner = false) {\n const s = structuredClone(state);\n const fail = (m: string) => {\n throw new Error(m);\n };\n const num = (n: any) =>\n typeof n === \"number\" && Number.isSafeInteger(n) && n >= 0 && n <= 100000;\n if (action.type === \"match\") {\n const m = action.match;\n if (\n !m || !s.players.some((p: any) => p.id === m.a) ||\n !s.players.some((p: any) => p.id === m.b) || m.a === m.b\n ) fail(\"Kies twee verschillende deelnemers.\");\n if (!num(m.ca) || !num(m.cb)) {\n fail(\"Vul beide scores in als gehele getallen vanaf 0.\");\n }\n if (\n typeof m.date !== \"string\" || !/^\\d{4}-\\d{2}-\\d{2}$/.test(m.date) ||\n !Number.isFinite(Date.parse(m.date)) ||\n new Date(m.date).toISOString().slice(0, 10) !== m.date\n ) fail(\"Vul een geldige datum in.\");\n const old = m.id ? s.matches.find((x: any) => x.id === m.id) : null;\n if (m.id && !old) {\n fail(\"Deze wedstrijd bestaat niet meer. Vernieuw de pagina.\");\n }\n if (\n s.matches.some((x: any) =>\n x.id !== m.id &&\n ((x.a === m.a && x.b === m.b) || (x.a === m.b && x.b === m.a))\n )\n ) {\n fail(\n \"Deze spelers hebben al tegen elkaar gespeeld. Corrigeer de bestaande uitslag.\",\n );\n }\n const clean = {\n id: old?.id ?? crypto.randomUUID(),\n a: m.a,\n b: m.b,\n ca: m.ca,\n cb: m.cb,\n date: m.date,\n };\n s.matches = old\n ? s.matches.map((x: any) => x.id === m.id ? clean : x)\n : [...s.matches, clean];\n } else if (action.type === \"deleteMatch\") {\n if (!s.matches.some((m: any) => m.id === action.id)) {\n fail(\"Wedstrijd niet gevonden.\");\n }\n s.matches = s.matches.filter((m: any) => m.id !== action.id);\n } else if (action.type === \"player\") {\n const p = action.player, old = s.players.find((x: any) => x.id === p?.id);\n if (!old) fail(\"Deelnemer niet gevonden.\");\n if (\n typeof p.name !== \"string\" || !p.name.trim() || p.name.trim().length > 40\n ) fail(\"Naam moet 1 tot 40 tekens bevatten.\");\n if (\n s.players.some((x: any) =>\n x.id !== p.id && x.name.toLowerCase() === p.name.trim().toLowerCase()\n )\n ) fail(\"Deze naam bestaat al.\");\n if (\n p.start !== null &&\n (typeof p.start !== \"number\" || !Number.isFinite(p.start) ||\n p.start < 0 || p.start > 10000)\n ) fail(\"Startmoyenne moet leeg of een positief getal zijn.\");\n Object.assign(old, { name: p.name.trim(), start: p.start });\n } else if (action.type === \"startReal\") {\n if (!owner || !s.demo || action.confirm !== \"START\") {\n fail(\"Alleen de eigenaar kan de demonstratie afsluiten.\");\n }\n s.demo = false;\n s.matches = [];\n s.players = s.players.map((p: any) => ({ ...p, start: null }));\n } else fail(\"Onbekende wijziging.\");\n return s;\n}\nexport function displayState(state: any, includeNames = false) {\n const used = new Set();\n const players = state.players.map((p: any) => {\n const chars = Array.from(p.name.trim());\n let label = chars.slice(0, 4).join(\"\");\n if (\n state.players.some((q: any) =>\n q.id !== p.id &&\n q.name.trim().slice(0, 4).toLocaleLowerCase() ===\n label.toLocaleLowerCase()\n )\n ) label = chars.slice(0, 5).join(\"\");\n if (\n used.has(label.toLocaleLowerCase()) ||\n state.players.some((q: any) =>\n q.id !== p.id &&\n q.name.trim().slice(0, 5).toLocaleLowerCase() ===\n label.toLocaleLowerCase()\n )\n ) label = chars.slice(0, 4).join(\"\") + \"·\" + p.id;\n used.add(label.toLocaleLowerCase());\n return { ...p, name: includeNames ? p.name : label, shortName: label };\n });\n return { ...state, players };\n}\n","export function standings(s: any) {\n return s.players.map((p: any) => {\n const games = s.matches.filter((m: any) => m.a === p.id || m.b === p.id);\n let points = 0, car = 0, wins = 0, draws = 0;\n for (const m of games) {\n const a = m.a === p.id ? m.ca : m.cb, b = m.a === p.id ? m.cb : m.ca;\n car += a;\n points += a > b ? 2 : a === b ? 1 : 0;\n wins += a > b ? 1 : 0;\n draws += a === b ? 1 : 0;\n }\n return {\n ...p,\n played: games.length,\n remaining: s.players.length - 1 - games.length,\n points,\n car,\n wins,\n draws,\n average: games.length ? car / (games.length * 20) : null,\n };\n }).sort((a: any, b: any) =>\n b.points - a.points || (b.average ?? 0) - (a.average ?? 0) || a.id - b.id\n );\n}\nexport function applyAction(state: any, action: any, owner = false) {\n const s = structuredClone(state);\n const fail = (m: string) => {\n throw new Error(m);\n };\n const num = (n: any) =>\n typeof n === \"number\" && Number.isSafeInteger(n) && n >= 0 && n <= 100000;\n if (action.type === \"match\") {\n const m = action.match;\n if (\n !m || !s.players.some((p: any) => p.id === m.a) ||\n !s.players.some((p: any) => p.id === m.b) || m.a === m.b\n ) fail(\"Kies twee verschillende deelnemers.\");\n if (!num(m.ca) || !num(m.cb)) {\n fail(\"Vul beide scores in als gehele getallen vanaf 0.\");\n }\n if (\n typeof m.date !== \"string\" || !/^\\d{4}-\\d{2}-\\d{2}$/.test(m.date) ||\n !Number.isFinite(Date.parse(m.date)) ||\n new Date(m.date).toISOString().slice(0, 10) !== m.date\n ) fail(\"Vul een geldige datum in.\");\n const old = m.id ? s.matches.find((x: any) => x.id === m.id) : null;\n if (m.id && !old) {\n fail(\"Deze wedstrijd bestaat niet meer. Vernieuw de pagina.\");\n }\n if (\n s.matches.some((x: any) =>\n x.id !== m.id &&\n ((x.a === m.a && x.b === m.b) || (x.a === m.b && x.b === m.a))\n )\n ) {\n fail(\n \"Deze spelers hebben al tegen elkaar gespeeld. Corrigeer de bestaande uitslag.\",\n );\n }\n const clean = {\n id: old?.id ?? crypto.randomUUID(),\n a: m.a,\n b: m.b,\n ca: m.ca,\n cb: m.cb,\n date: m.date,\n };\n s.matches = old\n ? s.matches.map((x: any) => x.id === m.id ? clean : x)\n : [...s.matches, clean];\n } else if (action.type === \"deleteMatch\") {\n if (!s.matches.some((m: any) => m.id === action.id)) {\n fail(\"Wedstrijd niet gevonden.\");\n }\n s.matches = s.matches.filter((m: any) => m.id !== action.id);\n } else if (action.type === \"player\") {\n const p = action.player, old = s.players.find((x: any) => x.id === p?.id);\n if (!old) fail(\"Deelnemer niet gevonden.\");\n if (\n typeof p.name !== \"string\" || !p.name.trim() || p.name.trim().length > 40\n ) fail(\"Naam moet 1 tot 40 tekens bevatten.\");\n if (\n s.players.some((x: any) =>\n x.id !== p.id && x.name.toLowerCase() === p.name.trim().toLowerCase()\n )\n ) fail(\"Deze naam bestaat al.\");\n if (\n p.start !== null &&\n (typeof p.start !== \"number\" || !Number.isFinite(p.start) ||\n p.start < 0 || p.start > 10000)\n ) fail(\"Startmoyenne moet leeg of een positief getal zijn.\");\n Object.assign(old, { name: p.name.trim(), start: p.start });\n } else if (action.type === \"startReal\") {\n if (!owner || !s.demo || action.confirm !== \"START\") {\n fail(\"Alleen de eigenaar kan de demonstratie afsluiten.\");\n }\n s.demo = false;\n s.matches = [];\n s.players = s.players.map((p: any) => ({ ...p, start: null }));\n } else fail(\"Onbekende wijziging.\");\n return s;\n}\nexport function displayState(state: any, includeNames = false) {\n const used = new Set();\n const players = state.players.map((p: any) => {\n const chars = Array.from(p.name.trim());\n let label = chars.slice(0, 4).join(\"\");\n if (\n state.players.some((q: any) =>\n q.id !== p.id &&\n q.name.trim().slice(0, 4).toLocaleLowerCase() ===\n label.toLocaleLowerCase()\n )\n ) label = chars.slice(0, 5).join(\"\");\n if (\n used.has(label.toLocaleLowerCase()) ||\n state.players.some((q: any) =>\n q.id !== p.id &&\n q.name.trim().slice(0, 5).toLocaleLowerCase() ===\n label.toLocaleLowerCase()\n )\n ) label = chars.slice(0, 4).join(\"\") + \"·\" + p.id;\n used.add(label.toLocaleLowerCase());\n return { ...p, name: includeNames ? p.name : label, shortName: label };\n });\n return { ...state, players };\n}\n\n// Presentation order never changes the stored pairing or scores.\nexport function orderedMatch(match: any, players: any[]) {\n const name = (id: number) => {\n const p = players.find((p) => p.id === id);\n return p.shortName ?? p.name;\n };\n const swap = match.cb > match.ca ||\n (match.cb === match.ca &&\n name(match.b).localeCompare(name(match.a), \"nl\") < 0);\n return swap\n ? { ...match, a: match.b, b: match.a, ca: match.cb, cb: match.ca }\n : match;\n}\n","createdAt",["D",1789587316230],"branchVersion","branchId","5ab58193-b7b9-4e57-9c70-3e9498f42f3b","id","72e10bea-a051-405e-a7f1-e9f9c480e56a","biljartcompetitie",["D",1789582693703],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Clubcompetitie: uitslagen, standen en weekformulieren","imageUrl","5db7fd95-a144-4e32-9db1-f1dd5f6c8c16","pinnedFileId","01a0ab70-d5fe-737e-9de0-cce5a2b9f03c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0ab6b-a1e4-73fe-b072-d871155b5e9e","tursoName","72e10beaa051405ea7f1e9f9c480e56a","tursoHostname","72e10beaa051405ea7f1e9f9c480e56a-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789583507842],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":103},"org",{"_101":100,"_102":103,"_104":103,"_18":56,"_105":106,"_107":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",81,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","raymondv","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":295,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":296,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":297,"_85":298,"_87":299,"_89":25},"tree",[177,190,191,192],"files",[177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192],"counts",{"_166":64,"_167":156,"_168":64,"_169":170,"_171":172},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":160,"_32":161,"_30":162,"_136":-5,"_42":43,"_41":156,"_138":60,"_39":163,"_13":64,"_34":164,"_36":-5,"_24":25,"_143":-5,"_27":165},{"_44":153,"_32":154,"_30":155,"_136":-5,"_42":43,"_41":156,"_138":60,"_39":157,"_13":64,"_34":20,"_36":158,"_24":25,"_143":-5,"_27":159},{"_44":146,"_32":147,"_30":148,"_136":-5,"_42":43,"_41":149,"_138":25,"_39":150,"_13":140,"_34":20,"_36":151,"_24":25,"_143":-5,"_27":152},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":25,"_39":139,"_13":140,"_34":141,"_36":142,"_24":25,"_143":144,"_27":145},"7f271196-1a67-4cd9-b9f5-930803a42302","index.ts","parentId",24,"latest",["D",1789584980535],3,"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\";\nconst app = new Hono();\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 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 });\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 (!u.editor) return c.json({ error: \"Log in als beheerder.\" }, 401);\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 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 ?? \"beheerder\",\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, true),\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","label","bos",[135],"0e50b319-1726-46a5-ac91-923df13f4263","README.md","01a0ab70-d5fe-737e-9de0-cbc1b6eaafd1",30,["D",1789586702720],"# Biljartcompetitie\n\nApp: https://raymondv-biljartcompetitie.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",[147],"acbbe75b-ff67-4cfd-b38a-7945edc6d22a","CHANGELOG.md","01a0ab70-d5fe-737e-9de0-c50f1a113208",1,["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

Diff · v31