game UI implementation

src/components/RadioButton.js

+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+
+const RadioButton = ({label, selected, onPress, textColor}) => (
+  <TouchableOpacity onPress={onPress}>
+    <View style={{flexDirection: 'row', alignItems: 'center'}}>
+      <View
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: selected ? '#0047AB' : 'gray',
+          marginRight: 10,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        {selected && (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              backgroundColor: 'black',
+            }}
+          />
+        )}
+      </View>
+      <Text
+        style={{
+          color: '#0047AB',
+          fontSize: 15,
+          fontWeight: 'bold',
+          color: textColor || '#000',
+        }}>
+        {label}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);
+
+export default RadioButton;

src/constants/imgs.js

@@ -5,4 +5,52 @@ export default {
   ex_2: require('../assets/ex_2.jpg'),
   ex_3: require('../assets/ex_3.jpg'),
   ex_4: require('../assets/ex_4.jpg'),
+
+
+  //games
+  game_img_1: require('../assets/game_img_1.png'),
+  game_img_2: require('../assets/game_img_2.png'),
+  game_img_3: require('../assets/Game01.jpg'),
+  game_img_4: require('../assets/Game02.jpg'),
+  game_img_5: require('../assets/score_background.png'),
+  game_img_6: require('../assets/gameBackground.jpg'),
+  game_img_7: require('../assets/Game02background.jpg'),
+  game_img_8: require('../assets/game03background.jpg'),
+  game_img_9: require('../assets/rockpapergame.jpeg'),
+  game_img_10: require('../assets/rock.png'),
+  game_img_11: require('../assets/paper.png'),
+  game_img_12: require('../assets/scissors.png'),
+  game_img_13: require('../assets/baby.png'),
+  game_img_14: require('../assets/cart.png'),
+  game_img_15: require('../assets/background06.jpeg'),
+  game_img_16: require('../assets/shoes.png'),
+  game_img_17: require('../assets/cloths.png'),
+  game_img_18: require('../assets/shoppingCart.png'),
+  game_img_19: require('../assets/games/Spinach.png'),
+  game_img_20: require('../assets/games/Candy.png'),
+  game_img_21: require('../assets/games/Carrot.png'),
+  game_img_22: require('../assets/games/FrenchFries.png'),
+  game_img_23: require('../assets/games/Tomato.png'),
+  game_img_24: require('../assets/games/Doughnut.png'),
+  game_img_25: require('../assets/games/Fruits.png'),
+  game_img_26: require('../assets/games/Eggs.png'),
+  game_img_27: require('../assets/games/Milk.png'),
+  game_img_28: require('../assets/games/Water.png'),
+  game_img_29: require('../assets/games/Hotdogs.png'),
+  game_img_30: require('../assets/games/Oats.png'),
+  game_img_31: require('../assets/games/level0201.png'),
+  game_img_32: require('../assets/games/level0202.png'),
+  game_img_33: require('../assets/games/level0203.png'),
+  game_img_34: require('../assets/games/level0204.png'),
+  game_img_35: require('../assets/games/level0205.png'),
+  game_img_36: require('../assets/games/level0206.png'),
+  game_img_37: require('../assets/games/level0207.png'),
+  game_img_38: require('../assets/games/level0208.png'),
+  game_img_39: require('../assets/games/level0209.png'),
+  game_img_40: require('../assets/games/level0210.png'),
+  game_img_41: require('../assets/games/level0211.png'),
+  game_img_42: require('../assets/games/level0212.png'),
+  game_img_43: require('../assets/games/baby02.png'),
+  game_img_44: require('../assets/games/game02Backgroundnew.jpeg'),
+  game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'),
 };

src/constants/routes.js

@@ -22,5 +22,49 @@ export default {
   EXERCISE_MAIN_MENU: 'Exercise_Home_Menu',
   EXERCISE_VIEW: 'Exercise_View',
   EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View',
-  EXERCISE_PROGRESS: 'Exercise_PROGRESS'
+  EXERCISE_PROGRESS: 'Exercise_PROGRESS',
+
+
+  //GAMES
+  GAME_HOME: 'Game_Home',
+  GAME_WELCOME: 'Game_Welcome',
+  GAME_FORM: 'Game_Form',
+  GAME_MAIN_MENU: 'Game_Home_Menu',
+  GAME_VIEW: 'Game_View',
+  GAME_QUIZ_OPTIONS: 'Game_Quiz_Options',
+  GAME_QUIZ_IN_ENGLISH: 'Game_Quiz_In_English',
+  GAME_QUIZ_IN_SINHALA: 'Game_Quiz_In_Sinhala',
+  GAME_MAIN_DETAILS: 'Main_Details_Form',
+  QUIZ_SCORE: 'Quiz_Score',
+  CHOOSE_GAME: 'Choose_Game',
+  Level01Instructions: 'Level01Instructions',
+  GameLevel1: 'GameLevel1',
+  GameLevel2: 'GameLevel2',
+  GameLevel3: 'GameLevel3',
+  GameLevel4: 'GameLevel4',
+  GameLevel5: 'GameLevel5',
+  GameLevel6: 'GameLevel6',
+  GameLevel0: 'GameLevel0',
+  Game02Level01: 'Game02Level01',
+  CravingsPuzzleGame02Level02: 'CravingsPuzzleGame02Level02',
+  PuzzleGame02Level03: 'PuzzleGame02Level03',
+  Game02Level04: 'Game02Level04',
+  Game02Level05: 'Game02Level05',
+  Game02Level06: 'Game02Level06',
+  Game02Level07: 'Game02Level07',
+  GameLevelPage: 'GameLevelPage',
+  MainDetailsFormInSinhala: 'MainDetailsFormInSinhala',
+  Level01: 'Level01',
+  Level02: 'Level02',
+  Level03: 'Level03',
+  Level04: 'Level04',
+  Level05: 'Level05',
+  Level06: 'Level06',
+  Game02ProgressLevel01: 'Game02ProgressLevel01',
+  Game02ProgressLevel02: 'Game02ProgressLevel02',
+  Game02ProgressLevel03: 'Game02ProgressLevel03',
+  Game02ProgressLevel04: 'Game02ProgressLevel04',
+  Game02ProgressLevel05: 'Game02ProgressLevel05',
+  Game02ProgressLevel06: 'Game02ProgressLevel06',
 };
+

src/navigations/GameNavigator.js

+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
+import HealthFormExercise from '../screens/home/exercise/HealthFormExercise';
+import MainMenuExercise from '../screens/home/exercise/MainMenuExercise';
+import ExerciseView from '../screens/home/exercise/ExerciseView';
+import {COLORS, ROUTES} from '../constants';
+import WelcomePageGame from '../screens/home/game/WelcomeGame';
+import QuizOptionsPage from '../screens/home/game/QuizOptions';
+import QuestionInEnglishPage from '../screens/home/game/QuestionsInEnglish';
+import QuestionInSinhalaPage from '../screens/home/game/QuestionsInShinhala';
+import MainDetailsForm from '../screens/home/game/MainDetailsForm';
+import QuizScoreDisplayPage from '../screens/home/game/QuizScore';
+import ChooseGame from '../screens/home/game/ChooseGame';
+import Level01InstructionsPage from '../screens/home/game/game01/Level01Instructions';
+import GameLevel1 from '../screens/home/game/game01/GameLevel1';
+import CandyCrushGameLevel02 from '../screens/home/game/game01/GameLevel2';
+import CandyCrushGameLevel03 from '../screens/home/game/game01/GameLevel3';
+import CandyCrushGameLevel04 from '../screens/home/game/game01/GameLevel04';
+import GameLevel5 from '../screens/home/game/game01/GameLevel5';
+import GameLevel6 from '../screens/home/game/game01/GameLevel6';
+import GameLevel0 from '../screens/home/game/game01/GameLevel0';
+import Game02Level01 from '../screens/home/game/game02/level01';
+import CravingsPuzzleGame02Level02 from '../screens/home/game/game02/level02';
+import PuzzleGame02Level03 from '../screens/home/game/game02/level03';
+import Game02Level04 from '../screens/home/game/game02/level04';
+import Game02Level05 from '../screens/home/game/game02/level05';
+import Game02Level06 from '../screens/home/game/game02/level06';
+import Game02Level07 from '../screens/home/game/game02/level07';
+import GameLevelPage from '../screens/home/game/GameLevelPage';
+import MainDetailsFormInSinhala from '../screens/home/game/MainDetailsFormInSinhala';
+import Level01 from '../screens/home/game/game01/progress/Level01';
+import Level02 from '../screens/home/game/game01/progress/Level02';
+import Level03 from '../screens/home/game/game01/progress/Level03';
+import Level04 from '../screens/home/game/game01/progress/Level04';
+import Level05 from '../screens/home/game/game01/progress/Level05';
+import Level06 from '../screens/home/game/game01/progress/Level06';
+import Game02ProgressLevel01 from '../screens/home/game/game02/progress/Level01';
+import Game02ProgressLevel02 from '../screens/home/game/game02/progress/Level02';
+import Game02ProgressLevel03 from '../screens/home/game/game02/progress/Level03';
+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';
+const Stack = createStackNavigator();
+
+function GameNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        headerShown: false,
+      }}
+      initialRouteName={ROUTES.EXERCISE_MAIN_MENU}>
+      <Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
+      <Stack.Screen
+        name={ROUTES.GAME_QUIZ_OPTIONS}
+        component={QuizOptionsPage}
+      />
+      <Stack.Screen
+        name={ROUTES.GAME_QUIZ_IN_ENGLISH}
+        component={QuestionInEnglishPage}
+      />
+      <Stack.Screen
+        name={ROUTES.GAME_QUIZ_IN_SINHALA}
+        component={QuestionInSinhalaPage}
+      />
+      <Stack.Screen name={ROUTES.GAME_FORM} component={HealthFormExercise} />
+      <Stack.Screen name={ROUTES.GAME_MAIN_MENU} component={MainMenuExercise} />
+      <Stack.Screen name={ROUTES.GAME_VIEW} component={ExerciseView} />
+      <Stack.Screen name={ROUTES.QUIZ_SCORE} component={QuizScoreDisplayPage} />
+      <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} />
+      {/* {/* <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} /> */}
+      {/* <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} />
+      <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} /> */}
+      <Stack.Screen name={ROUTES.GameLevel1} component={GameLevel1} />
+      <Stack.Screen
+        name={ROUTES.GameLevel2}
+        component={CandyCrushGameLevel02}
+      />
+      <Stack.Screen
+        name={ROUTES.GameLevel3}
+        component={CandyCrushGameLevel03}
+      />
+      <Stack.Screen
+        name={ROUTES.GameLevel4}
+        component={CandyCrushGameLevel04}
+      />
+      <Stack.Screen name={ROUTES.GameLevel5} component={GameLevel5} />
+      <Stack.Screen name={ROUTES.GameLevel0} component={GameLevel0} />
+      <Stack.Screen name={ROUTES.GameLevel6} component={GameLevel6} />
+      <Stack.Screen name={ROUTES.Game02Level01} component={Game02Level01} />
+      <Stack.Screen
+        name={ROUTES.CravingsPuzzleGame02Level02}
+        component={CravingsPuzzleGame02Level02}
+      />
+      <Stack.Screen
+        name={ROUTES.PuzzleGame02Level03}
+        component={PuzzleGame02Level03}
+      />
+      <Stack.Screen name={ROUTES.Game02Level04} component={Game02Level04} />
+      <Stack.Screen
+        name={ROUTES.Level01Instructions}
+        component={Level01InstructionsPage}
+      />
+      <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.GAME_MAIN_DETAILS}
+        component={MainDetailsForm}
+      />
+      <Stack.Screen
+        name={ROUTES.MainDetailsFormInSinhala}
+        component={MainDetailsFormInSinhala}
+      />
+      <Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} />
+      <Stack.Screen name={ROUTES.Level01} component={Level01} />
+      <Stack.Screen name={ROUTES.Level02} component={Level02} />
+      <Stack.Screen name={ROUTES.Level03} component={Level03} />
+      <Stack.Screen name={ROUTES.Level04} component={Level04} />
+      <Stack.Screen name={ROUTES.Level05} component={Level05} />
+      <Stack.Screen name={ROUTES.Level06} component={Level06} />
+
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel01}
+        component={Game02ProgressLevel01}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel02}
+        component={Game02ProgressLevel02}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel03}
+        component={Game02ProgressLevel03}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel04}
+        component={Game02ProgressLevel04}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel05}
+        component={Game02ProgressLevel05}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel06}
+        component={Game02ProgressLevel06}
+      />
+    </Stack.Navigator>
+  );
+}
+export default GameNavigator;

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';
+
+const ChooseGame = ({navigation, route}) => {
+  const {predictedGameLevel} = route.params;
+
+  const navigateBasedOnGameAndLevel = gameSelected => {
+    const gameLevelRoutes =
+      gameSelected === 'MommysSweetMatch'
+        ? {
+            0: ROUTES.GameLevel1,
+            1: ROUTES.GameLevel0,
+            2: ROUTES.GameLevel1,
+            3: ROUTES.GameLevel2,
+            4: ROUTES.GameLevel3,
+            5: ROUTES.GameLevel4,
+            6: ROUTES.GameLevel5,
+            7: ROUTES.GameLevel6,
+            8: ROUTES.GameLevel3,
+            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,
+          };
+
+    const routeName = gameLevelRoutes[predictedGameLevel];
+
+    if (routeName) {
+      navigation.navigate(routeName);
+    } else {
+      console.error('Unexpected prediction value:', predictedGameLevel);
+    }
+  };
+
+  return (
+    <>
+      <View style={styles.bottomView}>
+        <View style={{padding: 25}}>
+          <View style={{marginTop: 40}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: '#260B8C',
+                height: 300,
+                marginBottom: 20,
+                alignItems: 'center',
+                marginHorizontal: 10,
+                borderRadius: 24,
+                width: 340,
+              }}
+              onPress={() => navigateBasedOnGameAndLevel('MommysSweetMatch')}>
+              <View style={styles.container}>
+                <View style={styles.imageContainer}>
+                  <ImageBackground
+                    source={IMGS.game_img_3}
+                    style={styles.backgroundImage}
+                    resizeMode="cover">
+                    <View style={styles.box}></View>
+                    <Text
+                      bold
+                      medium
+                      style={{
+                        color: 'black',
+                        fontSize: 25,
+                        marginTop: -45,
+                        marginLeft: 20,
+                        fontWeight: 'bold',
+                      }}>
+                      Mommy's Sweet Match
+                    </Text>
+                  </ImageBackground>
+                </View>
+              </View>
+            </TouchableOpacity>
+          </View>
+          <View style={{marginTop: 35}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: '#260B8C',
+                height: 300,
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginHorizontal: 10,
+                borderRadius: 24,
+                width: 340,
+              }}
+              onPress={() => navigateBasedOnGameAndLevel('BumpBoutique')}>
+              <ImageBackground
+                source={IMGS.game_img_4}
+                style={styles.backgroundImage}
+                resizeMode="cover">
+                <View style={styles.box}></View>
+                <Text
+                  bold
+                  medium
+                  center
+                  style={{
+                    color: 'black',
+                    fontSize: 25,
+                    marginTop: -45,
+                    marginLeft: 20,
+                    fontWeight: 'bold',
+                  }}>
+                  Bump Boutique
+                </Text>
+              </ImageBackground>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  brandViewText: {
+    color: '#FFFFFF',
+    fontSize: 40,
+    // fontWeight: 'bold',
+  },
+  bottomView: {
+    flex: 1.5,
+    backgroundColor: '#FFFFFF',
+  },
+  backgroundImage: {
+    flex: 1,
+    width: 340,
+    height: 300,
+    borderRadius: 50,
+  },
+  imageContainer: {
+    borderRadius: 24,
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+  },
+  box: {
+    backgroundColor: 'white',
+    height: 50,
+    marginTop: 250,
+    opacity: 0.5,
+  },
+});
+
+export default ChooseGame;

src/screens/home/game/MainDetailsForm.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  ScrollView,
+} from 'react-native';
+import {ROUTES, COLORS} from '../../../constants';
+
+const MainDetailsForm = ({navigation}) => {
+  const [maritalStatus, setMaritalStatus] = useState('single');
+  const [familyBackground, setFamilyBackground] = useState('normal');
+  const [age, setAge] = useState('');
+  const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
+    useState('');
+
+  const maritalStatusOptions = [
+    {
+      key: 'single',
+      text: 'Single',
+      selected: maritalStatus === 'single',
+    },
+    {
+      key: 'married',
+      text: 'Married',
+      selected: maritalStatus === 'married',
+    },
+    {
+      key: 'divorced',
+      text: 'Divorced',
+      selected: maritalStatus === 'divorced',
+    },
+  ];
+
+  const familyBackgroundOptions = [
+    {
+      key: 'normal',
+      text: 'Normal',
+      selected: familyBackground === 'normal',
+    },
+    {
+      key: 'bad',
+      text: 'Bad',
+      selected: familyBackground === 'bad',
+    },
+    {
+      key: 'good',
+      text: 'Good',
+      selected: familyBackground === 'good',
+    },
+  ];
+
+  const handleMaritalStatusSelect = key => {
+    setMaritalStatus(key);
+  };
+
+  const handleFamilyBackgroundSelect = key => {
+    setFamilyBackground(key);
+  };
+
+  return (
+    <>
+      <ScrollView style={styles.container}>
+        <View style={styles.bottomView}>
+          <View style={{padding: 25}}>
+            <View
+              style={{
+                justifyContent: 'center',
+                alignItems: 'center',
+                display: 'flex',
+              }}>
+              <Text
+                style={{
+                  color: COLORS.black,
+                  fontSize: 20,
+                  fontWeight: 'bold',
+                  marginTop: 40,
+                  marginBottom: 40,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  display: 'flex',
+                }}>
+                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
+                style={{
+                  fontSize: 15,
+                  fontWeight: 'bold',
+                  marginTop: 20,
+                  marginBottom: 20,
+                  color: COLORS.black,
+                }}>
+                Your Age:
+              </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,
+                }}
+                onChangeText={text => setAge(text)} // Use setAge for the age field
+                keyboardType="numeric" // Set keyboardType appropriately
+                value={age}
+              />
+            </View>
+            <View style={{marginTop: 15}}>
+              <Text
+                semi
+                style={{
+                  fontSize: 15,
+                  fontWeight: 'bold',
+                  marginTop: 20,
+                  marginBottom: 20,
+                  color: COLORS.black,
+                }}>
+                Marital Status:{' '}
+              </Text>
+              <View style={styles.radioContainer}>
+                {maritalStatusOptions.map(item => (
+                  <View key={item.key} style={styles.radioButtonContainer}>
+                    <TouchableOpacity
+                      style={styles.circle}
+                      onPress={() => handleMaritalStatusSelect(item.key)}>
+                      {item.selected ? (
+                        <View style={styles.checkedCircle} />
+                      ) : null}
+                    </TouchableOpacity>
+                    <Text style={styles.radioText}>{item.text}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+            <View style={{marginTop: 15}}>
+              <Text
+                semi
+                style={{
+                  fontSize: 15,
+                  fontWeight: 'bold',
+                  marginTop: 20,
+                  marginBottom: 20,
+                  color: COLORS.black,
+                }}>
+                Family Background:
+              </Text>
+              <View style={styles.radioContainer}>
+                {familyBackgroundOptions.map(item => (
+                  <View key={item.key} style={styles.radioButtonContainer}>
+                    <TouchableOpacity
+                      style={styles.circle}
+                      onPress={() => handleFamilyBackgroundSelect(item.key)}>
+                      {item.selected ? (
+                        <View style={styles.checkedCircle} />
+                      ) : null}
+                    </TouchableOpacity>
+                    <Text style={styles.radioText}>{item.text}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+            <View style={{marginTop: 15}}>
+              <Text
+                semi
+                style={{
+                  fontSize: 15,
+                  fontWeight: 'bold',
+                  marginTop: 20,
+                  marginBottom: 20,
+                  color: COLORS.black,
+                }}>
+                Previous Child Birth Experiences:
+              </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,
+                }}
+                keyboardType="number-pad"
+                onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
+                value={previousChildBirthExperiences}
+              />
+            </View>
+            <View style={{marginTop: 55}}>
+              <TouchableOpacity
+                style={{
+                  backgroundColor: COLORS.normal_purple,
+                  height: 50,
+                  marginBottom: 20,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  elevation: 10,
+                  borderRadius: 14,
+                  width: '100%',
+                }}
+                onPress={() =>
+                  navigation.navigate(ROUTES.GAME_QUIZ_IN_ENGLISH, {
+                    formData: {
+                      age: age,
+                      marital_status_divorced:
+                        maritalStatus === 'divorced' ? 1 : 0,
+                      marital_status_married:
+                        maritalStatus === 'married' ? 1 : 0,
+                      marital_status_single: maritalStatus === 'single' ? 1 : 0,
+                      family_background_bad: familyBackground === 'bad' ? 1 : 0,
+                      family_background_good:
+                        familyBackground === 'good' ? 1 : 0,
+                      family_background_normal:
+                        familyBackground === 'normal' ? 1 : 0,
+                      previous_child_birth_experiences:
+                        previousChildBirthExperiences,
+                    },
+                  })
+                }>
+                <Text
+                  bold
+                  medium
+                  center
+                  style={{
+                    color: COLORS.white,
+                    fontSize: 20,
+                  }}>
+                  Next
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  brandViewText: {
+    color: '#FFFFFF',
+    fontSize: 40,
+    fontWeight: 'bold',
+  },
+  bottomView: {
+    flex: 1,
+    height: 860,
+    backgroundColor: COLORS.purple,
+    // borderTopStartRadius: 30,
+    // borderTopEndRadius: 30,
+  },
+  radioContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginTop: 10,
+  },
+  radioButtonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  circle: {
+    height: 20,
+    width: 20,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#ACACAC',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 10,
+  },
+  checkedCircle: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: '#794F9B',
+  },
+  radioText: {
+    marginLeft: 5,
+    color: COLORS.black,
+  },
+  container: {
+    flex: 1,
+  },
+});
+
+export default MainDetailsForm;

src/screens/home/game/game01/GameLevel1.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Button,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const BoardSize = 5;
+const CandyTypes = ['🤰', '🍼', '🍀', '🧸', '🎈'];
+
+const GameLevel1 = ({navigation}) => {
+  const [board, setBoard] = useState(createBoard());
+  const [score, setScore] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(30);
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_b.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 resetGame = () => {
+    setBoard(createBoard());
+    // setScore(0);
+    // setTimeLeft(60); // Reset time to 60 seconds
+    setSelectedCandy(null);
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (timeLeft === 0 && score >= 50) {
+      Alert.alert(
+        'Congratulations  🥳🥳',
+        `Time is up! You win!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Level02);
+            },
+          },
+        ],
+      );
+    } else if (timeLeft === 0 && score < 50) {
+      Alert.alert(
+        'Game Over',
+        `Time is up! You lose!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            },
+          },
+        ],
+      );
+    }
+  }, [timeLeft, score, navigation]);
+
+  function createBoard() {
+    const newBoard = [];
+    for (let row = 0; row < BoardSize; row++) {
+      const newRow = [];
+      for (let col = 0; col < BoardSize; col++) {
+        newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
+      }
+      newBoard.push(newRow);
+    }
+    return newBoard;
+  }
+
+  function handlePress(row, col) {
+    if (selectedCandy) {
+      const [selectedRow, selectedCol] = selectedCandy;
+      const dx = Math.abs(selectedRow - row);
+      const dy = Math.abs(selectedCol - col);
+      if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
+        // Adjacent candy selected
+        const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
+        [newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
+          newBoard[row][col],
+          newBoard[selectedRow][selectedCol],
+        ];
+        if (checkForMatch(newBoard)) {
+          setBoard(newBoard);
+        }
+      }
+      setSelectedCandy(null);
+    } else {
+      setSelectedCandy([row, col]);
+    }
+  }
+
+  function isBoardClear() {
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize; col++) {
+        if (board[row][col] !== null) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  function checkForMatch(board) {
+    const toClear = [];
+    // Check for horizontal matches
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize - 2; col++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row][col + 1] &&
+          candy === board[row][col + 2]
+        ) {
+          toClear.push([row, col], [row, col + 1], [row, col + 2]);
+        }
+      }
+    }
+
+    // Check for vertical matches
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize - 2; row++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row + 1][col] &&
+          candy === board[row + 2][col]
+        ) {
+          toClear.push([row, col], [row + 1, col], [row + 2, col]);
+        }
+      }
+    }
+
+    if (toClear.length === 0) return false; // No matches found
+
+    // Clear matched candies
+    let points = 0;
+    toClear.forEach(([row, col]) => {
+      if (board[row][col] !== null) {
+        points += 5; // Assuming each candy gives 5 points
+        board[row][col] = null;
+      }
+    });
+    setScore(prevScore => prevScore + points);
+
+    // Make candies fall down
+    for (let col = 0; col < BoardSize; col++) {
+      let shift = 0;
+      for (let row = BoardSize - 1; row >= 0; row--) {
+        if (board[row][col] === null) {
+          shift++;
+        } else if (shift > 0) {
+          board[row + shift][col] = board[row][col];
+          board[row][col] = null;
+        }
+      }
+    }
+
+    // Refill the board
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize; row++) {
+        if (board[row][col] === null) {
+          board[row][col] =
+            CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
+        }
+      }
+    }
+
+    return true; // Matches were found and cleared
+  }
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_6}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 40,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 12,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Button
+        title="Refresh"
+        onPress={resetGame}
+        color="#097969"
+        style={{marginBottom: 10}}
+      />
+      <Text style={styles.text}>Winning Score: 50</Text>
+      <Text style={styles.text}>Score: {score}</Text>
+      <Text style={styles.text}>Time Left: {timeLeft}s</Text>
+      <View style={styles.board}>
+        {board.map((row, rowIndex) => (
+          <View key={rowIndex} style={styles.row}>
+            {row.map((candy, colIndex) => (
+              <TouchableOpacity
+                key={colIndex}
+                style={styles.candy}
+                onPress={() => handlePress(rowIndex, colIndex)}>
+                <Text style={styles.candyText}>{candy}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </View>
+      <View style={{marginTop: 50}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: '#804674',
+            height: 50,
+            marginBottom: 60,
+            justifyContent: 'center',
+            alignItems: 'center',
+            // marginHorizontal: 25,
+            borderRadius: 16,
+            width: 320,
+          }}
+          onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
+          <Text
+            bold
+            medium
+            center
+            style={{
+              color: 'white',
+              fontSize: 22,
+              fontWeight: 'bold',
+            }}>
+            Exit
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  board: {
+    width: 350,
+    height: 350,
+    backgroundColor: '#E56E94',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    // borderRadius: 25,
+  },
+
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  candy: {
+    flex: 1,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'white',
+    borderWidth: 1,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 2,
+  },
+  candyText: {
+    fontSize: 30,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    includeFontPadding: false,
+    flex: 1,
+  },
+  text: {
+    color: 'black',
+    marginBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default GameLevel1;

src/screens/home/game/game01/GameLevel2.js

+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Button,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const BoardSize = 7; // Increased board size
+const CandyTypes = ['🤰', '🍼', '🌼', '🧸', '🤱', '🍇', '🍬']; // Increased candy types
+const WinningScore = 100;
+
+const CandyCrushGameLevel02 = ({navigation}) => {
+  const [board, setBoard] = useState(createBoard());
+  const [score, setScore] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(50);
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_c.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 resetGame = () => {
+    setBoard(createBoard());
+    // setScore(0);
+    // setTimeLeft(60); // Reset time to 60 seconds
+    setSelectedCandy(null);
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (timeLeft === 0 && score >= 55) {
+      Alert.alert(
+        'Congratulations  🥳🥳',
+        `Time is up! You win!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Level03);
+            },
+          },
+        ],
+      );
+    } else if (timeLeft === 0 && score < 55) {
+      Alert.alert(
+        'Game Over',
+        `Time is up! You lose!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              // Navigate to different screens based on the score
+              // if (score >= 50) {
+              // 	navigation.navigate("GameLevel03");
+              // } else {
+              navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+              // }
+            },
+          },
+        ],
+      );
+    }
+  }, [timeLeft, score, navigation]);
+
+  function createBoard() {
+    const newBoard = [];
+    for (let row = 0; row < BoardSize; row++) {
+      const newRow = [];
+      for (let col = 0; col < BoardSize; col++) {
+        newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
+      }
+      newBoard.push(newRow);
+    }
+    return newBoard;
+  }
+
+  function handlePress(row, col) {
+    if (selectedCandy) {
+      const [selectedRow, selectedCol] = selectedCandy;
+      const dx = Math.abs(selectedRow - row);
+      const dy = Math.abs(selectedCol - col);
+      if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
+        // Adjacent candy selected
+        const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
+        [newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
+          newBoard[row][col],
+          newBoard[selectedRow][selectedCol],
+        ];
+        if (checkForMatch(newBoard)) {
+          setBoard(newBoard);
+        }
+      }
+      setSelectedCandy(null);
+    } else {
+      setSelectedCandy([row, col]);
+    }
+  }
+
+  function isBoardClear() {
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize; col++) {
+        if (board[row][col] !== null) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  function checkForMatch(board) {
+    const toClear = [];
+    // Check for horizontal matches
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize - 2; col++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row][col + 1] &&
+          candy === board[row][col + 2]
+        ) {
+          toClear.push([row, col], [row, col + 1], [row, col + 2]);
+        }
+      }
+    }
+
+    // Check for vertical matches
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize - 2; row++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row + 1][col] &&
+          candy === board[row + 2][col]
+        ) {
+          toClear.push([row, col], [row + 1, col], [row + 2, col]);
+        }
+      }
+    }
+
+    if (toClear.length === 0) return false; // No matches found
+
+    // Clear matched candies
+    let points = 0;
+    toClear.forEach(([row, col]) => {
+      if (board[row][col] !== null) {
+        points += 5; // Assuming each candy gives 5 points
+        board[row][col] = null;
+      }
+    });
+    setScore(prevScore => prevScore + points);
+
+    // Make candies fall down
+    for (let col = 0; col < BoardSize; col++) {
+      let shift = 0;
+      for (let row = BoardSize - 1; row >= 0; row--) {
+        if (board[row][col] === null) {
+          shift++;
+        } else if (shift > 0) {
+          board[row + shift][col] = board[row][col];
+          board[row][col] = null;
+        }
+      }
+    }
+
+    // Refill the board
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize; row++) {
+        if (board[row][col] === null) {
+          board[row][col] =
+            CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
+        }
+      }
+    }
+
+    return true; // Matches were found and cleared
+  }
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_7}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 40,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 12,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Button
+        title="Refresh"
+        onPress={resetGame}
+        color="#DE3163"
+        style={{marginBottom: 10}}
+      />
+      <Text style={styles.text}>Winning Score: 55</Text>
+      <Text style={styles.text}>Score: {score}</Text>
+      <Text style={styles.text}>Time Left: {timeLeft}s</Text>
+      <View style={styles.board}>
+        {board.map((row, rowIndex) => (
+          <View key={rowIndex} style={styles.row}>
+            {row.map((candy, colIndex) => (
+              <TouchableOpacity
+                key={colIndex}
+                style={styles.candy}
+                onPress={() => handlePress(rowIndex, colIndex)}>
+                <Text style={styles.candyText}>{candy}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </View>
+      <View style={{marginTop: 90}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: '#DE3163',
+            height: 50,
+            marginBottom: 60,
+            justifyContent: 'center',
+            alignItems: 'center',
+            // marginHorizontal: 25,
+            borderRadius: 16,
+            width: 320,
+          }}
+          onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
+          <Text
+            bold
+            medium
+            center
+            style={{
+              color: 'white',
+              fontSize: 22,
+              fontWeight: 'bold',
+            }}>
+            Exit
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'black',
+  },
+  board: {
+    width: 380, // Adjusted according to the new board size
+    height: 400, // Adjusted according to the new board size
+    backgroundColor: '#097969',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  candy: {
+    flex: 1,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'white',
+    borderWidth: 1,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 2,
+  },
+  candyText: {
+    fontSize: 30,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    includeFontPadding: false,
+    flex: 1,
+  },
+  text: {
+    color: 'black',
+    marginBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default CandyCrushGameLevel02;