From ba6b56ab8b312a3bd97cd352e347b1ca2d648d02 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 16 Jun 2019 13:44:39 -0700 Subject: [PATCH 1/3] Switch to CSS variables for colors and rem (based on vw) for sizes --- src/components/App/App.css | 15 +++++++++++---- src/components/Progress/Progress.css | 4 ++-- src/components/Progress/Progress.js | 8 +++++++- src/components/Timer/Timer.css | 16 +++++++++------- src/index.css | 14 +++++++++++++- 5 files changed, 42 insertions(+), 15 deletions(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index a3b9bce..2e7aa49 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -1,13 +1,20 @@ @import url("https://fonts.googleapis.com/css?family=Space+Mono&display=swap"); +.App { + align-items: center; + display: flex; + height: 100vh; + justify-content: center; +} + .App-toggleMuteButton { background: none; border: none; - color: #bbbbbb; + color: var(--mediumGray); cursor: pointer; display: flex; - font-size: calc(1rem + 5vw); - padding: 2vw; + font-size: 4rem; + padding: 1rem; position: absolute; right: 0; top: 0; @@ -19,5 +26,5 @@ } .App-toggleMuteButton.is-muted { - color: #d65a31; + color: var(--red); } diff --git a/src/components/Progress/Progress.css b/src/components/Progress/Progress.css index b3e744b..cf69eb7 100644 --- a/src/components/Progress/Progress.css +++ b/src/components/Progress/Progress.css @@ -2,10 +2,10 @@ display: flex; height: 100%; width: 100%; + background: var(--darkGray); } .Progress-fill { - background: #eee; - border-radius: 0 100vw 100vw 0; + background: var(--red); transition: width 1s linear; } diff --git a/src/components/Progress/Progress.js b/src/components/Progress/Progress.js index 064ceab..c0a2e01 100644 --- a/src/components/Progress/Progress.js +++ b/src/components/Progress/Progress.js @@ -4,7 +4,13 @@ import "./Progress.css"; const Progress = ({ progress }) => { return (
-
+
); }; diff --git a/src/components/Timer/Timer.css b/src/components/Timer/Timer.css index 85fd977..ce7e51d 100644 --- a/src/components/Timer/Timer.css +++ b/src/components/Timer/Timer.css @@ -2,27 +2,29 @@ align-items: center; display: flex; flex-direction: column; - height: 100vh; } .Timer-clock { align-items: center; - color: #eee; + color: var(--lightGray); display: flex; flex-grow: 1; font-family: "Space Mono", monospace; - font-size: 28vw; + font-size: 12rem; overflow: hidden; + max-height: 11rem; } .Timer-clock-colon { - margin: 0 -2vw; + margin: 0 -1rem; } .Timer-progressWrapper { + bottom: 0; flex-grow: 0; flex-shrink: 0; - height: 2vw; - min-height: 12px; - width: 100vw; + height: 0.5rem; + left: 0; + position: absolute; + right: 0; } diff --git a/src/index.css b/src/index.css index e90ae26..d6791de 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,19 @@ +:root { + --darkBlue: #222831; + --lightGray: #eeeeee; + --mediumGray: #bbbbbb; + --red: #d65a31; + --darkGray: #141414; +} + +html { + font-size: 2vw; +} + body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: #222831; + background-color: var(--darkBlue); margin: 0; padding: 0; } From 854d036f68b7f04f9f7bc9318dbec43b50c69750 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 16 Jun 2019 14:02:13 -0700 Subject: [PATCH 2/3] Refactor to move progress up to App level --- src/components/App/App.css | 10 +++++ src/components/App/App.js | 70 +++++++++++++++++----------------- src/components/Timer/Timer.css | 10 ----- src/components/Timer/Timer.js | 20 +++------- 4 files changed, 49 insertions(+), 61 deletions(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index 2e7aa49..a098115 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -7,6 +7,16 @@ justify-content: center; } +.App-progressWrapper { + bottom: 0; + flex-grow: 0; + flex-shrink: 0; + height: 0.5rem; + left: 0; + position: absolute; + right: 0; +} + .App-toggleMuteButton { background: none; border: none; diff --git a/src/components/App/App.js b/src/components/App/App.js index cdfb1ab..46d4779 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -1,54 +1,52 @@ import buzz from "buzz"; -import React from "react"; +import React, { useState } from "react"; import { MdVolumeOff, MdVolumeUp } from "react-icons/md"; +import Progress from "../Progress/Progress"; import Timer from "../Timer/Timer"; import "./App.css"; -class App extends React.Component { - chime = new buzz.sound( +const App = () => { + const [completed, setCompleted] = useState(0); + const [muted, setMuted] = useState(true); + const [progress, setProgress] = useState(0); + + const chime = new buzz.sound( "https://soundbible.com/mp3/Electronic_Chime-KevanGC-495939803.mp3" ); + chime.mute(); - state = { - count: 0, - isMuted: true - }; - - componentDidMount() { - this.state.isMuted && this.chime.mute(); - } - - render() { - const { count, isMuted } = this.state; - - return ( -
- - -
- ); - } - - toggleMute = () => { + const toggleMute = () => { this.chime.toggleMute(); - this.setState({ - isMuted: !this.state.isMuted - }); + setMuted(!muted); }; - handleComplete = () => { - if (!this.state.isMuted) { + const handleComplete = () => { + if (!muted) { this.chime.play(); } // Increment the timer's key so that it starts the next countdown. - this.setState({ count: this.state.count + 1 }); + setCompleted(completed + 1); }; -} + + const handleTick = (timerInfo, nextStop) => { + setProgress(1 - timerInfo.total / (nextStop.duration * 60 * 1000)); + }; + + return ( +
+ +
+ +
+ +
+ ); +}; export default App; diff --git a/src/components/Timer/Timer.css b/src/components/Timer/Timer.css index ce7e51d..7e72548 100644 --- a/src/components/Timer/Timer.css +++ b/src/components/Timer/Timer.css @@ -18,13 +18,3 @@ .Timer-clock-colon { margin: 0 -1rem; } - -.Timer-progressWrapper { - bottom: 0; - flex-grow: 0; - flex-shrink: 0; - height: 0.5rem; - left: 0; - position: absolute; - right: 0; -} diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 8eb9cf3..80b5a9d 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -1,7 +1,6 @@ -import React, { useState } from "react"; +import React from "react"; import Countdown from "react-countdown-now"; import Number from "../Number/Number"; -import Progress from "../Progress/Progress"; import "./Timer.css"; const stops = [ @@ -27,14 +26,13 @@ const stops = [ } ]; -const Timer = ({ onComplete }) => { - const [progress, setProgress] = useState(0); +const Timer = ({ onComplete, onTick }) => { const currentTime = new Date(); const minute = currentTime.getMinutes(); // Determine which minute we're counting down to. let nextStop; - for (let stop of stops) { + for (const stop of stops) { if (minute < stop.endMinute) { nextStop = stop; break; @@ -46,18 +44,13 @@ const Timer = ({ onComplete }) => { countdownTime.setMinutes(nextStop.endMinute); countdownTime.setSeconds(0); - // Update the progress bar. - const updateProgress = timerInfo => { - setProgress(1 - timerInfo.total / (nextStop.duration * 60 * 1000)); - }; - return (
updateProgress(timerInfo)} - renderer={({ minutes, seconds, milliseconds }) => ( + onTick={timerInfo => onTick(timerInfo, nextStop)} + renderer={({ minutes, seconds }) => (
: @@ -65,9 +58,6 @@ const Timer = ({ onComplete }) => {
)} /> -
- -
); }; From ac9501b46e9c843dec8eea185ced56185eaa3da6 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 16 Jun 2019 14:24:07 -0700 Subject: [PATCH 3/3] More refactoring and label the type of timer --- src/components/App/App.css | 4 +--- src/components/App/App.js | 18 ++++++++++++------ src/components/Timer/Timer.css | 7 ++++++- src/components/Timer/Timer.js | 23 +++++++++++++---------- src/index.css | 4 ++++ 5 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index a098115..6f660dd 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -1,5 +1,3 @@ -@import url("https://fonts.googleapis.com/css?family=Space+Mono&display=swap"); - .App { align-items: center; display: flex; @@ -7,7 +5,7 @@ justify-content: center; } -.App-progressWrapper { +.App-progress { bottom: 0; flex-grow: 0; flex-shrink: 0; diff --git a/src/components/App/App.js b/src/components/App/App.js index 46d4779..b739190 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -6,9 +6,10 @@ import Timer from "../Timer/Timer"; import "./App.css"; const App = () => { - const [completed, setCompleted] = useState(0); + const [focusCount, setFocusCount] = useState(0); const [muted, setMuted] = useState(true); const [progress, setProgress] = useState(0); + const [breakCount, setBreakCount] = useState(0); const chime = new buzz.sound( "https://soundbible.com/mp3/Electronic_Chime-KevanGC-495939803.mp3" @@ -20,13 +21,14 @@ const App = () => { setMuted(!muted); }; - const handleComplete = () => { + const handleComplete = timerType => { if (!muted) { this.chime.play(); } - // Increment the timer's key so that it starts the next countdown. - setCompleted(completed + 1); + timerType === "focus" + ? setFocusCount(focusCount + 1) + : setBreakCount(breakCount + 1); }; const handleTick = (timerInfo, nextStop) => { @@ -35,8 +37,12 @@ const App = () => { return (
- -
+ +