diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 1c16cce..4e282c9 100644 --- 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 (
-
+
{this.state.isCounting ? ( { type="number" placeholder="0" name="timeInput" - max="59" + max="60" min="0" value={this.state.timeInput} onChange={(e: React.ChangeEvent): 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 index f94d405..101d66c 100644 --- a/src/components/Timer.tsx +++ b/src/components/Timer.tsx @@ -74,7 +74,7 @@ class Timer extends React.Component { 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 index 8d8740c..2e658ee 100644 --- 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';