conditional scrolling

squarenotsquare/src/screens/Game.js

@@ -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(){
-    let newOrigin = scrollDestination.current;
-    let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval;
-
-    scrollDestination.current = newDestination;
-    setScrollOrigin(newOrigin);
+  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>
       );
     }