🗓️ The Odyssey @ AMC Lincoln Square 13

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","darknightdesigner","name","amc-odyssey-seats","path","gallery.tsx","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":25,"_58":32,"_59":-5,"_60":-5,"_61":36,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/darknightdesigner/amc-odyssey-seats/code/gallery.tsx","extension","id","dca9003e-8b5d-4c26-a59a-adb883299c13","fileId","01a02bae-1893-74cd-8b0b-04804b7a873e","parentId","branchId","1e573bcc-1836-45fe-9ca6-d40e3cd72be6","branchVersion",1,"latest",true,"createdAt",["D",1787439224880],"version",0,"fileType","http","content","// Gallery UI — clickable calendar of Odyssey showtimes at AMC Lincoln Square 13,\n// with date, time, format, and seats-occupied-vs-capacity on every showing.\nimport React from \"npm:react@18.2.0\";\nimport { renderToStaticMarkup } from \"npm:react-dom@18.2.0/server\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { getReport, pct, type Report, type Showtime } from \"./src/showtimes.ts\";\n\nconst WEEKDAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n/** \"2026-08-11\" -> \"Tue, Aug 11\" (parsed as local time to avoid TZ shifts) */\nfunction prettyDate(date: string): { weekday: string; long: string } {\n const [y, m, d] = date.split(\"-\").map(Number);\n const dt = new Date(y, m - 1, d);\n return {\n weekday: WEEKDAYS[dt.getDay()],\n long: `${WEEKDAYS[dt.getDay()]}, ${MONTHS[dt.getMonth()]} ${d}`,\n };\n}\n\nfunction SeatMeter({ seats }: { seats: Showtime[\"seats\"] }) {\n const p = pct(seats);\n if (seats === null || p === null) {\n return

seat counts N/A

;\n }\n const left = seats.total - seats.occupied;\n const color = p >= 90 ? \"bg-red-500\" : p >= 60 ? \"bg-amber-500\" : \"bg-emerald-500\";\n return (\n

\n {left} seats left\n \n {seats.occupied}/{seats.total} occupied\n \n

\n );\n}\n\nfunction statusBadge(st: Showtime) {\n if (st.isCanceled) return CANCELED;\n if (st.isSoldOut) return SOLD OUT;\n if (st.isAlmostSoldOut) return ALMOST FULL;\n return null;\n}\n\nfunction ShowtimeCard({ st }: { st: Showtime }) {\n const p = pct(st.seats);\n const ring = st.isSoldOut\n ? \"border-red-900/70 bg-red-950/30 opacity-70\"\n : p !== null && p >= 60\n ? \"border-amber-700/70 bg-amber-950/20 hover:border-amber-500\"\n : \"border-slate-700 bg-slate-800/80 hover:border-red-400 hover:bg-slate-800\";\n return (\n \n

\n {st.timeLabel}\n {statusBadge(st)}\n

\n {st.format}\n {st.auditorium ? ` · Aud ${st.auditorium}` : \"\"}\n

\n \n \n );\n}\n\nfunction DaySection({ date, list }: { date: string; list: Showtime[] }) {\n const { weekday, long } = prettyDate(date);\n const today = new Date().toISOString().slice(0, 10);\n return (\n

{long}

\n {weekday}\n {date === today && TODAY}\n {list.length} showings\n

\n {list.map((st) => )}\n

\n );\n}\n\nfunction Stat({ label, value, tone }: { label: string; value: string | number; tone?: string }) {\n return (\n

{value}

{label}

\n );\n}\n\nfunction GalleryPage({ report }: { report: Report }) {\n const dates = Object.keys(report.byDate);\n const all = dates.flatMap((d) => report.byDate[d]);\n const soldOut = all.filter((s) => s.isSoldOut).length;\n const almost = all.filter((s) => s.isAlmostSoldOut).length;\n const withSeats = all.filter((s) => s.seats !== null);\n const avgPct = withSeats.length\n ? Math.round(withSeats.reduce((acc, s) => acc + (pct(s.seats) ?? 0), 0) / withSeats.length)\n : null;\n const isAmc = report.source === \"amc\";\n\n const dayNav = dates.map((d) => {\n const [y, m, day] = d.split(\"-\").map(Number);\n const dt = new Date(y, m - 1, day);\n return (\n \n {WEEKDAYS[dt.getDay()]}\n {day}\n {MONTHS[dt.getMonth()]}\n \n );\n });\n\n return (\n \n \n \n \n 🗓️ The Odyssey @ AMC Lincoln Square 13 — Seat Check\n