\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}",[],[157,191],"0eff5947-c37f-45a9-9a44-4f45c6a3bdc8","index.html","0ed72160-9d8a-11f1-b0c0-1607ee4eb77e",19,["D",1787335213270],[],[157,199],"701bd51a-5ef4-44cc-b2f5-528cbbe1ced0","Components","498116fe-9d8a-11f1-9fcc-1607ee4eb77e",23,["D",1787335277483],[],[157,206],["D",1787334931624],[174,175,176],[157],["D",1787235890768],["D",1789521041830],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":57,"_106":107,"_108":27},{"_13":90,"_34":91,"_45":44,"_92":46,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":47,"_99":100},"ctx",{"_83":-5,"_128":253,"_254":255,"_256":257,"_258":27,"_259":27,"_260":27,"_261":25,"_262":-5,"_263":-7,"_264":-7,"_265":64,"_266":27,"_267":27,"_268":-5,"_269":27,"_270":27,"_271":27,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":91,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"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 · v24