game screen timer

squarenotsquare/src/screens/Game.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text, TouchableOpacity, View, SafeAreaView } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import {genSquareChallenge} from '../libs/Random';
 import {shapes} from '../libs/ShapeEnum';
 import { styles } from "./styles/AppStyles";
@@ -12,13 +12,59 @@ import Metrics from "../themes/Metrics";
 
 function Game(props){
 
-  const squareChallenge = genSquareChallenge();
-  const [startTime, setStartTime] = useState(Date.now());
+  const squareChallenge = useRef(genSquareChallenge());
+  const squareMemo = useMemo(renderPairs, [squareChallenge]);
+  const [timerState, setTimerState] = useState(0);
+  const localTimer = useRef(null);
+  const startTime = useRef(0);
   const [headerText, setHeaderText] = useState('Ready?');
   const [headerColor, setHeaderColor] = useState(styles.green);
   const [headerTextColor, setHeaderTextColor] = useState(styles.darkText);
 
-  useEffect
+  useEffect(() => {
+    let headerTimeout = null;
+
+    switch(timerState){
+      case 0:
+        headerTimeout = setTimeout(() => {
+          setHeaderColor(styles.yellow);
+          setHeaderText('Set');
+          setTimerState(1);
+        }, 1000);
+        break;
+      case 1:
+        headerTimeout = setTimeout(() => {
+          setHeaderColor(styles.red);
+          setHeaderTextColor(styles.lightText);
+          setHeaderText('Go!');
+          setTimerState(2);
+        }, 1000);
+        break;
+      case 2:
+        headerTimeout = setTimeout(() => {
+          setHeaderColor(styles.dark);
+          startTime.current = (Date.now());
+          setHeaderText(0 + ' s');
+          setTimerState(3);
+        }, 1000);
+        break;
+      case 3:
+        headerTimeout = setInterval(() => {
+          let elapsed = Math.round((Date.now() - startTime.current) / (1000));
+          setHeaderText(elapsed + ' s');
+        }, 1000);
+        break;
+      default:
+        break;
+    }
+
+    localTimer.current = (headerTimeout);
+
+    return () => {
+      clearTimeout(localTimer.current);
+      clearInterval(localTimer.current);
+    }
+  }, [timerState]);
 
   function generateSquare(){
     return (
@@ -63,7 +109,7 @@ function Game(props){
   }
 
   function renderPairs(){
-    return squareChallenge.map((pair, index) => {
+    return squareChallenge.current.map((pair, index) => {
       return generatePair(pair.squarePos, pair.shapeType, index);
     });
   }
@@ -76,7 +122,8 @@ function Game(props){
         </Text>
       </View>
       <ScrollView style={[styles.flex, styles.flexColumn]}>
-        {renderPairs()}
+        <View style={[styles.gameStart]} />
+        {squareMemo}
       </ScrollView>
     </SafeAreaView>
   );