From f85cc084b796d97902f9bfa1fe61ba9c5dc80f2e Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Sun, 5 Apr 2026 15:01:37 -0400
Subject: [PATCH] feat: blue dot + Weather Delay notice for storm-closed parks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 app/globals.css              |  6 ++++++
 app/park/[id]/page.tsx       |  8 ++++++++
 components/LiveRidePanel.tsx | 16 +++++++++++++++-
 components/ParkCard.tsx      | 20 +++++---------------
 components/WeekCalendar.tsx  |  6 ++----
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index e05840c..949c3f0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -27,6 +27,12 @@
   --color-open-text: #4ade80;
   --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;
diff --git a/app/park/[id]/page.tsx b/app/park/[id]/page.tsx
index 94d6e8e..9662772 100644
--- a/app/park/[id]/page.tsx
+++ b/app/park/[id]/page.tsx
@@ -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
   if (!liveRides && apiId !== null) {
     // 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
               liveRides={liveRides}
               parkOpenToday={!!parkOpenToday}
+              isWeatherDelay={isWeatherDelay}
             />
           ) : (
             <RideList
diff --git a/components/LiveRidePanel.tsx b/components/LiveRidePanel.tsx
index cb641fa..4b780bd 100644
--- a/components/LiveRidePanel.tsx
+++ b/components/LiveRidePanel.tsx
@@ -6,9 +6,10 @@ import type { LiveRidesResult, LiveRide } from "@/lib/scrapers/queuetimes";
 interface LiveRidePanelProps {
   liveRides: LiveRidesResult;
   parkOpenToday: boolean;
+  isWeatherDelay?: boolean;
 }
 
-export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps) {
+export function LiveRidePanel({ liveRides, parkOpenToday, isWeatherDelay }: LiveRidePanelProps) {
   const { rides } = liveRides;
   const hasCoasters = rides.some((r) => r.isCoaster);
   const [coastersOnly, setCoastersOnly] = useState(false);
@@ -49,6 +50,19 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
           }}>
             {openRides.length} open
           </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={{
             background: "var(--color-surface)",
diff --git a/components/ParkCard.tsx b/components/ParkCard.tsx
index c2fb5b1..6a182ee 100644
--- a/components/ParkCard.tsx
+++ b/components/ParkCard.tsx
@@ -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 }}>
           {isOpenToday ? (
             <div style={{
-              background: isClosing ? "var(--color-closing-bg)" : "var(--color-open-bg)",
-              border: `1px solid ${isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`,
+              background: isWeatherDelay ? "var(--color-weather-bg)" : isClosing ? "var(--color-closing-bg)" : "var(--color-open-bg)",
+              border: `1px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`,
               borderRadius: 20,
               padding: "4px 10px",
               fontSize: "0.65rem",
               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",
               letterSpacing: "0.03em",
             }}>
-              {isClosing ? "Closing" : "Open today"}
+              {isWeatherDelay ? "⛈ Weather Delay" : isClosing ? "Closing" : "Open today"}
             </div>
           ) : (
             <div style={{
@@ -89,17 +89,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
               Closed today
             </div>
           )}
-          {isOpenToday && isWeatherDelay && (
-            <div style={{
-              fontSize: "0.65rem",
-              color: "var(--color-text-muted)",
-              fontWeight: 500,
-              textAlign: "right",
-            }}>
-              ⛈ Weather Delay
-            </div>
-          )}
-          {isOpenToday && openRideCount !== undefined && (
+          {isOpenToday && !isWeatherDelay && openRideCount !== undefined && (
             <div style={{
               fontSize: "0.65rem",
               color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)",
diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx
index 9b31815..41ff12c 100644
--- a/components/WeekCalendar.tsx
+++ b/components/WeekCalendar.tsx
@@ -245,11 +245,9 @@ function ParkRow({
                   width: 7,
                   height: 7,
                   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,
-                  boxShadow: isClosing
-                    ? "0 0 5px var(--color-closing-text)"
-                    : "0 0 5px var(--color-open-text)",
+                  boxShadow: isWeatherDelay ? "0 0 5px var(--color-weather-text)" : isClosing ? "0 0 5px var(--color-closing-text)" : "0 0 5px var(--color-open-text)",
                 }} />
               )}
             </div>