feat: UI redesign with park detail pages and ride status
Some checks failed
Build and Deploy / Build & Push (push) Failing after 22s
Some checks failed
Build and Deploy / Build & Push (push) Failing after 22s
Visual overhaul: - Warmer color system with amber accent for Today, better text hierarchy - Row hover highlighting, sticky column shadow on horizontal scroll - Closed cells replaced with dot (·) instead of "Closed" text - Regional grouping (Northeast/Southeast/Midwest/Texas & South/West) - Two-row header with park count badge and WeekNav on separate lines - Amber "Today" button in WeekNav when off current week - Mobile card layout (< 1024px) with 7-day grid per park; table on desktop - Skeleton loading state via app/loading.tsx Park detail pages (/park/[id]): - Month calendar view with ← → navigation via ?month= param - Live ride status fetched from Six Flags API (cached 1h) - Ride hours only shown when they differ from park operating hours - Fallback to nearest upcoming open day when today is dropped by API, including cross-month fallback for end-of-month edge case Data layer: - Park type gains region field; parks.ts exports groupByRegion() - db.ts gains getParkMonthData() for single-park month queries - sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult with rides, dataDate, isExact, and parkHoursLabel Removed: CalendarGrid.tsx, MonthNav.tsx (dead code) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -62,11 +62,26 @@ interface ApiEvent {
|
||||
extEventName: string;
|
||||
}
|
||||
|
||||
interface ApiRideDetail {
|
||||
itemID: number;
|
||||
itemName: string;
|
||||
extLocationID: string;
|
||||
operatingTimeFrom: string; // "" or "HH:MM" 24h — empty means not scheduled
|
||||
operatingTimeTo: string;
|
||||
}
|
||||
|
||||
interface ApiVenue {
|
||||
venueId: number;
|
||||
venueName: string;
|
||||
detailHours: ApiRideDetail[];
|
||||
}
|
||||
|
||||
interface ApiDay {
|
||||
date: string;
|
||||
isParkClosed: boolean;
|
||||
events?: ApiEvent[];
|
||||
operatings?: ApiOperating[];
|
||||
venues?: ApiVenue[];
|
||||
}
|
||||
|
||||
/** "10:30" → "10:30am", "20:00" → "8pm", "12:00" → "12pm" */
|
||||
@@ -84,8 +99,15 @@ interface ApiResponse {
|
||||
dates: ApiDay[];
|
||||
}
|
||||
|
||||
async function fetchApi(url: string, attempt = 0, totalWaitedMs = 0): Promise<ApiResponse> {
|
||||
const res = await fetch(url, { headers: HEADERS });
|
||||
async function fetchApi(
|
||||
url: string,
|
||||
attempt = 0,
|
||||
totalWaitedMs = 0,
|
||||
revalidate?: number,
|
||||
): Promise<ApiResponse> {
|
||||
const fetchOpts: RequestInit & { next?: { revalidate: number } } = { headers: HEADERS };
|
||||
if (revalidate !== undefined) fetchOpts.next = { revalidate };
|
||||
const res = await fetch(url, fetchOpts);
|
||||
|
||||
if (res.status === 429 || res.status === 503) {
|
||||
const retryAfter = res.headers.get("Retry-After");
|
||||
@@ -96,7 +118,7 @@ async function fetchApi(url: string, attempt = 0, totalWaitedMs = 0): Promise<Ap
|
||||
` [rate-limited] HTTP ${res.status} — waiting ${waitMs / 1000}s (attempt ${attempt + 1}/${MAX_RETRIES})`
|
||||
);
|
||||
await sleep(waitMs);
|
||||
if (attempt < MAX_RETRIES) return fetchApi(url, attempt + 1, totalWaitedMs + waitMs);
|
||||
if (attempt < MAX_RETRIES) return fetchApi(url, attempt + 1, totalWaitedMs + waitMs, revalidate);
|
||||
throw new RateLimitError(totalWaitedMs + waitMs);
|
||||
}
|
||||
|
||||
@@ -105,16 +127,149 @@ async function fetchApi(url: string, attempt = 0, totalWaitedMs = 0): Promise<Ap
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the raw API response for a month — used by scripts/debug.ts.
|
||||
* Fetch the raw API response for a month — used by scripts/debug.ts and the park detail page.
|
||||
* Pass `revalidate` (seconds) to enable Next.js ISR caching when called from a Server Component.
|
||||
*/
|
||||
export async function scrapeMonthRaw(
|
||||
apiId: number,
|
||||
year: number,
|
||||
month: number
|
||||
month: number,
|
||||
revalidate?: number,
|
||||
): Promise<ApiResponse> {
|
||||
const dateParam = `${year}${String(month).padStart(2, "0")}`;
|
||||
const url = `${API_BASE}/${apiId}?date=${dateParam}`;
|
||||
return fetchApi(url);
|
||||
return fetchApi(url, 0, 0, revalidate);
|
||||
}
|
||||
|
||||
export interface RideStatus {
|
||||
name: string;
|
||||
isOpen: boolean;
|
||||
hoursLabel?: string; // e.g. "10am – 10pm"
|
||||
}
|
||||
|
||||
export interface RidesFetchResult {
|
||||
rides: RideStatus[];
|
||||
/** The date the ride data actually came from (YYYY-MM-DD). May differ from
|
||||
* the requested date when the API has already dropped the current day and
|
||||
* we fell back to the nearest upcoming open date. */
|
||||
dataDate: string;
|
||||
/** True when dataDate === requested date. False when we fell back. */
|
||||
isExact: boolean;
|
||||
/** Park-level operating hours for the data date (e.g. "10am – 6pm").
|
||||
* Used by the UI to suppress per-ride hours that match the park hours. */
|
||||
parkHoursLabel?: string;
|
||||
}
|
||||
|
||||
/** Convert "MM/DD/YYYY" API date string to "YYYY-MM-DD". */
|
||||
function apiDateToIso(apiDate: string): string {
|
||||
const [mm, dd, yyyy] = apiDate.split("/");
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch ride operating status for a given date.
|
||||
*
|
||||
* The Six Flags API drops dates that have already started (including today),
|
||||
* returning only tomorrow onwards. When the requested date is missing, we fall
|
||||
* back to the nearest available upcoming date in the same month's response so
|
||||
* the UI can still show a useful (if approximate) schedule.
|
||||
*
|
||||
* Returns null if no ride data could be found at all (API error, pre-season,
|
||||
* no venues in response).
|
||||
*
|
||||
* Pass `revalidate` (seconds) to enable Next.js ISR caching when called from
|
||||
* a Server Component. Defaults to 1 hour.
|
||||
*/
|
||||
export async function scrapeRidesForDay(
|
||||
apiId: number,
|
||||
dateIso: string, // YYYY-MM-DD
|
||||
revalidate = 3600,
|
||||
): Promise<RidesFetchResult | null> {
|
||||
const [yearStr, monthStr] = dateIso.split("-");
|
||||
const year = parseInt(yearStr);
|
||||
const month = parseInt(monthStr);
|
||||
|
||||
let raw: ApiResponse;
|
||||
try {
|
||||
raw = await scrapeMonthRaw(apiId, year, month, revalidate);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!raw.dates.length) return null;
|
||||
|
||||
// The API uses "MM/DD/YYYY" internally.
|
||||
const [, mm, dd] = dateIso.split("-");
|
||||
const apiDate = `${mm}/${dd}/${yearStr}`;
|
||||
|
||||
// Try exact match first; if the API has already dropped today, fall back to
|
||||
// the chronologically nearest available date (always a future date here).
|
||||
let dayData = raw.dates.find((d) => d.date === apiDate);
|
||||
let isExact = true;
|
||||
|
||||
if (!dayData) {
|
||||
// The API drops dates that have already started, so we need a future date.
|
||||
// Prefer the nearest open day; fall back to the nearest date regardless.
|
||||
// If the current month has no more dates (e.g. today is the 30th), also
|
||||
// check next month — a month boundary is not unusual for this case.
|
||||
const futureDates = [...raw.dates]
|
||||
.filter((d) => apiDateToIso(d.date) > dateIso)
|
||||
.sort((a, b) => a.date.localeCompare(b.date));
|
||||
|
||||
dayData = futureDates.find((d) => !d.isParkClosed) ?? futureDates[0];
|
||||
|
||||
if (!dayData) {
|
||||
// Nothing left in the current month — fetch next month.
|
||||
const nextMonthDate = new Date(`${dateIso}T00:00:00`);
|
||||
nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
|
||||
const nextYear = nextMonthDate.getFullYear();
|
||||
const nextMonth = nextMonthDate.getMonth() + 1;
|
||||
try {
|
||||
const nextRaw = await scrapeMonthRaw(apiId, nextYear, nextMonth, revalidate);
|
||||
const nextSorted = [...nextRaw.dates].sort((a, b) => a.date.localeCompare(b.date));
|
||||
dayData = nextSorted.find((d) => !d.isParkClosed) ?? nextSorted[0];
|
||||
} catch {
|
||||
// If the next month fetch fails, we simply have no fallback data.
|
||||
}
|
||||
}
|
||||
|
||||
isExact = false;
|
||||
}
|
||||
|
||||
if (!dayData) return null;
|
||||
|
||||
// Extract park-level hours from the selected day so the UI can suppress
|
||||
// per-ride hours that simply repeat what the park is already showing.
|
||||
const parkOperating =
|
||||
dayData.operatings?.find((o) => o.operatingTypeName === "Park") ??
|
||||
dayData.operatings?.[0];
|
||||
const parkItem = parkOperating?.items?.[0];
|
||||
const parkHoursLabel =
|
||||
parkItem?.timeFrom && parkItem?.timeTo
|
||||
? `${fmt24(parkItem.timeFrom)} – ${fmt24(parkItem.timeTo)}`
|
||||
: undefined;
|
||||
|
||||
const rides: RideStatus[] = [];
|
||||
for (const venue of (dayData.venues ?? []).filter((v) => v.venueName === "Rides")) {
|
||||
for (const ride of venue.detailHours ?? []) {
|
||||
if (!ride.itemName) continue;
|
||||
const isOpen = Boolean(ride.operatingTimeFrom && ride.operatingTimeTo);
|
||||
const hoursLabel = isOpen
|
||||
? `${fmt24(ride.operatingTimeFrom)} – ${fmt24(ride.operatingTimeTo)}`
|
||||
: undefined;
|
||||
rides.push({ name: ride.itemName, isOpen, hoursLabel });
|
||||
}
|
||||
}
|
||||
|
||||
if (rides.length === 0) return null;
|
||||
|
||||
// Sort: open rides first, then alphabetical within each group
|
||||
rides.sort((a, b) => {
|
||||
if (a.isOpen !== b.isOpen) return a.isOpen ? -1 : 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
return { rides, dataDate: apiDateToIso(dayData.date), isExact, parkHoursLabel };
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user