create gaming levels

src/constants/imgs.js

@@ -66,4 +66,9 @@ export default {
   well_being: require('../assets/games/wellBeing.jpg'),
   motherWithMidWife: require('../assets/games/motherAndMidWife.jpg'),
   user_profile_image: require('../assets/user_profile.png'),
+  lip_stick: require('../assets/games/lipstick.png'),
+  ring: require('../assets/games/ring.png'),
+  play_pen: require('../assets/games/play_pen.png'),
+  milk_bottle: require('../assets/games/milk_bottle.png'),
+  high_chair: require('../assets/games/high_chair.png'),
 };

src/constants/routes.js

@@ -69,6 +69,9 @@ export default {
   Game02Level05: 'Game02Level05',
   Game02Level06: 'Game02Level06',
   Game02Level07: 'Game02Level07',
+  Game02Level08: 'Game02Level08',
+  Game02Level09: 'Game02Level09',
+  Game02Level10: 'Game02Level10',
   GameLevelPage: 'GameLevelPage',
   MainDetailsFormInSinhala: 'MainDetailsFormInSinhala',
   Level01: 'Level01',
@@ -84,5 +87,9 @@ export default {
   Game02ProgressLevel05: 'Game02ProgressLevel05',
   Game02ProgressLevel06: 'Game02ProgressLevel06',
   MentalWellBeingTypes: 'MentalWellBeingTypes',
+  Game02ProgressLevel10: 'Game02ProgressLevel10',
+  Game02ProgressLevel09: 'Game02ProgressLevel09',
+  Game02ProgressLevel08: 'Game02ProgressLevel08',
+  Game02ProgressLevel07: 'Game02ProgressLevel07',
 };
 

src/navigations/GameNavigator.js

@@ -42,6 +42,13 @@ import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04'
 import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05';
 import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06';
 import MentalWellBeingTypes from '../screens/home/game/MentalWellBeingTypes';
+import Game02ProgressLevel07 from '../screens/home/game/game02/progress/Level07';
+import Game02ProgressLevel08 from '../screens/home/game/game02/progress/Level08';
+import Game02ProgressLevel09 from '../screens/home/game/game02/progress/Level09';
+import Game02ProgressLevel10 from '../screens/home/game/game02/progress/Level10';
+import Game02Level10 from '../screens/home/game/game02/level10';
+import Game02Level09 from '../screens/home/game/game02/level09';
+import Game02Level08 from '../screens/home/game/game02/level08';
 const Stack = createStackNavigator();
 
 function GameNavigator() {
@@ -106,6 +113,9 @@ function GameNavigator() {
       <Stack.Screen name={ROUTES.Game02Level05} component={Game02Level05} />
       <Stack.Screen name={ROUTES.Game02Level06} component={Game02Level06} />
       <Stack.Screen name={ROUTES.Game02Level07} component={Game02Level07} />
+      <Stack.Screen name={ROUTES.Game02Level08} component={Game02Level08} />
+      <Stack.Screen name={ROUTES.Game02Level09} component={Game02Level09} />
+      <Stack.Screen name={ROUTES.Game02Level10} component={Game02Level10} />
       <Stack.Screen
         name={ROUTES.GAME_MAIN_DETAILS}
         component={MainDetailsForm}
@@ -150,6 +160,22 @@ function GameNavigator() {
         name={ROUTES.Game02ProgressLevel06}
         component={Game02ProgressLevel06}
       />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel07}
+        component={Game02ProgressLevel07}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel08}
+        component={Game02ProgressLevel08}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel09}
+        component={Game02ProgressLevel09}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel10}
+        component={Game02ProgressLevel10}
+      />
     </Stack.Navigator>
   );
 }

src/screens/auth/ProfilePage.js

 import React, {useState, useEffect} from 'react';
-import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {COLORS, IMGS, ROUTES} from '../../constants';
 import LinearGradient from 'react-native-linear-gradient';
-import {Formik} from 'formik';
-// import {getUserDetails} from '../../services/auth/index';
+import {getUserDetails} from '../../services/auth/index';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const UserProfile = ({navigation}) => {
   const [userDetails, setUserDetails] = useState(null);
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
 
-  // const handleFetchDetails = async () => {
-  //   try {
-  //     const email = 'user@example.com'; // This should be dynamically sourced, perhaps from user state or AsyncStorage
-  //     const details = await getUserDetails(email);
-  //     setUserDetails(details.data);
-  //   } catch (err) {
-  //     setError('Failed to fetch details');
-  //     console.error(err);
-  //   }
-  // };
+  const handleFetchDetails = async () => {
+    try {
+      setLoading(true);
+      const email = await AsyncStorage.getItem('userEmail');
+      console.log(email, 'email___1');
+      if (!email) {
+        setError('Email not found');
+        setLoading(false);
+        return; // Early exit if email is not found in storage
+      }
 
-  console.log(userDetails, 'userDetails');
+      const details = await getUserDetails(); // getUserDetails now internally gets the email from AsyncStorage
+      if (details && details.success) {
+        setUserDetails(details.data);
+      } else {
+        setError('Failed to fetch details');
+      }
+      setLoading(false);
+    } catch (err) {
+      setError('Failed to fetch details');
+      console.error('Error fetching user details:', err);
+      setLoading(false);
+    }
+  };
+
+  console.log(userDetails, 'userDetails_____2');
+
+  useEffect(() => {
+    handleFetchDetails();
+  }, []);
+
+  if (loading) {
+    return (
+      <View style={styles.loaderContainer}>
+        <ActivityIndicator size={150} color={COLORS.dark_purple} />
+      </View>
+    );
+  }
 
-  // useEffect(() => {
-  //   handleFetchDetails();
-  // }, []);
   return (
     <LinearGradient
       style={styles.container}
@@ -79,6 +110,12 @@ const UserProfile = ({navigation}) => {
 };
 
 const styles = StyleSheet.create({
+  loaderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
+  },
   container: {
     flex: 1,
     backgroundColor: COLORS.pastalBlue,

src/screens/home/game/ChooseGame.js

@@ -28,16 +28,16 @@ const ChooseGame = ({navigation, route}) => {
             9: ROUTES.GameLevel4,
           }
         : {
-            0: ROUTES.PuzzleGame02Level03,
-            1: ROUTES.Game02Level01,
-            2: ROUTES.CravingsPuzzleGame02Level02,
-            3: ROUTES.PuzzleGame02Level03,
-            4: ROUTES.Game02Level04,
-            5: ROUTES.Game02Level05,
-            6: ROUTES.Game02Level06,
-            7: ROUTES.Game02Level07,
-            8: ROUTES.Game02Level04,
-            9: ROUTES.Game02Level06,
+            0: ROUTES.Game02Level01,
+            1: ROUTES.CravingsPuzzleGame02Level02,
+            2: ROUTES.PuzzleGame02Level03,
+            3: ROUTES.Game02Level04,
+            4: ROUTES.Game02Level05,
+            5: ROUTES.Game02Level06,
+            6: ROUTES.Game02Level07,
+            7: ROUTES.Game02Level08,
+            8: ROUTES.Game02Level09,
+            9: ROUTES.Game02Level10,
           };
 
     const routeName = gameLevelRoutes[predictedGameLevel];

src/screens/home/game/game02/level01.js

@@ -164,7 +164,7 @@ const Game02Level01 = ({navigation, route}) => {
           [
             {
               text: 'OK',
-              onPress: () => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS),
+              onPress: () => navigation.navigate(ROUTES.Game02Level01),
             },
           ]);
         } else if (healthyCost + item.cost > 2000) {  // ensure the current cost is added to total for the check
@@ -172,7 +172,7 @@ const Game02Level01 = ({navigation, route}) => {
           [
             {
               text: 'OK',
-              onPress: () => navigation.navigate(ROUTES.Game02ProgressLevel03),
+              onPress: () => navigation.navigate(ROUTES.Game02ProgressLevel07),
             },
           ]);
           backgroundMusic.current.setVolume(0.0);

src/screens/home/game/game02/level02.js

@@ -99,7 +99,7 @@ const CravingsPuzzleGame02Level02 = ({navigation}) => {
         Alert.alert('Game lost!', 'Choose essential items!', [
           {
             text: 'OK',
-            onPress: () => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS),
+            onPress: () => navigation.navigate(ROUTES.CravingsPuzzleGame02Level02),
           },
         ]);
       } else if (healthyCost + item.cost > 2000) {

src/screens/home/game/game02/level03.js

@@ -158,7 +158,7 @@ const PuzzleGame02Level03 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.Game02ProgressLevel01);
+            navigation.navigate(ROUTES.Game02ProgressLevel10);
           },
         },
       ]);

src/screens/home/game/game02/level04.js

@@ -108,7 +108,7 @@ const Game02Level04 = ({navigation}) => {
             {
               text: 'OK',
               onPress: () => {
-                navigation.navigate(ROUTES.Game02ProgressLevel02);
+                navigation.navigate(ROUTES.Game02ProgressLevel09);
                 backgroundMusic.current.setVolume(0.0);
               },
             },
@@ -125,7 +125,7 @@ const Game02Level04 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            navigation.navigate(ROUTES.Game02Level04);
           },
         },
       ]);

src/screens/home/game/game02/level05.js

@@ -107,7 +107,7 @@ const Game02Level05 = ({navigation}) => {
             {
               text: 'OK',
               onPress: () => {
-                navigation.navigate(ROUTES.Game02ProgressLevel04);
+                navigation.navigate(ROUTES.Game02ProgressLevel08);
                 backgroundMusic.current.setVolume(0.0);
               },
             },
@@ -127,7 +127,7 @@ const Game02Level05 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            navigation.navigate(ROUTES.Game02Level05);
           },
         },
       ]);

src/screens/home/game/game02/level06.js

@@ -126,7 +126,7 @@ const Game02Level06 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            navigation.navigate(ROUTES.Game02Level06);
           },
         },
       ]);

src/screens/home/game/game02/level07.js

@@ -111,7 +111,7 @@ const Game02Level07 = ({navigation}) => {
             {
               text: 'OK',
               onPress: () => {
-                navigation.navigate(ROUTES.Game02ProgressLevel02);
+                navigation.navigate(ROUTES.Game02ProgressLevel03);
                 backgroundMusic.current.setVolume(0.0);
               },
             },

src/screens/home/game/game02/level08.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 9;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level08 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+    {x: 5, y: 3, type: 'babyItem', image: IMGS.play_pen},
+    {x: 7, y: 1, type: 'babyItem', image: IMGS.milk_bottle},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29},
+    {x: 5, y: 4, type: 'ladyItem', image: IMGS.lip_stick},
+    {x: 1, y: 7, type: 'ladyItem', image: IMGS.ring},
+  ]);
+
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_a.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Remove the found baby item from the array to prevent recounting
+        const newBabyItems = [...babyItems];
+        newBabyItems.splice(foundBabyItemIndex, 1);
+        setBabyItems(newBabyItems);
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length >= 4) {
+          // Only show the congratulations message when the last item is collected
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel02);
+                backgroundMusic.current.setVolume(0.0);
+              },
+            },
+          ]);
+        } else {
+          // This alert is for collecting but not finishing the game
+          Alert.alert('Good job!', 'You found a baby item!');
+        }
+
+        return updatedItems;
+      });
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 360,
+    height: 400,
+    borderWidth: 2,
+    marginBottom: 5,
+    backgroundColor: '#834333',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    borderRadius: 5,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 130,
+  },
+  buttonRight: {
+    right: 130,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level08;

src/screens/home/game/game02/level09.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 10;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level09 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.milk_bottle},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.play_pen},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+    {x: 9, y: 5, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 2, y: 4, type: 'babyItem', image: IMGS.game_img_17},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.ring},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 2, y: 7, type: 'ladyItem', image: IMGS.lip_stick},
+  ]);
+
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_f.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Remove the found baby item from the array to prevent recounting
+        const newBabyItems = [...babyItems];
+        newBabyItems.splice(foundBabyItemIndex, 1);
+        setBabyItems(newBabyItems);
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length >= 4) {
+          // Only show the congratulations message when the last item is collected
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel04);
+                backgroundMusic.current.setVolume(0.0);
+              },
+            },
+          ]);
+        } else {
+          // This alert is for collecting but not finishing the game
+          Alert.alert('Good job!', 'You found a baby item!');
+        }
+
+        return updatedItems;
+      });
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 360,
+    height: 400,
+    borderWidth: 2,
+    marginBottom: 5,
+    backgroundColor: '#097969',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    borderRadius: 5,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 130,
+  },
+  buttonRight: {
+    right: 130,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level09;

src/screens/home/game/game02/level10.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 10;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level10 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+    {x: 5, y: 8, type: 'babyItem', image: IMGS.milk_bottle},
+    {x: 2, y: 9, type: 'babyItem', image: IMGS.play_pen},
+    {x: 10, y: 2, type: 'babyItem', image: IMGS.high_chair},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 7, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 9, y: 5, type: 'ladyItem', image: IMGS.game_img_29},
+    {x: 3, y: 5, type: 'ladyItem', image: IMGS.lip_stick},
+    {x: 8, y: 8, type: 'ladyItem', image: IMGS.ring},
+  ]);
+
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_e.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Remove the found baby item from the array to prevent recounting
+        const newBabyItems = [...babyItems];
+        newBabyItems.splice(foundBabyItemIndex, 1);
+        setBabyItems(newBabyItems);
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length >= 4) {
+          // Only show the congratulations message when the last item is collected
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel01);
+                backgroundMusic.current.setVolume(0.0);
+              },
+            },
+          ]);
+        } else {
+          // This alert is for collecting but not finishing the game
+          Alert.alert('Good job!', 'You found a baby item!');
+        }
+
+        return updatedItems;
+      });
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 360,
+    height: 400,
+    borderWidth: 2,
+    marginBottom: 5,
+    backgroundColor: '#8B4000',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    borderRadius: 5,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 130,
+  },
+  buttonRight: {
+    right: 130,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level10;

src/screens/home/game/game02/progress/Level06.js

@@ -26,12 +26,12 @@ const Game02ProgressLevel06 = ({route, navigation}) => {
         </View>
         <View style={styles.diamondContainer}>
           <View style={styles.innerCircle}>
-            <Text style={styles.scoreText}>7</Text>
+            <Text style={styles.scoreText}>6</Text>
           </View>
         </View>
         <TouchableOpacity
           style={styles.button}
-          onPress={() => navigation.navigate(ROUTES.Game02Level07)}>
+          onPress={() => navigation.navigate(ROUTES.Game02Level06)}>
           <Text style={styles.buttonText}>Choose a Game</Text>
         </TouchableOpacity>
       </View>

src/screens/home/game/game02/progress/Level07.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel07 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>7</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level07)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel07;

src/screens/home/game/game02/progress/Level08.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel08 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>8</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level08)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel08;

src/screens/home/game/game02/progress/Level09.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel09 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>9</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level09)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel09;

src/screens/home/game/game02/progress/Level10.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel10 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>10</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level10)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel10;

src/services/auth/index.js

@@ -12,6 +12,8 @@ export let signin = async (email, password) => {
     console.log('data1', value.data);
     if (value.data.success === true) {
       await AsyncStorage.setItem('userData', JSON.stringify(value.data.data));
+      // After successful login
+      await AsyncStorage.setItem('userEmail', value.data.data.email);
       console.log('data');
     }
     return value;
@@ -33,6 +35,7 @@ export let signup = async (name, password, email, age, week) => {
     console.log('data1', value.data);
     if (value.data.success === true) {
       await AsyncStorage.setItem('userData', JSON.stringify(value.data.data));
+      await AsyncStorage.setItem('userEmail', email);
       console.log('data');
     }
     return value;
@@ -42,27 +45,31 @@ export let signup = async (name, password, email, age, week) => {
 };
 
 // getUserDetails API Call
-// export const getUserDetails = async email => {
-//   try {
-//     const token = await AsyncStorage.getItem('userToken'); // Assuming you store token after login
-//     let response = await axios.get(
-//       `${BASE_PATH}/user-details?email=${encodeURIComponent(email)}`,
-//       {
-//         headers: {
-//           Authorization: `Bearer ${token}`, // Assuming you use Bearer token for authentication
-//         },
-//       },
-//     );
-//     console.log('userDetails', response.data);
-//     if (response.data.success === true) {
-//       await AsyncStorage.setItem(
-//         'userDetails',
-//         JSON.stringify(response.data.data),
-//       );
-//     }
-//     return response.data;
-//   } catch (error) {
-//     console.error('Failed to fetch user details', error);
-//     throw error; // You might want to handle this differently depending on your error handling strategy
-//   }
-// };
+export const getUserDetails = async () => {
+  try {
+    const email = await AsyncStorage.getItem('userEmail');
+    console.log(email, 'email');
+    if (!email) throw new Error('Email not found in storage');
+
+    const token = await AsyncStorage.getItem('userToken'); // Assuming you store token after login
+    let response = await axios.post(
+      BASE_PATH + `/user-details?email=${encodeURIComponent(email)}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`, // Assuming you use Bearer token for authentication
+        },
+      },
+    );
+    console.log('userDetails___1', response.data);
+    if (response.data.success === true) {
+      await AsyncStorage.setItem(
+        'userDetails',
+        JSON.stringify(response.data.data),
+      );
+    }
+    return response.data;
+  } catch (error) {
+    console.error('Failed to fetch user details', error);
+    throw error; // You might want to handle this differently depending on your error handling strategy
+  }
+};

src/services/games/index.js

 import axios from 'axios';
 // const BASE_PATH = 'http://10.0.2.2:8000';
 const BASE_PATH = 'http://172.104.34.100:8000';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 //initialize payment API Call
 export let gameLevelPredict = async (