${sport.toUpperCase()}

\n \n ${games\n .map((game) => {\n const clock = shiftByOffset(new Date(game.start_time), clientOffsetSeconds).toLocaleTimeString(\n \"en-US\",\n { timeZone: \"UTC\", hour: \"numeric\", minute: \"2-digit\" },\n );\n const time = `${clock} ${offsetLabel(clientOffsetSeconds)}`;\n const ch = game.channel;\n const channelText =\n ch.category === \"unknown\"\n ? \"TBD\"\n : `${ch.name}${ch.directv_channel ? ` · DirecTV ${ch.directv_channel}` : ch.note ? ` (${ch.note})` : \"\"}`;\n return ``;\n })\n .join(\"\")}\n

${game.away} @ ${game.home}

${time}

${channelText}

`,\n )\n .join(\"\");\n\n const body = bySport.length ? rows : `

No games ${dateLabel}.

`;\n\n return `

${dateLabel[0].toUpperCase()}${dateLabel.slice(1)}'s Games

${body}`;\n}\n\nexport function renderHtml(bySport: GamesBySport, dateLabel: string, clientOffsetSeconds?: number): Response {\n return new Response(htmlDocument(bySport, dateLabel, clientOffsetSeconds), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n",[],[375,419],"b7b5dcab-6220-4da3-8727-8217ca8ee05f","configHtml.ts","01a054a3-42b9-74da-9ade-293946fb2f30",2,["D",1788126433161],"// The helper's server-rendered config picker — plain HTML forms, no\n// client-side JS, the same \"template string\" shape render/html.ts already\n// uses for the games view. Every `config*Document` export here is pure and\n// is what the tests assert against; main.ts wraps each in a Response\n// (Hono's `c.html`).\n//\n// Checkboxes are generated from lib/catalog.ts's SPORTS/TEAMS — the same\n// tables lib/params.ts validates `/`'s sports[]/teams[] against. That's what\n// makes an invalid selection structurally hard to submit here, rather than\n// something a second validator has to catch on write. See\n// docs/widget-config-plan.md's \"Validation\" section for why there's\n// deliberately no rejection/echo mechanism on this page: the real safety net\n// is resolveParams, which still runs when /config/resolve's redirect lands\n// on `/`.\n//\n// ---- one page per concern, not one page for everything ----\n//\n// This used to be a single `configPageDocument` rendering the settings\n// form, the pairing-code section, and the device list all inline on\n// GET/POST /config/:id — every helper action landed back on that one\n// giant page. It's now four documents behind four routes (main.ts):\n// GET /config (configIndexDocument, every config row), GET/POST /config/:id\n// (configSettingsDocument, the sports/teams form only), GET /config/:id/devices\n// (configDevicesDocument, list + rename), and GET /config/:id/pair plus\n// POST /config/:id/code (configPairDocument, mint/show a code). The three\n// id-scoped documents share one persistent top nav (`configNav`) so a\n// helper can move between them without going back through the index.\n// GET /config/new keeps its own document (configNewDocument): there's no\n// id yet to hang a nav on, and nothing paired or codeable until the config\n// is actually saved.\n\nimport { SPORTS, TEAMS } from \"../lib/catalog.ts\";\nimport { type StoredConfig } from \"../lib/config.ts\";\nimport { titleCase } from \"../lib/text.ts\";\n\n// Deliberately not imported from lib/configStore.ts (the module that\n// actually produces these) — this file stays decoupled from the impure\n// sqlite layer the same way it's decoupled from Sleeper, matching the\n// StoredConfig-from-lib/config.ts pattern below.\nexport type PairedDeviceView = { deviceId: string; name: string | null };\n\n// What GET /config lists — one row per config, enough to tell them apart\n// without opening each one. `deviceCount` is the only field that isn't a\n// direct column read (lib/configStore.ts's listAllConfigs joins it), kept\n// here anyway since disambiguating configs is this page's entire job.\nexport type ConfigRow = {\n id: string;\n sports: string[];\n teams: string[];\n updatedAt: string;\n deviceCount: number;\n};\n\n// device names and ids both originate as free-form input from whatever\n// called POST /pair, not from the closed catalogs sports/team checkboxes\n// draw from — so, unlike most of this file, they need escaping before\n// landing in HTML. Config ids are UUIDs this val mints itself\n// (crypto.randomUUID() in lib/configStore.ts), never free text, so they're\n// interpolated as-is everywhere below, same as formAction always has been.\nfunction escapeHtml(value: string): string {\n return value.replace(/&/g, \"&\").replace(//g, \">\").replace(/\"/g, \""\");\n}\n\nfunction sportCheckboxes(selected: string[]): string {\n return SPORTS.map((sport) => {\n const checked = selected.includes(sport) ? \" checked\" : \"\";\n return ` ${sport.toUpperCase()}`;\n }).join(\" \");\n}\n\n// Grouped by sport (SPORTS order) rather than one flat ~110-entry list —\n// the same \"pick a sport, then a team\" structure widget-ios-brief.md\n// explicitly rejected for the *receiver's* seven-team picker doesn't apply\n// here: the helper is choosing from the full catalog, not a small starter\n// list, and a flat list of 110 checkboxes is the harder one to scan.\nfunction teamCheckboxesBySport(selected: string[]): string {\n return SPORTS.map((sport) => {\n const slugs = Object.entries(TEAMS)\n .filter(([, ref]) => ref.sport === sport)\n .map(([slug]) => slug);\n if (!slugs.length) return \"\";\n const boxes = slugs\n .map((slug) => {\n const checked = selected.includes(slug) ? \" checked\" : \"\";\n return ` ${titleCase(slug)}`;\n })\n .join(\" \");\n return `

${sport.toUpperCase()}${boxes}

`;\n }).join(\"\");\n}\n\n// The index's one-line summary of what a config actually resolves to —\n// same \"empty means all sports, teams beat sports\" precedence buildResolvedUrl\n// (lib/config.ts) and `/`'s resolveParams apply at request time, just\n// described in words instead of computed into a redirect.\nfunction summarizeSelection(config: StoredConfig): string {\n if (config.teams.length) return config.teams.map((slug) => titleCase(slug)).join(\", \");\n if (config.sports.length) return config.sports.map((sport) => sport.toUpperCase()).join(\", \");\n return \"All sports\";\n}\n\n// One row per paired device, each its own form so naming one doesn't\n// require re-submitting the others. Blank means never named — the\n// placeholder, not a value, so an unnamed device saves as null rather than\n// the literal placeholder text.\nfunction deviceListMarkup(devices: PairedDeviceView[], actionPath: (deviceId: string) => string): string {\n if (!devices.length) return \"

No devices paired yet.

\";\n const rows = devices\n .map((device) => {\n const safeId = escapeHtml(device.deviceId);\n const safeName = device.name ? escapeHtml(device.name) : \"\";\n return `

\n \n

`;\n })\n .join(\"\");\n return `

${rows}`;\n}\n\nconst PAGE_STYLE = `\n body { font-family: system-ui, -apple-system, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; line-height: 1.4; }\n h1 { font-size: 1.4rem; }\n h2 { font-size: 1.1rem; }\n fieldset { border: 1px solid #ddd; border-radius: 6px; margin: 0.75rem 0; padding: 0.5rem 1rem; }\n legend { font-weight: 600; padding: 0 0.25rem; }\n label { display: inline-block; margin: 0.3rem 0.85rem 0.3rem 0; }\n button { background: #2563eb; color: #fff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.95rem; cursor: pointer; }\n button:hover { background: #1d4ed8; }\n section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; }\n ul.devices { list-style: none; padding: 0; }\n ul.devices li { margin: 0.4rem 0; }\n ul.devices form { display: flex; gap: 0.5rem; }\n input[type=\"text\"] { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; }\n .breadcrumb { margin: 0 0 0.75rem; }\n .breadcrumb a { color: #2563eb; text-decoration: none; font-size: 0.9rem; }\n nav.config-nav { display: flex; gap: 1.25rem; margin: 0 0 1.5rem; border-bottom: 1px solid #ddd; }\n nav.config-nav a { color: #2563eb; text-decoration: none; padding-bottom: 0.6rem; font-size: 0.95rem; }\n nav.config-nav a.active { color: #1a1a1a; font-weight: 600; border-bottom: 2px solid #2563eb; }\n table.config-index { width: 100%; border-collapse: collapse; margin-top: 1rem; }\n table.config-index th, table.config-index td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #eee; font-size: 0.95rem; }\n table.config-index th { color: #666; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }\n table.config-index td:first-child { font-family: ui-monospace, monospace; font-size: 0.85rem; }\n`;\n\nfunction pageShell(title: string, body: string): string {\n return `\n\n\n\n\n${title}\n\n\n\n${body}\n\n`;\n}\n\ntype ConfigNavActive = \"settings\" | \"devices\" | \"pair\";\n\n// The persistent top nav every id-scoped sub-page shares, so moving between\n// the form, the device list, and the pairing flow never routes back through\n// the index. `active` just marks which tab is current — every route is a\n// real page, not a client-side view swap, so this is plain server-rendered\n// markup with no JS involved.\nfunction configNav(id: string, active: ConfigNavActive): string {\n const tabs: { key: ConfigNavActive; href: string; label: string }[] = [\n { key: \"settings\", href: `/config/${id}`, label: \"Settings\" },\n { key: \"devices\", href: `/config/${id}/devices`, label: \"Devices\" },\n { key: \"pair\", href: `/config/${id}/pair`, label: \"Pair a device\" },\n ];\n const links = tabs\n .map((tab) => `${tab.label}`)\n .join(\"\");\n return ``;\n}\n\n// GET /config. Prototype-stage only: this lists every config's id as a live\n// link, which is exactly the \"unguessable capability URL\" every other page\n// in this file (and docs/valtown-brief.md) otherwise treats as sensitive —\n// bookmark-only, never logged, never enumerable. Explicitly requested as an\n// acceptable bypass while there's no auth story yet; do not carry this\n// page's behavior forward once /config gets real access control.\nexport function configIndexDocument(configs: ConfigRow[]): string {\n const rows = configs\n .map((row) => {\n const safeId = escapeHtml(row.id);\n return `\n ${safeId}\n ${escapeHtml(summarizeSelection(row))}\n ${row.deviceCount}\n ${escapeHtml(new Date(row.updatedAt).toLocaleString())}\n `;\n })\n .join(\"\");\n const body = `\n

All configs

+ New config

\n \n \n ${rows || ``}\n

Config	Favorites	Devices	Updated
No configs yet.

`;\n return pageShell(\"Widget favorites — All configs\", body);\n}\n\nexport type ConfigNewOptions = { formAction: string; config: StoredConfig };\n\n// GET /config/new. No id yet, so no top nav — Settings/Devices/Pair only\n// make sense once POST /config/new has actually created a row.\nexport function configNewDocument(opts: ConfigNewOptions): string {\n const { formAction, config } = opts;\n const body = `\n \n

Widget favorites

\n `;\n return pageShell(\"Widget favorites — New\", body);\n}\n\nexport type ConfigSettingsOptions = {\n id: string;\n formAction: string;\n config: StoredConfig;\n saved?: boolean;\n};\n\n// GET/POST /config/:id. Just the sports/teams form — device list and\n// pairing moved to their own routes/documents below.\nexport function configSettingsDocument(opts: ConfigSettingsOptions): string {\n const { id, formAction, config, saved } = opts;\n const body = `\n ${configNav(id, \"settings\")}\n

Widget favorites

\n ${saved ? \"

Saved.

\" : \"\"}\n `;\n return pageShell(\"Widget favorites — Settings\", body);\n}\n\nexport type ConfigDevicesOptions = {\n id: string;\n devices: PairedDeviceView[];\n deviceActionPath: (deviceId: string) => string;\n};\n\n// GET /config/:id/devices.\nexport function configDevicesDocument(opts: ConfigDevicesOptions): string {\n const { id, devices, deviceActionPath } = opts;\n const body = `\n ${configNav(id, \"devices\")}\n

Paired devices

\n ${deviceListMarkup(devices, deviceActionPath)}`;\n return pageShell(\"Widget favorites — Devices\", body);\n}\n\nexport type ConfigPairOptions = {\n id: string;\n codeActionPath: string;\n pairing?: { code: string; expiresAt: string } | null;\n};\n\n// GET /config/:id/pair (no pairing yet) and POST /config/:id/code\n// (pairing populated with the code just minted).\nexport function configPairDocument(opts: ConfigPairOptions): string {\n const { id, codeActionPath, pairing } = opts;\n const body = `\n ${configNav(id, \"pair\")}\n

Pair a device

\n \n ${\n pairing\n ? `

Code: ${pairing.code} — enter this in the app. Expires ${\n new Date(pairing.expiresAt).toLocaleString()\n }. Reusable until then, so the same code can pair more than one device.

`\n : \"\"\n }`;\n return pageShell(\"Widget favorites — Pair a device\", body);\n}\n",[],[375,426],"f1328322-efbd-44de-8c88-4d17606b911e",["D",1788126380735],[341,342,343,344,345,346,347,348,349],[375],["D",1788126380735],[],[18,88],["D",1788126380735],[],[18,106],["D",1788126380735],[],[18,112],["D",1788126380735],[],[18,118],["D",1788126380735],[],[18,124],["D",1788126380735],[],[18,130],["D",1788126380735],[],[18,136],["D",1788126460839],[],[18,142],["D",1788126380735],[],[18,148],["D",1788126380735],[],[18,154],["D",1788126380735],[],[18,159],["D",1788126380735],[],[18,100],["D",1788126380735],[328,329,330,331,332,333,334,335,336,337,338,339],[18],["D",1787009561780],["D",1789532458193],{"_11":12,"_221":94},{"_11":12,"_217":-5,"_93":94,"_31":92,"_218":219,"_220":30},{"_40":207,"_13":16,"_34":37,"_208":171,"_209":82,"_210":211,"_212":175,"_213":171,"_214":43,"_215":14,"_216":12},"ctx",{"_55":-5,"_241":514,"_515":516,"_517":518,"_519":30,"_520":30,"_521":30,"_522":24,"_523":-5,"_524":-7,"_525":-7,"_526":26,"_527":30,"_528":30,"_529":-5,"_530":30,"_531":30,"_532":30,"_533":-5},"ENV",{"_485":486,"_487":488,"_489":83,"_490":491,"_492":493,"_494":495,"_496":497,"_498":499,"_500":501,"_502":503,"_504":505,"_506":507,"_508":509,"_510":511,"_512":513},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · lib