\n 25TH EDITION · ESPLANADE\n

\n BAYBEATS 2026\n

\n 3–6 SEP · THEATRES ON THE BAY\n

\n setShowInfo((v) => !v)}\n className=\"shrink-0 rounded-full p-2\"\n style={{ background: \"var(--panel)\", border: \"1px solid var(--line)\" }}\n aria-label=\"About this tracker\"\n >\n \n \n

\n\n {showInfo && (\n \n This tracker is shared — anyone with the link sees the same live data. Tap a crew name under\n an act to mark who's holding a ticket or who wants to join. Times marked TBC weren't in the\n preview lineup announcement — edit them once the full esplanade.com/baybeats programme confirms.\n Outdoor stages (LiveWire, Arena, Chillout) are free walk-in; Annexe & Powerhouse² are free\n but need registration, and a few may be ticketed via SISTIC — check the ticket tag per act.\n Acts outlined in orange, with a \"Clashes with…\" note, overlap in time with a set on another\n stage based on start time + duration — useful for spotting which acts you'll have to pick between.\n Each act also has \"Preview on YouTube / Spotify\" — these open a search for that band on each\n platform so you can scout their past songs before deciding who to catch live.\n \"Google Calendar\" opens a pre-filled event to save straight to Gmail's calendar; \"Apple Calendar\"\n downloads a .ics file you can open on iPhone/Mac to add it there. Both use each act's time,\n duration and stage automatically — acts still marked TBC need a confirmed time first.\n

\n )}\n\n {/* crew names */}\n

\n \n {crew.map((name, idx) => (\n renameCrew(idx, e.target.value)}\n className=\"bb-mono text-xs px-2 py-1 rounded outline-none\"\n style={{ background: \"var(--panel)\", border: \"1px solid var(--line)\", color: \"var(--text)\", width: \"80px\", minWidth: \"60px\" }}\n />\n ))}\n \n {saveState === \"saving\" ? \"saving…\" : saveState === \"saved\" ? \"synced\" : saveState === \"error\" ? \"save failed\" : \"\"}\n \n

\n\n {/* per-person overview: every show they're joining and/or have tickets for, across all 4 days */}\n

\n setShowSummary((v) => !v)}\n className=\"flex items-center gap-1.5 bb-mono text-[11px]\"\n style={{ color: \"var(--lime)\" }}\n >\n {showSummary ? \"\\u2212\" : \"+\"} YOUR LINEUP SO FAR\n \n {showSummary && (\n

\n {crew.map((name) => {\n const rows = summaryByPerson[name] || [];\n return (\n

\n \n {name}\n \n \n {rows.length} show{rows.length === 1 ? \"\" : \"s\"}\n \n

\n {rows.length === 0 ? (\n

\n No shows tracked yet\n

\n ) : (\n

\n {rows.map((r) => (\n

{r.act}

\n {r.date}\n ·\n {r.time}\n ·\n {r.stage}\n {r.qty > 0 && (\n \n · x{r.qty}\n \n )}\n {r.joining && (\n \n · joining\n \n )}\n

\n ))}\n

\n )}\n

\n );\n })}\n

\n )}\n

\n \n\n {/* Day tabs */}\n

\n {DAYS.map((d) => {\n const active = d.key === activeDay;\n return (\n setActiveDay(d.key)}\n className=\"bb-display px-4 py-2 rounded-t-lg shrink-0\"\n style={{\n background: active ? \"var(--panel)\" : \"transparent\",\n color: active ? \"var(--lime)\" : \"var(--muted)\",\n border: active ? \"1px solid var(--line)\" : \"1px solid transparent\",\n borderBottom: active ? \"1px solid var(--panel)\" : \"1px solid transparent\",\n marginBottom: \"-1px\",\n fontSize: \"18px\",\n }}\n >\n {d.label.toUpperCase()} {d.date}\n \n {dayCount(d.key)}\n \n \n );\n })}\n

\n\n {/* Act list */}\n

\n {dayActs.map((a) => {\n const meta = TICKET_META[a.ticket] || TICKET_META.unsure;\n const clashes = overlapMap[a.id] || [];\n const hasClash = clashes.length > 0;\n return (\n \n {hasClash && (\n \n \n \n Clashes with {clashes.map((c) => `${c.act} (${c.stage})`).join(\", \")}\n \n

\n )}\n

\n updateAct(a.id, { act: e.target.value })}\n className=\"bb-display text-xl w-full outline-none bg-transparent\"\n style={{ color: \"var(--text)\" }}\n />\n

\n \n \n updateAct(a.id, { time: e.target.value })}\n className=\"bg-transparent outline-none w-16\"\n style={{ color: \"var(--text)\" }}\n />\n \n \n \n updateAct(a.id, { stage: e.target.value })}\n className=\"bg-transparent outline-none\"\n style={{ color: STAGE_COLORS[a.stage] || \"var(--text)\" }}\n >\n {Object.keys(STAGE_COLORS).map((s) => (\n \n ))}\n \n \n updateAct(a.id, { duration: e.target.value })}\n className=\"bg-transparent outline-none flex-1 min-w-[120px]\"\n style={{ color: \"var(--muted)\" }}\n />\n

\n \n \n updateAct(a.id, { origin: e.target.value })}\n placeholder=\"origin\"\n className=\"bg-transparent outline-none w-28\"\n style={{ color: \"var(--text)\" }}\n />\n \n \n \n updateAct(a.id, { genre: e.target.value })}\n placeholder=\"genre\"\n className=\"bg-transparent outline-none flex-1\"\n style={{ color: \"var(--text)\" }}\n />\n \n

\n \n

\n\n {/* ticket type selector */}\n

\n updateAct(a.id, { ticket: e.target.value })}\n className=\"bb-mono text-[11px] px-2 py-1.5 rounded-full outline-none\"\n style={{ background: \"transparent\", border: `1px solid ${meta.color}`, color: meta.color }}\n >\n {Object.entries(TICKET_META).map(([k, v]) => (\n \n ))}\n \n

\n\n {/* preview past songs — links out to search results, no embedded/fabricated tracks */}\n {a.act !== \"G.A.S. Attack: Durian Edition (gear market)\" && (\n

\n \n Preview on YouTube\n \n \n Preview on Spotify\n \n

\n )}\n\n {/* add to calendar — Google (web link) and Apple/other (.ics download) */}\n {(() => {\n const canSchedule = !!getInterval(a);\n const gcalUrl = canSchedule ? buildGoogleCalUrl(a) : null;\n return (\n

\n {canSchedule ? (\n <>\n \n Google Calendar\n \n downloadICS(a)}\n className=\"bb-chip flex items-center gap-1.5 bb-mono text-[11px] px-2.5 py-1.5 rounded-full\"\n style={{ border: \"1px solid var(--line)\", color: \"var(--muted)\" }}\n >\n Apple Calendar (.ics)\n \n \n ) : (\n \n Set the exact time to enable \"add to calendar\"\n \n )}\n

\n );\n })()}\n\n {/* ticket quantities per crew member — only relevant when the act actually needs a\n ticket or registration, so free walk-in stages don't clutter the card */}\n {(a.ticket === \"reg\" || a.ticket === \"ticketed\") && (\n

\n \n \n tickets booked{\" \"}\n \n ({Object.values(a.ticketQty || {}).reduce((sum, n) => sum + n, 0)})\n \n \n

\n {crew.map((name) => {\n const qty = (a.ticketQty || {})[name] || 0;\n const on = qty > 0;\n return (\n \n \n {name}\n \n bumpTicketQty(a.id, name, -1)}\n disabled={qty === 0}\n className=\"bb-chip w-7 h-7 rounded-full flex items-center justify-center bb-mono text-sm leading-none\"\n style={{\n background: on ? \"#151220\" : \"var(--panel)\",\n color: on ? \"var(--lime)\" : \"var(--muted)\",\n opacity: qty === 0 ? 0.4 : 1,\n }}\n aria-label={`Remove one ${name} ticket`}\n >\n −\n \n \n {qty}\n \n bumpTicketQty(a.id, name, 1)}\n className=\"bb-chip w-7 h-7 rounded-full flex items-center justify-center bb-mono text-sm leading-none\"\n style={{ background: on ? \"#151220\" : \"var(--panel)\", color: on ? \"var(--lime)\" : \"var(--muted)\" }}\n aria-label={`Add one ${name} ticket`}\n >\n +\n \n

\n );\n })}\n

\n \n )}\n\n {/* who wants to join (non-ticketed / free stages) */}\n

\n \n {crew.map((name) => {\n const on = (a.interested || []).includes(name);\n return (\n toggleInterested(a.id, name)}\n className=\"bb-chip bb-mono text-[11px] px-2 py-1.5 rounded-full\"\n style={{\n background: on ? \"#c792ff\" : \"transparent\",\n color: on ? \"#151220\" : \"var(--muted)\",\n border: `1px solid ${on ? \"#c792ff\" : \"var(--line)\"}`,\n }}\n >\n {name}\n \n );\n })}\n

\n {(a.ticket === \"reg\" || a.ticket === \"ticketed\") && (\n <>\n \n tickets booked · \n \n )}\n \n wants to join\n

\n \n );\n })}\n\n \n ADD ACT / EVENT FOR {DAYS.find((d) => d.key === activeDay)?.label.toUpperCase()}\n \n \n \n );\n}",[138],"pulls","branches","forks","envVars",{"_152":61,"_154":61},"connections",{"_152":61,"_153":61},"count","unfilledCount","emptyCount",{"_42":137,"_32":138,"_30":139,"_131":-5,"_40":41,"_39":140,"_132":24,"_37":161,"_13":142,"_33":34,"_35":143,"_23":24,"_134":-5,"_158":162,"_26":163},{"_42":130,"_32":27,"_30":31,"_131":-5,"_40":41,"_39":14,"_132":24,"_37":157,"_13":61,"_33":34,"_35":36,"_23":24,"_134":135,"_158":159,"_26":160},["D",1787334343126],"children",[],[27],["D",1787235915479],[],[138],["D",1787235890768],["D",1789521041830],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":54,"_103":104,"_105":24},{"_13":87,"_32":88,"_42":41,"_89":43,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":44,"_96":97},"ctx",{"_80":-5,"_125":202,"_203":204,"_205":206,"_207":24,"_208":24,"_209":24,"_210":57,"_211":-5,"_212":-7,"_213":-7,"_214":61,"_215":24,"_216":24,"_217":-5,"_218":24,"_219":24,"_220":24,"_221":-5},"ENV",{"_173":174,"_175":176,"_177":88,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201},"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"]

Diff · v3