Various cleanup (#9)

* Switch to CSS variables for colors and rem (based on vw) for sizes

* Refactor to move progress up to App level

* More refactoring and label the type of timer

src/components/App/App.css

@@ -1,13 +1,28 @@
-@import url("https://fonts.googleapis.com/css?family=Space+Mono&display=swap");
+.App {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+}
+
+.App-progress {
+  bottom: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 0.5rem;
+  left: 0;
+  position: absolute;
+  right: 0;
+}
 
 .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 +34,5 @@
 }
 
 .App-toggleMuteButton.is-muted {
-  color: #d65a31;
+  color: var(--red);
 }

src/components/App/App.js

@@ -1,54 +1,58 @@
 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 [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"
   );
+  chime.mute();
 
-  state = {
-    count: 0,
-    isMuted: true
-  };
-
-  componentDidMount() {
-    this.state.isMuted && this.chime.mute();
-  }
-
-  render() {
-    const { count, isMuted } = this.state;
-
-    return (
-      <div className="App">
-        <Timer onComplete={this.handleComplete} key={count} />
-        <button
-          className={`App-toggleMuteButton ${isMuted && "is-muted"}`}
-          onClick={this.toggleMute}
-        >
-          {isMuted ? <MdVolumeOff /> : <MdVolumeUp />}
-        </button>
-      </div>
-    );
-  }
-
-  toggleMute = () => {
+  const toggleMute = () => {
     this.chime.toggleMute();
-    this.setState({
-      isMuted: !this.state.isMuted
-    });
+    setMuted(!muted);
   };
 
-  handleComplete = () => {
-    if (!this.state.isMuted) {
+  const handleComplete = timerType => {
+    if (!muted) {
       this.chime.play();
     }
 
-    // Increment the timer's key so that it starts the next countdown.
-    this.setState({ count: this.state.count + 1 });
+    timerType === "focus"
+      ? setFocusCount(focusCount + 1)
+      : setBreakCount(breakCount + 1);
   };
-}
+
+  const handleTick = (timerInfo, nextStop) => {
+    setProgress(1 - timerInfo.total / (nextStop.duration * 60 * 1000));
+  };
+
+  return (
+    <div className="App">
+      <Timer
+        onTick={handleTick}
+        onComplete={handleComplete}
+        key={`${focusCount + breakCount}$`}
+      />
+      <div className="App-progress">
+        <Progress progress={progress} />
+      </div>
+      <button
+        className={`App-toggleMuteButton ${muted && "is-muted"}`}
+        onClick={toggleMute}
+      >
+        {muted ? <MdVolumeOff /> : <MdVolumeUp />}
+      </button>
+    </div>
+  );
+};
 
 export default App;

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;
 }

src/components/Progress/Progress.js

@@ -4,7 +4,13 @@ import "./Progress.css";
 const Progress = ({ progress }) => {
   return (
     <div className="Progress">
-      <div className="Progress-fill" style={{ width: `${progress * 100}%` }} />
+      <div
+        className="Progress-fill"
+        style={{
+          width: `${progress * 100}%`,
+          filter: `grayscale(${100 - progress * 100}%)`
+        }}
+      />
     </div>
   );
 };

src/components/Timer/Timer.css

@@ -2,27 +2,24 @@
   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 {
-  flex-grow: 0;
-  flex-shrink: 0;
-  height: 2vw;
-  min-height: 12px;
-  width: 100vw;
+.Timer-label {
+  color: var(--mediumGray);
+  text-transform: uppercase;
+  font-size: 2rem;
 }

src/components/Timer/Timer.js

@@ -1,14 +1,13 @@
-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 = [
+const timers = [
   {
     duration: 25,
     endMinute: 25,
-    type: "work"
+    type: "focus"
   },
   {
     duration: 5,
@@ -18,7 +17,7 @@ const stops = [
   {
     duration: 25,
     endMinute: 55,
-    type: "work"
+    type: "focus"
   },
   {
     duration: 5,
@@ -27,46 +26,40 @@ 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) {
-    if (minute < stop.endMinute) {
-      nextStop = stop;
+  let timer;
+  for (const t of timers) {
+    if (minute < t.endMinute) {
+      timer = t;
       break;
     }
   }
 
   // Create a time for the timer to count down to.
   const countdownTime = new Date(currentTime.getTime());
-  countdownTime.setMinutes(nextStop.endMinute);
+  countdownTime.setMinutes(timer.endMinute);
   countdownTime.setSeconds(0);
 
-  // Update the progress bar.
-  const updateProgress = timerInfo => {
-    setProgress(1 - timerInfo.total / (nextStop.duration * 60 * 1000));
-  };
-
   return (
     <div className="Timer">
       <Countdown
         date={countdownTime}
-        onComplete={onComplete}
-        onTick={timerInfo => updateProgress(timerInfo)}
-        renderer={({ minutes, seconds, milliseconds }) => (
+        onComplete={() => onComplete(timer.type)}
+        onTick={timerInfo => onTick(timerInfo, timer)}
+        renderer={({ minutes, seconds }) => (
           <div className="Timer-clock">
             <Number value={minutes} deemphasizeZeros={true} />
             <span className="Timer-clock-colon">:</span>
             <Number value={seconds} />
           </div>
         )}
       />
-      <div className="Timer-progressWrapper">
-        <Progress progress={progress} />
+      <div className="Timer-label">
+        {timer.type === "focus" ? "focus" : "take a break"}
       </div>
     </div>
   );

src/index.css

@@ -1,7 +1,23 @@
+@import url("https://fonts.googleapis.com/css?family=Space+Mono&display=swap");
+
+:root {
+  --darkBlue: #222831;
+  --lightGray: #eeeeee;
+  --mediumGray: #bbbbbb;
+  --red: #d65a31;
+  --darkGray: #141414;
+  --monospace: "Space Mono", monospace;
+}
+
+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;
+  font-family: var(--monospace);
 }