From b3e2b3f59424da7a61e1b09595d1f1e447c3a31a Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 6 Jan 2020 21:10:48 +0300 Subject: Create initial TimerPage component Show last 5 results --- src/components/Timer/Timer.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) (limited to 'src/components/Timer/Timer.js') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 4712265..69cd30b 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -1,10 +1,19 @@ import React, { useState, useEffect } from 'react'; -import { post } from '../../requests'; +import { Paper, Typography } from '@material-ui/core'; +import { makeStyles } from "@material-ui/core/styles"; -import { Typography } from '@material-ui/core'; +const useStyles = makeStyles(theme => ({ + root: { + textAlign: 'center', + padding: theme.spacing(5), + background: theme.palette.primary.main, + }, +})); + +const Timer = ({ registerResult }) => { + const classes = useStyles(); -const Timer = () => { const SPACE = 32; const maxCountdown = 15000; const [time, setTime] = useState('00:00:00'); @@ -14,6 +23,7 @@ const Timer = () => { let startingTime; const handleKeyPress = event => { + event.preventDefault(); if (event.keyCode === SPACE && !isRunning ) { if (!isCountdown) { startingTime = Date.now(); @@ -44,7 +54,7 @@ const Timer = () => { setIsRunning(false); setIsCountdown(false); startingTime = 0; - post('solutions/', {result: time}); + registerResult(time); return false; } } @@ -61,12 +71,12 @@ const Timer = () => { }); return ( - {time} + + {time} + ); }; - - const convertTimeToString = timeDiff => { let resultTime = ''; @@ -86,5 +96,5 @@ const convertTimeToString = timeDiff => { return resultTime; }; -export default Timer; +export default Timer; -- cgit v1.2.3 From 1df3d81437af73b35b65c8e2ac18e935a3acf544 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 7 Jan 2020 00:25:44 +0300 Subject: Simplify timer logic and add helper texts --- src/components/Timer/Timer.js | 89 ++++++++++++++++++++++++++----------------- 1 file changed, 54 insertions(+), 35 deletions(-) (limited to 'src/components/Timer/Timer.js') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 69cd30b..6fee1b1 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -8,6 +8,7 @@ const useStyles = makeStyles(theme => ({ textAlign: 'center', padding: theme.spacing(5), background: theme.palette.primary.main, + marginTop: theme.spacing(25), }, })); @@ -17,45 +18,43 @@ const Timer = ({ registerResult }) => { const SPACE = 32; const maxCountdown = 15000; const [time, setTime] = useState('00:00:00'); - const [isRunning, setIsRunning] = useState(false); - const [timer, setTimer] = useState(0); - const [isCountdown, setIsCountdown] = useState(false); - let startingTime; + const [mode, setMode] = useState('idle'); + const [repeater, setRepeater] = useState(0); + + useEffect(()=> { + const timestamp = Date.now(); + + if (mode === 'countdown') setRepeater(setInterval(() => { + const timeDelta = maxCountdown - (Date.now() - timestamp); + if (timeDelta <= 0) setMode('over'); + setTime(convertTimeToString(timeDelta)); + }, 10)); + + if (mode === 'running') setRepeater(setInterval(() => { + setTime(convertTimeToString(Date.now() - timestamp)); + }, 10)); + + if (mode === 'over') { + setTime('00:00:00'); + clearInterval(repeater); + } + }, [mode]); const handleKeyPress = event => { event.preventDefault(); - if (event.keyCode === SPACE && !isRunning ) { - if (!isCountdown) { - startingTime = Date.now(); - setIsCountdown(true); - setTimer(setInterval(() => setTime(() => { - const timeDiff = maxCountdown - (Date.now() - startingTime); - if (timeDiff < 0) { - setIsRunning(true); - setTime('00:00:00'); - clearInterval(timer); - } - return convertTimeToString(timeDiff); - }), 10)); - } - } + if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); }; const handleKeyUp = event => { + clearInterval(repeater); if (event.keyCode === SPACE) { - clearInterval(timer); - if (!isRunning) { - startingTime = Date.now(); - setIsRunning(true); - setTimer(setInterval(() => setTime(convertTimeToString((Date.now() - startingTime))), 10)); - } else { - - clearInterval(timer); - setIsRunning(false); - setIsCountdown(false); - startingTime = 0; + if (mode === 'running') { registerResult(time); - return false; + setMode('idle'); + } else if (mode === 'over') { + setMode('idle'); + } else { + setMode('running'); } } }; @@ -70,26 +69,46 @@ const Timer = ({ registerResult }) => { }; }); + const composeHelperText = () => { + switch (mode) { + case 'running': return '_'; + case 'countdown': return 'Release SPACE to begin'; + case 'over': return 'You are too late!'; + default: return 'Hold SPACE to start countdown'; + } + }; + + const helperColor = () => { + switch (mode) { + case 'running': return 'primary'; + case 'over': return 'secondary'; + default: return 'textSecondary'; + } + }; + return ( {time} + + {composeHelperText()} + ); }; -const convertTimeToString = timeDiff => { +const convertTimeToString = timeDelta => { let resultTime = ''; - const minute = Math.floor(timeDiff / 60000); + const minute = Math.floor(timeDelta / 60000); if (minute < 10) resultTime += '0'; resultTime += minute + ':'; - let second = Math.floor(timeDiff / 1000); + let second = Math.floor(timeDelta / 1000); if (second < 10) resultTime += '0'; if (second > 59) second %= 60; resultTime += second + ':'; - const mill = Math.floor((timeDiff % 1000) / 10); + const mill = Math.floor((timeDelta % 1000) / 10); if (mill < 10) resultTime += '0'; resultTime += mill; -- cgit v1.2.3 From 002a8c257bb0b78d313ccc30c289534941c9e008 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 7 Jan 2020 00:46:23 +0300 Subject: Avoid timer going crazy bug --- src/components/Timer/Timer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/Timer/Timer.js') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 6fee1b1..99356a5 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -22,6 +22,7 @@ const Timer = ({ registerResult }) => { const [repeater, setRepeater] = useState(0); useEffect(()=> { + clearInterval(repeater); const timestamp = Date.now(); if (mode === 'countdown') setRepeater(setInterval(() => { @@ -36,7 +37,6 @@ const Timer = ({ registerResult }) => { if (mode === 'over') { setTime('00:00:00'); - clearInterval(repeater); } }, [mode]); -- cgit v1.2.3