|
@ -19,6 +19,7 @@ function Game(props){ |
|
|
const [timerState, setTimerState] = useState(0); |
|
|
const [timerState, setTimerState] = useState(0); |
|
|
const localTimer = useRef(null); |
|
|
const localTimer = useRef(null); |
|
|
const startTime = useRef(0); |
|
|
const startTime = useRef(0); |
|
|
|
|
|
const score = useRef(0); |
|
|
const [scrollOrigin, setScrollOrigin] = useState(0); |
|
|
const [scrollOrigin, setScrollOrigin] = useState(0); |
|
|
const scrollDestination = useRef(Metrics.animated.gameScrollInterval); |
|
|
const scrollDestination = useRef(Metrics.animated.gameScrollInterval); |
|
|
const [headerText, setHeaderText] = useState('Ready?'); |
|
|
const [headerText, setHeaderText] = useState('Ready?'); |
|
@ -71,8 +72,14 @@ function Game(props){ |
|
|
} |
|
|
} |
|
|
}, [timerState]); |
|
|
}, [timerState]); |
|
|
|
|
|
|
|
|
function scroll(pairIndex){ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function selectAnswer(pairIndex, correct){ |
|
|
if (pairIndex === challengeState.current){ |
|
|
if (pairIndex === challengeState.current){ |
|
|
|
|
|
if (correct) { |
|
|
|
|
|
score.current = score.current + 1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
let newOrigin = scrollDestination.current; |
|
|
let newOrigin = scrollDestination.current; |
|
|
let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval; |
|
|
let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval; |
|
|
|
|
|
|
|
@ -96,7 +103,7 @@ function Game(props){ |
|
|
function generateSquare(pairIndex){ |
|
|
function generateSquare(pairIndex){ |
|
|
return ( |
|
|
return ( |
|
|
<TouchableOpacity |
|
|
<TouchableOpacity |
|
|
onPress={() => scroll(pairIndex)} |
|
|
onPress={() => selectAnswer(pairIndex, true)} |
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
> |
|
|
> |
|
|
<MaterialIcon |
|
|
<MaterialIcon |
|
@ -111,7 +118,7 @@ function Game(props){ |
|
|
function generateShape(index, pairIndex){ |
|
|
function generateShape(index, pairIndex){ |
|
|
return ( |
|
|
return ( |
|
|
<TouchableOpacity |
|
|
<TouchableOpacity |
|
|
onPress={() => scroll(pairIndex)} |
|
|
onPress={() => selectAnswer(pairIndex, false)} |
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
> |
|
|
> |
|
|
<MaterialIcon |
|
|
<MaterialIcon |
|
@ -178,6 +185,11 @@ function Game(props){ |
|
|
</View> |
|
|
</View> |
|
|
</Autoscroll> |
|
|
</Autoscroll> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View style={[styles.timerView, styles.dark, styles.centeredJustify]}> |
|
|
|
|
|
<Text style={[styles.lightText, styles.headerTitleFont, styles.centeredText]}> |
|
|
|
|
|
{score.current + ' / ' + squareChallenge.current.length} |
|
|
|
|
|
</Text> |
|
|
|
|
|
</View> |
|
|
</SafeAreaView> |
|
|
</SafeAreaView> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|