changes in UI

src/constants/imgs.js

@@ -64,4 +64,6 @@ export default {
   game_img_44: require('../assets/games/game02Backgroundnew.jpeg'),
   game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'),
   home_page: require('../assets/home_page.png'),
+  well_being: require('../assets/games/wellBeing.jpg'),
+  motherWithMidWife: require('../assets/games/motherAndMidWife.jpg'),
 };

src/constants/routes.js

@@ -83,6 +83,6 @@ export default {
   Game02ProgressLevel04: 'Game02ProgressLevel04',
   Game02ProgressLevel05: 'Game02ProgressLevel05',
   Game02ProgressLevel06: 'Game02ProgressLevel06',
-
+  MentalWellBeingTypes: 'MentalWellBeingTypes',
 };
 

src/navigations/GameNavigator.js

@@ -41,6 +41,7 @@ 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';
+import MentalWellBeingTypes from '../screens/home/game/MentalWellBeingTypes';
 const Stack = createStackNavigator();
 
 function GameNavigator() {
@@ -113,6 +114,10 @@ function GameNavigator() {
         name={ROUTES.MainDetailsFormInSinhala}
         component={MainDetailsFormInSinhala}
       />
+      <Stack.Screen
+        name={ROUTES.MentalWellBeingTypes}
+        component={MentalWellBeingTypes}
+      />
       <Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} />
       <Stack.Screen name={ROUTES.Level01} component={Level01} />
       <Stack.Screen name={ROUTES.Level02} component={Level02} />

src/screens/home/game/MainDetailsForm.js

@@ -17,6 +17,27 @@ const MainDetailsForm = ({navigation}) => {
   const [age, setAge] = useState('');
   const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
     useState('');
+  const [ageError, setAgeError] = useState('');
+  const [childBirthError, setChildBirthError] = useState('');
+
+  const handleValidation = () => {
+    let valid = true;
+    if (age.trim() === '') {
+      setAgeError('Age is required');
+      valid = false;
+    } else {
+      setAgeError('');
+    }
+
+    if (previousChildBirthExperiences.trim() === '') {
+      setChildBirthError('Number of previous child births is required');
+      valid = false;
+    } else {
+      setChildBirthError('');
+    }
+
+    return valid;
+  };
 
   const maritalStatusOptions = [
     {
@@ -62,9 +83,28 @@ const MainDetailsForm = ({navigation}) => {
     setFamilyBackground(key);
   };
 
+  const handleNext = () => {
+    if (handleValidation()) {
+      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,
+        },
+      });
+    }
+  };
+
   return (
     <>
-      <ScrollView style={styles.container}>
+      <ScrollView
+        style={styles.scrollContainer}
+        contentContainerStyle={styles.contentContainer}>
         <LinearGradient
           style={{
             flex: 1,
@@ -84,7 +124,7 @@ const MainDetailsForm = ({navigation}) => {
                   color: COLORS.black,
                   fontSize: 20,
                   fontWeight: 'bold',
-                  marginTop: 40,
+                  marginTop: 20,
                   marginBottom: 40,
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -99,7 +139,7 @@ const MainDetailsForm = ({navigation}) => {
                 style={{
                   fontSize: 15,
                   fontWeight: 'bold',
-                  marginTop: 20,
+                  marginTop: 1,
                   marginBottom: 20,
                   color: COLORS.black,
                 }}>
@@ -123,10 +163,16 @@ const MainDetailsForm = ({navigation}) => {
                   color: COLORS.black,
                   elevation: 17,
                 }}
-                onChangeText={text => setAge(text)} // Use setAge for the age field
+                onChangeText={text => {
+                  setAge(text);
+                  if (text.trim() !== '') {
+                    setAgeError('');
+                  }
+                }}
                 keyboardType="numeric" // Set keyboardType appropriately
                 value={age}
               />
+              {!!ageError && <Text style={styles.errorText}>{ageError}</Text>}
             </View>
             <View style={{marginTop: 15}}>
               <Text
@@ -165,7 +211,8 @@ const MainDetailsForm = ({navigation}) => {
                   marginBottom: 20,
                   color: COLORS.black,
                 }}>
-                Current Situation of Family Background:
+                Current Situation of Family Background (Financial / Economic/
+                Partner's Supportness):
               </Text>
               <View style={styles.radioContainer}>
                 {familyBackgroundOptions.map(item => (
@@ -213,41 +260,63 @@ const MainDetailsForm = ({navigation}) => {
                   elevation: 17,
                 }}
                 keyboardType="number-pad"
-                onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
+                onChangeText={text => {
+                  setPreviousChildBirthExperiences(text);
+                  if (text.trim() !== '') {
+                    setChildBirthError('');
+                  }
+                }}
                 value={previousChildBirthExperiences}
               />
+              {!!childBirthError && (
+                <Text style={styles.errorText}>{childBirthError}</Text>
+              )}
+            </View>
+            <View style={{marginTop: 15}}>
+              <Text
+                semi
+                style={{
+                  fontSize: 15,
+                  fontWeight: 'bold',
+                  marginTop: 20,
+                  marginBottom: 20,
+                  color: COLORS.black,
+                }}>
+                Experience of Previous Child Birth:
+              </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,
+                }}
+              />
             </View>
             <View style={{marginTop: 55}}>
               <TouchableOpacity
                 style={{
                   backgroundColor: COLORS.pastal_blue,
                   height: 50,
-                  marginBottom: 20,
+                  marginBottom: 50,
                   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,
-                    },
-                  })
-                }>
+                onPress={handleNext}>
                 <Text
                   bold
                   medium
@@ -269,6 +338,12 @@ const MainDetailsForm = ({navigation}) => {
 };
 
 const styles = StyleSheet.create({
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
   brandViewText: {
     color: '#FFFFFF',
     fontSize: 40,
@@ -278,8 +353,6 @@ const styles = StyleSheet.create({
     flex: 1,
     height: 860,
     backgroundColor: COLORS.purple,
-    // borderTopStartRadius: 30,
-    // borderTopEndRadius: 30,
   },
   radioContainer: {
     flexDirection: 'row',
@@ -314,6 +387,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  errorText: {
+    color: 'red',
+  },
 });
 
 export default MainDetailsForm;

src/screens/home/game/MainDetailsFormInSinhala.js

@@ -17,6 +17,27 @@ const MainDetailsFormInSinhala = ({navigation}) => {
   const [age, setAge] = useState('');
   const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
     useState('');
+  const [ageError, setAgeError] = useState('');
+  const [childBirthError, setChildBirthError] = useState('');
+
+  const handleValidation = () => {
+    let valid = true;
+    if (age.trim() === '') {
+      setAgeError('වයස අනිවාර්ය වේ');
+      valid = false;
+    } else {
+      setAgeError('');
+    }
+
+    if (previousChildBirthExperiences.trim() === '') {
+      setChildBirthError('පෙර දරු උපත් සංඛ්‍යාව අනිවාර්ය වේ.');
+      valid = false;
+    } else {
+      setChildBirthError('');
+    }
+
+    return valid;
+  };
 
   const maritalStatusOptions = [
     {
@@ -62,9 +83,28 @@ const MainDetailsFormInSinhala = ({navigation}) => {
     setFamilyBackground(key);
   };
 
+  const handleNext = () => {
+    if (handleValidation()) {
+      navigation.navigate(ROUTES.GAME_QUIZ_IN_SINHALA, {
+        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,
+        },
+      });
+    }
+  };
+
   return (
     <>
-      <ScrollView style={styles.container}>
+      <ScrollView
+        style={styles.scrollContainer}
+        contentContainerStyle={styles.contentContainer}>
         <LinearGradient
           style={{
             flex: 1,
@@ -123,11 +163,17 @@ const MainDetailsFormInSinhala = ({navigation}) => {
                   color: COLORS.black,
                   elevation: 17,
                 }}
-                onChangeText={text => setAge(text)} // Use setAge for the age field
+                onChangeText={text => {
+                  setAge(text);
+                  if (text.trim() !== '') {
+                    setAgeError('');
+                  }
+                }}
                 keyboardType="numeric" // Set keyboardType appropriately
                 value={age}
                 required
               />
+              {!!ageError && <Text style={styles.errorText}>{ageError}</Text>}
             </View>
             <View style={{marginTop: 15}}>
               <Text
@@ -166,7 +212,8 @@ const MainDetailsFormInSinhala = ({navigation}) => {
                   marginBottom: 20,
                   color: COLORS.black,
                 }}>
-                වත්මන් පවුල් පසුබිම් තත්ත්වය:
+                වත්මන් පවුල් පසුබිම් තත්ත්වය (මූල්‍යමය / ආර්ථිකමය / හවුල්කරුගේ
+                සහාය):
               </Text>
               <View style={styles.radioContainer}>
                 {familyBackgroundOptions.map(item => (
@@ -214,41 +261,66 @@ const MainDetailsFormInSinhala = ({navigation}) => {
                   elevation: 17,
                 }}
                 keyboardType="number-pad"
-                onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
+                onChangeText={text => {
+                  setPreviousChildBirthExperiences(text);
+                  if (text.trim() !== '') {
+                    setChildBirthError('');
+                  }
+                }}
                 value={previousChildBirthExperiences}
               />
+              {!!childBirthError && (
+                <Text style={styles.errorText}>{childBirthError}</Text>
+              )}
+            </View>
+            <View style={{marginTop: 15}}>
+              <Text
+                semi
+                style={{
+                  fontSize: 15,
+                  fontWeight: 'bold',
+                  marginTop: 20,
+                  marginBottom: 20,
+                  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,
+                }}
+                // keyboardType="number-pad"
+                // onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
+                // value={previousChildBirthExperiences}
+              />
             </View>
             <View style={{marginTop: 35}}>
               <TouchableOpacity
                 style={{
                   backgroundColor: COLORS.pastal_blue,
                   height: 50,
-                  marginBottom: 10,
+                  marginBottom: 50,
                   justifyContent: 'center',
                   alignItems: 'center',
                   elevation: 10,
                   borderRadius: 14,
                   width: '100%',
                 }}
-                onPress={() =>
-                  navigation.navigate(ROUTES.GAME_QUIZ_IN_SINHALA, {
-                    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,
-                    },
-                  })
-                }>
+                onPress={handleNext}>
                 <Text
                   bold
                   medium
@@ -269,6 +341,12 @@ const MainDetailsFormInSinhala = ({navigation}) => {
 };
 
 const styles = StyleSheet.create({
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
   brandViewText: {
     color: '#FFFFFF',
     fontSize: 40,
@@ -312,6 +390,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  errorText: {
+    color: 'red',
+  },
 });
 
 export default MainDetailsFormInSinhala;

src/screens/home/game/MentalWellBeingTypes.js

+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  ImageBackground,
+  Text,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
+
+const MentalWellBeingTypes = ({navigation, route}) => {
+  const {predictedGameLevel} = route.params;
+
+  return (
+    <>
+      <View style={styles.bottomView}>
+        <View style={{padding: 25}}>
+          <View style={{marginTop: 40}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: '#260B8C',
+                height: 400,
+                marginBottom: 20,
+                alignItems: 'center',
+                marginHorizontal: 10,
+                borderRadius: 24,
+                width: 350,
+              }}>
+              <View style={styles.container}>
+                <View style={styles.imageContainer}>
+                  <ImageBackground
+                    source={IMGS.well_being}
+                    style={styles.backgroundImage}
+                    resizeMode="cover"></ImageBackground>
+                </View>
+                <View style={styles.box}></View>
+                <Text
+                  bold
+                  medium
+                  style={{
+                    color: 'black',
+                    fontSize: 16,
+                    marginTop: -50,
+                    // marginLeft: 20,
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                  }}>
+                  Playing games can contribute to making you happy, perhaps even
+                  without therapy.
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => {
+                navigation.navigate(ROUTES.GameLevelPage, {
+                  predictedGameLevel,
+                });
+              }}>
+              <Text bold medium center style={styles.buttonText}>
+                Check Your Gaming Level
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  brandViewText: {
+    color: '#FFFFFF',
+    fontSize: 40,
+  },
+  bottomView: {
+    flex: 1.5,
+    backgroundColor: COLORS.blue,
+  },
+  backgroundImage: {
+    flex: 1,
+    width: 350,
+    height: 400,
+    borderRadius: 50,
+  },
+  imageContainer: {
+    borderRadius: 24,
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+  },
+  box: {
+    backgroundColor: 'white',
+    height: 70,
+    marginTop: -38,
+    opacity: 0.5,
+  },
+  button: {
+    backgroundColor: COLORS.dark,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 14,
+    width: 350,
+    height: 50,
+    marginTop: 190,
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 17,
+  },
+});
+
+export default MentalWellBeingTypes;

src/screens/home/game/QuizOptions.js

 /* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/self-closing-comp */
 import React from 'react';
-import {Text, Image, View, StyleSheet, TouchableOpacity} from 'react-native';
-import {COLORS, ROUTES} from '../../../constants';
+import {
+  Text,
+  ImageBackground,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {COLORS, ROUTES, IMGS} from '../../../constants';
 
 const QuizOptionsPage = ({navigation}) => {
   return (
@@ -12,13 +19,10 @@ const QuizOptionsPage = ({navigation}) => {
           justifyContent: 'center',
           alignItems: 'center',
         }}>
-        <Image
-          source={{
-            uri: 'https://www.cdc.gov/reproductivehealth/features/maternal-depression/images/feature-maternal-health-depression-2021.png?_=20351',
-          }}
-          style={{width: 450, height: 400}}
-          resizeMode="contain"
-        />
+        <ImageBackground
+          source={IMGS.motherWithMidWife}
+          style={styles.backgroundImage}
+          resizeMode="cover"></ImageBackground>
       </View>
       <View style={styles.bottomView}>
         <View style={{padding: 25}}>
@@ -32,7 +36,7 @@ const QuizOptionsPage = ({navigation}) => {
                 color: COLORS.navyBlue,
                 fontSize: 22,
                 fontWeight: 'bold',
-                marginBottom: 25,
+                marginBottom: 20,
                 fontFamily: 'monospace',
                 textAlign: 'center',
               }}>
@@ -55,16 +59,6 @@ const QuizOptionsPage = ({navigation}) => {
               }}>
               Try with Us & Have a fun
             </Text>
-            <Text
-              style={{
-                color: 'black',
-                fontSize: 18,
-                fontWeight: 'bold',
-                fontFamily: 'monospace',
-                textAlign: 'center',
-              }}>
-              Play Games & Enjoy your time
-            </Text>
           </View>
           <View
             style={{
@@ -76,7 +70,7 @@ const QuizOptionsPage = ({navigation}) => {
                 color: 'black',
                 fontSize: 16,
                 fontWeight: 'bold',
-                marginTop: 30,
+                marginTop: 20,
                 textAlign: 'center',
                 fontFamily: 'monospace',
               }}>
@@ -93,7 +87,7 @@ const QuizOptionsPage = ({navigation}) => {
                 color: 'black',
                 fontSize: 16,
                 fontWeight: 'bold',
-                marginTop: 40,
+                marginTop: 30,
                 textAlign: 'center',
                 fontFamily: 'monospace',
               }}>
@@ -160,6 +154,12 @@ const styles = StyleSheet.create({
     flex: 2,
     backgroundColor: '#FFC0D9',
   },
+  backgroundImage: {
+    flex: 1,
+    width: 350,
+    height: 400,
+    borderRadius: 50,
+  },
 });
 
 export default QuizOptionsPage;

src/screens/home/game/QuizScore.js

@@ -64,7 +64,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
           response.data.prediction.match(/\d+/)[0],
           10,
         );
-        navigation.navigate(ROUTES.GameLevelPage, {predictedGameLevel});
+        navigation.navigate(ROUTES.MentalWellBeingTypes, {predictedGameLevel});
       } else {
         console.error('API call failed with response:', response.data);
       }
@@ -85,7 +85,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
           style={styles.backgroundImage}
           resizeMode="cover">
           <View style={styles.container}>
-            <Text style={styles.mainText}>Your Depression Level</Text>
+            <Text style={styles.mainText}>Your Mental Well-Being</Text>
             <View style={styles.mainCircle}>
               <View style={styles.circle}>
                 <Text style={styles.scoreText}>
@@ -98,7 +98,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
                 style={styles.button}
                 onPress={handleChooseGamePress}>
                 <Text bold medium center style={styles.buttonText}>
-                  Check Your Gaming Level
+                  Let's Improve Mental Well-Being
                 </Text>
               </TouchableOpacity>
             </View>
@@ -155,7 +155,7 @@ const styles = StyleSheet.create({
     marginBottom: 30,
     fontWeight: 'bold',
     justifyContent: 'center',
-    alignItems: 'center',
+    textAlign: 'center',
     display: 'flex',
     marginTop: 22,
   },
@@ -173,6 +173,7 @@ const styles = StyleSheet.create({
   },
   buttonText: {
     color: 'white',
+    fontWeight: 'bold',
     fontSize: 17,
   },
   bottomContainer: {

src/screens/home/game/WelcomeGame.js

@@ -16,7 +16,7 @@ const WelcomePageGame = ({navigation}) => {
           <Image
             source={IMGS.game_img_1}
             style={{
-              height: 360,
+              height: 340,
               width: 190,
               borderRadius: 20,
               position: 'absolute',
@@ -35,7 +35,7 @@ const WelcomePageGame = ({navigation}) => {
           style={{
             paddingHorizontal: 22,
             position: 'absolute',
-            top: 410,
+            top: 390,
             width: '100%',
           }}>
           <Text
@@ -80,7 +80,7 @@ const WelcomePageGame = ({navigation}) => {
                 backgroundColor: COLORS.purple_new,
                 borderColor: COLORS.purple_new,
                 height: 50,
-                marginBottom: 50,
+                marginBottom: 70,
                 justifyContent: 'center',
                 alignItems: 'center',
                 borderRadius: 14,
@@ -92,7 +92,11 @@ const WelcomePageGame = ({navigation}) => {
               <Text
                 medium
                 center
-                style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
+                style={{
+                  color: 'white',
+                  fontSize: 24,
+                  fontWeight: 'bold',
+                }}>
                 Let Us Help You
               </Text>
             </TouchableOpacity>