From 7f8f52abd01858e116445eb3451b1299cc97fb54 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Sat, 13 Jun 2026 12:24:08 +0200
Subject: [PATCH] feat: add dev weather effect override

---
 components/weather/weather-hero.tsx | 32 ++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/components/weather/weather-hero.tsx b/components/weather/weather-hero.tsx
index 8b4ee38..a89dda0 100644
--- a/components/weather/weather-hero.tsx
+++ b/components/weather/weather-hero.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { AlertTriangle, Droplets, Gauge, MapPin, Navigation, Umbrella, Wind } from "lucide-react";
 import {
@@ -19,6 +20,8 @@ import { WeatherIcon } from "@/components/weather/weather-icon";
 import { WeatherEffects } from "@/components/weather/weather-effects";
 import { useI18n } from "@/lib/i18n";
 
+type DevWeatherEffectOverride = "rain" | "thunderstorm" | "none";
+
 function moodAccentClass(mood: WeatherMood) {
   return {
     warm: "border-accent/25 bg-accent/10 text-accent",
@@ -30,8 +33,17 @@ function moodAccentClass(mood: WeatherMood) {
   }[mood];
 }
 
+function readDevWeatherEffectOverride(): DevWeatherEffectOverride | null {
+  if (process.env.NODE_ENV !== "development" || typeof window === "undefined") return null;
+  const effect = new URLSearchParams(window.location.search).get("effect");
+  if (effect === "rain" || effect === "thunderstorm" || effect === "none") return effect;
+  if (effect === "storm") return "thunderstorm";
+  return null;
+}
+
 export function WeatherHero({ station, currentWeather, currentWeatherLoading = false, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; currentWeatherLoading?: boolean; locationName?: string; distanceKm?: number }) {
   const { language, t } = useI18n();
+  const [devEffectOverride, setDevEffectOverride] = useState<DevWeatherEffectOverride | null>(null);
   const displayedLocationName = locationName ?? station.name;
   const hasFullHybridAnalysis = currentWeather?.coverage === "full" || currentWeather?.coverage === "hourly";
   const hasPartialHybridAnalysis = currentWeather?.coverage === "precipitation-only";
@@ -55,6 +67,24 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
     { icon: Umbrella, label: currentWeather?.precipitation10m !== null && currentWeather?.precipitation10m !== undefined ? t("weather.rainfall10m") : t("weather.rainfallTotal"), value: formatRainfall(displayedStation.rainfall, language) },
     { icon: Gauge, label: t("weather.pressure"), value: formatPressure(displayedStation.pressure, language) },
   ];
+  const effectPrecipitation10m = devEffectOverride === "rain" || devEffectOverride === "thunderstorm"
+    ? 0.1
+    : devEffectOverride === "none"
+      ? 0
+      : currentWeather?.precipitation10m;
+  const effectThunderstorm = devEffectOverride === "thunderstorm"
+    ? true
+    : devEffectOverride === "rain" || devEffectOverride === "none"
+      ? false
+      : currentWeather?.condition === "thunderstorm";
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+    const updateOverride = () => setDevEffectOverride(readDevWeatherEffectOverride());
+    updateOverride();
+    window.addEventListener("popstate", updateOverride);
+    return () => window.removeEventListener("popstate", updateOverride);
+  }, []);
 
   return (
     <motion.section
@@ -63,7 +93,7 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
       transition={{ duration: 0.55, ease: "easeOut" }}
       className="relative isolate overflow-hidden rounded-panel border border-border/70 bg-surface-raised px-5 py-6 shadow-card sm:px-8 sm:py-8 lg:px-10"
     >
-      <WeatherEffects precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
+      <WeatherEffects precipitation10m={effectPrecipitation10m} thunderstorm={effectThunderstorm} />
       <div className="relative z-10">
         <div>
           <div className="flex flex-wrap items-center gap-2">