diff --git a/src/components/LogoSpin.css b/src/components/LogoSpin.css new file mode 100644 index 0000000..356aff9 --- /dev/null +++ b/src/components/LogoSpin.css @@ -0,0 +1,23 @@ +.App-logo { + height: 25vmin; + pointer-events: none; + filter: drop-shadow(0 0 0.50rem #f8ff9c); + align-items: center; + justify-content: center; + text-align: center; +} + +.App-logo-rotation { + animation: App-logo-spin infinite 5s linear; + } + + + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } \ No newline at end of file diff --git a/src/components/LogoSpin.js b/src/components/LogoSpin.js new file mode 100644 index 0000000..22280ab --- /dev/null +++ b/src/components/LogoSpin.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import logo from '../logo.svg'; +import './LogoSpin.css'; + +class LogoSpin extends Component { + constructor(props) { + super(props); + this.defaultClassName = 'App-logo-rotation'; + } + + render() { + return ( + Tomato + ) + } + +} + +export default LogoSpin; \ No newline at end of file diff --git a/src/components/Timer.js b/src/components/Timer.js index 7fb1b32..dd69b3a 100644 --- a/src/components/Timer.js +++ b/src/components/Timer.js @@ -2,20 +2,17 @@ import React, { Component } from 'react'; import { Container, Row, Col } from 'reactstrap'; import Notification from 'react-web-notification'; import ButtonBox from './ButtonBox'; +import LogoSpin from './LogoSpin'; import './Timer.css'; -import logo from '../logo.svg'; import sound from '../sound.mp3'; class Timer extends Component { constructor(props) { super(props); - this.seconds = 1500; - this.logoSpingCSS = 'App-logo-rotation'; - this.state = { - seconds: this.seconds, + this.state = { + seconds: 1500, started: false, - logoSpin: '', ignore: true, title: '' }; @@ -30,9 +27,9 @@ class Timer extends Component { this.handleNotificationOnShow = this.handleNotificationOnShow.bind(this); this.playSound = this.playSound.bind(this); } - - formatMinute(s){ - return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s; + + formatMinute(s) { + return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s; } @@ -54,7 +51,7 @@ class Timer extends Component { }); } - handleNotificationOnError(e, tag){ + handleNotificationOnError(e, tag) { console.log(e, 'Notification error tag:' + tag); } @@ -75,7 +72,7 @@ class Timer extends Component { tag: tag, body: body, lang: 'en', - sound: {sound} + sound: { sound } }; this.setState({ @@ -84,14 +81,14 @@ class Timer extends Component { }); } - playSound(){ + playSound() { document.getElementById('sound').play(); } tick() { this.setState(state => ({ - seconds: state.seconds -1 + seconds: state.seconds - 1 })); if (this.state.seconds <= 0) { @@ -102,28 +99,22 @@ class Timer extends Component { } startTimer() { - this.setState({ - started: true, - logoSpin: this.logoSpingCSS + this.setState({ + started: true }); this.interval = setInterval(() => this.tick(), 1000); } - + stopTimer() { - this.setState({ - started: false, - logoSpin: null - }); + this.setState({ + started: false + }); clearInterval(this.interval); } resetTimer() { this.stopTimer(); - this.setState({ seconds: this.seconds}); - } - - isStarted() { - return this.state.started; + this.setState({ seconds: 1500 }); } render() { @@ -132,31 +123,29 @@ class Timer extends Component { - Tomato + - + -

- {this.formatMinute(this.state.seconds)} -

+

+ {this.formatMinute(this.state.seconds)} +

- + - @@ -164,14 +153,14 @@ class Timer extends Component { @@ -179,7 +168,7 @@ class Timer extends Component { - + ); }