Fleet Live · Dispatch Board

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_158":159,"_160":161},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_119":-5,"_20":120,"_22":121,"_122":123,"_124":125,"_25":126,"_24":-5,"_127":-5,"_128":-5,"_129":53,"_130":131,"_132":44,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","setupsession","name","Demo","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":-5,"_87":88,"_89":88,"_90":91,"_92":91,"_93":91,"_94":88,"_95":88,"_96":97,"_98":99,"_100":101,"_102":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","687a59d7-be4d-4cdf-b33d-a4b3e5ed90bf","main.ts","fileId","4a8c7266-85fa-11f1-9a03-1607ee4eb77e","parentId","branchId","6f7da00f-f681-4552-a49e-efe4617934f9","branchVersion",13,"latest",true,"createdAt",["D",1787860545735],12,"fileType","http","content","/**\n * fleetLiveMap.ts — Val Town HTTP val\n *\n * Live trucking visualization: a dark \"dispatch board\" map of Chicago with a\n * fleet of trucks driving real streets, a live fleet roster, and an event feed.\n *\n * Routes are fetched server-side from the public OSRM demo router so the trucks\n * follow actual road geometry. If OSRM is unreachable, a synthetic Chicago-style\n * street grid is generated instead, so the page always renders something moving.\n *\n * Endpoints:\n * GET / -> the app\n * GET /api/routes -> { source, routes: [[ [lat,lng], ... ], ...] }\n */\n\n// ---------------------------------------------------------------------------\n// Config\n// ---------------------------------------------------------------------------\n\nconst CHICAGO = { lat: 41.8781, lng: -87.6298 };\nconst BBOX = {\n minLat: 41.815,\n maxLat: 41.955,\n minLng: -87.735,\n maxLng: -87.605,\n};\nconst ROUTE_COUNT = 18;\nconst CACHE_MS = 10 * 60 * 1000;\n\nlet routeCache: { at: number; source: string; routes: number[][][] } | null =\n null;\n\n// ---------------------------------------------------------------------------\n// Route generation\n// ---------------------------------------------------------------------------\n\nfunction randIn(min: number, max: number) {\n return min + Math.random() * (max - min);\n}\n\nfunction randPoint() {\n return {\n lat: randIn(BBOX.minLat, BBOX.maxLat),\n lng: randIn(BBOX.minLng, BBOX.maxLng),\n };\n}\n\nasync function osrmRoute(signal: AbortSignal): Promise {\n const a = randPoint();\n const b = randPoint();\n // Keep routes long enough to be interesting.\n if (Math.abs(a.lat - b.lat) + Math.abs(a.lng - b.lng) < 0.05) return null;\n\n const url = `https://router.project-osrm.org/route/v1/driving/` +\n `${a.lng.toFixed(5)},${a.lat.toFixed(5)};${b.lng.toFixed(5)},${\n b.lat.toFixed(5)\n }` +\n `?overview=full&geometries=geojson&alternatives=false&steps=false`;\n\n const res = await fetch(url, { signal });\n if (!res.ok) return null;\n const json = await res.json();\n const coords = json?.routes?.[0]?.geometry?.coordinates;\n if (!Array.isArray(coords) || coords.length < 20) return null;\n return coords.map((c: number[]) => [c[1], c[0]]); // [lat, lng]\n}\n\n/** Manhattan-style walk over a Chicago-spaced grid. Used only if OSRM fails. */\nfunction gridRoute(): number[][] {\n const dLat = 0.0042; // ~1/8 mile\n const dLng = 0.0056;\n const cols = Math.floor((BBOX.maxLng - BBOX.minLng) / dLng);\n const rows = Math.floor((BBOX.maxLat - BBOX.minLat) / dLat);\n\n let c = Math.floor(Math.random() * cols);\n let r = Math.floor(Math.random() * rows);\n const pts: number[][] = [];\n const push = () => pts.push([BBOX.minLat + r * dLat, BBOX.minLng + c * dLng]);\n push();\n\n const legs = 10 + Math.floor(Math.random() * 8);\n let horizontal = Math.random() < 0.5;\n for (let i = 0; i < legs; i++) {\n const run = 2 + Math.floor(Math.random() * 7);\n const dir = Math.random() < 0.5 ? 1 : -1;\n for (let s = 0; s < run; s++) {\n if (horizontal) c = Math.max(0, Math.min(cols - 1, c + dir));\n else r = Math.max(0, Math.min(rows - 1, r + dir));\n push();\n }\n horizontal = !horizontal;\n }\n return pts;\n}\n\nasync function buildRoutes() {\n if (routeCache && Date.now() - routeCache.at < CACHE_MS) return routeCache;\n\n const routes: number[][][] = [];\n const ctrl = new AbortController();\n const timer = setTimeout(() => ctrl.abort(), 12000);\n\n // Small concurrency: the public OSRM demo server rate-limits bursts.\n try {\n const CONCURRENCY = 4;\n for (let round = 0; round < 6 && routes.length < ROUTE_COUNT; round++) {\n const batch = await Promise.all(\n Array.from(\n { length: CONCURRENCY },\n () => osrmRoute(ctrl.signal).catch(() => null),\n ),\n );\n for (const r of batch) {\n if (r && routes.length < ROUTE_COUNT) routes.push(r);\n }\n }\n } catch {\n /* fall through */\n }\n clearTimeout(timer);\n\n const osrmCount = routes.length;\n while (routes.length < ROUTE_COUNT) routes.push(gridRoute());\n const source = osrmCount >= ROUTE_COUNT\n ? \"osrm\"\n : osrmCount > 0\n ? \"mixed\"\n : \"grid\";\n\n routeCache = { at: Date.now(), source, routes };\n return routeCache;\n}\n\n// ---------------------------------------------------------------------------\n// Handler\n// ---------------------------------------------------------------------------\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/routes\") {\n const data = await buildRoutes();\n return new Response(\n JSON.stringify({ source: data.source, routes: data.routes }),\n {\n headers: {\n \"content-type\": \"application/json; charset=utf-8\",\n \"cache-control\": \"public, max-age=300\",\n },\n },\n );\n }\n\n return new Response(PAGE, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n\n// ---------------------------------------------------------------------------\n// Frontend\n// ---------------------------------------------------------------------------\n\nconst PAGE = /* html */ `\n\n\n\n\nFleet Live · Dispatch Board\n\n\n\n\n\n\n\n

\n Fleet Live\n / chicago terminal\n

LIVE

—

In transit

—

At dock

Delivered

—

Avg MPH

—

Local

\n\n

\n \n

Coverage area

Chicago, IL — Metro

\n In transit\n At dock\n \n

\n\n \n

\n\n\n\n\n`;","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1787860545735],"children",[],[35],"56b9598e-214d-43e3-938d-dc38526a4fbb",["D",1784744546395],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","6f4653ca-91ce-462b-b564-88910ea8912b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f8a8f-1bc1-742a-86b8-adcfc6461f3f","tursoName","56b9598e214d43e3938ddc38526a4fbb","tursoHostname","56b9598e214d43e3938ddc38526a4fbb-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789473046147],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_118":114},"org",{"_11":12,"_111":112,"_113":114,"_70":71,"_115":116,"_117":53},"branch",{"_17":42,"_13":16,"_33":40,"_103":61,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":14,"_110":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Sohrab Amin","avatar","https://lh3.googleusercontent.com/a/ACg8ocL6tPQ1N1ZfujjCdQANzeVaqOdaOjenv4purBVWZhevYNwAMS0=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":153,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":81,"_82":83,"_84":154,"_86":-5,"_87":88,"_89":88,"_90":91,"_92":91,"_93":91,"_94":88,"_95":88,"_96":155,"_98":156,"_100":157,"_102":53},[150],"files",[150],"counts",{"_139":77,"_140":141,"_142":77,"_31":143,"_144":145},[137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":138},[35],"pulls","branches",3,"forks",{"_146":148,"_149":77},"connections",{"_146":77,"_147":77},"count","unfilledCount",8,"emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":151,"_18":152},[],[35],["D",1784744546395],["D",1789473046147],{"_11":12,"_118":114},{"_11":12,"_111":112,"_113":114,"_70":71,"_115":116,"_117":53},{"_17":42,"_13":16,"_33":40,"_103":61,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":14,"_110":12},"ctx",{"_96":-5,"_134":191,"_192":193,"_194":195,"_196":53,"_197":53,"_198":53,"_199":44,"_200":-5,"_201":-7,"_202":-7,"_203":77,"_204":53,"_205":53,"_206":-5,"_207":53,"_208":53,"_209":53,"_210":-5},"ENV",{"_162":163,"_164":165,"_166":16,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190},"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"]

Code