stop game after completed

squarenotsquare/src/screens/Game.js

@@ -79,9 +79,18 @@ function Game(props){
       scrollDestination.current = newDestination;
       challengeState.current = challengeState.current + 1;
       setScrollOrigin(newOrigin);
+
+      if (challengeState.current >= 20) {
+        completeChallenge();
+      }
     }
   }
 
+  function completeChallenge(){
+    clearInterval(localTimer.current);
+    setTimerState(4);
+  }
+
   function generateSquare(pairIndex){
     return (
       <TouchableOpacity
@@ -153,8 +162,18 @@ function Game(props){
           destination={scrollDestination.current}
           duration={250}
         >
-          <View style={[styles.gameStart]} />
+          <View style={[styles.gameView]} />
           {squareMemo}
+          <View style={[styles.gameView, styles.flexRow, styles.spaceEvenly, styles.centeredItems]}>
+            <MaterialIcon
+              name={Icons.squareIcons.check}
+              color={Colors.material.green800}
+              size={Metrics.icons.buttonIcon}
+            />
+            <Text style={[styles.headerTitleFont, styles.greyText]}>
+              Finish
+            </Text>
+          </View>
         </Autoscroll>
       </View>
     </SafeAreaView>

squarenotsquare/src/screens/styles/AppStyles.js

@@ -80,7 +80,7 @@ export const styles = StyleSheet.create({
   },
 
   smallMargin: {margin: Metrics.margins.default},
-  gameStart: {margin: Metrics.margins.gameStartMargin},
+  gameView: {margin: Metrics.margins.gameStartMargin},
   buttonMargin: {
     marginBottom: Metrics.margins.buttonMargin,
     marginTop: Metrics.margins.buttonMargin

squarenotsquare/src/themes/Icons.js

@@ -3,7 +3,8 @@ class AppIcons {
     square: 'square',
     settings: 'cog-outline',
     toggleOn: 'toggle-switch-on',
-    toggleOfff: 'toggle-switch-off',
+    toggleOff: 'toggle-switch-off',
+    check: 'check'
   };
 
   wrongShapes = {