scoring

squarenotsquare/src/screens/Game.js

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