From 5107f98bd4faa98d6b0514d9ae31d40db631128f Mon Sep 17 00:00:00 2001 From: nzambello Date: Tue, 21 Dec 2021 16:34:52 +0100 Subject: [PATCH] feat: add styling and layout --- package.json | 6 +- src/App.css | 97 +++++++++++++++++++++------ src/App.tsx | 151 +++++++++++++++++++++++++++++++----------- tsconfig.json | 2 +- yarn.lock | 179 +++++++++++--------------------------------------- 5 files changed, 233 insertions(+), 202 deletions(-) diff --git a/package.json b/package.json index 5056c23..fd67eab 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,13 @@ }, "dependencies": { "classnames": "^2.3.1", + "date-fns": "^2.27.0", "geolib": "^3.3.3", - "rc-time-picker": "^3.7.3", "react": "^17.0.0", "react-dom": "^17.0.0", - "use-position": "^1.0.0" + "ui-neumorphism": "^1.1.3", + "use-position": "^1.0.0", + "use-stay-awake": "^0.1.7" }, "devDependencies": { "@commitlint/cli": "^15.0.0", diff --git a/src/App.css b/src/App.css index b796ab1..5f553ef 100644 --- a/src/App.css +++ b/src/App.css @@ -1,14 +1,50 @@ .App { text-align: center; - background-color: #282c34; + background: var(--bg-color); } -.App.alarm-set { - background-color: green; +.theme--dark { + --code-bg: #272822; + --bg-color: var(--dark-bg); + --text-shadow: var(--dark-bg-dark-shadow); + --menu-text-color: var(--g-text-color-dark); + --menu-text-hover-color: var(--primary-light); + --text-secondary: var(--g-text-color-disabled-dark); + --box-shadow-inset-small: inset -1px -1px 1px var(--dark-bg-light-shadow), inset 1px 1px 1px var(--dark-bg-dark-shadow); +} + +.App.has-walked { + background-color: teal; } .App.alarm-playing { - background-color: red; + background-color: coral; +} +.App.alarm-playing p { + color: white; +} + +.App.alarm-set { + background: #000; +} + +.App.alarm-set button { + opacity: 0.1; +} +.App.alarm-set button:hover, +.App.alarm-set button:focus { + opacity: 0.6; +} + +.App.alarm-set p { + font-size: 30vw; + font-weight: bold; + color: coral; + opacity: 0.2; + margin: 0; +} +.App.alarm-set p:hover { + opacity: 0.4; } .App-logo { @@ -16,12 +52,6 @@ pointer-events: none; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - .App-header { min-height: 100vh; display: flex; @@ -32,19 +62,44 @@ color: white; } -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +code { + display: none; } button { font-size: calc(10px + 2vmin); } + +.input-wrapper { + margin-top: 2rem; +} + +.time-picker, +.stop-distance { + align-items: center; +} + +h1 { + margin-top: 0; + margin-bottom: 2rem; + font-size: 3rem; +} + +.time-picker div, +.stop-distance div { + width: 100%; +} + +.time-picker input, +.stop-distance input { + font-size: 2rem; + width: 10rem; + margin: 1rem 0; + text-align: center; + padding: 1.5rem; +} + +.stop-distance input:focus, +.time-picker input:focus { + outline: 1px solid currentColor; +} diff --git a/src/App.tsx b/src/App.tsx index d50e854..6e35d02 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,23 +1,39 @@ 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"; +import { format, parse, differenceInMilliseconds, isMatch } from "date-fns"; +import useStayAwake from "use-stay-awake"; +import { TextField, Button } from "ui-neumorphism"; +import { overrideThemeVariables } from "ui-neumorphism"; + +import "ui-neumorphism/dist/index.css"; import "./App.css"; -import "rc-time-picker/assets/index.css"; import alarmMp3 from "./alarm.mp3"; import blankMp3 from "./blank.mp3"; function App() { - const [alarm, setAlarm] = useState(null); + const [alarm, setAlarm] = useState(null); const [alarmSet, setAlarmSet] = useState(false); const [alarmPlaying, setAlarmPlaying] = useState(false); + const [hasWalked, setHasWalked] = useState(false); const [stopDistance, setStopDistance] = useState(10); const audioRef = useRef(null); + useEffect(() => { + overrideThemeVariables({ + "--dark-bg": "#3E3D42", + "--dark-bg-dark-shadow": "#323135", + "--dark-bg-light-shadow": "#4a494f", + "--primary": "#2979ff", + "--primary-dark": "#2962ff", + "--primary-light": "#82b1ff", + }); + }, []); + + const device = useStayAwake(); + const { latitude, longitude, timestamp, accuracy } = usePosition(true, { enableHighAccuracy: true, timeout: Infinity, @@ -43,12 +59,20 @@ function App() { useEffect(() => { if (alarmSet && distance > stopDistance) { - setAlarmSet(false); - setAlarmPlaying(false); - setAlarm(null); + resetAlarm(); } }, [distance, alarmSet]); + const resetAlarm = () => { + setHasWalked(true); + setAlarmSet(false); + setAlarmPlaying(false); + setAlarm(null); + if (device.canSleep) { + device.allowSleeping(); + } + }; + const showAlarm = () => { console.log("ALARM! Wake up!"); setAlarmPlaying(true); @@ -73,8 +97,11 @@ function App() { audioRef.current?.play().then(() => { setAlarmSet(true); if (latitude && longitude) setStartCoords({ latitude, longitude }); - const delay = alarm.diff(moment()); + const delay = differenceInMilliseconds(alarm, new Date()); console.log("set alarm", delay); + if (device.canSleep) { + device.preventSleeping(); + } setTimeout(() => { showAlarm(); }, delay); @@ -82,43 +109,91 @@ function App() { } }, [alarm]); + const appState = + hasWalked && alarmPlaying + ? "has-walked" + : alarmPlaying + ? "alarm-playing" + : alarmSet + ? "alarm-set" + : ""; + return ( -
+
- setAlarm(newTime)} - showSecond={false} - /> - setStopDistance(parseInt(e.target.value, 10))} - /> -

- + {alarmSet && alarm ? ( +

{format(alarm, "HH:mm")}

+ ) : ( + <> +

Alarm clock

+
+ + {/* + } + value={alarm ? format(alarm, "HH:mm") : undefined} + onChange={(e) => { + setAlarm(parse(e.target.value, "HH:mm", new Date())); + }} + /> */} + { + console.log(value); + if (isMatch(value, "HH:mm") || isMatch(value, "H:mm")) { + setAlarm(parse(value, "HH:mm", new Date())); + } + }} + /> +
+
+ + + setStopDistance(parseInt(e.target.value, 10)) + } + /> +
+ + )} +
+ {!alarmSet && ( + + )} {alarmSet && ( - + )} -

+