From 7a916bc899a6b105de3ecfa8c88aeb65f78c21d3 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge.98@gmx.de>
Date: Mon, 3 Jan 2022 00:16:36 +0100
Subject: [PATCH] Weather radar

---
 src/components/WeatherRadar.tsx               | 26 +++++++++++++++++++
 src/lib/types.d.ts                            |  5 ++++
 src/pages/index.tsx                           |  2 ++
 src/styles/containers/WeatherRadar.module.css | 15 +++++++++++
 src/styles/global.css                         |  6 +++++
 5 files changed, 54 insertions(+)
 create mode 100644 src/components/WeatherRadar.tsx
 create mode 100644 src/styles/containers/WeatherRadar.module.css

diff --git a/src/components/WeatherRadar.tsx b/src/components/WeatherRadar.tsx
new file mode 100644
index 0000000..e7dc1fb
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index dff4fc6..b4d8ff6 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,4 +1,9 @@
 declare module '*.css' {
   const content: { [className: string]: string };
   export = content;
+}
+
+declare module '*.gif' {
+  const path: string;
+  export = path;
 }
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fdc212c..8725937 100644
--- a/src/pages/index.tsx
+++ b/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>)
 }
 
diff --git a/src/styles/containers/WeatherRadar.module.css b/src/styles/containers/WeatherRadar.module.css
new file mode 100644
index 0000000..4fb7963
--- /dev/null
+++ b/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));
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 1776dd4..ea77251 100644
--- a/src/styles/global.css
+++ b/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;