`, 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",{"_472":473,"_474":475},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_357":-5,"_20":358,"_22":359,"_360":361,"_362":363,"_26":364,"_24":365,"_366":-5,"_367":-5,"_368":53,"_369":370,"_371":45,"_372":-5,"_373":-5,"_374":375},"routes/_app.x.$handle.$name.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","raymondv","name","biljartcompetitie","branchName","main","version","path","frontend/style.css","project",{"_33":300,"_13":14,"_46":301,"_302":-5,"_303":53,"_304":305,"_306":305,"_307":308,"_309":-5,"_310":311,"_312":64,"_313":45,"_314":-5,"_315":-5,"_316":88,"_317":318,"_319":320,"_321":322,"_323":324,"_325":-5,"_326":327,"_328":327,"_329":330,"_331":330,"_332":330,"_333":327,"_334":327,"_335":336,"_337":338,"_339":340,"_341":53},"tree",[57,58,59,60,61],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_18":55},"contents",[],"upstream","pull","ahead","behind","envVars","id","8b6cd65e-d5e8-4260-b8d3-dc4b8a423031","style.css","fileId","cc338e74-b202-11f1-b8f2-1607ee4eb77e","parentId","01a0ab70-d5fe-737e-9de0-c1b50710578d","branchId","5ab58193-b7b9-4e57-9c70-3e9498f42f3b","branchVersion",126,"latest",true,"createdAt",["D",1789653192162],20,"fileType","content",":root {\n font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: #203b32;\n background: #f5f5ef;\n font-synthesis: none;\n font-weight: 400;\n --green: #174d3b;\n --muted: #758078;\n --line: #e6e9e0;\n}\n* {\n box-sizing: border-box;\n}\nbody {\n margin: 0;\n}\nbutton, input, a {\n -webkit-tap-highlight-color: transparent;\n}\nbutton, input {\n font: inherit;\n}\nbutton, a {\n touch-action: manipulation;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: default;\n}\na {\n color: inherit;\n}\nbutton:focus-visible, a:focus-visible, input:focus-visible {\n outline: 3px solid #75a28a;\n outline-offset: 4px;\n}\nbutton {\n border: 0;\n}\nsvg {\n flex-shrink: 0;\n}\nh1, h2, h3, p {\n margin: 0;\n}\nh1, h2 {\n font-family: Georgia, \"Times New Roman\", serif;\n font-weight: 400;\n letter-spacing: -1.6px;\n}\nh1 {\n font-size: 52px;\n line-height: 1.08;\n}\nh1:focus {\n outline: none;\n}\nh2 {\n font-size: 32px;\n letter-spacing: -0.9px;\n}\n.topbar {\n border-bottom: 1px solid var(--line);\n background: #f5f5ef;\n}\n.topbar-inner {\n max-width: 824px;\n margin: auto;\n padding: 24px 32px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.brand {\n display: flex;\n align-items: center;\n gap: 10px;\n text-decoration: none;\n font-size: 14px;\n letter-spacing: -0.3px;\n font-weight: 650;\n}\n.brand-ball {\n width: 24px;\n height: 24px;\n background: var(--green);\n border-radius: 50%;\n display: inline-block;\n position: relative;\n}\n.brand-ball:after {\n content: \"\";\n width: 7px;\n height: 7px;\n background: #f5f5ef;\n border-radius: 50%;\n position: absolute;\n right: 5px;\n top: 5px;\n}\n.example-badge {\n display: flex;\n align-items: center;\n gap: 6px;\n color: #6e786c;\n font-size: 11px;\n font-weight: 500;\n}\n.example-badge > span {\n width: 5px;\n height: 5px;\n background: #a7b57e;\n border-radius: 50%;\n}\n.page {\n max-width: 824px;\n margin: 0 auto;\n padding: 0 32px;\n}\n.intro {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 48px 0 32px;\n}\n.eyebrow {\n text-transform: uppercase;\n font-size: 10px;\n letter-spacing: 2px;\n font-weight: 650;\n color: #73836d;\n margin-bottom: 14px;\n}\n.intro-caption {\n font-size: 13px;\n color: var(--muted);\n margin-top: 17px;\n}\n.intro-caption span {\n margin: 0 9px;\n color: #a7afa1;\n}\n.primary {\n min-height: 52px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n background: var(--green);\n color: #fff;\n border-radius: 14px;\n font-size: 14px;\n font-weight: 600;\n padding: 0 22px;\n text-decoration: none;\n transition: background 0.15s, transform 0.15s;\n}\n.primary:hover {\n background: #103e2e;\n}\n.primary:active {\n transform: scale(0.985);\n}\n.stand-panel {\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 20px;\n overflow: hidden;\n}\n.stand-table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n font-size: 14px;\n font-variant-numeric: tabular-nums;\n}\n.stand-table th, .stand-table td {\n height: 49px;\n padding: 0 18px;\n border-bottom: 1px solid #eef0e9;\n}\n.stand-table thead th {\n height: 43px;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n font-weight: 500;\n color: var(--muted);\n background: #fbfcf9;\n text-align: left;\n}\n.stand-table .rank {\n width: 63px;\n text-align: center;\n padding: 0 8px;\n color: #97a093;\n font-size: 12px;\n}\n.stand-table tbody th {\n text-align: left;\n font-weight: 500;\n}\n.stand-table .numeric {\n text-align: right;\n width: 95px;\n}\n.stand-table .points-heading {\n width: 92px;\n}\n.stand-table abbr {\n text-decoration: none;\n cursor: default;\n}\n.stand-table .points {\n font-weight: 700;\n color: var(--green);\n}\n.stand-table .average {\n color: #728074;\n font-size: 12px;\n}\n.muted {\n color: #889085;\n font-size: 12px;\n}\n.stand-table tr:last-child > * {\n border-bottom: 0;\n}\n.stand-table .leader > * {\n background: #edf3e7;\n}\n.first-rank {\n background: #d4e3b8;\n color: #345525;\n display: inline-flex;\n width: 25px;\n height: 25px;\n border-radius: 8px;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n}\n.leader-dot {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: #8da16a;\n margin-left: 10px;\n vertical-align: middle;\n}\n.matches-section {\n margin-top: 48px;\n}\n.section-heading {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 28px;\n}\n.section-heading > span {\n color: var(--muted);\n font-size: 11px;\n}\n.match-day {\n margin-bottom: 25px;\n}\n.match-day h3 {\n font-size: 11px;\n font-weight: 500;\n color: #7e887c;\n margin-bottom: 10px;\n}\n.match-list {\n border: 1px solid var(--line);\n border-radius: 16px;\n background: #fff;\n overflow: hidden;\n}\n.match-row {\n display: grid;\n grid-template-columns: 1fr 124px 1fr;\n align-items: center;\n min-height: 60px;\n padding: 0 22px;\n border-bottom: 1px solid #eef0e9;\n font-size: 14px;\n}\n.match-row:last-child {\n border-bottom: 0;\n}\n.match-name {\n color: #859080;\n}\n.match-name.winner {\n color: #314b38;\n font-weight: 500;\n}\n.match-name.right {\n text-align: right;\n}\n.match-score {\n display: flex;\n gap: 12px;\n align-items: center;\n justify-content: center;\n font-variant-numeric: tabular-nums;\n}\n.match-score > b {\n font-size: 16px;\n font-weight: 500;\n min-width: 28px;\n text-align: center;\n color: #6f7d70;\n}\n.match-score > b.winning-score {\n color: #254d36;\n}\n.match-score > span {\n color: #bec5b9;\n font-size: 13px;\n}\n.site-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 10px;\n color: #98a090;\n padding: 16px 0 36px;\n}\n.site-footer a {\n text-decoration: none;\n}\n.mobile-action {\n display: none;\n}\n.notice {\n display: flex;\n gap: 8px;\n align-items: center;\n background: #e8efde;\n border-radius: 12px;\n padding: 14px;\n font-size: 13px;\n margin-bottom: 18px;\n}\n.flow {\n max-width: 600px;\n padding-bottom: 40px;\n}\n.flow-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 28px 0 20px;\n}\n.back-button {\n padding: 10px 0;\n background: none;\n color: #5a6d5d;\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n}\n.step-count {\n font-size: 12px;\n font-variant-numeric: tabular-nums;\n color: #23462f;\n}\n.step-count span {\n color: #a3ab9c;\n margin-left: 4px;\n}\n.step-track {\n display: flex;\n gap: 6px;\n margin-bottom: 38px;\n}\n.step-track span {\n height: 3px;\n border-radius: 4px;\n flex: 1;\n background: #e2e7da;\n}\n.step-track span.active {\n background: #517854;\n}\n.flow-heading {\n margin-bottom: 28px;\n}\n.flow-heading h1 {\n font-size: 40px;\n letter-spacing: -1.4px;\n}\n.flow-heading > p:last-child {\n color: var(--muted);\n font-size: 13px;\n margin-top: 14px;\n line-height: 1.6;\n}\n.search-field {\n display: flex;\n align-items: center;\n gap: 10px;\n border: 1px solid #dce2d5;\n border-radius: 13px;\n background: #fff;\n padding: 0 14px;\n height: 50px;\n margin-bottom: 18px;\n color: #98a38e;\n}\n.search-field input {\n border: 0;\n background: transparent;\n flex: 1;\n min-width: 0;\n font-size: 16px;\n outline: none;\n color: #284334;\n}\n.search-field input::placeholder {\n color: #a3ab9d;\n font-size: 13px;\n}\n.search-field button {\n background: none;\n font-size: 23px;\n color: #7f8e77;\n width: 30px;\n height: 36px;\n}\n.search-field:focus-within {\n border-color: #6b8a63;\n box-shadow: 0 0 0 3px #e4eddb;\n}\n.player-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n.player-choice {\n -webkit-tap-highlight-color: transparent;\n display: flex;\n align-items: center;\n gap: 10px;\n background: #fff;\n min-height: 66px;\n padding: 12px;\n border: 1px solid var(--line);\n border-radius: 14px;\n text-align: left;\n font-size: 14px;\n color: #2a4933;\n transition: border-color 0.15s, background 0.15s;\n}\n@media (hover: hover) and (pointer: fine) {\n .player-choice:hover {\n background: #f0f5e9;\n border-color: #b2c4a5;\n }\n}\n.player-initial {\n width: 30px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #f0f3e9;\n border-radius: 9px;\n font-family: Georgia, serif;\n font-size: 18px;\n color: #75885e;\n}\n.player-choice > svg {\n margin-left: auto;\n color: #aab69c;\n width: 15px;\n}\n.empty {\n background: #edf1e6;\n border-radius: 15px;\n padding: 30px 20px;\n text-align: center;\n grid-column: 1/-1;\n}\n.empty p {\n font-family: Georgia, serif;\n font-size: 23px;\n margin-bottom: 10px;\n}\n.empty span {\n color: var(--muted);\n font-size: 13px;\n}\n.score-card {\n border: 1px solid var(--line);\n background: #fff;\n border-radius: 20px;\n padding: 26px 20px 17px;\n}\n.score-inputs {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);\n gap: 6px;\n align-items: center;\n}\n.score-inputs label {\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 0;\n}\n.score-player {\n font-size: 20px;\n font-weight: 500;\n}\n.you-label {\n color: #9aa58e;\n font-size: 11px;\n margin: 6px 0 20px;\n}\n.score-inputs input {\n width: 100%;\n max-width: 140px;\n height: 96px;\n border: 1px solid #dce4d3;\n background: #f9fbf5;\n border-radius: 13px;\n text-align: center;\n font-size: 46px;\n color: var(--green);\n font-variant-numeric: tabular-nums;\n -moz-appearance: textfield;\n}\n.score-inputs input::-webkit-inner-spin-button,\n.score-inputs input::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.score-inputs input::placeholder {\n color: #c2cbb8;\n}\n.versus {\n color: #a2b196;\n font-size: 22px;\n text-align: center;\n padding-top: 52px;\n}\n.turns-note {\n display: block;\n text-align: center;\n color: #9aa48f;\n font-size: 10px;\n margin-top: 20px;\n}\n.date-field {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 15px;\n margin: 22px 0 28px;\n font-size: 13px;\n color: #75856a;\n}\n.date-field input {\n min-width: 0;\n max-width: 190px;\n border: 1px solid #dce2d5;\n border-radius: 11px;\n padding: 12px;\n background: white;\n color: #33503a;\n font-size: 16px;\n min-height: 46px;\n}\n.full {\n width: 100%;\n}\n.full > svg:last-child {\n margin-left: auto;\n}\n.full {\n justify-content: space-between;\n}\n.preview-note {\n font-size: 11px;\n color: #909b87;\n text-align: center;\n line-height: 1.6;\n margin: 16px 20px;\n}\n.form-error {\n color: #a13228;\n background: #fff1ed;\n padding: 14px;\n border-radius: 12px;\n font-size: 13px;\n line-height: 1.5;\n margin-bottom: 15px;\n}\n.success {\n text-align: center;\n padding: 30px 0;\n}\n.success-symbol {\n width: 66px;\n height: 66px;\n background: #e3edd4;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #446d34;\n margin: 10px auto 26px;\n}\n.success-symbol svg {\n width: 30px;\n height: 30px;\n}\n.success h1 {\n font-size: 39px;\n line-height: 1.15;\n}\n.result-receipt {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 16px;\n padding: 28px 20px;\n margin: 30px 0 20px;\n font-size: 15px;\n}\n.result-receipt strong {\n font-size: 28px;\n font-weight: 500;\n}\n.result-receipt em {\n font-style: normal;\n color: #b4beaa;\n font-weight: 400;\n}\n.success > p:not(.eyebrow) {\n font-size: 13px;\n line-height: 1.7;\n color: var(--muted);\n margin-bottom: 26px;\n}\n.loading {\n padding-top: 50px;\n}\n.loading h1 {\n margin-top: 40px;\n margin-bottom: 22px;\n font-size: 38px;\n}\n.loading p {\n color: var(--muted);\n margin-bottom: 24px;\n}\n@media (max-width: 600px) {\n .topbar-inner {\n padding: 19px 22px;\n }\n .brand {\n font-size: 12px;\n }\n .brand-ball {\n width: 22px;\n height: 22px;\n }\n .page {\n padding-left: 20px;\n padding-right: 20px;\n }\n .intro {\n padding: 32px 0 25px;\n }\n .eyebrow {\n font-size: 9px;\n margin-bottom: 12px;\n }\n h1 {\n font-size: 41px;\n letter-spacing: -1.5px;\n }\n .intro-caption {\n font-size: 12px;\n margin-top: 14px;\n }\n .desktop-add {\n display: none;\n }\n .stand-panel {\n border-radius: 16px;\n }\n .stand-table th, .stand-table td {\n height: 46px;\n padding: 0 11px;\n }\n .stand-table .rank {\n width: 36px;\n font-size: 11px;\n padding: 0 5px;\n }\n .stand-table .numeric {\n width: 55px;\n }\n .stand-table .points-heading {\n width: 60px;\n }\n .stand-table thead th {\n font-size: 9px;\n letter-spacing: 0.2px;\n height: 39px;\n }\n .stand-table .average {\n font-size: 11px;\n }\n .stand-table {\n font-size: 13px;\n }\n .stand-table .points {\n font-size: 14px;\n }\n .first-rank {\n width: 23px;\n height: 23px;\n }\n .matches-section {\n margin-top: 35px;\n }\n .section-heading {\n margin-bottom: 25px;\n }\n h2 {\n font-size: 29px;\n }\n .section-heading > span {\n font-size: 10px;\n }\n .match-row {\n padding: 0 18px;\n min-height: 57px;\n grid-template-columns: 1fr 115px 1fr;\n font-size: 13px;\n }\n .site-footer {\n padding-bottom: 110px;\n gap: 15px;\n }\n .mobile-action {\n display: block;\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 13px 20px max(16px, env(safe-area-inset-bottom));\n background: linear-gradient(to bottom, #f5f5eff0, #f5f5ef 30%);\n z-index: 10;\n border-top: 1px solid #e3e8da;\n }\n .mobile-action .primary {\n width: 100%;\n min-height: 52px;\n font-size: 14px;\n }\n .flow-top {\n padding-top: 18px;\n padding-bottom: 16px;\n }\n .step-track {\n margin-bottom: 31px;\n }\n .flow-heading h1 {\n font-size: 35px;\n }\n .flow-heading {\n margin-bottom: 24px;\n }\n .player-choice {\n min-height: 64px;\n padding: 10px;\n gap: 8px;\n }\n .player-grid {\n gap: 9px;\n }\n .score-card {\n padding: 24px 17px 18px;\n }\n .score-inputs input {\n height: 92px;\n font-size: 43px;\n }\n .success h1 {\n font-size: 35px;\n }\n .example-badge {\n font-size: 10px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n * {\n scroll-behavior: auto !important;\n transition: none !important;\n }\n}\n/* Compact player selection and player history. */\n.player-grid {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 8px;\n}\n.player-choice {\n min-height: 50px;\n padding: 12px;\n font-size: 14px;\n gap: 5px;\n}\n.player-choice > svg {\n width: 13px;\n}\n.flow .step-track {\n margin-bottom: 24px;\n}\n.flow .flow-heading {\n margin-bottom: 22px;\n}\n.name-link {\n background: transparent;\n color: inherit;\n padding: 12px 0;\n min-height: 44px;\n font-weight: 500;\n text-align: left;\n font-size: inherit;\n text-decoration: underline;\n text-decoration-color: #becdb2;\n text-underline-offset: 4px;\n}\n@media (hover: hover) and (pointer: fine) {\n .name-link:hover {\n color: #174d3b;\n text-decoration-color: #174d3b;\n }\n}\n.match-row {\n display: flex;\n gap: 14px;\n}\n.match-pair {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n color: #314b38;\n}\n.pair-separator {\n color: #a6b19c;\n font-size: 12px;\n}\n.match-score {\n flex-shrink: 0;\n gap: 7px;\n min-width: 86px;\n}\n.match-score > b {\n color: #315338;\n}\n.player-page {\n padding-bottom: 40px;\n}\n.player-heading {\n margin: 12px 0 28px;\n}\n.recent-form {\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 34px;\n}\n.recent-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n margin-bottom: 16px;\n}\n.recent-heading h2 {\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0;\n}\n.recent-heading > span {\n font-size: 10px;\n color: var(--muted);\n}\n.form-badges {\n display: flex;\n gap: 8px;\n}\n.result-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 9px;\n font-size: 11px;\n font-weight: 650;\n flex-shrink: 0;\n}\n.result-badge.W {\n background: #e1edd7;\n color: #3d6232;\n}\n.result-badge.G {\n background: #f0eee5;\n color: #827348;\n}\n.result-badge.V {\n background: #f5e8e2;\n color: #9b6550;\n}\n.form-badges .result-badge {\n width: 39px;\n height: 39px;\n font-size: 13px;\n}\n.form-legend {\n font-size: 10px;\n color: var(--muted);\n margin-top: 13px;\n}\n.player-matches > h2 {\n margin-bottom: 24px;\n}\n@media (max-width: 600px) {\n .player-choice {\n min-height: 48px;\n font-size: 13px;\n padding: 10px;\n }\n .flow .step-track {\n margin-bottom: 24px;\n }\n .flow .flow-heading {\n margin-bottom: 22px;\n }\n .flow-top {\n padding-top: 12px;\n padding-bottom: 12px;\n }\n .flow-heading h1 {\n font-size: 32px;\n }\n .flow-heading > p:last-child {\n margin-top: 10px;\n }\n .player-grid {\n gap: 8px;\n }\n .match-row {\n padding: 0 15px;\n gap: 10px;\n }\n .match-pair {\n gap: 8px;\n }\n .match-score {\n min-width: 78px;\n gap: 4px;\n }\n .match-score > b {\n min-width: 25px;\n }\n .player-page .match-row {\n gap: 8px;\n }\n .player-page .result-badge {\n width: 25px;\n height: 25px;\n border-radius: 7px;\n font-size: 10px;\n }\n .recent-form {\n padding: 17px;\n }\n .player-heading .intro-caption {\n font-size: 11px;\n }\n .player-heading .intro-caption span {\n margin: 0 4px;\n }\n}\n.match-entry {\n border-bottom: 1px solid #eef0e9;\n}\n.match-entry:last-child {\n border-bottom: 0;\n}\n.match-entry .match-row {\n border-bottom: 0;\n}\n.average-change {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: 0 22px;\n padding: 0 0 13px;\n font-size: 11px;\n color: #7b8774;\n font-variant-numeric: tabular-nums;\n}\n.average-change strong {\n color: #40573b;\n font-weight: 550;\n margin-left: 6px;\n}\n.delta {\n font-weight: 550;\n}\n.delta.up {\n color: #437039;\n}\n.delta.down {\n color: #a06b51;\n}\n.delta.neutral {\n color: #929b89;\n font-weight: 400;\n}\n.player-matches > h2:has(+ .history-explanation) {\n margin-bottom: 9px;\n}\n.history-explanation {\n font-size: 11px;\n line-height: 1.6;\n color: var(--muted);\n margin-bottom: 24px;\n}\n@media (max-width: 600px) {\n .average-change {\n margin: 0 15px;\n font-size: 11px;\n }\n}\n.edit-party {\n background: transparent;\n color: #8b9980;\n border-radius: 8px;\n min-width: 32px;\n min-height: 40px;\n padding: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.edit-party:hover {\n background: #edf2e6;\n color: #365b34;\n}\n.delete-party {\n display: block;\n margin: 22px auto 0;\n background: transparent;\n color: #a15d48;\n font-size: 13px;\n min-height: 44px;\n}\n.delete-confirm {\n background: #f9ece5;\n border-radius: 14px;\n padding: 18px;\n margin-top: 20px;\n font-size: 14px;\n color: #884a37;\n}\n.delete-confirm > div {\n display: flex;\n align-items: center;\n gap: 22px;\n margin-top: 12px;\n}\n.danger-button {\n background: #a2543e;\n color: white;\n border-radius: 10px;\n padding: 13px 16px;\n font-size: 13px;\n}\n.refresh-link {\n display: block;\n background: none;\n text-decoration: underline;\n color: inherit;\n font-size: 12px;\n min-height: 40px;\n margin-top: 5px;\n padding: 0;\n}\n.match-row {\n gap: 8px;\n}\n.match-pair {\n gap: 7px;\n}\n@media (max-width: 600px) {\n .player-page .match-row {\n padding: 0 10px;\n gap: 4px;\n }\n .player-page .match-pair {\n gap: 5px;\n }\n .player-page .match-score {\n min-width: 68px;\n gap: 2px;\n }\n .player-page .match-score > b {\n min-width: 23px;\n }\n .player-page .edit-party {\n min-width: 30px;\n }\n .player-page .result-badge {\n width: 22px;\n height: 24px;\n }\n}\n/* Short password gate; the server remains authoritative. */\n.unlock-form p {\n color: var(--muted, #69756c);\n line-height: 1.5;\n}\n.password-field {\n display: grid;\n gap: 10px;\n font-weight: 600;\n}\n.password-field input {\n width: 100%;\n box-sizing: border-box;\n padding: 16px;\n border: 1px solid #d9dfd8;\n border-radius: 12px;\n background: white;\n font: inherit;\n}\n.password-field input:focus {\n outline: 2px solid #2f644d;\n outline-offset: 2px;\n}\n/* Spend screen space on readable names, rather than a tall heading. */\n.topbar-inner {\n padding-top: 13px;\n padding-bottom: 13px;\n}\n.brand {\n font-size: 15px;\n}\n.intro {\n padding: 20px 0 18px;\n}\nh1 {\n font-size: 36px;\n letter-spacing: -1px;\n}\n.intro-caption {\n margin-top: 7px;\n font-size: 14px;\n}\n.flow-top {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.flow .step-track {\n margin-bottom: 15px;\n}\n.flow .flow-heading {\n margin-bottom: 18px;\n}\n.flow-heading h1 {\n font-size: 32px;\n}\n.flow-heading .eyebrow {\n margin-bottom: 7px;\n}\n.flow-heading > p:last-child {\n margin-top: 8px;\n font-size: 15px;\n}\n.player-choice {\n min-height: 62px;\n padding: 14px;\n font-size: 18px;\n font-weight: 650;\n}\n.name-link {\n text-decoration: none;\n font-size: 16px;\n font-weight: 650;\n}\n@media (hover: hover) and (pointer: fine) {\n .name-link:hover {\n text-decoration: none;\n }\n}\n.stand-table .average {\n font-size: 14px;\n}\n.stand-table thead th {\n font-size: 11px;\n}\n.access-page {\n padding-top: 32px;\n}\n@media (max-width: 600px) {\n .topbar-inner {\n padding: 12px 20px;\n }\n .intro {\n padding: 18px 0 16px;\n }\n h1 {\n font-size: 32px;\n }\n .flow-heading h1 {\n font-size: 29px;\n }\n .player-grid {\n gap: 9px;\n }\n .player-choice {\n min-height: 60px;\n padding: 12px;\n font-size: 17px;\n }\n .stand-table th, .stand-table td {\n padding-left: 8px;\n padding-right: 8px;\n }\n .stand-table {\n font-size: 14px;\n }\n}\n\n/* A single, compact overview for results and player history. */\n.matches-section {\n margin-top: 28px;\n}\n.section-heading {\n margin-bottom: 12px;\n gap: 12px;\n}\n.section-heading h2 {\n font-family: inherit;\n font-size: 18px;\n font-weight: 650;\n letter-spacing: -0.3px;\n}\n.player-heading {\n margin: 4px 0 22px;\n padding: 20px;\n border: 1px solid var(--line);\n border-radius: 16px;\n background: #eef2e7;\n}\n.player-summary-top {\n display: flex;\n justify-content: space-between;\n gap: 16px;\n align-items: center;\n}\n.player-heading h1 {\n font-size: 34px;\n}\n.player-heading .intro-caption {\n font-size: 12px;\n margin-top: 8px;\n line-height: 1.5;\n}\n.player-heading .intro-caption span {\n margin: 0 3px;\n}\n.player-average {\n display: grid;\n gap: 4px;\n text-align: right;\n flex-shrink: 0;\n}\n.player-average span {\n font-size: 11px;\n color: var(--muted);\n}\n.player-average strong {\n font-size: 23px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--green);\n}\n.player-heading .recent-form {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n border: 0;\n border-top: 1px solid #dce3d4;\n border-radius: 0;\n padding: 14px 0 0;\n margin: 16px 0 0;\n background: transparent;\n}\n.player-heading .recent-heading {\n margin: 0;\n font-size: 12px;\n color: var(--muted);\n}\n.player-heading .form-badges {\n gap: 5px;\n}\n.player-heading .form-badges .result-badge {\n width: 26px;\n height: 26px;\n font-size: 11px;\n border-radius: 7px;\n}\n.recent-order {\n font-size: 10px;\n color: var(--muted);\n margin-left: auto;\n}\n.compact-results .match-entry {\n padding: 4px 18px 12px;\n}\n.compact-results .match-row {\n padding: 0;\n min-height: 43px;\n gap: 10px;\n}\n.compact-results .name-link {\n padding: 10px 0;\n min-height: 43px;\n}\n.compact-results .match-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: 20px;\n font-size: 11px;\n color: var(--muted);\n}\n.match-meta time {\n flex-shrink: 0;\n}\n.compact-results .average-change {\n margin: 0 0 0 auto;\n padding: 0;\n gap: 10px;\n font-size: 12px;\n}\n.compact-results .average-change strong {\n margin-left: 3px;\n}\n.compact-results .match-meta .result-badge {\n width: 20px;\n height: 20px;\n border-radius: 5px;\n font-size: 10px;\n}\n.player-matches .history-explanation {\n margin: 10px 0 0;\n}\n@media (max-width: 600px) {\n .player-heading {\n padding: 16px;\n margin-bottom: 20px;\n }\n .player-heading h1 {\n font-size: 30px;\n }\n .player-heading .intro-caption {\n font-size: 11px;\n }\n .player-heading .recent-form {\n gap: 9px;\n }\n .recent-order {\n font-size: 9px;\n }\n .compact-results .match-entry {\n padding-left: 14px;\n padding-right: 14px;\n }\n .compact-results .match-pair {\n gap: 6px;\n }\n .compact-results .match-score {\n min-width: 68px;\n }\n .compact-results .match-score b {\n min-width: 22px;\n }\n}\n@media (max-width: 360px) {\n .player-heading .intro-caption {\n max-width: 150px;\n }\n .recent-order {\n display: none;\n }\n .compact-results .match-row {\n gap: 6px;\n }\n .compact-results .average-change {\n gap: 6px;\n font-size: 11px;\n }\n}\n\n.player-row {\n cursor: pointer;\n}\n@media (hover: hover) and (pointer: fine) {\n .player-row:hover {\n background: #f0f4eb;\n }\n}\n.player-row:has(:focus-visible) {\n outline: 2px solid var(--green);\n outline-offset: -2px;\n}\n.name-link, .player-choice {\n font-weight: 750;\n}\n.compact-results .match-button {\n display: block;\n width: 100%;\n background: transparent;\n border-radius: 0;\n color: inherit;\n text-align: left;\n font: inherit;\n}\n@media (hover: hover) and (pointer: fine) {\n .compact-results .match-button:hover {\n background: #f4f7ef;\n }\n}\n.compact-results .match-button:focus-visible {\n outline: 2px solid var(--green);\n outline-offset: -3px;\n}\n.compact-results .match-button .name-link {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n}\n.compact-results .match-score b {\n font-size: 18px;\n font-weight: 750;\n}\n.stand-table .points, .average-change strong {\n font-weight: 750;\n}\n\n.login-page {\n min-height: 100svh;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 28px 20px;\n}\n.login-card {\n width: 100%;\n max-width: 380px;\n box-sizing: border-box;\n padding: 32px;\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 24px;\n box-shadow: 0 10px 40px #203c2810;\n}\n.login-heading {\n text-align: center;\n margin-bottom: 30px;\n}\n.login-heading .brand-ball {\n width: 34px;\n height: 34px;\n margin-bottom: 16px;\n}\n.login-heading .brand-ball:after {\n width: 9px;\n height: 9px;\n right: 7px;\n top: 7px;\n}\n.login-heading h1 {\n font-size: 44px;\n line-height: 1.1;\n color: var(--green);\n}\n.login-heading h1 > span {\n display: block;\n font-family: system-ui, sans-serif;\n font-size: 17px;\n font-weight: 650;\n letter-spacing: -0.25px;\n margin-bottom: 5px;\n}\n.login-card .score-form {\n margin: 0;\n}\n.login-card .password-field {\n font-size: 14px;\n gap: 9px;\n}\n.login-card .password-field input {\n min-height: 56px;\n font-size: 18px;\n background: #fafbf7;\n}\n.login-card .primary {\n min-height: 54px;\n}\n.login-footer {\n margin-top: 22px;\n font-size: 11px;\n color: var(--muted);\n}\n.login-footer a {\n text-decoration: none;\n}\n@media (max-width: 380px) {\n .login-card {\n padding: 26px 22px;\n }\n}\n@media (max-height: 560px) {\n .login-page {\n justify-content: flex-start;\n padding-top: 20px;\n }\n .login-heading {\n margin-bottom: 20px;\n }\n .login-heading .brand-ball {\n display: none;\n }\n .login-heading h1 {\n font-size: 32px;\n }\n}\n.login-card .login-form {\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 0;\n}\n.login-form .primary {\n margin: 0;\n justify-content: center;\n font-size: 16px;\n font-weight: 700;\n}\n\n/* Easy to tap, but visually secondary to choosing players and saving scores. */\n.flow-top {\n flex-wrap: nowrap;\n gap: 8px;\n padding-top: 6px;\n padding-bottom: 8px;\n}\n.flow-top > .back-button {\n width: auto;\n min-height: 48px;\n box-sizing: border-box;\n padding: 12px 8px;\n margin-left: -8px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #46594d;\n font-size: 16px;\n line-height: 1.35;\n font-weight: 550;\n gap: 8px;\n justify-content: flex-start;\n}\n@media (hover: hover) and (pointer: fine) {\n .flow-top > .back-button:hover {\n background: #eaf0e4;\n }\n}\n.flow-top > .back-button:focus-visible {\n outline: 3px solid #315e49;\n outline-offset: 3px;\n}\n.flow-top > .back-button svg {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n}\n.flow-top > .step-count {\n margin-left: auto;\n font-size: 12px;\n white-space: nowrap;\n}\n\n/* A little less height above the submit button when entering a score. */\n.score-step .score-card {\n padding: 16px 18px 12px;\n}\n.score-step .you-label {\n margin: 4px 0 10px;\n}\n.score-step .turns-note {\n margin-top: 12px;\n}\n.score-step .date-field {\n margin: 14px 0 16px;\n}\n.score-step .score-form > .primary {\n justify-content: center;\n}\n\n.site-footer {\n align-items: flex-start;\n}\n.install-help {\n max-width: 520px;\n text-align: left;\n color: #6c756b;\n}\n.install-help summary {\n cursor: pointer;\n padding: 10px 0;\n font-size: 13px;\n font-weight: 400;\n list-style: none;\n text-decoration: underline;\n text-underline-offset: 3px;\n}\n.install-help summary::-webkit-details-marker {\n display: none;\n}\n.install-help summary .brand-ball {\n width: 20px;\n height: 20px;\n margin: 0 9px 0 4px;\n vertical-align: middle;\n}\n.install-help summary .brand-ball:after {\n width: 6px;\n height: 6px;\n top: 4px;\n right: 4px;\n}\n.install-help > div {\n padding: 6px 12px 10px 0;\n font-size: 16px;\n line-height: 1.6;\n}\n.install-help p {\n margin: 0;\n}\n.install-help .install-caption {\n margin-top: 10px;\n color: #6c756b;\n font-size: 14px;\n}\n.sync-message {\n max-width: 740px;\n margin: 12px auto;\n padding: 10px 18px;\n color: #624f22;\n background: #fff5d9;\n border-radius: 10px;\n font-size: 15px;\n}\n\n/* Full surnames remain readable on small screens. */\n.player-choice > span, .name-link, .score-player {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.match-pair {\n white-space: normal;\n}\n@media (max-width: 600px) {\n .player-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .compact-results .match-entry {\n padding-left: 10px;\n padding-right: 10px;\n }\n .compact-results .match-row {\n gap: 8px;\n overflow-x: auto;\n }\n .compact-results .match-pair {\n display: flex;\n gap: 5px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n .compact-results .match-pair .name-link {\n min-height: 43px;\n padding: 10px 0;\n overflow-wrap: normal;\n font-size: clamp(13px, 4vw, 16px);\n flex-shrink: 0;\n }\n .compact-results .match-score {\n min-width: 60px;\n gap: 3px;\n margin-left: auto;\n }\n .compact-results .match-score b {\n min-width: 20px;\n }\n}\n\n/* Detail pages: result first, explanation only on request. */\n.player-row, .match-button, .detail-player-name {\n -webkit-tap-highlight-color: transparent;\n}\n.player-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n margin: 20px 0 0;\n padding-top: 16px;\n border-top: 1px solid var(--line);\n gap: 12px;\n}\n.player-stats dt {\n color: var(--muted);\n font-size: 13px;\n margin-bottom: 4px;\n}\n.player-stats dd {\n margin: 0;\n font-size: 25px;\n font-weight: 750;\n color: var(--green);\n}\n.player-stats small {\n font-size: 14px;\n font-weight: 450;\n color: var(--muted);\n}\n.player-summary-top > div:first-child {\n min-width: 0;\n}\n.player-heading h1 {\n overflow-wrap: anywhere;\n}\n.match-detail-page {\n max-width: 680px;\n padding-bottom: 40px;\n}\n.match-detail-heading {\n margin: 12px 0 20px;\n}\n.match-detail-heading p {\n color: var(--muted);\n margin: 8px 0 0;\n font-size: 15px;\n}\n.result-card {\n background: white;\n border: 1px solid var(--line);\n border-radius: 18px;\n padding: 8px 20px 14px;\n}\n.result-player {\n display: flex;\n align-items: center;\n gap: 18px;\n padding: 12px 0;\n}\n.result-player + .result-player {\n border-top: 1px solid var(--line);\n}\n.detail-player-name {\n background: none;\n color: var(--green);\n text-align: left;\n font-size: 22px;\n font-weight: 750;\n padding: 6px 0;\n min-height: 44px;\n overflow-wrap: anywhere;\n}\n.result-player > strong {\n margin-left: auto;\n font-size: 36px;\n font-weight: 750;\n color: #687466;\n font-variant-numeric: tabular-nums;\n}\n.result-player > .leading-score {\n color: var(--green);\n}\n.result-outcome {\n color: var(--muted);\n font-size: 14px;\n padding-top: 10px;\n margin: 0;\n border-top: 1px solid var(--line);\n}\n.average-section {\n margin-top: 26px;\n}\n.average-section h2 {\n font-size: 19px;\n margin: 0 0 12px;\n}\n.average-cards {\n background: white;\n border: 1px solid var(--line);\n border-radius: 16px;\n padding: 0 18px;\n}\n.average-card {\n padding: 15px 0;\n}\n.average-card + .average-card {\n border-top: 1px solid var(--line);\n}\n.average-card h3 {\n margin: 0 0 10px;\n font-size: 16px;\n font-weight: 750;\n}\n.average-transition {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n.average-transition > div {\n display: grid;\n gap: 4px;\n}\n.average-transition > div > span {\n color: var(--muted);\n font-size: 12px;\n}\n.average-transition strong {\n font-size: 22px;\n font-weight: 750;\n font-variant-numeric: tabular-nums;\n}\n.average-arrow {\n color: var(--muted);\n}\n.average-transition > .delta {\n margin-left: auto;\n font-size: 14px;\n}\n.calculation-help {\n margin-top: 8px;\n font-size: 15px;\n line-height: 1.6;\n color: #596655;\n}\n.calculation-help summary {\n cursor: pointer;\n padding: 12px 0;\n min-height: 44px;\n color: var(--green);\n}\n.calculation-help p {\n margin: 6px 0 12px;\n}\n.calculation-player {\n margin: 14px 0;\n}\n.calculation-player p {\n margin: 3px 0;\n}\n.match-detail-actions {\n margin-top: 20px;\n}\n.match-detail-actions .refresh-link {\n min-height: 44px;\n font-size: 14px;\n}\n@media (max-width: 380px) {\n .player-heading h1 {\n font-size: 28px;\n }\n .player-summary-top {\n gap: 10px;\n }\n .average-transition {\n gap: 10px;\n }\n .average-transition strong {\n font-size: 20px;\n }\n}\n","deleted",false,"label",[56,35],"frontend",{"_33":120,"_13":56,"_36":39,"_38":-5,"_40":41,"_42":86,"_44":45,"_46":121,"_17":88,"_49":97,"_50":-5,"_52":53,"_54":-5,"_71":122,"_18":123},{"_33":92,"_13":93,"_36":94,"_38":-5,"_40":41,"_42":95,"_44":45,"_46":96,"_17":88,"_49":97,"_50":-5,"_52":53,"_54":-5,"_71":98,"_18":99},{"_33":83,"_13":84,"_36":85,"_38":-5,"_40":41,"_42":86,"_44":45,"_46":87,"_17":88,"_49":24,"_50":89,"_52":53,"_54":-5,"_71":90,"_18":91},{"_33":74,"_13":75,"_36":76,"_38":-5,"_40":41,"_42":77,"_44":45,"_46":78,"_17":79,"_49":24,"_50":80,"_52":53,"_54":-5,"_71":81,"_18":82},{"_33":62,"_13":63,"_36":64,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":66,"_17":67,"_49":68,"_50":69,"_52":53,"_54":70,"_71":72,"_18":73},"9af07f5a-90ef-4b2f-9d1b-3dfb76bd25ab","index.ts","01a0ab70-d5fe-737e-9de0-cce5a2b9f03c",109,["D",1789646311469],11,"http","import {\n immutableFileUrl,\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 { appIcons } from \"./server/app-icons.ts\";\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(\"/app-version\", (c) => {\n c.header(\"Cache-Control\", \"no-store\");\n return c.json({ build: immutableFileUrl(\"/frontend/index.tsx\") });\n});\napp.get(\"/manifest.webmanifest\", (c) => {\n c.header(\"Cache-Control\", \"no-cache\");\n c.header(\"Content-Type\", \"application/manifest+json\");\n return c.body(JSON.stringify({\n id: \"/\",\n name: \"Biljartcompetitie BOS\",\n short_name: \"BOS\",\n lang: \"nl\",\n start_url: \"/\",\n scope: \"/\",\n display: \"standalone\",\n background_color: \"#f5f5ef\",\n theme_color: \"#184d3b\",\n icons: [192, 512].map((size) => ({\n src: `/app-icon-${size}.png`,\n sizes: `${size}x${size}`,\n type: \"image/png\",\n purpose: \"any maskable\",\n })),\n }));\n});\nfor (const size of [180, 192, 512]) {\n app.get(`/app-icon-${size}.png`, () => {\n const encoded = appIcons[size];\n return new Response(\n Uint8Array.from(atob(encoded), (ch) => ch.charCodeAt(0)),\n {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=86400\",\n },\n },\n );\n });\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",[],[63],"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",[],[75],"acbbe75b-ff67-4cfd-b38a-7945edc6d22a","CHANGELOG.md","01a0ab70-d5fe-737e-9de0-c50f1a113208",1,["D",1789582693703],0,"# 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