change UIs

src/screens/home/game/ChooseGame.js

 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import {
-  ScrollView,
   ImageBackground,
-  Dimensions,
   Text,
   View,
   StyleSheet,
   TouchableOpacity,
 } from 'react-native';
-import {COLORS, IMGS, ROUTES} from '../../../constants';
+import {IMGS, ROUTES} from '../../../constants';
 
 const ChooseGame = ({navigation, route}) => {
   const {predictedGameLevel} = route.params;
@@ -134,7 +132,6 @@ const styles = StyleSheet.create({
   brandViewText: {
     color: '#FFFFFF',
     fontSize: 40,
-    // fontWeight: 'bold',
   },
   bottomView: {
     flex: 1.5,

src/screens/home/game/GameLevelPage.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';
+import {COLORS, ROUTES} from '../../../constants';
 
 const GameLevelPage = ({route, navigation}) => {
   const {predictedGameLevel} = route.params;
@@ -27,17 +27,28 @@ const GameLevelPage = ({route, navigation}) => {
         </View>
         <View style={styles.diamondContainer}>
           <View style={styles.innerCircle}>
-            <Text style={styles.scoreText}>
-              {predictedGameLevel === 0 ? '2' : predictedGameLevel}
+            <Text
+              style={{
+                color: '#ffffff',
+                fontSize: predictedGameLevel === 0 ? 20 : 100,
+                fontWeight: 'bold',
+              }}>
+              {predictedGameLevel === 0 ? 'No Depression' : predictedGameLevel}
             </Text>
           </View>
         </View>
         <TouchableOpacity
           style={styles.button}
-          onPress={() =>
-            navigation.navigate(ROUTES.CHOOSE_GAME, {predictedGameLevel})
-          }>
-          <Text style={styles.buttonText}>Choose a Game</Text>
+          onPress={() => {
+            if (predictedGameLevel === 0) {
+              navigation.navigate(ROUTES.GAME_WELCOME);
+            } else {
+              navigation.navigate(ROUTES.CHOOSE_GAME, {predictedGameLevel});
+            }
+          }}>
+          <Text style={styles.buttonText}>
+            {predictedGameLevel === 0 ? 'Exit' : 'Choose a Game'}
+          </Text>
         </TouchableOpacity>
       </View>
     </LinearGradient>

src/screens/home/game/MainDetailsForm.js

@@ -9,6 +9,7 @@ import {
   ScrollView,
 } from 'react-native';
 import {ROUTES, COLORS} from '../../../constants';
+import LinearGradient from 'react-native-linear-gradient';
 
 const MainDetailsForm = ({navigation}) => {
   const [maritalStatus, setMaritalStatus] = useState('single');
@@ -64,7 +65,13 @@ const MainDetailsForm = ({navigation}) => {
   return (
     <>
       <ScrollView style={styles.container}>
-        <View style={styles.bottomView}>
+        <LinearGradient
+          style={{
+            flex: 1,
+            width: '100%',
+            height: '100%',
+          }}
+          colors={[COLORS.light_purple, COLORS.white, COLORS.rose]}>
           <View style={{padding: 25}}>
             <View
               style={{
@@ -86,39 +93,6 @@ const MainDetailsForm = ({navigation}) => {
                 Please answer for this questions
               </Text>
             </View>
-            {/* <View style={{marginTop: 5}}>
-              <Text
-                semi
-                style={{
-                  fontSize: 15,
-                  fontWeight: 'bold',
-                  marginTop: 10,
-                  color: COLORS.black,
-                }}>
-                Your Name:
-              </Text>
-              <TextInput
-                style={{
-                  backgroundColor: '#ffffff',
-                  borderRadius: 15,
-                  height: 48,
-                  marginBottom: 10,
-                  marginTop: 10,
-                  shadowColor: '#000',
-                  shadowOffset: {
-                    width: 0,
-                    height: 8,
-                  },
-                  shadowOpacity: 0.46,
-                  shadowRadius: 11.14,
-                  fontSize: 13,
-                  color: COLORS.black,
-                  elevation: 17,
-                }}
-                // value={value}
-                // onChangeText={(text) => setValue(text)}
-              />
-            </View> */}
             <View style={{marginTop: 15}}>
               <Text
                 semi
@@ -246,7 +220,7 @@ const MainDetailsForm = ({navigation}) => {
             <View style={{marginTop: 55}}>
               <TouchableOpacity
                 style={{
-                  backgroundColor: COLORS.normal_purple,
+                  backgroundColor: COLORS.pastal_blue,
                   height: 50,
                   marginBottom: 20,
                   justifyContent: 'center',
@@ -281,13 +255,14 @@ const MainDetailsForm = ({navigation}) => {
                   style={{
                     color: COLORS.white,
                     fontSize: 20,
+                    fontWeight: 700,
                   }}>
                   Next
                 </Text>
               </TouchableOpacity>
             </View>
           </View>
-        </View>
+        </LinearGradient>
       </ScrollView>
     </>
   );

src/screens/home/game/MainDetailsFormInSinhala.js

@@ -9,6 +9,7 @@ import {
   ScrollView,
 } from 'react-native';
 import {ROUTES, COLORS} from '../../../constants';
+import LinearGradient from 'react-native-linear-gradient';
 
 const MainDetailsFormInSinhala = ({navigation}) => {
   const [maritalStatus, setMaritalStatus] = useState('single');
@@ -64,7 +65,13 @@ const MainDetailsFormInSinhala = ({navigation}) => {
   return (
     <>
       <ScrollView style={styles.container}>
-        <View style={styles.bottomView}>
+        <LinearGradient
+          style={{
+            flex: 1,
+            width: '100%',
+            height: '100%',
+          }}
+          colors={[COLORS.light_purple, COLORS.white, COLORS.rose]}>
           <View style={{padding: 25}}>
             <View
               style={{
@@ -86,39 +93,6 @@ const MainDetailsFormInSinhala = ({navigation}) => {
                 කරුණාකර මෙම ප්‍රශ්න සඳහා පිළිතුරු සපයන්න
               </Text>
             </View>
-            {/* <View style={{marginTop: 5}}>
-              <Text
-                semi
-                style={{
-                  fontSize: 15,
-                  fontWeight: 'bold',
-                  marginTop: 10,
-                  color: COLORS.black,
-                }}>
-                ඔබගේ නම:
-              </Text>
-              <TextInput
-                style={{
-                  backgroundColor: '#ffffff',
-                  borderRadius: 15,
-                  height: 48,
-                  marginBottom: 10,
-                  marginTop: 10,
-                  shadowColor: '#000',
-                  shadowOffset: {
-                    width: 0,
-                    height: 8,
-                  },
-                  shadowOpacity: 0.46,
-                  shadowRadius: 11.14,
-                  fontSize: 13,
-                  color: COLORS.black,
-                  elevation: 17,
-                }}
-                // value={value}
-                // onChangeText={(text) => setValue(text)}
-              />
-            </View> */}
             <View style={{marginTop: 15}}>
               <Text
                 semi
@@ -247,7 +221,7 @@ const MainDetailsFormInSinhala = ({navigation}) => {
             <View style={{marginTop: 35}}>
               <TouchableOpacity
                 style={{
-                  backgroundColor: COLORS.normal_purple,
+                  backgroundColor: COLORS.pastal_blue,
                   height: 50,
                   marginBottom: 10,
                   justifyContent: 'center',
@@ -288,7 +262,7 @@ const MainDetailsFormInSinhala = ({navigation}) => {
               </TouchableOpacity>
             </View>
           </View>
-        </View>
+        </LinearGradient>
       </ScrollView>
     </>
   );
@@ -304,8 +278,6 @@ const styles = StyleSheet.create({
     flex: 1,
     height: 860,
     backgroundColor: COLORS.purple,
-    // borderTopStartRadius: 30,
-    // borderTopEndRadius: 30,
   },
   radioContainer: {
     flexDirection: 'row',

src/screens/home/game/QuestionsInEnglish.js

@@ -4,13 +4,12 @@ import {
   View,
   StyleSheet,
   TouchableOpacity,
-  ScrollView,
   Text,
   ActivityIndicator,
 } from 'react-native';
 import axios from 'axios';
 import {useNavigation} from '@react-navigation/native';
-import {COLORS, IMGS, ROUTES} from '../../../constants';
+import {COLORS, ROUTES} from '../../../constants';
 import RadioButton from '../../../components/RadioButton';
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -46,18 +45,16 @@ const QuestionInEnglishPage = ({navigation, route}) => {
 
   const loadData = () => {
     axios
-      // .get('http://192.168.8.161:8070/api/quiz/all_english')
       .get('http://16.16.97.48/api/quiz/all_english')
       .then(response => {
-        // console.log(response.data);
         setQuestions(response.data.data);
         setIsLoading(false);
       })
       .catch(error => {
         console.error(error);
         2;
-
-        setIsLoading(false); // Ensure loading is set to false even if there's an error
+        // Ensure loading is set to false even if there's an error
+        setIsLoading(false);
       });
   };
   const handleNext = () => {
@@ -75,8 +72,6 @@ const QuestionInEnglishPage = ({navigation, route}) => {
   const isOnFirstQuestions = questionIndex === 0;
   const isOnLastQuestions = questionIndex >= questions.length - 2;
 
-  const appNavigation = useNavigation();
-
   // Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter
   const handleNavigationToQuizScore = () => {
     // Create a new object that includes all the formData fields and adds the totalScore as depression_level
@@ -117,7 +112,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
                   }}>
                   <Text
                     style={{
-                      color: '#DE3163',
+                      color: COLORS.pastal_blue,
                       fontSize: 22,
                       fontWeight: 'bold',
                     }}>
@@ -127,7 +122,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
                 <View
                   style={{
                     backgroundColor: 'white',
-                    borderColor: '#FFC107', // Add this line to set the border color
+                    borderColor: COLORS.pink,
                     borderWidth: 3,
                     borderRadius: 17,
                     marginTop: 5,
@@ -150,8 +145,8 @@ const QuestionInEnglishPage = ({navigation, route}) => {
                   </View>
                   <View
                     style={{
-                      marginTop: 30,
-                      gap: 2,
+                      marginTop: 10,
+                      gap: 3,
                       marginBottom: 5,
                       color: 'black',
                       marginRight: 25,
@@ -205,13 +200,13 @@ const QuestionInEnglishPage = ({navigation, route}) => {
             style={{
               flexDirection: 'row',
               justifyContent: 'space-between',
-              marginTop: 25,
-              marginBottom: 50,
+              marginTop: 50,
+              marginBottom: 30,
             }}>
             {!isOnFirstQuestions && (
               <TouchableOpacity
                 style={{
-                  backgroundColor: '#DE3163',
+                  backgroundColor: COLORS.pastal_blue,
                   height: 50,
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -237,7 +232,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
             {!isOnLastQuestions && (
               <TouchableOpacity
                 style={{
-                  backgroundColor: '#DE3163',
+                  backgroundColor: COLORS.pastal_blue,
                   height: 50,
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -263,7 +258,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
             {isOnLastQuestions && (
               <TouchableOpacity
                 style={{
-                  backgroundColor: '#116A7B',
+                  backgroundColor: '#DE3163',
                   height: 50,
                   justifyContent: 'center',
                   alignItems: 'center',

src/screens/home/game/QuestionsInShinhala.js

@@ -4,13 +4,12 @@ import {
   View,
   StyleSheet,
   TouchableOpacity,
-  ScrollView,
   Text,
   ActivityIndicator,
 } from 'react-native';
 import axios from 'axios';
 import {useNavigation} from '@react-navigation/native';
-import {COLORS, IMGS, ROUTES} from '../../../constants';
+import {COLORS, ROUTES} from '../../../constants';
 import RadioButton from '../../../components/RadioButton';
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -46,7 +45,6 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
 
   const loadData = () => {
     axios
-      // .get('http://192.168.8.161:8070/api/quiz/all_sinhala')
       .get('http://16.16.97.48/api/quiz/all_sinhala')
       .then(response => {
         setQuestions(response.data.data);
@@ -72,8 +70,6 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
   const isOnFirstQuestions = questionIndex === 0;
   const isOnLastQuestions = questionIndex >= questions.length - 2;
 
-  const appNavigation = useNavigation();
-
   // Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter
   const handleNavigationToQuizScore = () => {
     const updatedFormData = {
@@ -113,7 +109,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
                   }}>
                   <Text
                     style={{
-                      color: '#DE3163',
+                      color: COLORS.pastal_blue,
                       fontSize: 22,
                       fontWeight: 'bold',
                     }}>
@@ -123,7 +119,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
                 <View
                   style={{
                     backgroundColor: 'white',
-                    borderColor: '#FFC107', // Add this line to set the border color
+                    borderColor: COLORS.pink,
                     borderWidth: 3,
                     borderRadius: 17,
                     marginTop: 5,
@@ -146,9 +142,9 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
                   </View>
                   <View
                     style={{
-                      marginTop: 30,
-                      gap: 2,
-                      marginBottom: 5,
+                      marginTop: 1,
+                      gap: 3,
+                      marginBottom: 1,
                       color: 'black',
                       marginRight: 25,
                     }}>
@@ -201,13 +197,13 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
             style={{
               flexDirection: 'row',
               justifyContent: 'space-between',
-              marginTop: 25,
-              marginBottom: 50,
+              marginTop: 50,
+              marginBottom: 30,
             }}>
             {!isOnFirstQuestions && (
               <TouchableOpacity
                 style={{
-                  backgroundColor: '#DE3163',
+                  backgroundColor: COLORS.pastal_blue,
                   height: 50,
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -233,7 +229,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
             {!isOnLastQuestions && (
               <TouchableOpacity
                 style={{
-                  backgroundColor: '#DE3163',
+                  backgroundColor: COLORS.pastal_blue,
                   height: 50,
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -259,7 +255,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
             {isOnLastQuestions && (
               <TouchableOpacity
                 style={{
-                  backgroundColor: '#116A7B',
+                  backgroundColor: '#DE3163',
                   height: 50,
                   justifyContent: 'center',
                   alignItems: 'center',

src/screens/home/game/QuizOptions.js

 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {
-  ScrollView,
-  ImageBackground,
-  Text,
-  Image,
-  View,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
-import {COLORS, IMGS, ROUTES} from '../../../constants';
+import {Text, Image, View, StyleSheet, TouchableOpacity} from 'react-native';
+import {COLORS, ROUTES} from '../../../constants';
 
 const QuizOptionsPage = ({navigation}) => {
   return (

src/screens/home/game/QuizScore.js

@@ -8,11 +8,9 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import {COLORS, IMGS, ROUTES} from '../../../constants';
-import axios from 'axios';
 import {gameLevelPredict} from '../../../services/games';
 
 const QuizScoreDisplayPage = ({route, navigation}) => {
-  //   const {score} = route.params;
   const {formData} = route.params || {
     formData: {},
   };
@@ -43,10 +41,10 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
     musicFields[musicKeys[randomIndex]] = 1;
     try {
       const response = await gameLevelPredict(
-        formData.age, // Assuming formData contains 'age'
-        formData.depression_level, // Passed from previous screen
-        formData.previous_child_birth_experiences, // Assuming formData contains 'previous_child_birth_experiences'
-        formData.marital_status_divorced, // Assuming formData contains boolean values for these fields
+        formData.age,
+        formData.depression_level,
+        formData.previous_child_birth_experiences,
+        formData.marital_status_divorced,
         formData.marital_status_married,
         formData.marital_status_single,
         formData.family_background_bad,
@@ -99,7 +97,6 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
               <TouchableOpacity
                 style={styles.button}
                 onPress={handleChooseGamePress}>
-                {/* onPress={() => navigation.navigate(ROUTES.Level01Instructions)}> */}
                 <Text bold medium center style={styles.buttonText}>
                   Check Your Gaming Level
                 </Text>

src/screens/home/game/WelcomeGame.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import {Image, TouchableOpacity, Text, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import Button from '../../../components/Button';
 import {COLORS, IMGS, ROUTES} from '../../../constants';
 
 const WelcomePageGame = ({navigation}) => {

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

@@ -13,6 +13,17 @@ import Sound from 'react-native-sound';
 // A simple array of names, meanings, and origins for demonstration
 const namesData = [
   {name: 'Yasas', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Sama', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Dilshan', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Poorna', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Parami', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Randi', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Isura', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Devin', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Lili', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Ann', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Amara', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Kisuri', meaning: 'Fame, Glory', origin: 'Sinhalese'},
   {name: 'Ashan', meaning: 'Eternal, Immortal', origin: 'Sinhalese'},
   {name: 'Nirmala', meaning: 'Pure, Clean', origin: 'Sinhalese'},
   {name: 'Tharaka', meaning: 'Star', origin: 'Sinhalese'},

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

@@ -92,26 +92,34 @@ const Game02Level04 = ({navigation}) => {
     const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
 
     if (foundBabyItemIndex !== -1) {
-      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
-      Alert.alert('Good job!', 'You found a baby item!');
+      // Update the collected items and perform checks inside the update callback
+      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 two baby items have been collected
-      if (collectedItems.length + 1 >= 2) {
-        Alert.alert('Good job!', 'You found a baby item!', [
+        // Check if the last baby item has been collected
+        if (updatedItems.length >= 2) {
+          // This is the last item; show only the congratulations message
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
             {
               text: 'OK',
               onPress: () => {
                 navigation.navigate(ROUTES.Game02ProgressLevel02);
+                backgroundMusic.current.setVolume(0.0);
               },
             },
           ]);
-        backgroundMusic.current.setVolume(0.0);
+        } else {
+          // Not the last item, show the generic good job message
+          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!", [
         {
@@ -151,7 +159,11 @@ const Game02Level04 = ({navigation}) => {
           <Text
             medium
             center
-            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            style={{
+              color: 'black',
+              fontSize: 30,
+              fontWeight: 'bold',
+            }}>
             {isMuted ? '🔇' : '🔊'}
           </Text>
         </TouchableOpacity>

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

@@ -29,7 +29,6 @@ const Game02Level05 = ({navigation}) => {
     {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
   ]);
 
-  const [selectedCandy, setSelectedCandy] = useState(null);
   const backgroundMusic = useRef(null);
 
   const [isMuted, setIsMuted] = useState(false);
@@ -93,26 +92,36 @@ const Game02Level05 = ({navigation}) => {
     const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
 
     if (foundBabyItemIndex !== -1) {
-      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
-      Alert.alert('Good job!', 'You found a baby item!');
-
-      // Remove the found baby item from the array to prevent recounting
+      // Prepare the updated list of baby items by removing the found item
       const newBabyItems = [...babyItems];
       newBabyItems.splice(foundBabyItemIndex, 1);
-      setBabyItems(newBabyItems);
 
-      // Check if two baby items have been collected
-      if (collectedItems.length + 1 >= 3) {
-        Alert.alert('Good job!', 'You found a baby item!', [
+      // Update the collected items state
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length === 3) {
+          // Show only 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);
               },
             },
           ]);
-        backgroundMusic.current.setVolume(0.0);
+        } else {
+          // Show this alert if there are still items left to collect
+          Alert.alert('Good job!', 'You found a baby item!');
         }
+
+        return updatedItems;
+      });
+
+      // Update the baby items array state
+      setBabyItems(newBabyItems);
     } else if (foundLadyItem) {
       Alert.alert('Oops!', "This is a lady's item. Try again!", [
         {
@@ -151,7 +160,11 @@ const Game02Level05 = ({navigation}) => {
           <Text
             medium
             center
-            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            style={{
+              color: 'black',
+              fontSize: 30,
+              fontWeight: 'bold',
+            }}>
             {isMuted ? '🔇' : '🔊'}
           </Text>
         </TouchableOpacity>

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

@@ -32,7 +32,6 @@ const Game02Level06 = ({navigation}) => {
     {x: 2, y: 5, type: 'ladyItem', image: IMGS.game_img_29},
   ]);
 
-  const [selectedCandy, setSelectedCandy] = useState(null);
   const backgroundMusic = useRef(null);
 
   const [isMuted, setIsMuted] = useState(false);
@@ -50,8 +49,8 @@ const Game02Level06 = ({navigation}) => {
         backgroundMusic.current.setNumberOfLoops(-1);
       },
     );
-
-    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+    // Release the audio player resource when the component unmounts
+    return () => backgroundMusic.current.release();
   }, []);
 
   const toggleMute = () => {
@@ -96,17 +95,18 @@ const Game02Level06 = ({navigation}) => {
     const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
 
     if (foundBabyItemIndex !== -1) {
-      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
-      Alert.alert('Good job!', 'You found a baby item!');
-
       // Remove the found baby item from the array to prevent recounting
       const newBabyItems = [...babyItems];
       newBabyItems.splice(foundBabyItemIndex, 1);
       setBabyItems(newBabyItems);
 
-      // Check if two baby items have been collected
-      if (collectedItems.length + 1 >= 4) {
-        Alert.alert('Congratulations 🥳🥳! You won the game.', [
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Check if all baby items have been collected
+        if (updatedItems.length >= 4) {
+          Alert.alert('Congratulations 🥳🥳!', 'You won the game.', [
             {
               text: 'OK',
               onPress: () => {
@@ -115,7 +115,12 @@ const Game02Level06 = ({navigation}) => {
             },
           ]);
           backgroundMusic.current.setVolume(0.0);
+        } else {
+          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!", [
         {
@@ -128,10 +133,6 @@ const Game02Level06 = ({navigation}) => {
     }
   };
 
-  const resetGame = () => {
-    setPlayerPosition({x: 0, y: 0});
-    setCollectedItems([]);
-  };
   return (
     <ImageBackground
       source={IMGS.game_img_45}

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

@@ -32,7 +32,6 @@ const Game02Level07 = ({navigation}) => {
     {x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29},
   ]);
 
-  const [selectedCandy, setSelectedCandy] = useState(null);
   const backgroundMusic = useRef(null);
 
   const [isMuted, setIsMuted] = useState(false);
@@ -89,11 +88,6 @@ const Game02Level07 = ({navigation}) => {
     checkForItem(newX, newY);
   };
 
-  const resetGame = () => {
-    setPlayerPosition({x: 0, y: 0});
-    setCollectedItems([]);
-  };
-
   const checkForItem = (x, y) => {
     const foundBabyItemIndex = babyItems.findIndex(
       item => item.x === x && item.y === y,
@@ -101,33 +95,41 @@ const Game02Level07 = ({navigation}) => {
     const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
 
     if (foundBabyItemIndex !== -1) {
-      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
-      Alert.alert('Good job!', 'You found a baby item!');
+      // 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 two baby items have been collected
-      if (collectedItems.length + 1 >= 4) {
-        Alert.alert('Congratulations 🥳🥳! You won the game.', [
+        // 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);
               },
             },
           ]);
-        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);
-          },
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
         },
       ]);
     }