Merge pull request #12 from Eug-VS/timer

Implement core timer functionality

2 files changed, 99 insertions, 20 deletions

diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
new file mode 100644
index 0000000..367cce5
--- /dev/null
+++ b/src/components/Timer/Timer.js
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+
+import styled from 'styled-components';
+import {post} from '../../requests';
+
+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;
+            }
+        }
+    }
+
+
+    useEffect(() => {
+        window.addEventListener("keyup", handleKeyUp);
+
+        return () => {
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    })
+
+
+    return (
+        <Root>
+            <span>{time}</ span>
+        </Root>
+    );
+
+}
+
+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 38a79a6..de4cb2a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,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';
 import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 
@@ -18,30 +19,34 @@ const App = () => {
 
   const [page, setPage] = useState('app');
 
+  const getPageComponent = page => {
+    switch (page) {
+      case 'app':
+        return (<Timer/>);
+      case 'scoreboard':
+        return (<Scoreboard/>);
+      default:
+        return (
+          <p>
+            This text is rendered outside of <code>Header</code> component, but
+            interacting with <code>Header</code> can influence content of this page!
+          </p>
+        )
+    }
+  };
+
+  const classes = useStyles();
   return (
-    <Root>
+    <ThemeProvider theme={theme}>
       <CssBaseline/>
-      <Header setPage={setPage} />
-      <Container maxWidth="xl">
-        <Paper elevation={4} style={{backgroundColor: "bisque"}}>
-          <Typography variant="h4"> This is the {page} page! </Typography>
-          {
-            (page === 'scoreboard')?
-              (<Scoreboard/>)
-              :
-              (
-                <p>
-                  This text is rendered outside of <code>Header</code> component, but
-                  interacting with <code>Header</code> can influence content of this page!
-                </p>
-              )
-          }
-        </Paper>
-      </Container>
-    </Root>
+      <Header setPage={setPage}/>
+      <Box className={classes.root}>
+        <Typography variant="h4"> This is the {page} page! </Typography>
+        { getPageComponent(page)}
+      </Box>
+    </ThemeProvider>
   );
 };
-
 const Root = styled.div`
   background: cornsilk;
   padding-bottom: 25px;