|
@ -1,7 +1,7 @@ |
|
|
import React from "react"; |
|
|
import React from "react"; |
|
|
import { Text, TouchableOpacity, View, SafeAreaView } from "react-native"; |
|
|
import { Text, TouchableOpacity, View, SafeAreaView } from "react-native"; |
|
|
import { ScrollView } from "react-native-gesture-handler"; |
|
|
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 {genSquareChallenge} from '../libs/Random'; |
|
|
import {shapes} from '../libs/ShapeEnum'; |
|
|
import {shapes} from '../libs/ShapeEnum'; |
|
|
import { styles } from "./styles/AppStyles"; |
|
|
import { styles } from "./styles/AppStyles"; |
|
@ -12,13 +12,59 @@ import Metrics from "../themes/Metrics"; |
|
|
|
|
|
|
|
|
function Game(props){ |
|
|
function Game(props){ |
|
|
|
|
|
|
|
|
const squareChallenge = genSquareChallenge(); |
|
|
const squareChallenge = useRef(genSquareChallenge()); |
|
|
const [startTime, setStartTime] = useState(Date.now()); |
|
|
const squareMemo = useMemo(renderPairs, [squareChallenge]); |
|
|
|
|
|
const [timerState, setTimerState] = useState(0); |
|
|
|
|
|
const localTimer = useRef(null); |
|
|
|
|
|
const startTime = useRef(0); |
|
|
const [headerText, setHeaderText] = useState('Ready?'); |
|
|
const [headerText, setHeaderText] = useState('Ready?'); |
|
|
const [headerColor, setHeaderColor] = useState(styles.green); |
|
|
const [headerColor, setHeaderColor] = useState(styles.green); |
|
|
const [headerTextColor, setHeaderTextColor] = useState(styles.darkText); |
|
|
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(){ |
|
|
function generateSquare(){ |
|
|
return ( |
|
|
return ( |
|
@ -63,7 +109,7 @@ function Game(props){ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function renderPairs(){ |
|
|
function renderPairs(){ |
|
|
return squareChallenge.map((pair, index) => { |
|
|
return squareChallenge.current.map((pair, index) => { |
|
|
return generatePair(pair.squarePos, pair.shapeType, index); |
|
|
return generatePair(pair.squarePos, pair.shapeType, index); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
@ -76,7 +122,8 @@ function Game(props){ |
|
|
</Text> |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
<ScrollView style={[styles.flex, styles.flexColumn]}> |
|
|
<ScrollView style={[styles.flex, styles.flexColumn]}> |
|
|
{renderPairs()} |
|
|
<View style={[styles.gameStart]} /> |
|
|
|
|
|
{squareMemo} |
|
|
</ScrollView> |
|
|
</ScrollView> |
|
|
</SafeAreaView> |
|
|
</SafeAreaView> |
|
|
); |
|
|
); |
|
|