|
|
@ -14,6 +14,7 @@ function Game(props){ |
|
|
|
|
|
|
|
const squareChallenge = useRef(genSquareChallenge()); |
|
|
|
const squareMemo = useMemo(renderPairs, [squareChallenge]); |
|
|
|
const challengeState = useRef(0); |
|
|
|
const [timerState, setTimerState] = useState(0); |
|
|
|
const localTimer = useRef(null); |
|
|
|
const startTime = useRef(0); |
|
|
@ -68,18 +69,21 @@ function Game(props){ |
|
|
|
} |
|
|
|
}, [timerState]); |
|
|
|
|
|
|
|
function scroll(){ |
|
|
|
function scroll(pairIndex){ |
|
|
|
if (pairIndex === challengeState.current){ |
|
|
|
let newOrigin = scrollDestination.current; |
|
|
|
let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval; |
|
|
|
|
|
|
|
scrollDestination.current = newDestination; |
|
|
|
challengeState.current = challengeState.current + 1; |
|
|
|
setScrollOrigin(newOrigin); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function generateSquare(){ |
|
|
|
function generateSquare(pairIndex){ |
|
|
|
return ( |
|
|
|
<TouchableOpacity |
|
|
|
onPress={scroll} |
|
|
|
onPress={() => scroll(pairIndex)} |
|
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
|
> |
|
|
|
<MaterialIcon |
|
|
@ -91,10 +95,10 @@ function Game(props){ |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function generateShape(index){ |
|
|
|
function generateShape(index, pairIndex){ |
|
|
|
return ( |
|
|
|
<TouchableOpacity |
|
|
|
onPress={scroll} |
|
|
|
onPress={() => scroll(pairIndex)} |
|
|
|
style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]} |
|
|
|
> |
|
|
|
<MaterialIcon |
|
|
@ -110,15 +114,15 @@ function Game(props){ |
|
|
|
if (answer === 0) { |
|
|
|
return ( |
|
|
|
<View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}> |
|
|
|
{generateSquare()} |
|
|
|
{generateShape(shapeIndex)} |
|
|
|
{generateSquare(pairIndex)} |
|
|
|
{generateShape(shapeIndex, pairIndex)} |
|
|
|
</View> |
|
|
|
); |
|
|
|
} else { |
|
|
|
return ( |
|
|
|
<View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}> |
|
|
|
{generateShape(shapeIndex)} |
|
|
|
{generateSquare()} |
|
|
|
{generateShape(shapeIndex, pairIndex)} |
|
|
|
{generateSquare(pairIndex)} |
|
|
|
</View> |
|
|
|
); |
|
|
|
} |
|
|
|