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 +++++++++++------ src/components/TimerPage/TimerPage.js | 54 +++++++++++++++++++++++++++++++++++ src/index.js | 10 +++++-- 3 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 src/components/TimerPage/TimerPage.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; diff --git a/src/components/TimerPage/TimerPage.js b/src/components/TimerPage/TimerPage.js new file mode 100644 index 0000000..968faab --- /dev/null +++ b/src/components/TimerPage/TimerPage.js @@ -0,0 +1,54 @@ +import React from 'react'; + +import { Grid, Box } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; + +import Timer from "../Timer/Timer"; +import SolutionCard from "../SolutionCard/SolutionCard"; + +import { post } from '../../requests'; + + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + justifyContent: 'space-between', + padding: theme.spacing(5, 4, 4, 4), + }, +})); + +const TimerPage = ({ recentSolutions, setRecentSolutions }) => { + const classes = useStyles(); + + const user = { + id: null, + username: 'anonymous', + }; + + const registerResult = result => { + const solution = { author_id: user.id, result }; + post('solutions/', solution).then(response => { + setRecentSolutions([response.data].concat(recentSolutions)); + }); + }; + + return ( + + + + + + + {recentSolutions.slice(0, 5).map(solution => ( + + + + ))} + + + + ); +}; + + +export default TimerPage; diff --git a/src/index.js b/src/index.js index 5268b1e..07c50bc 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ import { ThemeProvider, makeStyles } from '@material-ui/core/styles'; import theme from "./theme"; import Header from './components/Header/Header'; -import Timer from './components/Timer/Timer'; +import TimerPage from "./components/TimerPage/TimerPage"; import Scoreboard from "./components/Scoreboard/Scoreboard"; @@ -21,13 +21,19 @@ const useStyles = makeStyles(theme => ({ const App = () => { const [page, setPage] = useState('app'); + const [recentSolutions, setRecentSolutions] = useState([]); const classes = useStyles(); const getPageComponent = page => { switch (page) { case 'app': - return (); + return ( + + ); case 'scoreboard': return (); default: -- 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(-) 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 4b07be9d2ec37f65de7d1a2c8012815d7baa599c Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 7 Jan 2020 00:38:07 +0300 Subject: Support deleting cards on TimerPage --- src/components/TimerPage/TimerPage.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/TimerPage/TimerPage.js b/src/components/TimerPage/TimerPage.js index 968faab..f304b46 100644 --- a/src/components/TimerPage/TimerPage.js +++ b/src/components/TimerPage/TimerPage.js @@ -32,16 +32,20 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => { }); }; + const removeSolution = (id) => { + setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); + }; + return ( - - {recentSolutions.slice(0, 5).map(solution => ( + + {recentSolutions.slice(0, 3).map(solution => ( - + ))} -- 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(-) 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