added flashing alert, updated tone, set max to 60

tryonlinux · Aug 8, 2021 · eb78f9c · eb78f9c
1 parent 0c4a619
commit eb78f9c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -1,6 +1,3 @@
-//TODO Add flash function
-//TODO add gif to readme
-//TODO add to listed.to
 import React from 'react';
 import TimeInput from './TimeInput';
 import Timer from './Timer';
@@ -14,6 +11,7 @@ export interface EditorInterface {
   soundOn: boolean;
   flashOn: boolean;
   isStopped: boolean;
+  flashStyle: string;
 }
 
 const initialState = {
@@ -22,6 +20,7 @@ const initialState = {
   soundOn: true,
   flashOn: true,
   isStopped: true,
+  flashStyle: '',
 };
 
 export default class Editor extends React.Component<{}, EditorInterface> {
@@ -39,7 +38,12 @@ export default class Editor extends React.Component<{}, EditorInterface> {
   }
 
   setTime(time: number): void {
-    this.setState({ time, isCounting: false, isStopped: true });
+    this.setState({
+      time,
+      isCounting: false,
+      isStopped: true,
+      flashStyle: '',
+    });
   }
   toggleTimer(isCounting: boolean) {
     this.setState({ isCounting, isStopped: !this.state.isStopped });
@@ -53,14 +57,19 @@ export default class Editor extends React.Component<{}, EditorInterface> {
   toggleIsStopped() {
     this.setState({ isStopped: !this.state.isStopped });
   }
+  timeout(delay: number) {
+    return new Promise((res) => setTimeout(res, delay));
+  }
   flash() {
-    alert('flash flash');
+    this.setState({
+      flashStyle: 'blink-background',
+    });
   }
 
   render() {
     return (
       <div className="sn-component">
-        <div className="container">
+        <div className={`container ${this.state.flashStyle} `}>
           <div className="column">
             {this.state.isCounting ? (
               <Timer

diff --git a/src/components/TimeInput.tsx b/src/components/TimeInput.tsx
@@ -33,13 +33,13 @@ class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
             type="number"
             placeholder="0"
             name="timeInput"
-            max="59"
+            max="60"
             min="0"
             value={this.state.timeInput}
             onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
               let value: number = Number(e.target.value);
-              if (value > 59) {
-                value = 59;
+              if (value > 60) {
+                value = 60;
               } else if (value < 1) {
                 value = 1;
               }

diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
@@ -74,7 +74,7 @@ class Timer extends React.Component<TimerProps, TimerState> {
   reset() {
     window.clearInterval(this.timer);
     if (this.props.soundOn) {
-      this.beep(65, 500, 300);
+      this.beep(65, 500, 400);
     }
     if (this.props.flashOn) {
       this.props.flash();

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -74,8 +74,6 @@ html {
 }
 
 .sn-component {
-  //display: flex;
-  width: 800px;
   height: 40px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -92,5 +90,16 @@ p {
   padding: 0px 1em;
 }
 
+.blink-background {
+  animation: blinkingText 500ms 5;
+}
+@keyframes blinkingText {
+  50% {
+    background-color: white;
+  }
+  100% {
+    background-color: red;
+  }
+}
 @import './print.scss';
 @import './dark.scss';