Add running indicator animation and document in Guide

Author: jacobkrol

package.json

@@ -1,6 +1,6 @@
 {
   "name": "myapp",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
   "homepage": "https://kroljs.com/LP-Timer",
   "dependencies": {

src/components/pages/AboutPage.js

@@ -15,7 +15,7 @@ function AboutPage() {
                 <p>The front-end for this progressive web application is built using the JavaScript framework, <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">ReactJS v16.13.1</a>. It is hosted on GitHub Pages, and the code is entirely open-source for you to read, nitpick, and expand upon. The pre-build files may be found on <a href="https://github.com/jacobkrol/LP-Timer" target="_blank" rel="noopener noreferrer">GitHub</a>.</p>
                 <p>To handle feedback submission, the back-end is built using <a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">Node.js v13.8.0</a>, with the <a href="https://expressjs.com" target="_blank" rel="noopener noreferrer">Express v4.17.1</a> framework. It is hosted using <a href="https://heroku.com" target="_blank" rel="noopener noreferrer">Heroku</a> and implements a CORS-protected REST API endpoint for feedback submission. Feedback is submitted to the database through the endpoint, and via email through an SMTP client. Feedback review is strictly available through the <a href="https://devcenter.heroku.com/articles/heroku-cli" target="_blank" rel="noopener noreferrer">Heroku CLI v7.42.1</a> or through a locally-accessible endpoint.</p>
             <h3>Licensing</h3>
-                <p>The limited preparation timer progressive web application is open-sourced with a MIT license. To read the conditions of this license, visit the <a href="https://github.com/jacobkrol/LP-Timer/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">LICENSE file in the host repository</a>.</p>
+                <p>The limited preparation timer progressive web application is open-sourced under a MIT license. To read the conditions of this license, visit the <a href="https://github.com/jacobkrol/LP-Timer/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">LICENSE file in the host repository</a>.</p>
         </div>
     )
 }

src/components/pages/GuidePage.js

@@ -17,6 +17,7 @@ function HowPage() {
                 <p><strong>Status: Off</strong> represents a new timer.</p>
                 <p><strong>Status: Running</strong> means the timer is running (even if you can't see it!)</p>
                 <p><strong>Status: Paused</strong> represents a timer that has started, but has been paused by the user. When it is resumed, it will continue where it was when paused.</p>
+                <p> The <span id="timer-anim-ex" aria-label="indicator"></span> in the top-left corner of each timer serves as an additional indicator that the timer is running.</p>
 
             <h3>Extemporaneous Timer</h3>
                 <p><strong>Duration:</strong> 7 minutes</p>

src/components/utilities/Footer.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 function Footer() {
     return (
         <footer>
-            <p>LP Timer PWA v1.1.1 - Copyright 2020 <a href="https://kroljs.com" target="_blank" rel="noopener noreferrer">Jacob Krol</a> - <Link to="/about">Learn More</Link></p>
+            <p>LP Timer PWA v1.2.0 - Copyright 2020 <a href="https://kroljs.com" target="_blank" rel="noopener noreferrer">Jacob Krol</a> - <Link to="/about">Learn More</Link></p>
         </footer>
     )
 }

src/components/utilities/Timer.js

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FaPlay, FaPause, FaStop, FaVolumeMute } from 'react-icons/fa';
+import {
+    FaPlay,
+    FaPause,
+    FaStop,
+    FaVolumeMute,
+    FaHourglassEnd,
+    FaHourglassHalf,
+    FaHourglassStart
+} from 'react-icons/fa';
 import '../../styles/Timer.css';
 import Verbal30 from '../../audio/30-seconds-verbal.wav';
 import Verbal60 from '../../audio/60-seconds-verbal.wav';
@@ -22,7 +30,8 @@ class Timer extends React.PureComponent {
             signalText: null,       //string of hand signals
             isOvertime: false,      //boolean flagging overtime
             isMuted: true,          //boolean to mute verbals
-            playVerbal: 0           //int 0,30,60,90 for last verbal given
+            playVerbal: 0,          //int 0,30,60,90 for last verbal given
+            hourglass: 0
         };
     }
 
@@ -33,6 +42,7 @@ class Timer extends React.PureComponent {
         if(this.props.mode === "imp") this.setState({isMuted: false});
         //font debugging
         if(this.props.mode === "test") this.setState({signalText: "30 sec"});
+
     }
 
     componentWillUnmount() {
@@ -58,6 +68,7 @@ class Timer extends React.PureComponent {
                     break;
                 case 90:
                     verbal = Verbal90;
+                    this.setState({isMuted: true});
                     break;
                 default:
                     break;
@@ -91,6 +102,7 @@ class Timer extends React.PureComponent {
         this.setState({status: "running"}, () => {
             document.getElementById("timer-status").innerText = this.state.status[0].toUpperCase()+this.state.status.substr(1);
         });
+        document.getElementById("timer-anim-fill").className = "run";
     }
 
     pauseTimer = () => {
@@ -102,6 +114,7 @@ class Timer extends React.PureComponent {
         }, () => {
             document.getElementById("timer-status").innerText = this.state.status[0].toUpperCase()+this.state.status.substr(1);
         });
+        document.getElementById("timer-anim-fill").className = "";
     }
 
     updateTimer = () => {
@@ -145,7 +158,7 @@ class Timer extends React.PureComponent {
                         this.setState({playVerbal: 60});
                     } else if(Number(min) === this.props.min-2 && Number(sec) === 30) {
                         //trigger 90 second verbal
-                        this.setState({playVerbal: 90, isMuted: true});
+                        this.setState({playVerbal: 90});
                     }
 
                     //hand signals
@@ -195,6 +208,7 @@ class Timer extends React.PureComponent {
         }, () => {
             document.getElementById("timer-status").innerText = this.state.status[0].toUpperCase()+this.state.status.substr(1);
         });
+        document.getElementById("timer-anim-fill").className = "";
     }
 
     handleKeyPush = (evt) => {
@@ -231,12 +245,17 @@ class Timer extends React.PureComponent {
                     </div>
                 </div>
                 <div id="timer-display">
-                    {this.props.mode === "none"
-                        ? this.props.showMS
-                            ? <p><span id="timer-display-min">{this.props.min}</span><span id="timer-display-sec">00</span><span id="timer-display-ms">000</span></p>
-                            : <p><span id="timer-display-min">{this.props.min}</span><span id="timer-display-sec">00</span></p>
-                        : <p><span id="timer-display-signal">{this.state.signalText}</span></p>
-                    }
+                    <div id="timer-anim-box">
+                        <div id="timer-anim-fill"></div>
+                    </div>
+                    <div id="timer-text">
+                        {this.props.mode === "none"
+                            ? this.props.showMS
+                                ? <p><span id="timer-display-min">{this.props.min}</span><span id="timer-display-sec">00</span><span id="timer-display-ms">000</span></p>
+                                : <p><span id="timer-display-min">{this.props.min}</span><span id="timer-display-sec">00</span></p>
+                            : <p><span id="timer-display-signal">{this.state.signalText}</span></p>
+                        }
+                    </div>
                 </div>
             </div>
         )

src/styles/GuidePage.css

@@ -21,6 +21,16 @@
     padding: 4px;
 }
 
+#timer-anim-ex {
+    display: inline-block;
+    height: 12px;
+    width: 12px;
+    margin: 0;
+    border: 2px solid rgba(40,40,40,0.5);
+    border-radius: 4px;
+    background-color: transparent;
+}
+
 .no-break {
     white-space: nowrap;
 }

src/styles/Timer.css

@@ -61,6 +61,36 @@
     } */
 }
 
+/* ADD TIMER ANIMATION */
+#timer-anim-box {
+    margin: 10px;
+    height: 20px;
+    width: 20px;
+    border: 4px solid rgba(40,40,40,0.5);
+    border-radius: 5px;
+    background-color: transparent;
+}
+#timer-anim-fill {
+    height: 100%;
+    width: 0%;
+    background-color: rgba(40,40,40,0.5);
+    border-radius: 0px;
+}
+#timer-anim-fill.run {
+    animation: myfill 5s infinite;
+}
+@keyframes myfill {
+    50% {
+        width: 100%;
+    }
+    100% {
+        width: 0%;
+    }
+}
+#timer-text {
+    margin-top: -40px;
+}
+
 /* DEFINE FONT FACES */
 #timer-display-min, #timer-display-sec, #timer-display-ms {
     font-family: 'Cursed Timer', 'Titillium Web', Arial, sans-serif;