From 14fa12e9ced4578b84d54ffe98030520ca689f78 Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Sat, 6 Aug 2022 08:05:43 -0500
Subject: [PATCH] conditional scrolling

---
 squarenotsquare/src/screens/Game.js | 32 ++++++++++++++++-------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/squarenotsquare/src/screens/Game.js b/squarenotsquare/src/screens/Game.js
index 81c25e7..8ae9dfb 100644
--- a/squarenotsquare/src/screens/Game.js
+++ b/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>
       );
     }