|
|
@ -5,6 +5,7 @@ import { useState, useEffect, useRef, useMemo } from "react"; |
|
|
|
import {genSquareChallenge} from '../libs/Random'; |
|
|
|
import {shapes} from '../libs/ShapeEnum'; |
|
|
|
import { styles } from "./styles/AppStyles"; |
|
|
|
import Autoscroll from "../components/Autoscroll"; |
|
|
|
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'; |
|
|
|
import Icons from '../themes/Icons'; |
|
|
|
import Colors from "../themes/Colors"; |
|
|
@ -17,6 +18,8 @@ function Game(props){ |
|
|
|
const [timerState, setTimerState] = useState(0); |
|
|
|
const localTimer = useRef(null); |
|
|
|
const startTime = useRef(0); |
|
|
|
const [scrollOrigin, setScrollOrigin] = useState(0); |
|
|
|
const scrollDestination = useRef(Metrics.animated.gameScrollInterval); |
|
|
|
const [headerText, setHeaderText] = useState('Ready?'); |
|
|
|
const [headerColor, setHeaderColor] = useState(styles.green); |
|
|
|
const [headerTextColor, setHeaderTextColor] = useState(styles.darkText); |
|
|
@ -66,9 +69,20 @@ function Game(props){ |
|
|
|
} |
|
|
|
}, [timerState]); |
|
|
|
|
|
|
|
function scroll(){ |
|
|
|
let newOrigin = scrollDestination.current; |
|
|
|
let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval; |
|
|
|
|
|
|
|
scrollDestination.current = newDestination; |
|
|
|
setScrollOrigin(newOrigin); |
|
|
|
} |
|
|
|
|
|
|
|
function generateSquare(){ |
|
|
|
return ( |
|
|
|
<TouchableOpacity style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}> |
|
|
|
<TouchableOpacity |
|
|
|
onPress={scroll} |
|
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
|
> |
|
|
|
<MaterialIcon |
|
|
|
name={Icons.squareIcons.square} |
|
|
|
color={Colors.material.dark} |
|
|
@ -80,7 +94,10 @@ function Game(props){ |
|
|
|
|
|
|
|
function generateShape(index){ |
|
|
|
return ( |
|
|
|
<TouchableOpacity style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}> |
|
|
|
<TouchableOpacity |
|
|
|
onPress={scroll} |
|
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
|
> |
|
|
|
<MaterialIcon |
|
|
|
name={shapes[index]} |
|
|
|
color={Colors.material.dark} |
|
|
@ -121,10 +138,16 @@ function Game(props){ |
|
|
|
{headerText} |
|
|
|
</Text> |
|
|
|
</View> |
|
|
|
<ScrollView style={[styles.flex, styles.flexColumn]}> |
|
|
|
<View style={[styles.flex, styles.flexColumn]}> |
|
|
|
<Autoscroll |
|
|
|
origin={scrollOrigin} |
|
|
|
destination={scrollDestination.current} |
|
|
|
duration={250} |
|
|
|
> |
|
|
|
<View style={[styles.gameStart]} /> |
|
|
|
{squareMemo} |
|
|
|
</ScrollView> |
|
|
|
</Autoscroll> |
|
|
|
</View> |
|
|
|
</SafeAreaView> |
|
|
|
); |
|
|
|
} |
|
|
|