From 48e8c85e742c476205f55e44a5f4111bcde44770 Mon Sep 17 00:00:00 2001 From: asketonim Date: Thu, 2 Jan 2020 14:53:52 +0300 Subject: Implement core timer functionality --- src/components/Timer/Timer.js | 75 +++++++++++++++++++++++++++++++++++++++++++ src/index.js | 2 ++ 2 files changed, 77 insertions(+) create mode 100644 src/components/Timer/Timer.js (limited to 'src') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js new file mode 100644 index 0000000..d0f8ff1 --- /dev/null +++ b/src/components/Timer/Timer.js @@ -0,0 +1,75 @@ +import React, { useState, useEffect } from 'react'; + +import styled from 'styled-components'; + +const Timer = () => { + const [minute, setMinute] = useState(0); + const [second, setSecond] = useState(0); + const [mill, setMill] = useState(0); + const [time, setTime] = useState("00:00:00") + const [stopwatchStart, setStopwatchStart] = useState(false); + const [stopwatchTime, setStopwatchTime] = useState(0); + + const handleKeyDown = event => { + if (event.keyCode === 32){ + + if (!stopwatchStart) { + setStopwatchTime(Date.now()); + setStopwatchStart(true); + } + + const timeGap = Date.now() - stopwatchTime; + setMill(Math.floor((timeGap % 1000) / 10)); + setSecond(Math.floor(timeGap / 1000)); + setMinute(Math.floor(timeGap / 60000)); + setTime(() => { + let resultTime = ""; + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; + if (second < 10) resultTime += '0'; + resultTime += second + ':'; + if (mill < 10) resultTime += '0'; + resultTime += mill; + return resultTime; + }); + } + } + + const handleKeyUp = event => { + if (event.keyCode === 32) { + setTime("00:00:00"); + setMill(0); + setSecond(0); + setMinute(0); + setStopwatchStart(false); + setStopwatchTime(0); + } + } + + useEffect(() => { + window.addEventListener("keydown", handleKeyDown); + window.addEventListener("keyup", handleKeyUp); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener("keyup", handleKeyUp); + }; + }) + + return ( + + {time} + + ); + +} + +const Root = styled.div` + background-color: skyblue; + padding: 8px; + display: inline-block; + font-size: 32px; + color: pink; +`; + +export default Timer; diff --git a/src/index.js b/src/index.js index 5c657f9..f062952 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import styled from 'styled-components'; import CssBaseline from '@material-ui/core/CssBaseline' import Header from './components/Header/Header'; +import Timer from './components/Timer/Timer'; const App = () => { @@ -20,6 +21,7 @@ const App = () => { This text is rendered outside of Header component, but interacting with Header can influence content of this page!

+ ); }; -- cgit v1.2.3 From b2dd58bd08fb5120dd74b8e1484970cc0a68b4d6 Mon Sep 17 00:00:00 2001 From: asketonim Date: Thu, 2 Jan 2020 20:46:12 +0300 Subject: Simplify state and fix event handlers --- src/components/Timer/Timer.js | 77 +++++++++++++++++++++---------------------- 1 file changed, 37 insertions(+), 40 deletions(-) (limited to 'src') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index d0f8ff1..e095902 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -2,60 +2,57 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; -const Timer = () => { - const [minute, setMinute] = useState(0); - const [second, setSecond] = useState(0); - const [mill, setMill] = useState(0); +const Timer = () => { + const SPACE = 32 const [time, setTime] = useState("00:00:00") - const [stopwatchStart, setStopwatchStart] = useState(false); - const [stopwatchTime, setStopwatchTime] = useState(0); + const [stopwatchStarted, setStopwatchStarted] = useState(false); + const [timer, setTimer] = useState(0); + let startingTime; + - const handleKeyDown = event => { - if (event.keyCode === 32){ + const handleKeyPress = event => { + if (event.keyCode === SPACE){ + if (!stopwatchStarted) { + startingTime = Date.now(); + setStopwatchStarted(true); + setTimer(setInterval(() => setTime(() => { + const timeGap = Math.floor((Date.now() - startingTime) / 10); + let resultTime = ""; - if (!stopwatchStart) { - setStopwatchTime(Date.now()); - setStopwatchStart(true); - } + const minute = Math.floor(timeGap / 6000); + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; - const timeGap = Date.now() - stopwatchTime; - setMill(Math.floor((timeGap % 1000) / 10)); - setSecond(Math.floor(timeGap / 1000)); - setMinute(Math.floor(timeGap / 60000)); - setTime(() => { - let resultTime = ""; - if (minute < 10) resultTime += '0'; - resultTime += minute + ':'; - if (second < 10) resultTime += '0'; - resultTime += second + ':'; - if (mill < 10) resultTime += '0'; - resultTime += mill; - return resultTime; - }); - } - } + let second = Math.floor(timeGap / 100); + if (second < 10) resultTime += '0'; + if (second > 59) second %= 60 + resultTime += second + ':'; - const handleKeyUp = event => { - if (event.keyCode === 32) { - setTime("00:00:00"); - setMill(0); - setSecond(0); - setMinute(0); - setStopwatchStart(false); - setStopwatchTime(0); + const mill = timeGap % 100; + if (mill < 10) resultTime += '0'; + resultTime += mill; + + return resultTime; + }), 10)) + } else { + clearInterval(timer) + setStopwatchStarted(false); + startingTime = 0; + return false; + } } } + useEffect(() => { - window.addEventListener("keydown", handleKeyDown); - window.addEventListener("keyup", handleKeyUp); + window.addEventListener("keypress", handleKeyPress); return () => { - window.removeEventListener("keydown", handleKeyDown); - window.removeEventListener("keyup", handleKeyUp); + window.removeEventListener("keypress", handleKeyPress); }; }) + return ( {time} -- cgit v1.2.3 From 18c5cf0f72311d679ac125675cd8608b99e5d815 Mon Sep 17 00:00:00 2001 From: asketonim Date: Thu, 2 Jan 2020 21:34:47 +0300 Subject: Replace keyPress event with keyUp --- src/components/Timer/Timer.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index e095902..b10936f 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -5,16 +5,16 @@ import styled from 'styled-components'; const Timer = () => { const SPACE = 32 const [time, setTime] = useState("00:00:00") - const [stopwatchStarted, setStopwatchStarted] = useState(false); + const [running, setRunning] = useState(false); const [timer, setTimer] = useState(0); let startingTime; - const handleKeyPress = event => { + const handleKeyUp = event => { if (event.keyCode === SPACE){ - if (!stopwatchStarted) { + if (!running) { startingTime = Date.now(); - setStopwatchStarted(true); + setRunning(true); setTimer(setInterval(() => setTime(() => { const timeGap = Math.floor((Date.now() - startingTime) / 10); let resultTime = ""; @@ -36,8 +36,9 @@ const Timer = () => { }), 10)) } else { clearInterval(timer) - setStopwatchStarted(false); + setRunning(false); startingTime = 0; + console.log(time) return false; } } @@ -45,10 +46,10 @@ const Timer = () => { useEffect(() => { - window.addEventListener("keypress", handleKeyPress); + window.addEventListener("keyup", handleKeyUp); return () => { - window.removeEventListener("keypress", handleKeyPress); + window.removeEventListener("keyup", handleKeyUp); }; }) -- cgit v1.2.3 From 1398e9579be8a0ad478ef16085b431fbb97311f1 Mon Sep 17 00:00:00 2001 From: asketonim Date: Thu, 2 Jan 2020 23:06:25 +0300 Subject: Implement post request --- src/components/Timer/Timer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index b10936f..367cce5 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; +import {post} from '../../requests'; const Timer = () => { const SPACE = 32 @@ -35,10 +36,10 @@ const Timer = () => { return resultTime; }), 10)) } else { - clearInterval(timer) + clearInterval(timer); setRunning(false); startingTime = 0; - console.log(time) + post('solutions/', {result: time}); return false; } } -- cgit v1.2.3 From 2b917f53e806191340a7a26bef3468320dd29917 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 2 Jan 2020 23:42:37 +0300 Subject: Fix invalid merge commit --- src/index.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/index.js b/src/index.js index de4cb2a..725d270 100644 --- a/src/index.js +++ b/src/index.js @@ -35,17 +35,18 @@ const App = () => { } }; - const classes = useStyles(); return ( - + -
- - This is the {page} page! - { getPageComponent(page)} - - - ); +
+ + + This is the {page} page! + { getPageComponent(page) } + + + +); }; const Root = styled.div` background: cornsilk; -- cgit v1.2.3