average and total score added

BhattJayD · Apr 30, 2023 · a06338a · a06338a
1 parent 5de4396
commit a06338a
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 68 deletions.
diff --git a/App.js b/App.js
@@ -9,6 +9,7 @@ import SplashScreen from 'react-native-splash-screen';
 import messaging from '@react-native-firebase/messaging';
 import AppStore from './src/store/AppStore';
 import AuthStore from './src/store/AuthStore';
+import GameStore from './src/store/GameStore';
 
 const App = () => {
   const getTheme = async () => {
@@ -31,6 +32,8 @@ const App = () => {
   };
   useEffect(() => {
     SplashScreen.hide();
+    GameStore.scoreGraber();
+    // AsyncStorage.removeItem(StorageConstants.SCORE);
     setTimeout(() => {
       AuthStore.setField('isLoggedin', true);
     }, 1500);

diff --git a/src/assets/all.png b/src/assets/all.png
diff --git a/src/assets/score.png b/src/assets/score.png
diff --git a/src/screens/Game.js b/src/screens/Game.js
@@ -66,15 +66,7 @@ const Game = () => {
                 source={IconPack.CHESS}
               />
             </TouchableOpacity>
-            <Text
-              style={{
-                color: color,
-                fontSize: 37,
-                fontWeight: '900',
-                textAlign: 'center',
-              }}>
-              {KEY}
-            </Text>
+            <Text style={[styles.keyText, {color: color}]}>{KEY}</Text>
             <TouchableOpacity
               onPress={() => {
                 setShowCords(!showCords);
@@ -100,6 +92,10 @@ const Game = () => {
                 var rowValuse = ROW_NAME[secondLatter];
                 if (colValuse === col + 1 && rowValuse === row + 1) {
                   randomGenrator();
+                  GameStore.setField(
+                    'currentScore',
+                    GameStore.currentScore + 1,
+                  );
                 } else {
                   setColor('red');
                   setTimeout(() => {
@@ -111,6 +107,9 @@ const Game = () => {
               showCords={showCords}
             />
           </View>
+          <View style={styles.scoreView}>
+            <Text style={styles.scoreText}>{GameStore.currentScore}</Text>
+          </View>
         </View>
       )}
     </Observer>
@@ -128,4 +127,28 @@ const styles = StyleSheet.create({
   },
   eyeImageStyle: {height: 25, width: 25},
   tintColorWhite: {tintColor: '#fff'},
+  keyText: {
+    color: '#fff',
+    fontSize: 37,
+    fontWeight: '900',
+    textAlign: 'center',
+  },
+  scoreView: {
+    padding: 26,
+    backgroundColor: ThemeStore.darkColor,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    shadowColor: ThemeStore.lightColor,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.32,
+    shadowRadius: 5.46,
+
+    elevation: 9,
+  },
+  scoreText: {color: '#fff', fontSize: 20, fontWeight: 'bold'},
 });
diff --git a/src/screens/Menu.js b/src/screens/Menu.js
@@ -1,53 +1,71 @@
-import React, {useEffect, useState} from 'react';
-import {
-  Image,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-  // Animated,
-  ScrollView,
-} from 'react-native';
+import React from 'react';
+import {Image, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
 import AppStore from '../store/AppStore';
 import ThemeStore from '../store/ThemeStore';
 import IconPack from '../utils/IconPack';
 import GameTypeModal from './components/GameTypeModal';
 import GameStore from '../store/GameStore';
 import Animated, {FadeIn} from 'react-native-reanimated';
+import {Observer} from 'mobx-react';
 const Menu = () => {
   return (
-    <View style={styles.container}>
-      <Animated.ScrollView
-        contentContainerStyle={styles.container}
-        entering={FadeIn.duration(500)}>
-        <GameTypeModal />
-        <View style={styles.flexWrap}>
-          <TouchableHighlight
-            style={styles.highlightStyle}
-            underlayColor={'#4141498f'}
-            onPress={() => {
-              AppStore.handelScreenNavigation('Theme');
-            }}>
-            <View style={styles.buttonStyle}>
-              <Image source={IconPack.THEME} style={styles.iconStyle} />
-              <Text style={styles.menuItemText}>Theme</Text>
-            </View>
-          </TouchableHighlight>
-          <TouchableHighlight
-            style={styles.highlightStyle}
-            underlayColor={'#4141498f'}
-            onPress={() => {
-              // AppStore.handelScreenNavigation('Game');
-              GameStore.setField('showGameTypeModal', true);
-            }}>
-            <View style={styles.buttonStyle}>
-              <Image source={IconPack.CHESS} style={styles.iconStyle} />
-              <Text style={styles.menuItemText}>Game</Text>
+    <Observer>
+      {() => (
+        <View style={styles.container}>
+          <Animated.ScrollView
+            contentContainerStyle={styles.container}
+            entering={FadeIn.duration(500)}>
+            <GameTypeModal />
+            <View style={styles.flexWrap}>
+              <TouchableHighlight
+                style={styles.highlightStyle}
+                underlayColor={'#4141498f'}
+                onPress={() => {
+                  AppStore.handelScreenNavigation('Theme');
+                }}>
+                <View style={styles.buttonStyle}>
+                  <Image source={IconPack.THEME} style={styles.iconStyle} />
+                  <Text style={styles.menuItemText}>Theme</Text>
+                </View>
+              </TouchableHighlight>
+              <TouchableHighlight
+                style={styles.highlightStyle}
+                underlayColor={'#4141498f'}
+                onPress={() => {
+                  GameStore.setField('showGameTypeModal', true);
+                }}>
+                <View style={styles.buttonStyle}>
+                  <Image source={IconPack.CHESS} style={styles.iconStyle} />
+                  <Text style={styles.menuItemText}>Game</Text>
+                </View>
+              </TouchableHighlight>
+              {GameStore.avgScore > 0 && (
+                <View style={styles.highlightStyle}>
+                  <View style={styles.buttonStyle}>
+                    <Image source={IconPack.SCORE} style={styles.iconStyle} />
+
+                    <Text numberOfLines={1} style={styles.menuItemText}>
+                      {GameStore.avgScore}
+                    </Text>
+                  </View>
+                </View>
+              )}
+              {GameStore.totalScore > 0 && (
+                <View style={styles.highlightStyle}>
+                  <View style={styles.buttonStyle}>
+                    <Image source={IconPack.ALL} style={styles.iconStyle} />
+
+                    <Text numberOfLines={1} style={styles.menuItemText}>
+                      {GameStore.totalScore}
+                    </Text>
+                  </View>
+                </View>
+              )}
             </View>
-          </TouchableHighlight>
+          </Animated.ScrollView>
         </View>
-      </Animated.ScrollView>
-    </View>
+      )}
+    </Observer>
   );
 };
 
@@ -68,14 +86,19 @@ const styles = StyleSheet.create({
   flexWrap: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
+    justifyContent: 'space-around',
+    paddingHorizontal: 10,
   },
   iconStyle: {height: 25, width: 25},
   highlightStyle: {
-    padding: 24,
+    // padding: 24,
+    height: 100,
+    width: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
     backgroundColor: '#414149',
     marginHorizontal: 10,
     borderRadius: 10,
+    marginTop: 10,
   },
 });
diff --git a/src/screens/components/GameOver.js b/src/screens/components/GameOver.js
@@ -3,8 +3,20 @@ import {View, Text, Modal, TouchableOpacity, StyleSheet} from 'react-native';
 import GameStore from '../../store/GameStore';
 import {Observer} from 'mobx-react';
 import AppStore from '../../store/AppStore';
+import {getFromAsyncStorage, storeToAsyncStorage} from '../../utils/helper';
+import StorageConstants from '../../utils/StorageConstants';
 
 const GameOver = () => {
+  const onPressRestart = () => {
+    GameStore.setField('showGameOverModal', false);
+    GameStore.scoreSaver();
+    GameStore.setField('counter', GameStore.selectedGameTime);
+  };
+  const onPressClose = () => {
+    GameStore.setField('showGameOverModal', false);
+    GameStore.scoreSaver();
+    AppStore.handelScreenGoBack();
+  };
   return (
     <Observer>
       {() => (
@@ -15,11 +27,7 @@ const GameOver = () => {
             transparent={true}>
             <View style={styles.modallView}>
               <View style={styles.rowWrap}>
-                <TouchableOpacity
-                  onPress={() => {
-                    GameStore.setField('showGameOverModal', false);
-                    AppStore.handelScreenGoBack();
-                  }}>
+                <TouchableOpacity onPress={async () => onPressClose()}>
                   <Text style={styles.closeShareText}>Close</Text>
                 </TouchableOpacity>
 
@@ -34,10 +42,7 @@ const GameOver = () => {
               <View style={styles.center}>
                 <TouchableOpacity
                   style={styles.restartButtomStyle}
-                  onPress={() => {
-                    GameStore.setField('showGameOverModal', false);
-                    GameStore.setField('counter', GameStore.selectedGameTime);
-                  }}>
+                  onPress={() => onPressRestart()}>
                   <Text style={styles.closeShareText}>Restart</Text>
                 </TouchableOpacity>
               </View>

diff --git a/src/screens/components/GameTypeModal.js b/src/screens/components/GameTypeModal.js
@@ -11,9 +11,21 @@ import GameStore from '../../store/GameStore';
 import {Observer} from 'mobx-react';
 import AppStore from '../../store/AppStore';
 import IconPack from '../../utils/IconPack';
+import {storeToAsyncStorage} from '../../utils/helper';
+import StorageConstants from '../../utils/StorageConstants';
 
 const GameTypeModal = () => {
-  const TimeData = [30, 60, 120, 180, 240, '∞'];
+  const TimeData = [5, 30, 60, 120, 180, 240, '∞'];
+  const onPressTime = i => {
+    storeToAsyncStorage(
+      StorageConstants.GAME_PLAYED_TIME,
+      JSON.stringify(GameStore.gamePlayedTime + 1),
+    );
+    GameStore.setField('showGameTypeModal', false);
+    GameStore.setField('selectedGameTime', i != '∞' ? i : -1);
+    GameStore.setField('counter', i != '∞' ? i : -1);
+    AppStore.handelScreenNavigation('Game');
+  };
   return (
     <Observer>
       {() => (
@@ -32,12 +44,7 @@ const GameTypeModal = () => {
                     key={index}
                     style={styles.highlightStyle}
                     underlayColor={'#4141498f'}
-                    onPress={() => {
-                      GameStore.setField('showGameTypeModal', false);
-                      GameStore.setField('selectedGameTime', i != '∞' ? i : -1);
-                      GameStore.setField('counter', i != '∞' ? i : -1);
-                      AppStore.handelScreenNavigation('Game');
-                    }}>
+                    onPress={() => onPressTime(i)}>
                     <View>
                       <Image
                         source={IconPack.CHESS_CLOCK}