From ef1ac71612c17000e7bbbe10777a11bf1221e266 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Mon, 13 Dec 2021 21:04:23 +0100
Subject: [PATCH] feat: add bg color to highlight state

---
 package.json |  1 +
 src/App.css  |  9 ++++++++-
 src/App.tsx  | 11 ++++++++++-
 yarn.lock    |  5 +++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 967e0ef..35e6a1c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "classnames": "^2.3.1",
     "geolib": "^3.3.3",
     "rc-time-picker": "^3.7.3",
     "react": "^17.0.0",
diff --git a/src/App.css b/src/App.css
index 8da3fde..bd3dc53 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,14 @@
   text-align: center;
 }
 
+.App.alarm-set {
+    background-color: green;
+}
+
+.App.alarm-playing {
+  background-color: red;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;
@@ -14,7 +22,6 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
diff --git a/src/App.tsx b/src/App.tsx
index a77904f..91bb84b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState, useRef, useEffect } from "react";
 import { usePosition } from "use-position";
 import { getDistance } from "geolib";
+import cx from "classnames";
 import TimePicker from "rc-time-picker";
 import moment from "moment";
 
@@ -13,6 +14,7 @@ import blankMp3 from "./blank.mp3";
 function App() {
   const [alarm, setAlarm] = useState<moment.Moment | null>(null);
   const [alarmSet, setAlarmSet] = useState(false);
+  const [alarmPlaying, setAlarmPlaying] = useState(false);
   const [stopDistance, setStopDistance] = useState(10);
   const audioRef = useRef<HTMLAudioElement>(null);
 
@@ -42,12 +44,14 @@ function App() {
   useEffect(() => {
     if (alarmSet && distance > stopDistance) {
       setAlarmSet(false);
+      alarmPlaying(false);
       setAlarm(null);
     }
   }, [distance, alarmSet]);
 
   const showAlarm = () => {
     console.log("ALARM! Wake up!");
+    setAlarmPlaying(true);
     audioRef.current?.play();
 
     if (!("Notification" in window)) {
@@ -79,7 +83,12 @@ function App() {
   }, [alarm]);
 
   return (
-    <div className="App">
+    <div
+      className={cx("App", {
+        "alarm-playing": alarmPlaying,
+        "alarm-set": alarmSet,
+      })}
+    >
       <div className="App-header">
         <TimePicker
           defaultValue={moment().add(1, "hour")}
diff --git a/yarn.lock b/yarn.lock
index ec15743..22c08ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1737,6 +1737,11 @@ classnames@2.x, classnames@^2.2.6:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 cli-boxes@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"