Weather radar

src/components/WeatherRadar.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import sleep from "../images/sleep.gif";
+import * as styles from "../styles/containers/WeatherRadar.module.css";
+
+const RADAR_REFRESH_INTERVAL = 15 * 60 * 1000;
+
+const WeatherRadar = () => {
+    const [radarLink, setRadarLink] = React.useState("https://www.dwd.de/DWD/wetter/radar/radfilm_sac_akt.gif");
+
+    React.useEffect(() => {
+        const radarInterval = setInterval(() => {
+            setRadarLink(`https://www.dwd.de/DWD/wetter/radar/radfilm_sac_akt.gif?r=${Date.now()}`)
+        }, RADAR_REFRESH_INTERVAL);
+
+        return () => clearInterval(radarInterval);
+    }, [])
+
+    return (
+        <div className={`container ${styles.container}`}>
+            <img className={`radar ${styles.radar}`} src={radarLink} />
+            <img className={`radarNight ${styles.radarNight}`} src={sleep} />
+        </div>
+    )
+}
+
+export default WeatherRadar;

src/lib/types.d.ts

@@ -2,3 +2,8 @@ declare module '*.css' {
   const content: { [className: string]: string };
   export = content;
 }
+
+declare module '*.gif' {
+  const path: string;
+  export = path;
+}

src/pages/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import secrets from "../../secrets.json"
 import Calendar from "../components/Calendar";
 import WeatherAndTimeContainer from "../components/WeatherAndTime"
+import WeatherRadar from "../components/WeatherRadar";
 
 function importAll(r) {
   return r.keys().map(r);
@@ -32,6 +33,7 @@ const IndexPage = () => {
   return (<main style={{ backgroundImage: `url(${images[currentBg].default})` }}>
     <WeatherAndTimeContainer secrets={secrets.weather} />
     <Calendar secrets={secrets.calendar} />
+    <WeatherRadar />
   </main>)
 }
 

src/styles/containers/WeatherRadar.module.css

@@ -0,0 +1,15 @@
+.container {
+    padding:5px !important;
+    grid-area: map;
+    place-self: center;
+    justify-self: center;
+}
+
+.radar, .radarNight {
+    max-width: max(calc(28vw - 10px), calc(43vh - 10px));
+}
+
+.radarNight {
+    image-rendering: pixelated;
+    width: max(calc(28vw - 10px), calc(43vh - 10px));
+}

src/styles/global.css

@@ -43,10 +43,16 @@ main {
     background-size: cover;
     background-position: center center;
 }
+
 :root[data-theme="night"] main {
     background-image: url("../images/bg/3.jpg") !important;
 }
 
+:root[data-theme="day"] .radar {display: block;}
+:root[data-theme="night"] .radar {display: none;}
+:root[data-theme="day"] .radarNight {display: none;}
+:root[data-theme="night"] .radarNight {display: block;}
+
 .container {
     box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
     border-radius: 10px;