Compare commits

...

2 Commits

Author SHA1 Message Date
Josh Wright
695feff443 fix: restore Weather Delay text in mobile card ride count area
All checks were successful
Build and Deploy / Build & Push (push) Successful in 56s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 15:02:11 -04:00
Josh Wright
f85cc084b7 feat: blue dot + Weather Delay notice for storm-closed parks
- Dot turns blue (instead of green) during weather delay on homepage
- Mobile card "Open today" badge becomes blue "⛈ Weather Delay"
- Park page LiveRidePanel shows a blue "⛈ Weather Delay — all rides currently closed" badge instead of "Not open yet — check back soon"
- Added --color-weather-* CSS variables (blue palette)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 15:01:37 -04:00
5 changed files with 37 additions and 11 deletions

View File

@@ -27,6 +27,12 @@
--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) ───────── */ /* ── Closing — amber (post-close buffer, rides still winding down) ───────── */
--color-closing-bg: #1a1100; --color-closing-bg: #1a1100;
--color-closing-border: #d97706; --color-closing-border: #d97706;

View File

@@ -73,6 +73,13 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
} }
} }
// 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 live data is unavailable // Only hit the schedule API as a fallback when 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), // Note: the API drops today's date from its response (only returns future dates),
@@ -157,6 +164,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
<LiveRidePanel <LiveRidePanel
liveRides={liveRides} liveRides={liveRides}
parkOpenToday={!!parkOpenToday} parkOpenToday={!!parkOpenToday}
isWeatherDelay={isWeatherDelay}
/> />
) : ( ) : (
<RideList <RideList

View File

@@ -6,9 +6,10 @@ 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);
@@ -49,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)",

View File

@@ -63,17 +63,17 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5, flexShrink: 0 }}> <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5, flexShrink: 0 }}>
{isOpenToday ? ( {isOpenToday ? (
<div style={{ <div style={{
background: isClosing ? "var(--color-closing-bg)" : "var(--color-open-bg)", background: isWeatherDelay ? "var(--color-weather-bg)" : isClosing ? "var(--color-closing-bg)" : "var(--color-open-bg)",
border: `1px solid ${isClosing ? "var(--color-closing-border)" : "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: isClosing ? "var(--color-closing-text)" : "var(--color-open-text)", color: isWeatherDelay ? "var(--color-weather-text)" : isClosing ? "var(--color-closing-text)" : "var(--color-open-text)",
whiteSpace: "nowrap", whiteSpace: "nowrap",
letterSpacing: "0.03em", letterSpacing: "0.03em",
}}> }}>
{isClosing ? "Closing" : "Open today"} {isWeatherDelay ? "⛈ Weather Delay" : isClosing ? "Closing" : "Open today"}
</div> </div>
) : ( ) : (
<div style={{ <div style={{
@@ -92,14 +92,14 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
{isOpenToday && isWeatherDelay && ( {isOpenToday && isWeatherDelay && (
<div style={{ <div style={{
fontSize: "0.65rem", fontSize: "0.65rem",
color: "var(--color-text-muted)", color: "var(--color-weather-hours, #bfdbfe)",
fontWeight: 500, fontWeight: 500,
textAlign: "right", textAlign: "right",
}}> }}>
Weather Delay Weather Delay
</div> </div>
)} )}
{isOpenToday && openRideCount !== undefined && ( {isOpenToday && !isWeatherDelay && openRideCount !== undefined && (
<div style={{ <div style={{
fontSize: "0.65rem", fontSize: "0.65rem",
color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)",

View File

@@ -245,11 +245,9 @@ function ParkRow({
width: 7, width: 7,
height: 7, height: 7,
borderRadius: "50%", borderRadius: "50%",
background: isClosing ? "var(--color-closing-text)" : "var(--color-open-text)", background: isWeatherDelay ? "var(--color-weather-text)" : isClosing ? "var(--color-closing-text)" : "var(--color-open-text)",
flexShrink: 0, flexShrink: 0,
boxShadow: isClosing boxShadow: isWeatherDelay ? "0 0 5px var(--color-weather-text)" : isClosing ? "0 0 5px var(--color-closing-text)" : "0 0 5px var(--color-open-text)",
? "0 0 5px var(--color-closing-text)"
: "0 0 5px var(--color-open-text)",
}} /> }} />
)} )}
</div> </div>