Compare commits
54 Commits
fdea8443fb
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 0009af751f | |||
| 4063ded9ec | |||
|
|
f0faff412c | ||
|
|
08db97faa8 | ||
|
|
054c82529b | ||
|
|
8437cadee0 | ||
|
|
b4af83b879 | ||
|
|
b1204c95cb | ||
|
|
a5b98f93e6 | ||
|
|
b2ef342bf4 | ||
|
|
e405170c8b | ||
|
|
fd99f6f390 | ||
|
|
4e6040a781 | ||
|
|
7904475ddc | ||
|
|
a84bbcac31 | ||
|
|
569d0a41e2 | ||
|
|
c6c32a168b | ||
|
|
cba8218fe8 | ||
|
|
695feff443 | ||
|
|
f85cc084b7 | ||
|
|
32f0d05038 | ||
|
|
d84a15ad64 | ||
|
|
b26382f427 | ||
|
|
56c7b90262 | ||
|
|
5e4dd7403e | ||
|
|
a717e122f0 | ||
|
|
732390425f | ||
|
|
a1694668d9 | ||
|
|
f809f9171b | ||
|
|
fa269db3ef | ||
|
|
ef3e57bd5a | ||
|
|
ed6d09f3bc | ||
|
|
e2498af481 | ||
|
|
d7f046a4d6 | ||
|
|
7c00ae5000 | ||
|
|
7ee28c7ca3 | ||
|
|
e7dac31d22 | ||
|
|
c25dafb14c | ||
|
|
05f8994966 | ||
|
|
040c1e4d70 | ||
|
|
a31dda4e9e | ||
|
|
b276cc9948 | ||
|
|
53297a7cff | ||
|
|
090f4d876d | ||
|
|
5b575f962e | ||
|
|
8c3841d9a5 | ||
|
|
fd45309891 | ||
|
|
c4c86a3796 | ||
| 7456ead430 | |||
| f1fec2355c | |||
| fbf4337a83 | |||
| 8e969165b4 | |||
| 43feb4cef0 | |||
| a87f97ef53 |
@@ -27,6 +27,18 @@
|
|||||||
--color-open-text: #4ade80;
|
--color-open-text: #4ade80;
|
||||||
--color-open-hours: #bbf7d0;
|
--color-open-hours: #bbf7d0;
|
||||||
|
|
||||||
|
/* ── Weather delay — blue (open by schedule but all rides closed) ───────── */
|
||||||
|
--color-weather-bg: #0a1020;
|
||||||
|
--color-weather-border: #3b82f6;
|
||||||
|
--color-weather-text: #60a5fa;
|
||||||
|
--color-weather-hours: #bfdbfe;
|
||||||
|
|
||||||
|
/* ── Closing — amber (post-close buffer, rides still winding down) ───────── */
|
||||||
|
--color-closing-bg: #1a1100;
|
||||||
|
--color-closing-border: #d97706;
|
||||||
|
--color-closing-text: #fbbf24;
|
||||||
|
--color-closing-hours: #fde68a;
|
||||||
|
|
||||||
/* ── Passholder preview — vivid cyan ─────────────────────────────────────── */
|
/* ── Passholder preview — vivid cyan ─────────────────────────────────────── */
|
||||||
--color-ph-bg: #051518;
|
--color-ph-bg: #051518;
|
||||||
--color-ph-border: #22d3ee;
|
--color-ph-border: #22d3ee;
|
||||||
@@ -80,20 +92,34 @@
|
|||||||
clip-path: inset(0 -16px 0 0);
|
clip-path: inset(0 -16px 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Park row hover (group/group-hover via Tailwind not enough across sticky cols) */
|
|
||||||
.park-row:hover td,
|
|
||||||
.park-row:hover th {
|
|
||||||
background-color: var(--color-surface-hover) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Park name link hover ────────────────────────────────────────────────── */
|
/* ── Park name link hover ────────────────────────────────────────────────── */
|
||||||
.park-name-link {
|
.park-name-link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
transition: color 120ms ease;
|
transition: background 150ms ease;
|
||||||
}
|
}
|
||||||
.park-name-link:hover {
|
.park-name-link:hover {
|
||||||
color: var(--color-accent);
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile park card hover ─────────────────────────────────────────────── */
|
||||||
|
.park-card {
|
||||||
|
transition: background 150ms ease;
|
||||||
|
}
|
||||||
|
.park-card:hover {
|
||||||
|
background: var(--color-surface-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Park month calendar — responsive row heights ───────────────────────── */
|
||||||
|
/* Mobile: fixed uniform rows so narrow columns don't cause height variance */
|
||||||
|
.park-calendar-grid {
|
||||||
|
grid-auto-rows: 72px;
|
||||||
|
}
|
||||||
|
/* sm+: let rows breathe and grow with their content (cells are wide enough) */
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.park-calendar-grid {
|
||||||
|
grid-auto-rows: minmax(108px, auto);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Pulse animation for skeleton ───────────────────────────────────────── */
|
/* ── Pulse animation for skeleton ───────────────────────────────────────── */
|
||||||
|
|||||||
209
app/page.tsx
209
app/page.tsx
@@ -1,10 +1,12 @@
|
|||||||
import { WeekCalendar } from "@/components/WeekCalendar";
|
import { HomePageClient } from "@/components/HomePageClient";
|
||||||
import { MobileCardList } from "@/components/MobileCardList";
|
import { PARKS } from "@/lib/parks";
|
||||||
import { WeekNav } from "@/components/WeekNav";
|
import { openDb, getDateRange, getApiId } from "@/lib/db";
|
||||||
import { Legend } from "@/components/Legend";
|
import { getTodayLocal, isWithinOperatingWindow, getOperatingStatus } from "@/lib/env";
|
||||||
import { EmptyState } from "@/components/EmptyState";
|
import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
|
||||||
import { PARKS, groupByRegion } from "@/lib/parks";
|
import { fetchToday } from "@/lib/scrapers/sixflags";
|
||||||
import { openDb, getDateRange } from "@/lib/db";
|
import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
|
||||||
|
import { readParkMeta, getCoasterSet } from "@/lib/park-meta";
|
||||||
|
import type { DayData } from "@/lib/db";
|
||||||
|
|
||||||
interface PageProps {
|
interface PageProps {
|
||||||
searchParams: Promise<{ week?: string }>;
|
searchParams: Promise<{ week?: string }>;
|
||||||
@@ -18,9 +20,10 @@ function getWeekStart(param: string | undefined): string {
|
|||||||
return d.toISOString().slice(0, 10);
|
return d.toISOString().slice(0, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const today = new Date();
|
const todayIso = getTodayLocal();
|
||||||
today.setDate(today.getDate() - today.getDay());
|
const d = new Date(todayIso + "T00:00:00");
|
||||||
return today.toISOString().slice(0, 10);
|
d.setDate(d.getDate() - d.getDay());
|
||||||
|
return d.toISOString().slice(0, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getWeekDates(sundayIso: string): string[] {
|
function getWeekDates(sundayIso: string): string[] {
|
||||||
@@ -32,9 +35,10 @@ function getWeekDates(sundayIso: string): string[] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getCurrentWeekStart(): string {
|
function getCurrentWeekStart(): string {
|
||||||
const today = new Date();
|
const todayIso = getTodayLocal();
|
||||||
today.setDate(today.getDate() - today.getDay());
|
const d = new Date(todayIso + "T00:00:00");
|
||||||
return today.toISOString().slice(0, 10);
|
d.setDate(d.getDate() - d.getDay());
|
||||||
|
return d.toISOString().slice(0, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function HomePage({ searchParams }: PageProps) {
|
export default async function HomePage({ searchParams }: PageProps) {
|
||||||
@@ -42,11 +46,36 @@ export default async function HomePage({ searchParams }: PageProps) {
|
|||||||
const weekStart = getWeekStart(params.week);
|
const weekStart = getWeekStart(params.week);
|
||||||
const weekDates = getWeekDates(weekStart);
|
const weekDates = getWeekDates(weekStart);
|
||||||
const endDate = weekDates[6];
|
const endDate = weekDates[6];
|
||||||
const today = new Date().toISOString().slice(0, 10);
|
const today = getTodayLocal();
|
||||||
const isCurrentWeek = weekStart === getCurrentWeekStart();
|
const isCurrentWeek = weekStart === getCurrentWeekStart();
|
||||||
|
|
||||||
const db = openDb();
|
const db = openDb();
|
||||||
const data = getDateRange(db, weekStart, endDate);
|
const data = getDateRange(db, weekStart, endDate);
|
||||||
|
|
||||||
|
// Merge live today data from the Six Flags API (dateless endpoint, 5-min ISR cache).
|
||||||
|
// This ensures weather delays, early closures, and hour changes surface within 5 minutes
|
||||||
|
// without waiting for the next scheduled scrape. Only fetched when viewing the current week.
|
||||||
|
if (weekDates.includes(today)) {
|
||||||
|
const todayResults = await Promise.all(
|
||||||
|
PARKS.map(async (p) => {
|
||||||
|
const apiId = getApiId(db, p.id);
|
||||||
|
if (!apiId) return null;
|
||||||
|
const live = await fetchToday(apiId, 300); // 5-min ISR cache
|
||||||
|
return live ? { parkId: p.id, live } : null;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
for (const result of todayResults) {
|
||||||
|
if (!result) continue;
|
||||||
|
const { parkId, live } = result;
|
||||||
|
if (!data[parkId]) data[parkId] = {};
|
||||||
|
data[parkId][today] = {
|
||||||
|
isOpen: live.isOpen,
|
||||||
|
hoursLabel: live.hoursLabel ?? null,
|
||||||
|
specialType: live.specialType ?? null,
|
||||||
|
} satisfies DayData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
db.close();
|
db.close();
|
||||||
|
|
||||||
const scrapedCount = Object.values(data).reduce(
|
const scrapedCount = Object.values(data).reduce(
|
||||||
@@ -54,100 +83,68 @@ export default async function HomePage({ searchParams }: PageProps) {
|
|||||||
0
|
0
|
||||||
);
|
);
|
||||||
|
|
||||||
const visibleParks = PARKS.filter((park) =>
|
// Always fetch both ride and coaster counts — the client decides which to display.
|
||||||
weekDates.some((date) => data[park.id]?.[date]?.isOpen)
|
const parkMeta = readParkMeta();
|
||||||
);
|
const hasCoasterData = PARKS.some((p) => (parkMeta[p.id]?.coasters.length ?? 0) > 0);
|
||||||
|
|
||||||
const grouped = groupByRegion(visibleParks);
|
let rideCounts: Record<string, number> = {};
|
||||||
|
let coasterCounts: Record<string, number> = {};
|
||||||
|
let closingParkIds: string[] = [];
|
||||||
|
let openParkIds: string[] = [];
|
||||||
|
let weatherDelayParkIds: string[] = [];
|
||||||
|
if (weekDates.includes(today)) {
|
||||||
|
// Parks within operating hours right now (for open dot — independent of ride counts)
|
||||||
|
const openTodayParks = PARKS.filter((p) => {
|
||||||
|
const dayData = data[p.id]?.[today];
|
||||||
|
if (!dayData?.isOpen || !dayData.hoursLabel) return false;
|
||||||
|
return isWithinOperatingWindow(dayData.hoursLabel, p.timezone);
|
||||||
|
});
|
||||||
|
openParkIds = openTodayParks.map((p) => p.id);
|
||||||
|
closingParkIds = openTodayParks
|
||||||
|
.filter((p) => {
|
||||||
|
const dayData = data[p.id]?.[today];
|
||||||
|
return dayData?.hoursLabel
|
||||||
|
? getOperatingStatus(dayData.hoursLabel, p.timezone) === "closing"
|
||||||
|
: false;
|
||||||
|
})
|
||||||
|
.map((p) => p.id);
|
||||||
|
// Only fetch ride counts for parks that have queue-times coverage
|
||||||
|
const trackedParks = openTodayParks.filter((p) => QUEUE_TIMES_IDS[p.id]);
|
||||||
|
const results = await Promise.all(
|
||||||
|
trackedParks.map(async (p) => {
|
||||||
|
const coasterSet = getCoasterSet(p.id, parkMeta);
|
||||||
|
const result = await fetchLiveRides(QUEUE_TIMES_IDS[p.id], coasterSet, 300);
|
||||||
|
const rideCount = result ? result.rides.filter((r) => r.isOpen).length : null;
|
||||||
|
const coasterCount = result ? result.rides.filter((r) => r.isOpen && r.isCoaster).length : 0;
|
||||||
|
return { id: p.id, rideCount, coasterCount };
|
||||||
|
})
|
||||||
|
);
|
||||||
|
// Parks with queue-times coverage but 0 open rides = likely weather delay
|
||||||
|
weatherDelayParkIds = results
|
||||||
|
.filter(({ rideCount }) => rideCount === 0)
|
||||||
|
.map(({ id }) => id);
|
||||||
|
rideCounts = Object.fromEntries(
|
||||||
|
results.filter(({ rideCount }) => rideCount != null && rideCount > 0).map(({ id, rideCount }) => [id, rideCount!])
|
||||||
|
);
|
||||||
|
coasterCounts = Object.fromEntries(
|
||||||
|
results.filter(({ coasterCount }) => coasterCount > 0).map(({ id, coasterCount }) => [id, coasterCount])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
|
<HomePageClient
|
||||||
{/* ── Header ─────────────────────────────────────────────────────────── */}
|
weekStart={weekStart}
|
||||||
<header style={{
|
weekDates={weekDates}
|
||||||
position: "sticky",
|
today={today}
|
||||||
top: 0,
|
isCurrentWeek={isCurrentWeek}
|
||||||
zIndex: 20,
|
data={data}
|
||||||
background: "var(--color-bg)",
|
rideCounts={rideCounts}
|
||||||
borderBottom: "1px solid var(--color-border)",
|
coasterCounts={coasterCounts}
|
||||||
}}>
|
openParkIds={openParkIds}
|
||||||
{/* Row 1: Title + park count */}
|
closingParkIds={closingParkIds}
|
||||||
<div style={{
|
weatherDelayParkIds={weatherDelayParkIds}
|
||||||
padding: "12px 16px 10px",
|
hasCoasterData={hasCoasterData}
|
||||||
display: "flex",
|
scrapedCount={scrapedCount}
|
||||||
alignItems: "center",
|
/>
|
||||||
justifyContent: "space-between",
|
|
||||||
gap: 12,
|
|
||||||
}}>
|
|
||||||
<span style={{
|
|
||||||
fontSize: "1.1rem",
|
|
||||||
fontWeight: 700,
|
|
||||||
color: "var(--color-text)",
|
|
||||||
letterSpacing: "-0.02em",
|
|
||||||
}}>
|
|
||||||
Thoosie Calendar
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span style={{
|
|
||||||
background: "var(--color-surface)",
|
|
||||||
border: "1px solid var(--color-border)",
|
|
||||||
borderRadius: 20,
|
|
||||||
padding: "3px 10px",
|
|
||||||
fontSize: "0.7rem",
|
|
||||||
color: "var(--color-text-muted)",
|
|
||||||
fontWeight: 500,
|
|
||||||
}}>
|
|
||||||
{visibleParks.length} of {PARKS.length} parks open
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Row 2: Week nav + legend (legend hidden on mobile) */}
|
|
||||||
<div style={{
|
|
||||||
padding: "8px 16px 10px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
gap: 16,
|
|
||||||
borderTop: "1px solid var(--color-border-subtle)",
|
|
||||||
}}>
|
|
||||||
<WeekNav
|
|
||||||
weekStart={weekStart}
|
|
||||||
weekDates={weekDates}
|
|
||||||
isCurrentWeek={isCurrentWeek}
|
|
||||||
/>
|
|
||||||
<div className="hidden sm:flex">
|
|
||||||
<Legend />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* ── Main content ───────────────────────────────────────────────────── */}
|
|
||||||
<main className="px-4 sm:px-6 pb-12">
|
|
||||||
{scrapedCount === 0 ? (
|
|
||||||
<EmptyState />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{/* Mobile: card list (hidden on lg+) */}
|
|
||||||
<div className="lg:hidden">
|
|
||||||
<MobileCardList
|
|
||||||
grouped={grouped}
|
|
||||||
weekDates={weekDates}
|
|
||||||
data={data}
|
|
||||||
today={today}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Desktop: week table (hidden below lg) */}
|
|
||||||
<div className="hidden lg:block">
|
|
||||||
<WeekCalendar
|
|
||||||
parks={visibleParks}
|
|
||||||
weekDates={weekDates}
|
|
||||||
data={data}
|
|
||||||
grouped={grouped}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +1,18 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { BackToCalendarLink } from "@/components/BackToCalendarLink";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
import { PARK_MAP } from "@/lib/parks";
|
import { PARK_MAP } from "@/lib/parks";
|
||||||
import { openDb, getParkMonthData, getApiId } from "@/lib/db";
|
import { openDb, getParkMonthData, getApiId } from "@/lib/db";
|
||||||
import { scrapeRidesForDay } from "@/lib/scrapers/sixflags";
|
import { scrapeRidesForDay } from "@/lib/scrapers/sixflags";
|
||||||
import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
|
import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
|
||||||
|
import { fetchToday } from "@/lib/scrapers/sixflags";
|
||||||
import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
|
import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
|
||||||
import { readParkMeta, getCoasterSet } from "@/lib/park-meta";
|
import { readParkMeta, getCoasterSet } from "@/lib/park-meta";
|
||||||
import { ParkMonthCalendar } from "@/components/ParkMonthCalendar";
|
import { ParkMonthCalendar } from "@/components/ParkMonthCalendar";
|
||||||
import { LiveRidePanel } from "@/components/LiveRidePanel";
|
import { LiveRidePanel } from "@/components/LiveRidePanel";
|
||||||
import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";
|
import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";
|
||||||
import type { LiveRidesResult } from "@/lib/scrapers/queuetimes"; // used as prop type below
|
import type { LiveRidesResult } from "@/lib/scrapers/queuetimes"; // used as prop type below
|
||||||
|
import { getTodayLocal, isWithinOperatingWindow } from "@/lib/env";
|
||||||
|
|
||||||
interface PageProps {
|
interface PageProps {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
@@ -23,8 +26,8 @@ function parseMonthParam(param: string | undefined): { year: number; month: numb
|
|||||||
return { year: y, month: m };
|
return { year: y, month: m };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const now = new Date();
|
const [y, m] = getTodayLocal().split("-").map(Number);
|
||||||
return { year: now.getFullYear(), month: now.getMonth() + 1 };
|
return { year: y, month: m };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function ParkPage({ params, searchParams }: PageProps) {
|
export default async function ParkPage({ params, searchParams }: PageProps) {
|
||||||
@@ -34,7 +37,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
|
|||||||
const park = PARK_MAP.get(id);
|
const park = PARK_MAP.get(id);
|
||||||
if (!park) notFound();
|
if (!park) notFound();
|
||||||
|
|
||||||
const today = new Date().toISOString().slice(0, 10);
|
const today = getTodayLocal();
|
||||||
const { year, month } = parseMonthParam(monthParam);
|
const { year, month } = parseMonthParam(monthParam);
|
||||||
|
|
||||||
const db = openDb();
|
const db = openDb();
|
||||||
@@ -42,7 +45,13 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
|
|||||||
const apiId = getApiId(db, id);
|
const apiId = getApiId(db, id);
|
||||||
db.close();
|
db.close();
|
||||||
|
|
||||||
const todayData = monthData[today];
|
// Prefer live today data from the Six Flags API (5-min ISR cache) so that
|
||||||
|
// weather delays and hour changes surface immediately rather than showing
|
||||||
|
// stale DB values. Fall back to DB if the API call fails.
|
||||||
|
const liveToday = apiId !== null ? await fetchToday(apiId, 300).catch(() => null) : null;
|
||||||
|
const todayData = liveToday
|
||||||
|
? { isOpen: liveToday.isOpen, hoursLabel: liveToday.hoursLabel ?? null, specialType: liveToday.specialType ?? null }
|
||||||
|
: monthData[today];
|
||||||
const parkOpenToday = todayData?.isOpen && todayData?.hoursLabel;
|
const parkOpenToday = todayData?.isOpen && todayData?.hoursLabel;
|
||||||
|
|
||||||
// ── Ride data: try live Queue-Times first, fall back to schedule ──────────
|
// ── Ride data: try live Queue-Times first, fall back to schedule ──────────
|
||||||
@@ -53,14 +62,33 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
|
|||||||
let liveRides: LiveRidesResult | null = null;
|
let liveRides: LiveRidesResult | null = null;
|
||||||
let ridesResult: RidesFetchResult | null = null;
|
let ridesResult: RidesFetchResult | null = null;
|
||||||
|
|
||||||
|
// Determine if we're within the 1h-before-open to 1h-after-close window.
|
||||||
|
const withinWindow = todayData?.hoursLabel
|
||||||
|
? isWithinOperatingWindow(todayData.hoursLabel, park.timezone)
|
||||||
|
: false;
|
||||||
|
|
||||||
if (queueTimesId) {
|
if (queueTimesId) {
|
||||||
liveRides = await fetchLiveRides(queueTimesId, coasterSet);
|
const raw = await fetchLiveRides(queueTimesId, coasterSet);
|
||||||
|
if (raw) {
|
||||||
|
// Outside the window: show the ride list but force all rides closed
|
||||||
|
liveRides = withinWindow
|
||||||
|
? raw
|
||||||
|
: {
|
||||||
|
...raw,
|
||||||
|
rides: raw.rides.map((r) => ({ ...r, isOpen: false, waitMinutes: 0 })),
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Only hit the schedule API as a fallback when live data is unavailable
|
// Weather delay: park is within operating hours but queue-times shows 0 open rides
|
||||||
|
const isWeatherDelay =
|
||||||
|
withinWindow &&
|
||||||
|
liveRides !== null &&
|
||||||
|
liveRides.rides.length > 0 &&
|
||||||
|
liveRides.rides.every((r) => !r.isOpen);
|
||||||
|
|
||||||
|
// Only hit the schedule API as a fallback when Queue-Times live data is unavailable.
|
||||||
if (!liveRides && apiId !== null) {
|
if (!liveRides && apiId !== null) {
|
||||||
// Note: the API drops today's date from its response (only returns future dates),
|
|
||||||
// so scrapeRidesForDay may fall back to the nearest upcoming date.
|
|
||||||
ridesResult = await scrapeRidesForDay(apiId, today);
|
ridesResult = await scrapeRidesForDay(apiId, today);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,19 +106,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 16,
|
gap: 16,
|
||||||
}}>
|
}}>
|
||||||
<Link href="/" style={{
|
<BackToCalendarLink />
|
||||||
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)" }} />
|
<div style={{ width: 1, height: 16, background: "var(--color-border)" }} />
|
||||||
<span style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.01em" }}>
|
<span style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.01em" }}>
|
||||||
{park.name}
|
{park.name}
|
||||||
@@ -110,12 +126,31 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
|
|||||||
month={month}
|
month={month}
|
||||||
monthData={monthData}
|
monthData={monthData}
|
||||||
today={today}
|
today={today}
|
||||||
|
timezone={park.timezone}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* ── Ride Status ─────────────────────────────────────────────────── */}
|
{/* ── Ride Status ─────────────────────────────────────────────────── */}
|
||||||
<section>
|
<section>
|
||||||
<SectionHeading>
|
<SectionHeading aside={liveRides ? (
|
||||||
|
<a
|
||||||
|
href="https://queue-times.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
fontSize: "0.68rem",
|
||||||
|
color: "var(--color-text-dim)",
|
||||||
|
textDecoration: "none",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 4,
|
||||||
|
transition: "color 120ms ease",
|
||||||
|
}}
|
||||||
|
className="park-name-link"
|
||||||
|
>
|
||||||
|
via queue-times.com
|
||||||
|
</a>
|
||||||
|
) : undefined}>
|
||||||
Rides
|
Rides
|
||||||
{liveRides ? (
|
{liveRides ? (
|
||||||
<LiveBadge />
|
<LiveBadge />
|
||||||
@@ -134,6 +169,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
|
|||||||
<LiveRidePanel
|
<LiveRidePanel
|
||||||
liveRides={liveRides}
|
liveRides={liveRides}
|
||||||
parkOpenToday={!!parkOpenToday}
|
parkOpenToday={!!parkOpenToday}
|
||||||
|
isWeatherDelay={isWeatherDelay}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<RideList
|
<RideList
|
||||||
@@ -158,12 +194,12 @@ function formatShortDate(iso: string): string {
|
|||||||
|
|
||||||
// ── Sub-components ─────────────────────────────────────────────────────────
|
// ── Sub-components ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function SectionHeading({ children }: { children: React.ReactNode }) {
|
function SectionHeading({ children, aside }: { children: React.ReactNode; aside?: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "baseline",
|
alignItems: "center",
|
||||||
gap: 0,
|
justifyContent: "space-between",
|
||||||
marginBottom: 14,
|
marginBottom: 14,
|
||||||
paddingBottom: 10,
|
paddingBottom: 10,
|
||||||
borderBottom: "1px solid var(--color-border)",
|
borderBottom: "1px solid var(--color-border)",
|
||||||
@@ -175,9 +211,12 @@ function SectionHeading({ children }: { children: React.ReactNode }) {
|
|||||||
letterSpacing: "0.04em",
|
letterSpacing: "0.04em",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
margin: 0,
|
margin: 0,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
}}>
|
}}>
|
||||||
{children}
|
{children}
|
||||||
</h2>
|
</h2>
|
||||||
|
{aside}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
31
components/BackToCalendarLink.tsx
Normal file
31
components/BackToCalendarLink.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export function BackToCalendarLink() {
|
||||||
|
const [href, setHref] = useState("/");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = localStorage.getItem("lastWeek");
|
||||||
|
if (saved) setHref(`/?week=${saved}`);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
className="park-name-link"
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
color: "var(--color-text-muted)",
|
||||||
|
textDecoration: "none",
|
||||||
|
transition: "color 120ms ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
← Calendar
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
263
components/HomePageClient.tsx
Normal file
263
components/HomePageClient.tsx
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { WeekCalendar } from "./WeekCalendar";
|
||||||
|
import { MobileCardList } from "./MobileCardList";
|
||||||
|
import { WeekNav } from "./WeekNav";
|
||||||
|
import { Legend } from "./Legend";
|
||||||
|
import { EmptyState } from "./EmptyState";
|
||||||
|
import { PARKS, groupByRegion } from "@/lib/parks";
|
||||||
|
import type { DayData } from "@/lib/db";
|
||||||
|
|
||||||
|
const REFRESH_INTERVAL_MS = 2 * 60 * 1000; // 2 minutes
|
||||||
|
const OPEN_REFRESH_BUFFER_MS = 30_000; // 30s after opening time before hitting the API
|
||||||
|
|
||||||
|
/** Parse the opening hour/minute from a hoursLabel like "10am", "10:30am", "11am". */
|
||||||
|
function parseOpenTime(hoursLabel: string): { hour: number; minute: number } | null {
|
||||||
|
const openPart = hoursLabel.split(" - ")[0].trim();
|
||||||
|
const match = openPart.match(/^(\d+)(?::(\d+))?(am|pm)$/i);
|
||||||
|
if (!match) return null;
|
||||||
|
let hour = parseInt(match[1], 10);
|
||||||
|
const minute = match[2] ? parseInt(match[2], 10) : 0;
|
||||||
|
const period = match[3].toLowerCase();
|
||||||
|
if (period === "pm" && hour !== 12) hour += 12;
|
||||||
|
if (period === "am" && hour === 12) hour = 0;
|
||||||
|
return { hour, minute };
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Milliseconds from now until a given local clock time in a timezone. Negative if already past. */
|
||||||
|
function msUntilLocalTime(hour: number, minute: number, timezone: string): number {
|
||||||
|
const now = new Date();
|
||||||
|
const parts = new Intl.DateTimeFormat("en-US", {
|
||||||
|
timeZone: timezone,
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: false,
|
||||||
|
}).formatToParts(now);
|
||||||
|
const localHour = parseInt(parts.find(p => p.type === "hour")!.value, 10) % 24;
|
||||||
|
const localMinute = parseInt(parts.find(p => p.type === "minute")!.value, 10);
|
||||||
|
return ((hour * 60 + minute) - (localHour * 60 + localMinute)) * 60_000;
|
||||||
|
}
|
||||||
|
|
||||||
|
const COASTER_MODE_KEY = "coasterMode";
|
||||||
|
|
||||||
|
interface HomePageClientProps {
|
||||||
|
weekStart: string;
|
||||||
|
weekDates: string[];
|
||||||
|
today: string;
|
||||||
|
isCurrentWeek: boolean;
|
||||||
|
data: Record<string, Record<string, DayData>>;
|
||||||
|
rideCounts: Record<string, number>;
|
||||||
|
coasterCounts: Record<string, number>;
|
||||||
|
openParkIds: string[];
|
||||||
|
closingParkIds: string[];
|
||||||
|
weatherDelayParkIds: string[];
|
||||||
|
hasCoasterData: boolean;
|
||||||
|
scrapedCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HomePageClient({
|
||||||
|
weekStart,
|
||||||
|
weekDates,
|
||||||
|
today,
|
||||||
|
isCurrentWeek,
|
||||||
|
data,
|
||||||
|
rideCounts,
|
||||||
|
coasterCounts,
|
||||||
|
openParkIds,
|
||||||
|
closingParkIds,
|
||||||
|
weatherDelayParkIds,
|
||||||
|
hasCoasterData,
|
||||||
|
scrapedCount,
|
||||||
|
}: HomePageClientProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [coastersOnly, setCoastersOnly] = useState(false);
|
||||||
|
|
||||||
|
// Hydrate from localStorage after mount to avoid SSR mismatch.
|
||||||
|
useEffect(() => {
|
||||||
|
setCoastersOnly(localStorage.getItem(COASTER_MODE_KEY) === "true");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Periodically re-fetch server data (ride counts, open status) without a full page reload.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isCurrentWeek) return;
|
||||||
|
const id = setInterval(() => router.refresh(), REFRESH_INTERVAL_MS);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, [isCurrentWeek, router]);
|
||||||
|
|
||||||
|
// Schedule a targeted refresh at each park's exact opening time so the
|
||||||
|
// open indicator and ride counts appear immediately rather than waiting
|
||||||
|
// up to 2 minutes for the next polling cycle.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isCurrentWeek) return;
|
||||||
|
const timeouts: ReturnType<typeof setTimeout>[] = [];
|
||||||
|
|
||||||
|
for (const park of PARKS) {
|
||||||
|
const dayData = data[park.id]?.[today];
|
||||||
|
if (!dayData?.isOpen || !dayData.hoursLabel) continue;
|
||||||
|
const openTime = parseOpenTime(dayData.hoursLabel);
|
||||||
|
if (!openTime) continue;
|
||||||
|
const ms = msUntilLocalTime(openTime.hour, openTime.minute, park.timezone);
|
||||||
|
// Only schedule if opening is still in the future (within the next 24h)
|
||||||
|
if (ms > 0 && ms < 24 * 60 * 60 * 1000) {
|
||||||
|
timeouts.push(setTimeout(() => router.refresh(), ms)); // mark as open
|
||||||
|
timeouts.push(setTimeout(() => router.refresh(), ms + OPEN_REFRESH_BUFFER_MS)); // pick up ride counts
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => timeouts.forEach(clearTimeout);
|
||||||
|
}, [isCurrentWeek, today, data, router]);
|
||||||
|
|
||||||
|
// Remember the current week so the park page back button returns here.
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem("lastWeek", weekStart);
|
||||||
|
}, [weekStart]);
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
const next = !coastersOnly;
|
||||||
|
setCoastersOnly(next);
|
||||||
|
localStorage.setItem(COASTER_MODE_KEY, String(next));
|
||||||
|
};
|
||||||
|
|
||||||
|
const activeCounts = coastersOnly ? coasterCounts : rideCounts;
|
||||||
|
|
||||||
|
const visibleParks = PARKS.filter((park) =>
|
||||||
|
weekDates.some((date) => data[park.id]?.[date]?.isOpen)
|
||||||
|
);
|
||||||
|
const grouped = groupByRegion(visibleParks);
|
||||||
|
|
||||||
|
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)",
|
||||||
|
}}>
|
||||||
|
{/* Row 1: Title + controls */}
|
||||||
|
<div style={{
|
||||||
|
padding: "12px 16px 10px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
gap: 12,
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
fontSize: "1.1rem",
|
||||||
|
fontWeight: 700,
|
||||||
|
color: "var(--color-text)",
|
||||||
|
letterSpacing: "-0.02em",
|
||||||
|
}}>
|
||||||
|
Thoosie Calendar
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
||||||
|
{hasCoasterData && (
|
||||||
|
<button
|
||||||
|
onClick={toggle}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 5,
|
||||||
|
padding: "4px 12px",
|
||||||
|
borderRadius: 20,
|
||||||
|
border: coastersOnly
|
||||||
|
? "1px solid var(--color-accent)"
|
||||||
|
: "1px solid var(--color-border)",
|
||||||
|
background: coastersOnly
|
||||||
|
? "var(--color-accent-muted)"
|
||||||
|
: "var(--color-surface)",
|
||||||
|
color: coastersOnly
|
||||||
|
? "var(--color-accent)"
|
||||||
|
: "var(--color-text-muted)",
|
||||||
|
fontSize: "0.72rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
🎢 Coaster Mode
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span className="hidden sm:inline-flex" style={{
|
||||||
|
background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
|
||||||
|
border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
|
||||||
|
borderRadius: 20,
|
||||||
|
padding: "4px 14px",
|
||||||
|
fontSize: "0.78rem",
|
||||||
|
color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
|
||||||
|
fontWeight: 600,
|
||||||
|
alignItems: "center",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}>
|
||||||
|
{visibleParks.length} of {PARKS.length} parks open this week
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 2: Week nav + legend */}
|
||||||
|
<div style={{
|
||||||
|
padding: "8px 16px 10px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
gap: 16,
|
||||||
|
borderTop: "1px solid var(--color-border-subtle)",
|
||||||
|
}}>
|
||||||
|
<WeekNav
|
||||||
|
weekStart={weekStart}
|
||||||
|
weekDates={weekDates}
|
||||||
|
isCurrentWeek={isCurrentWeek}
|
||||||
|
/>
|
||||||
|
<div className="hidden sm:flex">
|
||||||
|
<Legend />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* ── Main content ────────────────────────────────────────────────────── */}
|
||||||
|
<main className="px-4 sm:px-6 pb-12">
|
||||||
|
{scrapedCount === 0 ? (
|
||||||
|
<EmptyState />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* Mobile: card list (hidden on lg+) */}
|
||||||
|
<div className="lg:hidden">
|
||||||
|
<MobileCardList
|
||||||
|
grouped={grouped}
|
||||||
|
weekDates={weekDates}
|
||||||
|
data={data}
|
||||||
|
today={today}
|
||||||
|
rideCounts={activeCounts}
|
||||||
|
coastersOnly={coastersOnly}
|
||||||
|
openParkIds={openParkIds}
|
||||||
|
closingParkIds={closingParkIds}
|
||||||
|
weatherDelayParkIds={weatherDelayParkIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop: week table (hidden below lg) */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<WeekCalendar
|
||||||
|
parks={visibleParks}
|
||||||
|
weekDates={weekDates}
|
||||||
|
data={data}
|
||||||
|
grouped={grouped}
|
||||||
|
rideCounts={activeCounts}
|
||||||
|
coastersOnly={coastersOnly}
|
||||||
|
openParkIds={openParkIds}
|
||||||
|
closingParkIds={closingParkIds}
|
||||||
|
weatherDelayParkIds={weatherDelayParkIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,18 +1,26 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import type { LiveRidesResult, LiveRide } from "@/lib/scrapers/queuetimes";
|
import type { LiveRidesResult, LiveRide } from "@/lib/scrapers/queuetimes";
|
||||||
|
|
||||||
interface LiveRidePanelProps {
|
interface LiveRidePanelProps {
|
||||||
liveRides: LiveRidesResult;
|
liveRides: LiveRidesResult;
|
||||||
parkOpenToday: boolean;
|
parkOpenToday: boolean;
|
||||||
|
isWeatherDelay?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps) {
|
export function LiveRidePanel({ liveRides, parkOpenToday, isWeatherDelay }: LiveRidePanelProps) {
|
||||||
const { rides } = liveRides;
|
const { rides } = liveRides;
|
||||||
const hasCoasters = rides.some((r) => r.isCoaster);
|
const hasCoasters = rides.some((r) => r.isCoaster);
|
||||||
const [coastersOnly, setCoastersOnly] = useState(false);
|
const [coastersOnly, setCoastersOnly] = useState(false);
|
||||||
|
|
||||||
|
// Pre-select coaster filter if Coaster Mode is enabled on the homepage.
|
||||||
|
useEffect(() => {
|
||||||
|
if (hasCoasters && localStorage.getItem("coasterMode") === "true") {
|
||||||
|
setCoastersOnly(true);
|
||||||
|
}
|
||||||
|
}, [hasCoasters]);
|
||||||
|
|
||||||
const visible = coastersOnly ? rides.filter((r) => r.isCoaster) : rides;
|
const visible = coastersOnly ? rides.filter((r) => r.isCoaster) : rides;
|
||||||
const openRides = visible.filter((r) => r.isOpen);
|
const openRides = visible.filter((r) => r.isOpen);
|
||||||
const closedRides = visible.filter((r) => !r.isOpen);
|
const closedRides = visible.filter((r) => !r.isOpen);
|
||||||
@@ -42,6 +50,19 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
|
|||||||
}}>
|
}}>
|
||||||
{openRides.length} open
|
{openRides.length} open
|
||||||
</div>
|
</div>
|
||||||
|
) : isWeatherDelay ? (
|
||||||
|
<div style={{
|
||||||
|
background: "var(--color-weather-bg)",
|
||||||
|
border: "1px solid var(--color-weather-border)",
|
||||||
|
borderRadius: 20,
|
||||||
|
padding: "4px 12px",
|
||||||
|
fontSize: "0.72rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "var(--color-weather-text)",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}>
|
||||||
|
⛈ Weather Delay — all rides currently closed
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div style={{
|
<div style={{
|
||||||
background: "var(--color-surface)",
|
background: "var(--color-surface)",
|
||||||
@@ -57,8 +78,8 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Closed count badge */}
|
{/* Closed count badge — always shown when there are closed rides */}
|
||||||
{anyOpen && closedRides.length > 0 && (
|
{closedRides.length > 0 && (
|
||||||
<div style={{
|
<div style={{
|
||||||
background: "var(--color-surface)",
|
background: "var(--color-surface)",
|
||||||
border: "1px solid var(--color-border)",
|
border: "1px solid var(--color-border)",
|
||||||
@@ -69,7 +90,7 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
|
|||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-muted)",
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
}}>
|
}}>
|
||||||
{closedRides.length} closed / down
|
{closedRides.length} {anyOpen ? "closed / down" : "rides total"}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -115,26 +136,6 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
|
|||||||
{closedRides.map((ride) => <RideRow key={ride.name} ride={ride} />)}
|
{closedRides.map((ride) => <RideRow key={ride.name} ride={ride} />)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── Attribution ──────────────────────────────────────────────────── */}
|
|
||||||
<div style={{
|
|
||||||
marginTop: 20,
|
|
||||||
fontSize: "0.68rem",
|
|
||||||
color: "var(--color-text-dim)",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 4,
|
|
||||||
}}>
|
|
||||||
Powered by{" "}
|
|
||||||
<a
|
|
||||||
href="https://queue-times.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
style={{ color: "var(--color-text-muted)", textDecoration: "underline" }}
|
|
||||||
>
|
|
||||||
Queue-Times.com
|
|
||||||
</a>
|
|
||||||
{" "}· Updates every 5 minutes
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,9 +8,14 @@ interface MobileCardListProps {
|
|||||||
weekDates: string[];
|
weekDates: string[];
|
||||||
data: Record<string, Record<string, DayData>>;
|
data: Record<string, Record<string, DayData>>;
|
||||||
today: string;
|
today: string;
|
||||||
|
rideCounts?: Record<string, number>;
|
||||||
|
coastersOnly?: boolean;
|
||||||
|
openParkIds?: string[];
|
||||||
|
closingParkIds?: string[];
|
||||||
|
weatherDelayParkIds?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MobileCardList({ grouped, weekDates, data, today }: MobileCardListProps) {
|
export function MobileCardList({ grouped, weekDates, data, today, rideCounts, coastersOnly, openParkIds, closingParkIds, weatherDelayParkIds }: MobileCardListProps) {
|
||||||
return (
|
return (
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: 20, paddingTop: 14 }}>
|
<div style={{ display: "flex", flexDirection: "column", gap: 20, paddingTop: 14 }}>
|
||||||
{Array.from(grouped.entries()).map(([region, parks]) => (
|
{Array.from(grouped.entries()).map(([region, parks]) => (
|
||||||
@@ -19,25 +24,17 @@ export function MobileCardList({ grouped, weekDates, data, today }: MobileCardLi
|
|||||||
<div style={{
|
<div style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 10,
|
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
paddingLeft: 2,
|
paddingLeft: 2,
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
|
||||||
width: 3,
|
|
||||||
height: 14,
|
|
||||||
borderRadius: 2,
|
|
||||||
background: "var(--color-region-accent)",
|
|
||||||
flexShrink: 0,
|
|
||||||
}} />
|
|
||||||
<span style={{
|
<span style={{
|
||||||
fontSize: "0.65rem",
|
fontSize: "0.6rem",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.1em",
|
letterSpacing: "0.14em",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-secondary)",
|
||||||
}}>
|
}}>
|
||||||
{region}
|
— {region} —
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -50,7 +47,12 @@ export function MobileCardList({ grouped, weekDates, data, today }: MobileCardLi
|
|||||||
weekDates={weekDates}
|
weekDates={weekDates}
|
||||||
parkData={data[park.id] ?? {}}
|
parkData={data[park.id] ?? {}}
|
||||||
today={today}
|
today={today}
|
||||||
/>
|
openRideCount={rideCounts?.[park.id]}
|
||||||
|
coastersOnly={coastersOnly}
|
||||||
|
isOpen={openParkIds?.includes(park.id)}
|
||||||
|
isClosing={closingParkIds?.includes(park.id)}
|
||||||
|
isWeatherDelay={weatherDelayParkIds?.includes(park.id)}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,18 +1,25 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import type { Park } from "@/lib/scrapers/types";
|
import type { Park } from "@/lib/scrapers/types";
|
||||||
import type { DayData } from "@/lib/db";
|
import type { DayData } from "@/lib/db";
|
||||||
|
import { getTimezoneAbbr } from "@/lib/env";
|
||||||
|
|
||||||
interface ParkCardProps {
|
interface ParkCardProps {
|
||||||
park: Park;
|
park: Park;
|
||||||
weekDates: string[]; // 7 dates YYYY-MM-DD, Sun–Sat
|
weekDates: string[]; // 7 dates YYYY-MM-DD, Sun–Sat
|
||||||
parkData: Record<string, DayData>;
|
parkData: Record<string, DayData>;
|
||||||
today: string;
|
today: string;
|
||||||
|
openRideCount?: number;
|
||||||
|
coastersOnly?: boolean;
|
||||||
|
isOpen?: boolean;
|
||||||
|
isClosing?: boolean;
|
||||||
|
isWeatherDelay?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||||
|
|
||||||
export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
export function ParkCard({ park, weekDates, parkData, today, openRideCount, coastersOnly, isOpen, isClosing, isWeatherDelay }: ParkCardProps) {
|
||||||
const openDays = weekDates.filter((d) => parkData[d]?.isOpen && parkData[d]?.hoursLabel);
|
const openDays = weekDates.filter((d) => parkData[d]?.isOpen && parkData[d]?.hoursLabel);
|
||||||
|
const tzAbbr = getTimezoneAbbr(park.timezone);
|
||||||
const isOpenToday = openDays.includes(today);
|
const isOpenToday = openDays.includes(today);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -21,12 +28,14 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
|||||||
data-park={park.name.toLowerCase()}
|
data-park={park.name.toLowerCase()}
|
||||||
style={{ textDecoration: "none", display: "block" }}
|
style={{ textDecoration: "none", display: "block" }}
|
||||||
>
|
>
|
||||||
<div style={{
|
<div className="park-card" style={{
|
||||||
background: "var(--color-surface)",
|
background: "var(--color-surface)",
|
||||||
border: "1px solid var(--color-border)",
|
border: "1px solid var(--color-border)",
|
||||||
|
borderLeft: isOpen
|
||||||
|
? `3px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`
|
||||||
|
: "1px solid var(--color-border)",
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
transition: "border-color 120ms ease",
|
|
||||||
}}>
|
}}>
|
||||||
{/* ── Card header ───────────────────────────────────────────────────── */}
|
{/* ── Card header ───────────────────────────────────────────────────── */}
|
||||||
<div style={{
|
<div style={{
|
||||||
@@ -34,9 +43,10 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
|
flexWrap: "wrap",
|
||||||
gap: 12,
|
gap: 12,
|
||||||
}}>
|
}}>
|
||||||
<div>
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
fontSize: "0.95rem",
|
fontSize: "0.95rem",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
@@ -54,20 +64,20 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5 }}>
|
||||||
{isOpenToday ? (
|
{isOpenToday ? (
|
||||||
<div style={{
|
<div style={{
|
||||||
background: "var(--color-open-bg)",
|
background: isWeatherDelay ? "var(--color-weather-bg)" : isClosing ? "var(--color-closing-bg)" : "var(--color-open-bg)",
|
||||||
border: "1px solid var(--color-open-border)",
|
border: `1px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`,
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
padding: "4px 10px",
|
padding: "4px 10px",
|
||||||
fontSize: "0.65rem",
|
fontSize: "0.65rem",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
color: "var(--color-open-text)",
|
color: isWeatherDelay ? "var(--color-weather-text)" : isClosing ? "var(--color-closing-text)" : "var(--color-open-text)",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
flexShrink: 0,
|
|
||||||
letterSpacing: "0.03em",
|
letterSpacing: "0.03em",
|
||||||
}}>
|
}}>
|
||||||
Open today
|
{isWeatherDelay ? "⛈ Weather Delay" : isClosing ? "Closing" : "Open today"}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div style={{
|
<div style={{
|
||||||
@@ -79,11 +89,33 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
|||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-muted)",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
flexShrink: 0,
|
|
||||||
}}>
|
}}>
|
||||||
Closed today
|
Closed today
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{isOpenToday && isWeatherDelay && (
|
||||||
|
<div style={{
|
||||||
|
fontSize: "0.65rem",
|
||||||
|
color: "var(--color-weather-hours, #bfdbfe)",
|
||||||
|
fontWeight: 500,
|
||||||
|
textAlign: "right",
|
||||||
|
}}>
|
||||||
|
⛈ Weather Delay
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isOpenToday && !isWeatherDelay && openRideCount !== undefined && (
|
||||||
|
<div style={{
|
||||||
|
fontSize: "0.65rem",
|
||||||
|
color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)",
|
||||||
|
fontWeight: 500,
|
||||||
|
textAlign: "right",
|
||||||
|
}}>
|
||||||
|
{openRideCount} {coastersOnly
|
||||||
|
? (openRideCount === 1 ? "coaster" : "coasters")
|
||||||
|
: (openRideCount === 1 ? "ride" : "rides")} operating
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── Open days list ────────────────────────────────────────────────── */}
|
{/* ── Open days list ────────────────────────────────────────────────── */}
|
||||||
@@ -121,10 +153,10 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
|||||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||||
{isPH && (
|
{isPH && (
|
||||||
<span style={{
|
<span style={{
|
||||||
fontSize: "0.58rem",
|
fontSize: "0.65rem",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
color: "var(--color-ph-label)",
|
color: "var(--color-ph-label)",
|
||||||
letterSpacing: "0.05em",
|
letterSpacing: "0.04em",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
}}>
|
}}>
|
||||||
Passholder
|
Passholder
|
||||||
@@ -139,7 +171,10 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
|
|||||||
? "var(--color-today-text)"
|
? "var(--color-today-text)"
|
||||||
: "var(--color-open-hours)",
|
: "var(--color-open-hours)",
|
||||||
}}>
|
}}>
|
||||||
{dayData.hoursLabel}
|
{dayData.hoursLabel}{" "}
|
||||||
|
<span style={{ fontSize: "0.68rem", fontWeight: 400, color: "var(--color-text-dim)" }}>
|
||||||
|
{tzAbbr}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import type { DayData } from "@/lib/db";
|
import type { DayData } from "@/lib/db";
|
||||||
|
import { getTimezoneAbbr } from "@/lib/env";
|
||||||
|
|
||||||
interface ParkMonthCalendarProps {
|
interface ParkMonthCalendarProps {
|
||||||
parkId: string;
|
parkId: string;
|
||||||
@@ -7,6 +8,7 @@ interface ParkMonthCalendarProps {
|
|||||||
month: number; // 1-indexed
|
month: number; // 1-indexed
|
||||||
monthData: Record<string, DayData>; // 'YYYY-MM-DD' → DayData
|
monthData: Record<string, DayData>; // 'YYYY-MM-DD' → DayData
|
||||||
today: string; // YYYY-MM-DD
|
today: string; // YYYY-MM-DD
|
||||||
|
timezone: string; // IANA timezone, e.g. "America/New_York"
|
||||||
}
|
}
|
||||||
|
|
||||||
const DOW_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
const DOW_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||||
@@ -29,7 +31,8 @@ function daysInMonth(year: number, month: number): number {
|
|||||||
return new Date(year, month, 0).getDate();
|
return new Date(year, month, 0).getDate();
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ParkMonthCalendar({ parkId, year, month, monthData, today }: ParkMonthCalendarProps) {
|
export function ParkMonthCalendar({ parkId, year, month, monthData, today, timezone }: ParkMonthCalendarProps) {
|
||||||
|
const tzAbbr = getTimezoneAbbr(timezone);
|
||||||
const firstDow = new Date(year, month - 1, 1).getDay(); // 0=Sun
|
const firstDow = new Date(year, month - 1, 1).getDay(); // 0=Sun
|
||||||
const totalDays = daysInMonth(year, month);
|
const totalDays = daysInMonth(year, month);
|
||||||
|
|
||||||
@@ -115,97 +118,126 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today }: Par
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Weeks */}
|
{/*
|
||||||
{weeks.map((week, wi) => (
|
All day cells in ONE flat grid — eliminates per-week wrapper
|
||||||
<div key={wi} style={{
|
divs that caused independent row heights and the slant effect.
|
||||||
display: "grid",
|
Row height is controlled responsively via .park-calendar-grid CSS:
|
||||||
gridTemplateColumns: "repeat(7, 1fr)",
|
mobile = 72px fixed, sm+ = minmax(96px, auto).
|
||||||
borderBottom: wi < weeks.length - 1 ? "1px solid var(--color-border-subtle)" : "none",
|
*/}
|
||||||
}}>
|
<div
|
||||||
{week.map((cell, ci) => {
|
className="park-calendar-grid"
|
||||||
if (!cell.day || !cell.iso) {
|
style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}
|
||||||
return (
|
>
|
||||||
<div key={ci} style={{
|
{cells.map((cell, idx) => {
|
||||||
minHeight: 96,
|
const ci = idx % 7;
|
||||||
background: ci === 0 || ci === 6 ? "var(--color-weekend-header)" : "transparent",
|
const isLastRow = idx >= cells.length - 7;
|
||||||
borderRight: ci < 6 ? "1px solid var(--color-border-subtle)" : "none",
|
const borderBottom = !isLastRow ? "1px solid var(--color-border-subtle)" : "none";
|
||||||
}} />
|
const borderRight = ci < 6 ? "1px solid var(--color-border-subtle)" : "none";
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const dayData = monthData[cell.iso];
|
|
||||||
const isToday = cell.iso === today;
|
|
||||||
const isWeekend = ci === 0 || ci === 6;
|
|
||||||
const isOpen = dayData?.isOpen && dayData?.hoursLabel;
|
|
||||||
const isPH = dayData?.specialType === "passholder_preview";
|
|
||||||
|
|
||||||
const bg = isToday
|
|
||||||
? "var(--color-today-bg)"
|
|
||||||
: isWeekend
|
|
||||||
? "var(--color-weekend-header)"
|
|
||||||
: "transparent";
|
|
||||||
|
|
||||||
|
if (!cell.day || !cell.iso) {
|
||||||
return (
|
return (
|
||||||
<div key={ci} style={{
|
<div key={idx} style={{
|
||||||
minHeight: 96,
|
overflow: "hidden",
|
||||||
padding: "10px 12px",
|
background: ci === 0 || ci === 6 ? "var(--color-weekend-header)" : "transparent",
|
||||||
background: bg,
|
borderRight,
|
||||||
borderRight: ci < 6 ? "1px solid var(--color-border-subtle)" : "none",
|
borderBottom,
|
||||||
borderLeft: isToday ? "2px solid var(--color-today-border)" : "none",
|
}} />
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
gap: 5,
|
|
||||||
}}>
|
|
||||||
{/* Date number */}
|
|
||||||
<span style={{
|
|
||||||
fontSize: "0.95rem",
|
|
||||||
fontWeight: isToday ? 700 : isWeekend ? 600 : 400,
|
|
||||||
color: isToday
|
|
||||||
? "var(--color-today-text)"
|
|
||||||
: isWeekend
|
|
||||||
? "var(--color-text)"
|
|
||||||
: "var(--color-text-muted)",
|
|
||||||
lineHeight: 1,
|
|
||||||
}}>
|
|
||||||
{cell.day}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* Status */}
|
|
||||||
{!dayData ? (
|
|
||||||
<span style={{ fontSize: "0.75rem", color: "var(--color-text-dim)" }}>—</span>
|
|
||||||
) : isPH && isOpen ? (
|
|
||||||
<div style={{
|
|
||||||
background: "var(--color-ph-bg)",
|
|
||||||
border: "1px solid var(--color-ph-border)",
|
|
||||||
borderRadius: 5,
|
|
||||||
padding: "3px 6px",
|
|
||||||
}}>
|
|
||||||
<div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
|
|
||||||
Passholder
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 2 }}>
|
|
||||||
{dayData.hoursLabel}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : isOpen ? (
|
|
||||||
<div style={{
|
|
||||||
background: "var(--color-open-bg)",
|
|
||||||
border: "1px solid var(--color-open-border)",
|
|
||||||
borderRadius: 5,
|
|
||||||
padding: "3px 6px",
|
|
||||||
}}>
|
|
||||||
<div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
|
|
||||||
{dayData.hoursLabel}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span style={{ fontSize: "1rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
})}
|
}
|
||||||
</div>
|
|
||||||
))}
|
const dayData = monthData[cell.iso];
|
||||||
|
const isToday = cell.iso === today;
|
||||||
|
const isWeekend = ci === 0 || ci === 6;
|
||||||
|
const isOpen = dayData?.isOpen && dayData?.hoursLabel;
|
||||||
|
const isPH = dayData?.specialType === "passholder_preview";
|
||||||
|
|
||||||
|
const bg = isToday
|
||||||
|
? "var(--color-today-bg)"
|
||||||
|
: isWeekend
|
||||||
|
? "var(--color-weekend-header)"
|
||||||
|
: "transparent";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={idx} style={{
|
||||||
|
padding: "8px 8px",
|
||||||
|
overflow: "hidden",
|
||||||
|
background: bg,
|
||||||
|
borderRight,
|
||||||
|
borderBottom,
|
||||||
|
borderLeft: isToday ? "2px solid var(--color-today-border)" : "none",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 6,
|
||||||
|
}}>
|
||||||
|
{/* Date number */}
|
||||||
|
<span style={{
|
||||||
|
fontSize: "0.88rem",
|
||||||
|
fontWeight: isToday ? 700 : isWeekend ? 600 : 400,
|
||||||
|
color: isToday
|
||||||
|
? "var(--color-today-text)"
|
||||||
|
: isWeekend
|
||||||
|
? "var(--color-text)"
|
||||||
|
: "var(--color-text-muted)",
|
||||||
|
lineHeight: 1,
|
||||||
|
flexShrink: 0,
|
||||||
|
}}>
|
||||||
|
{cell.day}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* ── Mobile status: colored dot only (sm:hidden) ──────── */}
|
||||||
|
{/* Cells are ~55px wide on mobile — no room for hours text */}
|
||||||
|
{!dayData ? (
|
||||||
|
<span className="sm:hidden" style={{ fontSize: "0.7rem", color: "var(--color-text-dim)" }}>—</span>
|
||||||
|
) : isOpen ? (
|
||||||
|
<div className="sm:hidden" style={{
|
||||||
|
width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
|
||||||
|
background: isPH ? "var(--color-ph-border)" : "var(--color-open-border)",
|
||||||
|
}} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* ── Desktop status: full pill with hours (hidden sm:block) */}
|
||||||
|
{!dayData ? (
|
||||||
|
<span className="hidden sm:inline" style={{ fontSize: "0.75rem", color: "var(--color-text-dim)" }}>—</span>
|
||||||
|
) : isPH && isOpen ? (
|
||||||
|
<div className="hidden sm:block" style={{
|
||||||
|
background: "var(--color-ph-bg)",
|
||||||
|
border: "1px solid var(--color-ph-border)",
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: "8px 6px",
|
||||||
|
textAlign: "center",
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
|
||||||
|
Passholder
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 4 }}>
|
||||||
|
{dayData.hoursLabel}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.58rem", color: "var(--color-ph-label)", opacity: 0.75, marginTop: 3, letterSpacing: "0.04em" }}>
|
||||||
|
{tzAbbr}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : isOpen ? (
|
||||||
|
<div className="hidden sm:block" style={{
|
||||||
|
background: "var(--color-open-bg)",
|
||||||
|
border: "1px solid var(--color-open-border)",
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: "8px 6px",
|
||||||
|
textAlign: "center",
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
|
||||||
|
{dayData.hoursLabel}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.58rem", color: "var(--color-open-hours)", opacity: 0.6, marginTop: 4, letterSpacing: "0.04em" }}>
|
||||||
|
{tzAbbr}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="hidden sm:inline" style={{ fontSize: "1rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -215,12 +247,13 @@ const navLinkStyle: React.CSSProperties = {
|
|||||||
display: "inline-flex",
|
display: "inline-flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: "6px 14px",
|
padding: "10px 16px",
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
border: "1px solid var(--color-border)",
|
border: "1px solid var(--color-border)",
|
||||||
background: "var(--color-surface)",
|
background: "var(--color-surface)",
|
||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-muted)",
|
||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
|
minWidth: 44,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,12 +3,18 @@ import Link from "next/link";
|
|||||||
import type { Park } from "@/lib/scrapers/types";
|
import type { Park } from "@/lib/scrapers/types";
|
||||||
import type { DayData } from "@/lib/db";
|
import type { DayData } from "@/lib/db";
|
||||||
import type { Region } from "@/lib/parks";
|
import type { Region } from "@/lib/parks";
|
||||||
|
import { getTodayLocal, getTimezoneAbbr } from "@/lib/env";
|
||||||
|
|
||||||
interface WeekCalendarProps {
|
interface WeekCalendarProps {
|
||||||
parks: Park[];
|
parks: Park[];
|
||||||
weekDates: string[]; // 7 dates, YYYY-MM-DD, Sun–Sat
|
weekDates: string[]; // 7 dates, YYYY-MM-DD, Sun–Sat
|
||||||
data: Record<string, Record<string, DayData>>; // parkId → date → DayData
|
data: Record<string, Record<string, DayData>>; // parkId → date → DayData
|
||||||
grouped?: Map<Region, Park[]>; // pre-grouped parks (if provided, renders region headers)
|
grouped?: Map<Region, Park[]>; // pre-grouped parks (if provided, renders region headers)
|
||||||
|
rideCounts?: Record<string, number>; // parkId → open ride/coaster count for today
|
||||||
|
coastersOnly?: boolean;
|
||||||
|
openParkIds?: string[];
|
||||||
|
closingParkIds?: string[];
|
||||||
|
weatherDelayParkIds?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||||
@@ -29,12 +35,12 @@ function parseDate(iso: string) {
|
|||||||
|
|
||||||
function DayCell({
|
function DayCell({
|
||||||
dayData,
|
dayData,
|
||||||
isToday,
|
|
||||||
isWeekend,
|
isWeekend,
|
||||||
|
tzAbbr,
|
||||||
}: {
|
}: {
|
||||||
dayData: DayData | undefined;
|
dayData: DayData | undefined;
|
||||||
isToday: boolean;
|
|
||||||
isWeekend: boolean;
|
isWeekend: boolean;
|
||||||
|
tzAbbr: string;
|
||||||
}) {
|
}) {
|
||||||
const base: React.CSSProperties = {
|
const base: React.CSSProperties = {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
@@ -42,15 +48,8 @@ function DayCell({
|
|||||||
verticalAlign: "middle",
|
verticalAlign: "middle",
|
||||||
borderBottom: "1px solid var(--color-border)",
|
borderBottom: "1px solid var(--color-border)",
|
||||||
borderLeft: "1px solid var(--color-border)",
|
borderLeft: "1px solid var(--color-border)",
|
||||||
height: 56,
|
height: 72,
|
||||||
background: isToday
|
background: isWeekend ? "var(--color-weekend-header)" : "transparent",
|
||||||
? "var(--color-today-bg)"
|
|
||||||
: isWeekend
|
|
||||||
? "var(--color-weekend-header)"
|
|
||||||
: "transparent",
|
|
||||||
borderLeftColor: isToday ? "var(--color-today-border)" : undefined,
|
|
||||||
borderRightColor: isToday ? "var(--color-today-border)" : undefined,
|
|
||||||
borderRight: isToday ? "1px solid var(--color-today-border)" : undefined,
|
|
||||||
transition: "background 120ms ease",
|
transition: "background 120ms ease",
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -72,7 +71,7 @@ function DayCell({
|
|||||||
|
|
||||||
if (dayData.specialType === "passholder_preview") {
|
if (dayData.specialType === "passholder_preview") {
|
||||||
return (
|
return (
|
||||||
<td style={{ ...base, padding: 4 }}>
|
<td style={{ ...base, padding: 6 }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
background: "var(--color-ph-bg)",
|
background: "var(--color-ph-bg)",
|
||||||
border: "1px solid var(--color-ph-border)",
|
border: "1px solid var(--color-ph-border)",
|
||||||
@@ -99,13 +98,21 @@ function DayCell({
|
|||||||
</span>
|
</span>
|
||||||
<span style={{
|
<span style={{
|
||||||
color: "var(--color-ph-hours)",
|
color: "var(--color-ph-hours)",
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.78rem",
|
||||||
fontWeight: 500,
|
fontWeight: 600,
|
||||||
letterSpacing: "-0.01em",
|
letterSpacing: "-0.01em",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
}}>
|
}}>
|
||||||
{dayData.hoursLabel}
|
{dayData.hoursLabel}
|
||||||
</span>
|
</span>
|
||||||
|
<span style={{
|
||||||
|
color: "var(--color-ph-label)",
|
||||||
|
fontSize: "0.6rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
letterSpacing: "0.04em",
|
||||||
|
}}>
|
||||||
|
{tzAbbr}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
@@ -117,23 +124,34 @@ function DayCell({
|
|||||||
background: "var(--color-open-bg)",
|
background: "var(--color-open-bg)",
|
||||||
border: "1px solid var(--color-open-border)",
|
border: "1px solid var(--color-open-border)",
|
||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
padding: "6px 4px",
|
padding: "4px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
|
gap: 2,
|
||||||
transition: "filter 150ms ease",
|
transition: "filter 150ms ease",
|
||||||
}}>
|
}}>
|
||||||
<span style={{
|
<span style={{
|
||||||
color: "var(--color-open-hours)",
|
color: "var(--color-open-hours)",
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.78rem",
|
||||||
fontWeight: 500,
|
fontWeight: 600,
|
||||||
letterSpacing: "-0.01em",
|
letterSpacing: "-0.01em",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
}}>
|
}}>
|
||||||
{dayData.hoursLabel}
|
{dayData.hoursLabel}
|
||||||
</span>
|
</span>
|
||||||
|
<span style={{
|
||||||
|
color: "var(--color-open-hours)",
|
||||||
|
fontSize: "0.6rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
opacity: 0.6,
|
||||||
|
letterSpacing: "0.04em",
|
||||||
|
}}>
|
||||||
|
{tzAbbr}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
@@ -148,17 +166,16 @@ function RegionHeader({ region, colSpan }: { region: string; colSpan: number })
|
|||||||
padding: "10px 14px 6px",
|
padding: "10px 14px 6px",
|
||||||
background: "var(--color-region-bg)",
|
background: "var(--color-region-bg)",
|
||||||
borderBottom: "1px solid var(--color-border-subtle)",
|
borderBottom: "1px solid var(--color-border-subtle)",
|
||||||
borderLeft: "3px solid var(--color-region-accent)",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span style={{
|
<span style={{
|
||||||
fontSize: "0.65rem",
|
fontSize: "0.6rem",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.1em",
|
letterSpacing: "0.14em",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-secondary)",
|
||||||
}}>
|
}}>
|
||||||
{region}
|
— {region} —
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -171,16 +188,28 @@ function ParkRow({
|
|||||||
weekDates,
|
weekDates,
|
||||||
parsedDates,
|
parsedDates,
|
||||||
parkData,
|
parkData,
|
||||||
today,
|
rideCounts,
|
||||||
|
coastersOnly,
|
||||||
|
openParkIds,
|
||||||
|
closingParkIds,
|
||||||
|
weatherDelayParkIds,
|
||||||
}: {
|
}: {
|
||||||
park: Park;
|
park: Park;
|
||||||
parkIdx: number;
|
parkIdx: number;
|
||||||
weekDates: string[];
|
weekDates: string[];
|
||||||
parsedDates: ReturnType<typeof parseDate>[];
|
parsedDates: ReturnType<typeof parseDate>[];
|
||||||
parkData: Record<string, DayData>;
|
parkData: Record<string, DayData>;
|
||||||
today: string;
|
rideCounts?: Record<string, number>;
|
||||||
|
coastersOnly?: boolean;
|
||||||
|
openParkIds?: string[];
|
||||||
|
closingParkIds?: string[];
|
||||||
|
weatherDelayParkIds?: string[];
|
||||||
}) {
|
}) {
|
||||||
const rowBg = parkIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)";
|
const rowBg = parkIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)";
|
||||||
|
const tzAbbr = getTimezoneAbbr(park.timezone);
|
||||||
|
const isOpen = openParkIds?.includes(park.id) ?? false;
|
||||||
|
const isClosing = closingParkIds?.includes(park.id) ?? false;
|
||||||
|
const isWeatherDelay = weatherDelayParkIds?.includes(park.id) ?? false;
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
className="park-row"
|
className="park-row"
|
||||||
@@ -191,38 +220,62 @@ function ParkRow({
|
|||||||
position: "sticky",
|
position: "sticky",
|
||||||
left: 0,
|
left: 0,
|
||||||
zIndex: 5,
|
zIndex: 5,
|
||||||
padding: "10px 14px",
|
padding: 0,
|
||||||
borderBottom: "1px solid var(--color-border)",
|
borderBottom: "1px solid var(--color-border)",
|
||||||
borderRight: "1px solid var(--color-border)",
|
borderRight: "1px solid var(--color-border)",
|
||||||
whiteSpace: "nowrap",
|
borderLeft: isOpen
|
||||||
|
? `3px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`
|
||||||
|
: "3px solid transparent",
|
||||||
verticalAlign: "middle",
|
verticalAlign: "middle",
|
||||||
background: rowBg,
|
background: rowBg,
|
||||||
transition: "background 120ms ease",
|
transition: "background 120ms ease",
|
||||||
}}>
|
}}>
|
||||||
<Link href={`/park/${park.id}`} className="park-name-link">
|
<Link href={`/park/${park.id}`} className="park-name-link" style={{
|
||||||
<span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2 }}>
|
display: "flex",
|
||||||
{park.name}
|
alignItems: "center",
|
||||||
</span>
|
justifyContent: "space-between",
|
||||||
|
padding: "10px 14px",
|
||||||
|
gap: 10,
|
||||||
|
}}>
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||||
|
<span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)", whiteSpace: "nowrap" }}>
|
||||||
|
{park.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
|
||||||
|
{park.location.city}, {park.location.state}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isWeatherDelay && (
|
||||||
|
<div style={{ fontSize: "0.72rem", color: "var(--color-weather-text)", fontWeight: 600, textAlign: "center", maxWidth: 72, lineHeight: 1.3 }}>
|
||||||
|
Weather Delay
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isWeatherDelay && rideCounts?.[park.id] !== undefined && (
|
||||||
|
<div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "center", maxWidth: 72, lineHeight: 1.3 }}>
|
||||||
|
{rideCounts[park.id]} {coastersOnly
|
||||||
|
? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
|
||||||
|
: (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
<div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
|
|
||||||
{park.location.city}, {park.location.state}
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{weekDates.map((date, i) => (
|
{weekDates.map((date, i) => (
|
||||||
<DayCell
|
<DayCell
|
||||||
key={date}
|
key={date}
|
||||||
dayData={parkData[date]}
|
dayData={parkData[date]}
|
||||||
isToday={date === today}
|
|
||||||
isWeekend={parsedDates[i].isWeekend}
|
isWeekend={parsedDates[i].isWeekend}
|
||||||
|
tzAbbr={tzAbbr}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarProps) {
|
export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts, coastersOnly, openParkIds, closingParkIds, weatherDelayParkIds }: WeekCalendarProps) {
|
||||||
const today = new Date().toISOString().slice(0, 10);
|
const today = getTodayLocal();
|
||||||
const parsedDates = weekDates.map(parseDate);
|
const parsedDates = weekDates.map(parseDate);
|
||||||
|
|
||||||
const firstMonth = parsedDates[0].month;
|
const firstMonth = parsedDates[0].month;
|
||||||
@@ -236,7 +289,7 @@ export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarPr
|
|||||||
const colSpan = weekDates.length + 1; // park col + 7 day cols
|
const colSpan = weekDates.length + 1; // park col + 7 day cols
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ overflowX: "auto", overflowY: "visible" }}>
|
<div style={{ overflowX: "auto", overflowY: "visible", paddingRight: 16 }}>
|
||||||
<table style={{
|
<table style={{
|
||||||
borderCollapse: "collapse",
|
borderCollapse: "collapse",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
@@ -335,7 +388,11 @@ export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarPr
|
|||||||
weekDates={weekDates}
|
weekDates={weekDates}
|
||||||
parsedDates={parsedDates}
|
parsedDates={parsedDates}
|
||||||
parkData={data[park.id] ?? {}}
|
parkData={data[park.id] ?? {}}
|
||||||
today={today}
|
rideCounts={rideCounts}
|
||||||
|
coastersOnly={coastersOnly}
|
||||||
|
openParkIds={openParkIds}
|
||||||
|
closingParkIds={closingParkIds}
|
||||||
|
weatherDelayParkIds={weatherDelayParkIds}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|||||||
@@ -33,8 +33,9 @@ function shiftWeek(weekStart: string, delta: number): string {
|
|||||||
|
|
||||||
export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const nav = (delta: number) =>
|
const nav = (delta: number) => {
|
||||||
router.push(`/?week=${shiftWeek(weekStart, delta)}`);
|
router.push(`/?week=${shiftWeek(weekStart, delta)}`);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onKey = (e: KeyboardEvent) => {
|
const onKey = (e: KeyboardEvent) => {
|
||||||
@@ -74,7 +75,7 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
|||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
color: "var(--color-text)",
|
color: "var(--color-text)",
|
||||||
minWidth: 200,
|
minWidth: 140,
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
letterSpacing: "-0.01em",
|
letterSpacing: "-0.01em",
|
||||||
fontVariantNumeric: "tabular-nums",
|
fontVariantNumeric: "tabular-nums",
|
||||||
@@ -96,8 +97,8 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const navBtnStyle: React.CSSProperties = {
|
const navBtnStyle: React.CSSProperties = {
|
||||||
padding: "6px 14px",
|
padding: "10px 16px",
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
border: "1px solid var(--color-border)",
|
border: "1px solid var(--color-border)",
|
||||||
background: "var(--color-surface)",
|
background: "var(--color-surface)",
|
||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-muted)",
|
||||||
@@ -105,11 +106,13 @@ const navBtnStyle: React.CSSProperties = {
|
|||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
||||||
|
minWidth: 44,
|
||||||
|
textAlign: "center",
|
||||||
};
|
};
|
||||||
|
|
||||||
const navBtnHover: React.CSSProperties = {
|
const navBtnHover: React.CSSProperties = {
|
||||||
padding: "6px 14px",
|
padding: "10px 16px",
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
border: "1px solid var(--color-text-dim)",
|
border: "1px solid var(--color-text-dim)",
|
||||||
background: "var(--color-surface-2)",
|
background: "var(--color-surface-2)",
|
||||||
color: "var(--color-text-secondary)",
|
color: "var(--color-text-secondary)",
|
||||||
@@ -117,6 +120,8 @@ const navBtnHover: React.CSSProperties = {
|
|||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
||||||
|
minWidth: 44,
|
||||||
|
textAlign: "center",
|
||||||
};
|
};
|
||||||
|
|
||||||
const todayBtnStyle: React.CSSProperties = {
|
const todayBtnStyle: React.CSSProperties = {
|
||||||
|
|||||||
10
lib/db.ts
10
lib/db.ts
@@ -46,12 +46,10 @@ export function upsertDay(
|
|||||||
hoursLabel?: string,
|
hoursLabel?: string,
|
||||||
specialType?: string
|
specialType?: string
|
||||||
) {
|
) {
|
||||||
// Today and past dates: INSERT new rows freely, but NEVER overwrite existing records.
|
// Today and future dates: full upsert — hours can change (e.g. weather delays,
|
||||||
// Once an operating day begins the API drops that date from its response, so a
|
// early closures) and the dateless API endpoint now returns today's live data.
|
||||||
// re-scrape would incorrectly record the day as closed. The DB row written when
|
|
||||||
// the date was still in the future is the permanent truth for that day.
|
|
||||||
//
|
//
|
||||||
// Future dates only: full upsert — hours can change and closures can be added.
|
// Past dates: INSERT-only — never overwrite once the day has passed.
|
||||||
db.prepare(`
|
db.prepare(`
|
||||||
INSERT INTO park_days (park_id, date, is_open, hours_label, special_type, scraped_at)
|
INSERT INTO park_days (park_id, date, is_open, hours_label, special_type, scraped_at)
|
||||||
VALUES (?, ?, ?, ?, ?, ?)
|
VALUES (?, ?, ?, ?, ?, ?)
|
||||||
@@ -60,7 +58,7 @@ export function upsertDay(
|
|||||||
hours_label = excluded.hours_label,
|
hours_label = excluded.hours_label,
|
||||||
special_type = excluded.special_type,
|
special_type = excluded.special_type,
|
||||||
scraped_at = excluded.scraped_at
|
scraped_at = excluded.scraped_at
|
||||||
WHERE park_days.date > date('now')
|
WHERE park_days.date >= date('now')
|
||||||
`).run(parkId, date, isOpen ? 1 : 0, hoursLabel ?? null, specialType ?? null, new Date().toISOString());
|
`).run(parkId, date, isOpen ? 1 : 0, hoursLabel ?? null, specialType ?? null, new Date().toISOString());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
84
lib/env.ts
84
lib/env.ts
@@ -11,3 +11,87 @@ export function parseStalenessHours(envVar: string | undefined, defaultHours: nu
|
|||||||
const parsed = parseInt(envVar ?? "", 10);
|
const parsed = parseInt(envVar ?? "", 10);
|
||||||
return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultHours;
|
return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultHours;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns today's date as YYYY-MM-DD using local wall-clock time with a 3 AM
|
||||||
|
* switchover. Before 3 AM local time we still consider it "yesterday", so the
|
||||||
|
* calendar doesn't flip to the next day at midnight while people are still out
|
||||||
|
* at the park.
|
||||||
|
*
|
||||||
|
* Important: `new Date().toISOString()` returns UTC, which causes the date to
|
||||||
|
* advance at 8 PM EDT (UTC-4) or 7 PM EST (UTC-5) — too early. This helper
|
||||||
|
* corrects that by using local year/month/day components and rolling back one
|
||||||
|
* day when the local hour is before 3.
|
||||||
|
*/
|
||||||
|
export function getTodayLocal(): string {
|
||||||
|
const now = new Date();
|
||||||
|
if (now.getHours() < 3) {
|
||||||
|
now.setDate(now.getDate() - 1);
|
||||||
|
}
|
||||||
|
const y = now.getFullYear();
|
||||||
|
const m = String(now.getMonth() + 1).padStart(2, "0");
|
||||||
|
const d = String(now.getDate()).padStart(2, "0");
|
||||||
|
return `${y}-${m}-${d}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the short timezone abbreviation for a given IANA timezone,
|
||||||
|
* e.g. "America/Los_Angeles" → "PDT" or "PST".
|
||||||
|
*/
|
||||||
|
export function getTimezoneAbbr(timezone: string): string {
|
||||||
|
const parts = new Intl.DateTimeFormat("en-US", {
|
||||||
|
timeZone: timezone,
|
||||||
|
timeZoneName: "short",
|
||||||
|
}).formatToParts(new Date());
|
||||||
|
return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true when the current time in the park's timezone is within
|
||||||
|
* the operating window (open time through 1 hour after close), based on
|
||||||
|
* a hoursLabel like "10am – 6pm". Falls back to true when unparseable.
|
||||||
|
*
|
||||||
|
* Uses the park's IANA timezone so a Pacific park's "10am" is correctly
|
||||||
|
* compared to Pacific time regardless of where the server is running.
|
||||||
|
*/
|
||||||
|
export function isWithinOperatingWindow(hoursLabel: string, timezone: string): boolean {
|
||||||
|
return getOperatingStatus(hoursLabel, timezone) !== "closed";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the park's current operating status relative to its scheduled hours:
|
||||||
|
* "open" — within the scheduled open window
|
||||||
|
* "closing" — past scheduled close but within the 1-hour wind-down buffer
|
||||||
|
* "closed" — outside the window entirely
|
||||||
|
* Falls back to "open" when the label can't be parsed.
|
||||||
|
*/
|
||||||
|
export function getOperatingStatus(hoursLabel: string, timezone: string): "open" | "closing" | "closed" {
|
||||||
|
const m = hoursLabel.match(
|
||||||
|
/^(\d+)(?::(\d+))?(am|pm)\s*[–-]\s*(\d+)(?::(\d+))?(am|pm)$/i
|
||||||
|
);
|
||||||
|
if (!m) return "open";
|
||||||
|
const toMinutes = (h: string, min: string | undefined, period: string) => {
|
||||||
|
let hours = parseInt(h, 10);
|
||||||
|
const minutes = min ? parseInt(min, 10) : 0;
|
||||||
|
if (period.toLowerCase() === "pm" && hours !== 12) hours += 12;
|
||||||
|
if (period.toLowerCase() === "am" && hours === 12) hours = 0;
|
||||||
|
return hours * 60 + minutes;
|
||||||
|
};
|
||||||
|
const openMin = toMinutes(m[1], m[2], m[3]);
|
||||||
|
const closeMin = toMinutes(m[4], m[5], m[6]);
|
||||||
|
|
||||||
|
// Get the current time in the park's local timezone.
|
||||||
|
const parts = new Intl.DateTimeFormat("en-US", {
|
||||||
|
timeZone: timezone,
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: false,
|
||||||
|
}).formatToParts(new Date());
|
||||||
|
const h = parseInt(parts.find((p) => p.type === "hour")?.value ?? "0", 10);
|
||||||
|
const min = parseInt(parts.find((p) => p.type === "minute")?.value ?? "0", 10);
|
||||||
|
const nowMin = (h % 24) * 60 + min;
|
||||||
|
|
||||||
|
if (nowMin >= openMin && nowMin <= closeMin) return "open";
|
||||||
|
if (nowMin > closeMin && nowMin <= closeMin + 60) return "closing";
|
||||||
|
return "closed";
|
||||||
|
}
|
||||||
|
|||||||
@@ -166,13 +166,48 @@ function apiDateToIso(apiDate: string): string {
|
|||||||
return `${yyyy}-${mm}-${dd}`;
|
return `${yyyy}-${mm}-${dd}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Parse a single ApiDay into a DayResult. Shared by scrapeMonth and fetchToday. */
|
||||||
|
function parseApiDay(d: ApiDay): DayResult {
|
||||||
|
const date = parseApiDate(d.date);
|
||||||
|
const operating =
|
||||||
|
d.operatings?.find((o) => o.operatingTypeName === "Park") ??
|
||||||
|
d.operatings?.[0];
|
||||||
|
const item = operating?.items?.[0];
|
||||||
|
const hoursLabel =
|
||||||
|
item?.timeFrom && item?.timeTo
|
||||||
|
? `${fmt24(item.timeFrom)} – ${fmt24(item.timeTo)}`
|
||||||
|
: undefined;
|
||||||
|
const isPassholderPreview = d.events?.some((e) =>
|
||||||
|
e.extEventName.toLowerCase().includes("passholder preview")
|
||||||
|
) ?? false;
|
||||||
|
const isBuyout = item?.isBuyout ?? false;
|
||||||
|
const isOpen = !d.isParkClosed && hoursLabel !== undefined && (!isBuyout || isPassholderPreview);
|
||||||
|
const specialType: DayResult["specialType"] = isPassholderPreview ? "passholder_preview" : undefined;
|
||||||
|
return { date, isOpen, hoursLabel: isOpen ? hoursLabel : undefined, specialType };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetch ride operating status for a given date.
|
* Fetch today's operating data directly (no date param = API returns today).
|
||||||
|
* Pass `revalidate` (seconds) for Next.js ISR caching; omit for a fully fresh fetch.
|
||||||
|
*/
|
||||||
|
export async function fetchToday(apiId: number, revalidate?: number): Promise<DayResult | null> {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE}/${apiId}`;
|
||||||
|
const raw = await fetchApi(url, 0, 0, revalidate);
|
||||||
|
if (!raw.dates.length) return null;
|
||||||
|
return parseApiDay(raw.dates[0]);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch ride operating status for a given date. Used as a fallback when
|
||||||
|
* Queue-Times live data is unavailable.
|
||||||
*
|
*
|
||||||
* The Six Flags API drops dates that have already started (including today),
|
* The monthly API endpoint (`?date=YYYYMM`) may not include today; use
|
||||||
* returning only tomorrow onwards. When the requested date is missing, we fall
|
* `fetchToday(apiId)` to get today's park hours directly. The fallback
|
||||||
* back to the nearest available upcoming date in the same month's response so
|
* chain here will find the nearest upcoming date if an exact match is missing.
|
||||||
* 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,
|
* Returns null if no ride data could be found at all (API error, pre-season,
|
||||||
* no venues in response).
|
* no venues in response).
|
||||||
@@ -286,30 +321,7 @@ export async function scrapeMonth(
|
|||||||
|
|
||||||
const data = await fetchApi(url);
|
const data = await fetchApi(url);
|
||||||
|
|
||||||
return data.dates.map((d): DayResult => {
|
return data.dates.map(parseApiDay);
|
||||||
const date = parseApiDate(d.date);
|
|
||||||
// Prefer the "Park" operating entry; fall back to first entry
|
|
||||||
const operating =
|
|
||||||
d.operatings?.find((o) => o.operatingTypeName === "Park") ??
|
|
||||||
d.operatings?.[0];
|
|
||||||
const item = operating?.items?.[0];
|
|
||||||
const hoursLabel =
|
|
||||||
item?.timeFrom && item?.timeTo
|
|
||||||
? `${fmt24(item.timeFrom)} – ${fmt24(item.timeTo)}`
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
const isPassholderPreview = d.events?.some((e) =>
|
|
||||||
e.extEventName.toLowerCase().includes("passholder preview")
|
|
||||||
) ?? false;
|
|
||||||
|
|
||||||
const isBuyout = item?.isBuyout ?? false;
|
|
||||||
|
|
||||||
// Buyout days are private events — treat as closed unless it's a passholder preview
|
|
||||||
const isOpen = !d.isParkClosed && hoursLabel !== undefined && (!isBuyout || isPassholderPreview);
|
|
||||||
const specialType: DayResult["specialType"] = isPassholderPreview ? "passholder_preview" : undefined;
|
|
||||||
|
|
||||||
return { date, isOpen, hoursLabel: isOpen ? hoursLabel : undefined, specialType };
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
import { openDb, upsertDay, getApiId, isMonthScraped } from "../lib/db";
|
import { openDb, upsertDay, getApiId, isMonthScraped } from "../lib/db";
|
||||||
import { PARKS } from "../lib/parks";
|
import { PARKS } from "../lib/parks";
|
||||||
import { scrapeMonth, RateLimitError } from "../lib/scrapers/sixflags";
|
import { scrapeMonth, fetchToday, RateLimitError } from "../lib/scrapers/sixflags";
|
||||||
import { readParkMeta, writeParkMeta, areCoastersStale } from "../lib/park-meta";
|
import { readParkMeta, writeParkMeta, areCoastersStale } from "../lib/park-meta";
|
||||||
import { scrapeRcdbCoasters } from "../lib/scrapers/rcdb";
|
import { scrapeRcdbCoasters } from "../lib/scrapers/rcdb";
|
||||||
|
|
||||||
@@ -100,6 +100,25 @@ async function main() {
|
|||||||
console.log(`\n ${totalFetched} fetched ${totalSkipped} skipped ${totalErrors} errors`);
|
console.log(`\n ${totalFetched} fetched ${totalSkipped} skipped ${totalErrors} errors`);
|
||||||
if (totalErrors > 0) console.log(" Re-run to retry failed months.");
|
if (totalErrors > 0) console.log(" Re-run to retry failed months.");
|
||||||
|
|
||||||
|
// ── Today scrape (always fresh — dateless endpoint returns current day) ────
|
||||||
|
console.log("\n── Today's data ──");
|
||||||
|
for (const park of ready) {
|
||||||
|
const apiId = getApiId(db, park.id)!;
|
||||||
|
process.stdout.write(` ${park.shortName.padEnd(22)} `);
|
||||||
|
try {
|
||||||
|
const today = await fetchToday(apiId);
|
||||||
|
if (today) {
|
||||||
|
upsertDay(db, park.id, today.date, today.isOpen, today.hoursLabel, today.specialType);
|
||||||
|
console.log(today.isOpen ? `open ${today.hoursLabel ?? ""}` : "closed");
|
||||||
|
} else {
|
||||||
|
console.log("no data");
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
console.log("error");
|
||||||
|
}
|
||||||
|
await sleep(500);
|
||||||
|
}
|
||||||
|
|
||||||
db.close();
|
db.close();
|
||||||
|
|
||||||
// ── RCDB coaster scrape (30-day staleness) ────────────────────────────────
|
// ── RCDB coaster scrape (30-day staleness) ────────────────────────────────
|
||||||
|
|||||||
Reference in New Issue
Block a user