From 33dc86d661f4cac10a87804ba1bacf92e36c16ce Mon Sep 17 00:00:00 2001 From: asketonim Date: Fri, 3 Jan 2020 16:32:36 +0300 Subject: Implement full countdown functionality --- src/components/Timer/Timer.js | 54 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 367cce5..fea0ed2 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -1,17 +1,62 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; -import {post} from '../../requests'; +import { post } from '../../requests'; const Timer = () => { - const SPACE = 32 - const [time, setTime] = useState("00:00:00") + const SPACE = 32; + const countdownInMills = 15000; + const [time, setTime] = useState("00:15:00"); const [running, setRunning] = useState(false); const [timer, setTimer] = useState(0); + const [countdown, setCountdown] = useState(0); + const [countdownRunning, setCountdownRunning] = useState(false); let startingTime; + + const handleKeyDown = event => { + if (event.keyCode === SPACE && !running ) { + + let timeGap = Date.now() - countdown; + if (!countdownRunning) { + setCountdown(Date.now()); + setCountdownRunning(true); + timeGap = 0; + } + + if (timeGap >= countdownInMills) { + setRunning(true); + setTime('00:00:00'); + return; + } + + setTime(() => { + const timeLeft = Math.floor((countdownInMills - timeGap) / 10); + let resultTime = ""; + + const minute = Math.floor(timeLeft / 6000); + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; + + let second = Math.floor(timeLeft / 100); + if (second < 10) resultTime += '0'; + if (second > 59) second %= 60; + resultTime += second + ':'; + + const mill = timeLeft % 100; + if (mill < 10) resultTime += '0'; + resultTime += mill; + + return resultTime; + }) + + + } + } + const handleKeyUp = event => { + setCountdownRunning(false); if (event.keyCode === SPACE){ if (!running) { startingTime = Date.now(); @@ -48,9 +93,12 @@ const Timer = () => { useEffect(() => { window.addEventListener("keyup", handleKeyUp); + window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("keyup", handleKeyUp); + window.removeEventListener("keydown", handleKeyDown); + }; }) -- cgit v1.2.3 From f03467dbdda7c142a990d10d09d6711c1345323a Mon Sep 17 00:00:00 2001 From: asketonim Date: Fri, 3 Jan 2020 17:02:00 +0300 Subject: Add displayTime() function --- src/components/Timer/Timer.js | 62 +++++++++++++++---------------------------- 1 file changed, 22 insertions(+), 40 deletions(-) diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index fea0ed2..1a8f6e8 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -30,27 +30,7 @@ const Timer = () => { return; } - setTime(() => { - const timeLeft = Math.floor((countdownInMills - timeGap) / 10); - let resultTime = ""; - - const minute = Math.floor(timeLeft / 6000); - if (minute < 10) resultTime += '0'; - resultTime += minute + ':'; - - let second = Math.floor(timeLeft / 100); - if (second < 10) resultTime += '0'; - if (second > 59) second %= 60; - resultTime += second + ':'; - - const mill = timeLeft % 100; - if (mill < 10) resultTime += '0'; - resultTime += mill; - - return resultTime; - }) - - + setTime(displayTime(countdownInMills - timeGap)); } } @@ -61,25 +41,7 @@ const Timer = () => { if (!running) { startingTime = Date.now(); setRunning(true); - setTimer(setInterval(() => setTime(() => { - const timeGap = Math.floor((Date.now() - startingTime) / 10); - let resultTime = ""; - - const minute = Math.floor(timeGap / 6000); - if (minute < 10) resultTime += '0'; - resultTime += minute + ':'; - - let second = Math.floor(timeGap / 100); - if (second < 10) resultTime += '0'; - if (second > 59) second %= 60 - resultTime += second + ':'; - - const mill = timeGap % 100; - if (mill < 10) resultTime += '0'; - resultTime += mill; - - return resultTime; - }), 10)) + setTimer(setInterval(() => setTime(displayTime((Date.now() - startingTime))), 10)); } else { clearInterval(timer); setRunning(false); @@ -119,4 +81,24 @@ const Root = styled.div` color: pink; `; +const displayTime = timeDiff => { + const timeGap = Math.floor(timeDiff / 10); + let resultTime = ""; + + const minute = Math.floor(timeGap / 6000); + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; + + let second = Math.floor(timeGap / 100); + if (second < 10) resultTime += '0'; + if (second > 59) second %= 60 + resultTime += second + ':'; + + const mill = timeGap % 100; + if (mill < 10) resultTime += '0'; + resultTime += mill; + + return resultTime; +}; + export default Timer; -- cgit v1.2.3 From e8ccbd8e654b6bcd0c251e7d338355dacea2201f Mon Sep 17 00:00:00 2001 From: asketonim Date: Fri, 3 Jan 2020 22:12:31 +0300 Subject: Fix countdown animation --- src/components/Timer/Timer.js | 72 ++++++++++++++++++++----------------------- 1 file changed, 33 insertions(+), 39 deletions(-) diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 1a8f6e8..1f7dcd4 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -5,72 +5,67 @@ import { post } from '../../requests'; const Timer = () => { const SPACE = 32; - const countdownInMills = 15000; + const maxCountdown = 15000; const [time, setTime] = useState("00:15:00"); - const [running, setRunning] = useState(false); + const [isRunning, setIsRunning] = useState(false); const [timer, setTimer] = useState(0); - const [countdown, setCountdown] = useState(0); - const [countdownRunning, setCountdownRunning] = useState(false); + const [isCountdown, setIsCountdown] = useState(false); let startingTime; - const handleKeyDown = event => { - if (event.keyCode === SPACE && !running ) { - - let timeGap = Date.now() - countdown; - if (!countdownRunning) { - setCountdown(Date.now()); - setCountdownRunning(true); - timeGap = 0; - } - - if (timeGap >= countdownInMills) { - setRunning(true); - setTime('00:00:00'); - return; + const handleKeyPress = event => { + 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)); } - - setTime(displayTime(countdownInMills - timeGap)); } - } + }; - const handleKeyUp = event => { - setCountdownRunning(false); + clearInterval(timer); if (event.keyCode === SPACE){ - if (!running) { + if (!isRunning) { startingTime = Date.now(); - setRunning(true); - setTimer(setInterval(() => setTime(displayTime((Date.now() - startingTime))), 10)); + setIsRunning(true); + setTimer(setInterval(() => setTime(convertTimeToString((Date.now() - startingTime))), 10)); } else { + clearInterval(timer); - setRunning(false); + setIsRunning(false); + setIsCountdown(false); startingTime = 0; post('solutions/', {result: time}); return false; } } - } - + }; useEffect(() => { window.addEventListener("keyup", handleKeyUp); - window.addEventListener("keydown", handleKeyDown); + window.addEventListener("keypress", handleKeyPress); return () => { window.removeEventListener("keyup", handleKeyUp); - window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener("keypress", handleKeyPress); }; - }) - + }); return ( {time} ); - } const Root = styled.div` @@ -81,20 +76,19 @@ const Root = styled.div` color: pink; `; -const displayTime = timeDiff => { - const timeGap = Math.floor(timeDiff / 10); +const convertTimeToString = timeDiff => { let resultTime = ""; - const minute = Math.floor(timeGap / 6000); + const minute = Math.floor(timeDiff / 60000); if (minute < 10) resultTime += '0'; resultTime += minute + ':'; - let second = Math.floor(timeGap / 100); + let second = Math.floor(timeDiff / 1000); if (second < 10) resultTime += '0'; if (second > 59) second %= 60 resultTime += second + ':'; - const mill = timeGap % 100; + const mill = Math.floor((timeDiff % 1000) / 10); if (mill < 10) resultTime += '0'; resultTime += mill; -- cgit v1.2.3 From af30995e9ad49987103f4c11533ff37cc31d898b Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Fri, 3 Jan 2020 22:18:30 +0300 Subject: Fix indentation --- src/components/Timer/Timer.js | 152 +++++++++++++++++++++--------------------- 1 file changed, 76 insertions(+), 76 deletions(-) diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js index 1f7dcd4..62924f0 100644 --- a/src/components/Timer/Timer.js +++ b/src/components/Timer/Timer.js @@ -4,95 +4,95 @@ import styled from 'styled-components'; import { post } from '../../requests'; const Timer = () => { - const SPACE = 32; - const maxCountdown = 15000; - const [time, setTime] = useState("00:15:00"); - const [isRunning, setIsRunning] = useState(false); - const [timer, setTimer] = useState(0); - const [isCountdown, setIsCountdown] = useState(false); - let startingTime; - - - const handleKeyPress = event => { - 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)); - } - } - }; + const SPACE = 32; + const maxCountdown = 15000; + const [time, setTime] = useState("00:15:00"); + const [isRunning, setIsRunning] = useState(false); + const [timer, setTimer] = useState(0); + const [isCountdown, setIsCountdown] = useState(false); + let startingTime; + + + const handleKeyPress = event => { + 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)); + } + } + }; + + const handleKeyUp = event => { + clearInterval(timer); + if (event.keyCode === SPACE){ + if (!isRunning) { + startingTime = Date.now(); + setIsRunning(true); + setTimer(setInterval(() => setTime(convertTimeToString((Date.now() - startingTime))), 10)); + } else { - const handleKeyUp = event => { clearInterval(timer); - if (event.keyCode === SPACE){ - if (!isRunning) { - startingTime = Date.now(); - setIsRunning(true); - setTimer(setInterval(() => setTime(convertTimeToString((Date.now() - startingTime))), 10)); - } else { - - clearInterval(timer); - setIsRunning(false); - setIsCountdown(false); - startingTime = 0; - post('solutions/', {result: time}); - return false; - } - } - }; - - useEffect(() => { - window.addEventListener("keyup", handleKeyUp); - window.addEventListener("keypress", handleKeyPress); + setIsRunning(false); + setIsCountdown(false); + startingTime = 0; + post('solutions/', {result: time}); + return false; + } + } + }; + + useEffect(() => { + window.addEventListener("keyup", handleKeyUp); + window.addEventListener("keypress", handleKeyPress); + + return () => { + window.removeEventListener("keyup", handleKeyUp); + window.removeEventListener("keypress", handleKeyPress); - return () => { - window.removeEventListener("keyup", handleKeyUp); - window.removeEventListener("keypress", handleKeyPress); - - }; - }); + }; + }); - return ( - - {time} - - ); -} + return ( + + {time} + + ); +}; const Root = styled.div` - background-color: skyblue; - padding: 8px; - display: inline-block; - font-size: 32px; - color: pink; + background-color: skyblue; + padding: 8px; + display: inline-block; + font-size: 32px; + color: pink; `; const convertTimeToString = timeDiff => { - let resultTime = ""; + let resultTime = ""; - const minute = Math.floor(timeDiff / 60000); - if (minute < 10) resultTime += '0'; - resultTime += minute + ':'; + const minute = Math.floor(timeDiff / 60000); + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; - let second = Math.floor(timeDiff / 1000); - if (second < 10) resultTime += '0'; - if (second > 59) second %= 60 - resultTime += second + ':'; + let second = Math.floor(timeDiff / 1000); + if (second < 10) resultTime += '0'; + if (second > 59) second %= 60; + resultTime += second + ':'; - const mill = Math.floor((timeDiff % 1000) / 10); - if (mill < 10) resultTime += '0'; - resultTime += mill; + const mill = Math.floor((timeDiff % 1000) / 10); + if (mill < 10) resultTime += '0'; + resultTime += mill; - return resultTime; + return resultTime; }; export default Timer; -- cgit v1.2.3