josh
b0bbb4d465
All checks were successful
Build and Deploy / Build & Push (push) Successful in 2m45s
- Remove unused formatDate() from park page (replaced by formatShortDate) - Remove unused date prop from DayCell component - Change let to const for cellBorderRadius in ParkCard - Change let to const for bg in ParkMonthCalendar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
304 lines
9.9 KiB
TypeScript
304 lines
9.9 KiB
TypeScript
import Link from "next/link";
|
||
import { notFound } from "next/navigation";
|
||
import { PARK_MAP } from "@/lib/parks";
|
||
import { openDb, getParkMonthData, getApiId } from "@/lib/db";
|
||
import { scrapeRidesForDay } from "@/lib/scrapers/sixflags";
|
||
import { ParkMonthCalendar } from "@/components/ParkMonthCalendar";
|
||
import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";
|
||
|
||
interface PageProps {
|
||
params: Promise<{ id: string }>;
|
||
searchParams: Promise<{ month?: string }>;
|
||
}
|
||
|
||
function parseMonthParam(param: string | undefined): { year: number; month: number } {
|
||
if (param && /^\d{4}-\d{2}$/.test(param)) {
|
||
const [y, m] = param.split("-").map(Number);
|
||
if (y >= 2020 && y <= 2030 && m >= 1 && m <= 12) {
|
||
return { year: y, month: m };
|
||
}
|
||
}
|
||
const now = new Date();
|
||
return { year: now.getFullYear(), month: now.getMonth() + 1 };
|
||
}
|
||
|
||
export default async function ParkPage({ params, searchParams }: PageProps) {
|
||
const { id } = await params;
|
||
const { month: monthParam } = await searchParams;
|
||
|
||
const park = PARK_MAP.get(id);
|
||
if (!park) notFound();
|
||
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
const { year, month } = parseMonthParam(monthParam);
|
||
|
||
const db = openDb();
|
||
const monthData = getParkMonthData(db, id, year, month);
|
||
const apiId = getApiId(db, id);
|
||
db.close();
|
||
|
||
// Fetch live ride data — cached 1h via Next.js ISR.
|
||
// Note: the API drops today's date from its response (only returns future dates),
|
||
// so scrapeRidesForDay may fall back to the nearest upcoming date.
|
||
let ridesResult: RidesFetchResult | null = null;
|
||
if (apiId !== null) {
|
||
ridesResult = await scrapeRidesForDay(apiId, today);
|
||
}
|
||
|
||
const todayData = monthData[today];
|
||
const parkOpenToday = todayData?.isOpen && todayData?.hoursLabel;
|
||
|
||
return (
|
||
<div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
|
||
{/* ── Header ─────────────────────────────────────────────────────────── */}
|
||
<header style={{
|
||
position: "sticky",
|
||
top: 0,
|
||
zIndex: 20,
|
||
background: "var(--color-bg)",
|
||
borderBottom: "1px solid var(--color-border)",
|
||
padding: "12px 24px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 16,
|
||
}}>
|
||
<Link href="/" style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
fontSize: "0.8rem",
|
||
color: "var(--color-text-muted)",
|
||
textDecoration: "none",
|
||
transition: "color 120ms ease",
|
||
}}
|
||
className="park-name-link"
|
||
>
|
||
← Calendar
|
||
</Link>
|
||
<div style={{ width: 1, height: 16, background: "var(--color-border)" }} />
|
||
<span style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.01em" }}>
|
||
{park.name}
|
||
</span>
|
||
<span style={{ fontSize: "0.75rem", color: "var(--color-text-muted)" }}>
|
||
{park.location.city}, {park.location.state}
|
||
</span>
|
||
</header>
|
||
|
||
<main style={{ padding: "24px", maxWidth: 960, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
|
||
|
||
{/* ── Month Calendar ───────────────────────────────────────────────── */}
|
||
<section>
|
||
<ParkMonthCalendar
|
||
parkId={id}
|
||
year={year}
|
||
month={month}
|
||
monthData={monthData}
|
||
today={today}
|
||
/>
|
||
</section>
|
||
|
||
{/* ── Ride Status ─────────────────────────────────────────────────── */}
|
||
<section>
|
||
<SectionHeading>
|
||
Rides
|
||
<span style={{ fontSize: "0.72rem", fontWeight: 400, color: "var(--color-text-muted)", marginLeft: 8 }}>
|
||
{ridesResult && !ridesResult.isExact
|
||
? formatShortDate(ridesResult.dataDate)
|
||
: "Today"}
|
||
</span>
|
||
</SectionHeading>
|
||
|
||
<RideList
|
||
ridesResult={ridesResult}
|
||
parkOpenToday={!!parkOpenToday}
|
||
apiIdMissing={apiId === null}
|
||
/>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Helpers ────────────────────────────────────────────────────────────────
|
||
|
||
function formatShortDate(iso: string): string {
|
||
return new Date(iso + "T00:00:00").toLocaleDateString("en-US", {
|
||
weekday: "short", month: "short", day: "numeric",
|
||
});
|
||
}
|
||
|
||
// ── Sub-components ─────────────────────────────────────────────────────────
|
||
|
||
function SectionHeading({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div style={{
|
||
display: "flex",
|
||
alignItems: "baseline",
|
||
gap: 0,
|
||
marginBottom: 14,
|
||
paddingBottom: 10,
|
||
borderBottom: "1px solid var(--color-border)",
|
||
}}>
|
||
<h2 style={{
|
||
fontSize: "0.85rem",
|
||
fontWeight: 700,
|
||
color: "var(--color-text)",
|
||
letterSpacing: "0.04em",
|
||
textTransform: "uppercase",
|
||
margin: 0,
|
||
}}>
|
||
{children}
|
||
</h2>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function RideList({
|
||
ridesResult,
|
||
parkOpenToday,
|
||
apiIdMissing,
|
||
}: {
|
||
ridesResult: RidesFetchResult | null;
|
||
parkOpenToday: boolean;
|
||
apiIdMissing: boolean;
|
||
}) {
|
||
if (apiIdMissing) {
|
||
return (
|
||
<Callout>
|
||
Park API ID not discovered yet. Run{" "}
|
||
<code style={{ background: "var(--color-surface-2)", padding: "1px 5px", borderRadius: 3, fontSize: "0.8em" }}>
|
||
npm run discover
|
||
</code>{" "}
|
||
to enable ride data.
|
||
</Callout>
|
||
);
|
||
}
|
||
|
||
if (!parkOpenToday) {
|
||
return <Callout>Park is closed today — no ride schedule available.</Callout>;
|
||
}
|
||
|
||
if (!ridesResult || ridesResult.rides.length === 0) {
|
||
return <Callout>Ride schedule is not yet available from the API.</Callout>;
|
||
}
|
||
|
||
const { rides, isExact, dataDate, parkHoursLabel } = ridesResult;
|
||
const openRides = rides.filter((r) => r.isOpen);
|
||
const closedRides = rides.filter((r) => !r.isOpen);
|
||
|
||
return (
|
||
<div>
|
||
{/* Summary badge row */}
|
||
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
|
||
<div style={{
|
||
background: "var(--color-open-bg)",
|
||
border: "1px solid var(--color-open-border)",
|
||
borderRadius: 20,
|
||
padding: "4px 12px",
|
||
fontSize: "0.72rem",
|
||
fontWeight: 600,
|
||
color: "var(--color-open-hours)",
|
||
}}>
|
||
{openRides.length} open
|
||
</div>
|
||
{closedRides.length > 0 && (
|
||
<div style={{
|
||
background: "var(--color-surface)",
|
||
border: "1px solid var(--color-border)",
|
||
borderRadius: 20,
|
||
padding: "4px 12px",
|
||
fontSize: "0.72rem",
|
||
fontWeight: 500,
|
||
color: "var(--color-text-muted)",
|
||
}}>
|
||
{closedRides.length} closed / unscheduled
|
||
</div>
|
||
)}
|
||
{!isExact && (
|
||
<span style={{ fontSize: "0.7rem", color: "var(--color-text-dim)" }}>
|
||
Showing {formatShortDate(dataDate)} — live schedule updates daily
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Two-column grid */}
|
||
<div style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
||
gap: 6,
|
||
}}>
|
||
{openRides.map((ride) => <RideRow key={ride.name} ride={ride} parkHoursLabel={parkHoursLabel} />)}
|
||
{closedRides.map((ride) => <RideRow key={ride.name} ride={ride} parkHoursLabel={parkHoursLabel} />)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function RideRow({ ride, parkHoursLabel }: { ride: RideStatus; parkHoursLabel?: string }) {
|
||
// Only show the ride's hours when they differ from the park's overall hours.
|
||
// This avoids repeating "10am – 6pm" on every single row when that's the
|
||
// default — but surfaces exceptions like "11am – 4pm" for Safari tours, etc.
|
||
const showHours = ride.isOpen && ride.hoursLabel && ride.hoursLabel !== parkHoursLabel;
|
||
|
||
return (
|
||
<div style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
gap: 10,
|
||
padding: "8px 12px",
|
||
background: "var(--color-surface)",
|
||
border: `1px solid ${ride.isOpen ? "var(--color-open-border)" : "var(--color-border)"}`,
|
||
borderRadius: 8,
|
||
opacity: ride.isOpen ? 1 : 0.6,
|
||
}}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
|
||
<span style={{
|
||
width: 7,
|
||
height: 7,
|
||
borderRadius: "50%",
|
||
background: ride.isOpen ? "var(--color-open-text)" : "var(--color-text-dim)",
|
||
flexShrink: 0,
|
||
}} />
|
||
<span style={{
|
||
fontSize: "0.8rem",
|
||
color: ride.isOpen ? "var(--color-text)" : "var(--color-text-muted)",
|
||
fontWeight: ride.isOpen ? 500 : 400,
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
}}>
|
||
{ride.name}
|
||
</span>
|
||
</div>
|
||
{showHours && (
|
||
<span style={{
|
||
fontSize: "0.72rem",
|
||
color: "var(--color-open-hours)",
|
||
fontWeight: 500,
|
||
flexShrink: 0,
|
||
whiteSpace: "nowrap",
|
||
}}>
|
||
{ride.hoursLabel}
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Callout({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div style={{
|
||
padding: "14px 18px",
|
||
background: "var(--color-surface)",
|
||
border: "1px solid var(--color-border)",
|
||
borderRadius: 8,
|
||
fontSize: "0.82rem",
|
||
color: "var(--color-text-muted)",
|
||
lineHeight: 1.5,
|
||
}}>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|