aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Timer/Timer.js126
1 files changed, 75 insertions, 51 deletions
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 1b7dec4..f840429 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,66 +1,90 @@
import React, { useState, useEffect } from 'react';
-import { Typography } from "@material-ui/core";
+import { post } from '../../requests';
-import {post} from '../../requests';
+import { Typography } from '@material-ui/core';
const Timer = () => {
- const SPACE = 32
- const [time, setTime] = useState("00:00:00")
- const [running, setRunning] = useState(false);
- const [timer, setTimer] = useState(0);
- let startingTime;
-
-
- const handleKeyUp = event => {
- if (event.keyCode === SPACE){
- 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))
- } else {
- clearInterval(timer);
- setRunning(false);
- startingTime = 0;
- post('solutions/', {result: time});
- return false;
- }
- }
+ 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 {
+
+ clearInterval(timer);
+ 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 (
+ <Typography variant="h2"> {time} </Typography>
+ );
+};
- useEffect(() => {
- window.addEventListener("keyup", handleKeyUp);
- return () => {
- window.removeEventListener("keyup", handleKeyUp);
- };
- })
+const convertTimeToString = timeDiff => {
+ let resultTime = '';
- return (
- <Typography variant="h2"> {time} </Typography>
- );
+ 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 + ':';
+ const mill = Math.floor((timeDiff % 1000) / 10);
+ if (mill < 10) resultTime += '0';
+ resultTime += mill;
+
+ return resultTime;
+};
export default Timer;
+