Commit 24be488e authored by Madiwilage Isura Eranda's avatar Madiwilage Isura Eranda

Merge branch 'final-app' of http://gitlab.sliit.lk/2023-24-005/emidwife-new into final-app

parents 629d12f0 00b60a06
...@@ -21,4 +21,5 @@ export default { ...@@ -21,4 +21,5 @@ export default {
purple_new: '#AC87C5', purple_new: '#AC87C5',
pink_new: '#FF8080', pink_new: '#FF8080',
pastal_blue: '#7469B6', pastal_blue: '#7469B6',
red: '#DC143C',
}; };
...@@ -16,7 +16,6 @@ export default { ...@@ -16,7 +16,6 @@ export default {
sk_15: require('../assets/sk_15.png'), sk_15: require('../assets/sk_15.png'),
sk_16: require('../assets/sk_16.png'), sk_16: require('../assets/sk_16.png'),
//games //games
game_img_1: require('../assets/game_img_1.png'), game_img_1: require('../assets/game_img_1.png'),
game_img_2: require('../assets/game_img_2.png'), game_img_2: require('../assets/game_img_2.png'),
...@@ -64,4 +63,7 @@ export default { ...@@ -64,4 +63,7 @@ export default {
game_img_44: require('../assets/games/game02Backgroundnew.jpeg'), game_img_44: require('../assets/games/game02Backgroundnew.jpeg'),
game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'), game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'),
home_page: require('../assets/home_page.png'), home_page: require('../assets/home_page.png'),
well_being: require('../assets/games/wellBeing.jpg'),
motherWithMidWife: require('../assets/games/motherAndMidWife.jpg'),
user_profile_image: require('../assets/user_profile.png'),
}; };
...@@ -2,7 +2,7 @@ export default { ...@@ -2,7 +2,7 @@ export default {
LOGIN: 'Login', LOGIN: 'Login',
REGISTER: 'Register', REGISTER: 'Register',
FORGOT_PASSWORD: 'Forgot_Password', FORGOT_PASSWORD: 'Forgot_Password',
PROFILE: 'UserProfile',
HOME: 'Home', HOME: 'Home',
HOME_TAB: 'Home_Tab', HOME_TAB: 'Home_Tab',
...@@ -83,6 +83,6 @@ export default { ...@@ -83,6 +83,6 @@ export default {
Game02ProgressLevel04: 'Game02ProgressLevel04', Game02ProgressLevel04: 'Game02ProgressLevel04',
Game02ProgressLevel05: 'Game02ProgressLevel05', Game02ProgressLevel05: 'Game02ProgressLevel05',
Game02ProgressLevel06: 'Game02ProgressLevel06', Game02ProgressLevel06: 'Game02ProgressLevel06',
MentalWellBeingTypes: 'MentalWellBeingTypes',
}; };
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import { createStackNavigator } from '@react-navigation/stack'; import {createStackNavigator} from '@react-navigation/stack';
import Login from '../screens/auth/Login'; import Login from '../screens/auth/Login';
import Register from '../screens/auth/Register'; import Register from '../screens/auth/Register';
import ForgotPassword from '../screens/auth/ForgotPassword'; import ForgotPassword from '../screens/auth/ForgotPassword';
// import { Login, Register, ForgotPassword} from '../screens'; // import { Login, Register, ForgotPassword} from '../screens';
import { ROUTES } from "../constants" import {ROUTES} from '../constants';
import BottomTabNavigator from './BottomTabNavigator' import BottomTabNavigator from './BottomTabNavigator';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import ProfileNavigator from './ProfileNavigator';
function AuthNavigator() { function AuthNavigator() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => {
// Check if the user is already logged in
checkLoggedInStatus();
}, []);
useEffect(() => { const checkLoggedInStatus = async () => {
// Check if the user is already logged in try {
checkLoggedInStatus(); // Example: Check if a token or user data exists in AsyncStorage
}, []); const userData = await AsyncStorage.getItem('userData');
if (userData) {
const checkLoggedInStatus = async () => { setIsLoggedIn(true);
try { }
// Example: Check if a token or user data exists in AsyncStorage } catch (error) {
const userData = await AsyncStorage.getItem('userData'); console.error('Error checking logged in status:', error);
if (userData) { }
setIsLoggedIn(true); };
} return (
} catch (error) { // <Stack.Navigator
console.error('Error checking logged in status:', error); // screenOptions={{
} // headerBackTitleVisible: false
}; // }}
return ( // initialRouteName={ROUTES.LOGIN}
// <Stack.Navigator // >
// screenOptions={{ // <Stack.Screen
// headerBackTitleVisible: false // options={{
// }} // headerShown: false
// initialRouteName={ROUTES.LOGIN} // }}
// > // name={ROUTES.LOGIN} component={Login}
// <Stack.Screen // />
// options={{ // <Stack.Screen
// headerShown: false // options={{
// }} // headerShown: false,
// name={ROUTES.LOGIN} component={Login} // headerBackTitleVisible: false
// /> // }}
// <Stack.Screen // name={ROUTES.REGISTER} component={Register}
// options={{ // />
// headerShown: false, // <Stack.Screen
// headerBackTitleVisible: false // name={ROUTES.FORGOT_PASSWORD} component={ForgotPassword}
// }} // />
// name={ROUTES.REGISTER} component={Register} // <Stack.Screen options={{
// /> // headerShown: false,
// <Stack.Screen // headerBackTitleVisible: false
// name={ROUTES.FORGOT_PASSWORD} component={ForgotPassword} // }}
// /> // name={ROUTES.HOME} component={BottomTabNavigator} />
// <Stack.Screen options={{ // </Stack.Navigator>
// headerShown: false, <Stack.Navigator
// headerBackTitleVisible: false screenOptions={{
// }} headerBackTitleVisible: false,
// name={ROUTES.HOME} component={BottomTabNavigator} /> }}
// </Stack.Navigator> initialRouteName={ROUTES.LOGIN}>
<Stack.Navigator {isLoggedIn ? (
screenOptions={{ <>
headerBackTitleVisible: false <Stack.Screen
options={{
headerShown: false,
}}
name={ROUTES.HOME}
component={BottomTabNavigator}
/>
<Stack.Screen
options={{
headerShown: false,
}}
name={ROUTES.PROFILE}
component={ProfileNavigator}
/>
</>
) : (
<>
<Stack.Screen
options={{
headerShown: false,
}}
name={ROUTES.LOGIN}
component={Login}
/>
<Stack.Screen
options={{
headerShown: false,
headerBackTitleVisible: false,
}}
name={ROUTES.REGISTER}
component={Register}
/>
<Stack.Screen
name={ROUTES.FORGOT_PASSWORD}
component={ForgotPassword}
/>
<Stack.Screen
options={{
headerShown: false,
}}
name={ROUTES.HOME}
component={BottomTabNavigator}
/>
<Stack.Screen
options={{
headerShown: false,
}} }}
initialRouteName={ROUTES.LOGIN} name={ROUTES.PROFILE}
> component={ProfileNavigator}
{isLoggedIn ? ( />
<Stack.Screen </>
options={{ )}
headerShown: false </Stack.Navigator>
}} );
name={ROUTES.HOME}
component={BottomTabNavigator}
/>
) : (
<>
<Stack.Screen
options={{
headerShown: false
}}
name={ROUTES.LOGIN}
component={Login}
/>
<Stack.Screen
options={{
headerShown: false,
headerBackTitleVisible: false
}}
name={ROUTES.REGISTER}
component={Register}
/>
<Stack.Screen
name={ROUTES.FORGOT_PASSWORD}
component={ForgotPassword}
/>
<Stack.Screen
options={{
headerShown: false
}}
name={ROUTES.HOME}
component={BottomTabNavigator}
/>
</>
)}
</Stack.Navigator>
);
} }
export default AuthNavigator; export default AuthNavigator;
\ No newline at end of file
...@@ -41,6 +41,7 @@ import Game02ProgressLevel03 from '../screens/home/game/game02/progress/Level03' ...@@ -41,6 +41,7 @@ import Game02ProgressLevel03 from '../screens/home/game/game02/progress/Level03'
import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04'; import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04';
import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05'; import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05';
import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06'; import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06';
import MentalWellBeingTypes from '../screens/home/game/MentalWellBeingTypes';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
function GameNavigator() { function GameNavigator() {
...@@ -50,7 +51,7 @@ function GameNavigator() { ...@@ -50,7 +51,7 @@ function GameNavigator() {
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerShown: false, headerShown: false,
}} }}
initialRouteName={ROUTES.EXERCISE_MAIN_MENU}> initialRouteName={ROUTES.GAME_HOME}>
<Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} /> <Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
<Stack.Screen <Stack.Screen
name={ROUTES.GAME_QUIZ_OPTIONS} name={ROUTES.GAME_QUIZ_OPTIONS}
...@@ -113,6 +114,10 @@ function GameNavigator() { ...@@ -113,6 +114,10 @@ function GameNavigator() {
name={ROUTES.MainDetailsFormInSinhala} name={ROUTES.MainDetailsFormInSinhala}
component={MainDetailsFormInSinhala} component={MainDetailsFormInSinhala}
/> />
<Stack.Screen
name={ROUTES.MentalWellBeingTypes}
component={MentalWellBeingTypes}
/>
<Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} /> <Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} />
<Stack.Screen name={ROUTES.Level01} component={Level01} /> <Stack.Screen name={ROUTES.Level01} component={Level01} />
<Stack.Screen name={ROUTES.Level02} component={Level02} /> <Stack.Screen name={ROUTES.Level02} component={Level02} />
......
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {ROUTES} from '../constants';
import UserProfile from '../screens/auth/ProfilePage';
const Stack = createStackNavigator();
function ProfileNavigator() {
return (
<Stack.Navigator
screenOptions={{
headerBackTitleVisible: false,
headerShown: false,
}}
initialRouteName={ROUTES.HOME}>
<Stack.Screen name={ROUTES.PROFILE} component={UserProfile} />
</Stack.Navigator>
);
}
export default ProfileNavigator;
import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {COLORS, IMGS, ROUTES} from '../../constants';
import LinearGradient from 'react-native-linear-gradient';
import {Formik} from 'formik';
// import {getUserDetails} from '../../services/auth/index';
const UserProfile = ({navigation}) => {
const [userDetails, setUserDetails] = useState(null);
const [error, setError] = useState(null);
// const handleFetchDetails = async () => {
// try {
// const email = 'user@example.com'; // This should be dynamically sourced, perhaps from user state or AsyncStorage
// const details = await getUserDetails(email);
// setUserDetails(details.data);
// } catch (err) {
// setError('Failed to fetch details');
// console.error(err);
// }
// };
console.log(userDetails, 'userDetails');
// useEffect(() => {
// handleFetchDetails();
// }, []);
return (
<LinearGradient
style={styles.container}
colors={[COLORS.dark_purple, COLORS.white, COLORS.pink]}>
<View style={styles.profileHeader}>
<Image source={IMGS.user_profile_image} style={styles.profileImage} />
<Text style={styles.name}>
{userDetails?.name ? userDetails?.name : 'Malsha Geethmi'}
</Text>
</View>
<View style={styles.infoContainer}>
<View style={styles.infoItem}>
<Text style={styles.infoLabel}>Email</Text>
<Text style={styles.infoContent}>
{userDetails?.email ? userDetails?.email : 'malsha@gmail.com'}
</Text>
</View>
<View style={styles.infoItem}>
<Text style={styles.infoLabel}>Age</Text>
<Text style={styles.infoContent}>
{userDetails?.age ? userDetails?.age : '24'}
</Text>
</View>
<View style={styles.infoItem}>
<Text style={styles.infoLabel}>Week</Text>
<Text style={styles.infoContent}>
{userDetails?.week ? userDetails?.week : '14'}
</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.FORGOT_PASSWORD)}>
<View style={styles.new}>
<Icon
name="key"
size={30}
color={COLORS.white}
style={styles.icon1}
/>
<Text style={styles.buttonText}>Change Password</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.button2}>
<Text style={styles.buttonText2}>LOGOUT</Text>
</TouchableOpacity>
</LinearGradient>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.pastalBlue,
alignItems: 'center',
paddingTop: 50,
},
profileHeader: {
backgroundColor: 'white',
width: '90%',
borderRadius: 20,
alignItems: 'center',
marginBottom: 20,
paddingVertical: 20,
},
profileImage: {
width: 80,
height: 80,
borderRadius: 40,
marginBottom: 10,
},
name: {
fontSize: 18,
fontWeight: 'bold',
color: COLORS.navyBlue,
},
phoneNumber: {
fontSize: 16,
color: 'gray',
},
infoContainer: {
width: '90%',
backgroundColor: 'white',
borderRadius: 20,
paddingVertical: 10,
},
infoItem: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingVertical: 10,
},
infoLabel: {
fontWeight: 'bold',
color: 'gray',
},
infoContent: {
color: 'black',
},
button: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: COLORS.purple_new,
borderRadius: 20,
width: '90%',
padding: 15,
marginVertical: 5,
marginTop: 40,
},
button2: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: COLORS.red,
borderRadius: 20,
width: '90%',
padding: 15,
marginVertical: 5,
marginTop: 230,
},
buttonText: {
textAlign: 'center',
fontSize: 18,
color: COLORS.white,
fontWeight: 'bold',
},
buttonText2: {
textAlign: 'center',
fontSize: 20,
color: COLORS.white,
fontWeight: 'bold',
},
icon1: {
justifyContent: 'flex-start',
display: 'flex',
},
new: {
marginRight: 90,
flexDirection: 'row',
gap: 20,
},
});
export default UserProfile;
import React from 'react'; import React from 'react';
import {Image, TouchableOpacity, Text, View} from 'react-native'; import {Image, TouchableOpacity, Text, View} from 'react-native';
import {COLORS, IMGS} from '../../constants'; import {COLORS, IMGS, ROUTES} from '../../constants';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/Ionicons';
const Home = () => { const Home = ({navigation}) => {
return ( return (
<LinearGradient <LinearGradient
style={{ style={{
...@@ -22,7 +23,16 @@ const Home = () => { ...@@ -22,7 +23,16 @@ const Home = () => {
}} }}
/> />
</View> </View>
<TouchableOpacity
style={{
position: 'absolute',
top: 25, // Adjust top and right values as needed
right: 20,
zIndex: 5, // Ensure the icon is on top of other elements
}}
onPress={() => navigation.navigate(ROUTES.PROFILE)}>
<Icon name="person-circle-sharp" size={35} color={COLORS.black} />
</TouchableOpacity>
<View <View
style={{ style={{
paddingHorizontal: 67, paddingHorizontal: 67,
...@@ -50,31 +60,6 @@ const Home = () => { ...@@ -50,31 +60,6 @@ const Home = () => {
}}> }}>
e-MidWife e-MidWife
</Text> </Text>
{/* <View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.purple_new,
borderColor: COLORS.purple_new,
height: 50,
marginBottom: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: '100%',
zIndex: 3,
elevation: 10,
}}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}
>
<Text
medium
center
style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
Start
</Text>
</TouchableOpacity>
</View> */}
</View> </View>
</View> </View>
</LinearGradient> </LinearGradient>
......
...@@ -17,6 +17,27 @@ const MainDetailsForm = ({navigation}) => { ...@@ -17,6 +17,27 @@ const MainDetailsForm = ({navigation}) => {
const [age, setAge] = useState(''); const [age, setAge] = useState('');
const [previousChildBirthExperiences, setPreviousChildBirthExperiences] = const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
useState(''); 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 = [ const maritalStatusOptions = [
{ {
...@@ -62,9 +83,28 @@ const MainDetailsForm = ({navigation}) => { ...@@ -62,9 +83,28 @@ const MainDetailsForm = ({navigation}) => {
setFamilyBackground(key); 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 ( return (
<> <>
<ScrollView style={styles.container}> <ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<LinearGradient <LinearGradient
style={{ style={{
flex: 1, flex: 1,
...@@ -84,7 +124,7 @@ const MainDetailsForm = ({navigation}) => { ...@@ -84,7 +124,7 @@ const MainDetailsForm = ({navigation}) => {
color: COLORS.black, color: COLORS.black,
fontSize: 20, fontSize: 20,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: 40, marginTop: 20,
marginBottom: 40, marginBottom: 40,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -99,7 +139,7 @@ const MainDetailsForm = ({navigation}) => { ...@@ -99,7 +139,7 @@ const MainDetailsForm = ({navigation}) => {
style={{ style={{
fontSize: 15, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: 20, marginTop: 1,
marginBottom: 20, marginBottom: 20,
color: COLORS.black, color: COLORS.black,
}}> }}>
...@@ -123,10 +163,16 @@ const MainDetailsForm = ({navigation}) => { ...@@ -123,10 +163,16 @@ const MainDetailsForm = ({navigation}) => {
color: COLORS.black, color: COLORS.black,
elevation: 17, 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 keyboardType="numeric" // Set keyboardType appropriately
value={age} value={age}
/> />
{!!ageError && <Text style={styles.errorText}>{ageError}</Text>}
</View> </View>
<View style={{marginTop: 15}}> <View style={{marginTop: 15}}>
<Text <Text
...@@ -165,7 +211,8 @@ const MainDetailsForm = ({navigation}) => { ...@@ -165,7 +211,8 @@ const MainDetailsForm = ({navigation}) => {
marginBottom: 20, marginBottom: 20,
color: COLORS.black, color: COLORS.black,
}}> }}>
Current Situation of Family Background: Current Situation of Family Background (Financial / Economic/
Partner's Supportness):
</Text> </Text>
<View style={styles.radioContainer}> <View style={styles.radioContainer}>
{familyBackgroundOptions.map(item => ( {familyBackgroundOptions.map(item => (
...@@ -213,41 +260,63 @@ const MainDetailsForm = ({navigation}) => { ...@@ -213,41 +260,63 @@ const MainDetailsForm = ({navigation}) => {
elevation: 17, elevation: 17,
}} }}
keyboardType="number-pad" 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} 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>
<View style={{marginTop: 55}}> <View style={{marginTop: 55}}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: COLORS.pastal_blue, backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
marginBottom: 20, marginBottom: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
elevation: 10, elevation: 10,
borderRadius: 14, borderRadius: 14,
width: '100%', width: '100%',
}} }}
onPress={() => onPress={handleNext}>
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 <Text
bold bold
medium medium
...@@ -269,6 +338,12 @@ const MainDetailsForm = ({navigation}) => { ...@@ -269,6 +338,12 @@ const MainDetailsForm = ({navigation}) => {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
brandViewText: { brandViewText: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 40, fontSize: 40,
...@@ -278,8 +353,6 @@ const styles = StyleSheet.create({ ...@@ -278,8 +353,6 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
height: 860, height: 860,
backgroundColor: COLORS.purple, backgroundColor: COLORS.purple,
// borderTopStartRadius: 30,
// borderTopEndRadius: 30,
}, },
radioContainer: { radioContainer: {
flexDirection: 'row', flexDirection: 'row',
...@@ -314,6 +387,9 @@ const styles = StyleSheet.create({ ...@@ -314,6 +387,9 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
errorText: {
color: 'red',
},
}); });
export default MainDetailsForm; export default MainDetailsForm;
...@@ -17,6 +17,27 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -17,6 +17,27 @@ const MainDetailsFormInSinhala = ({navigation}) => {
const [age, setAge] = useState(''); const [age, setAge] = useState('');
const [previousChildBirthExperiences, setPreviousChildBirthExperiences] = const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
useState(''); 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 = [ const maritalStatusOptions = [
{ {
...@@ -62,9 +83,28 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -62,9 +83,28 @@ const MainDetailsFormInSinhala = ({navigation}) => {
setFamilyBackground(key); 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 ( return (
<> <>
<ScrollView style={styles.container}> <ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<LinearGradient <LinearGradient
style={{ style={{
flex: 1, flex: 1,
...@@ -123,11 +163,17 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -123,11 +163,17 @@ const MainDetailsFormInSinhala = ({navigation}) => {
color: COLORS.black, color: COLORS.black,
elevation: 17, 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 keyboardType="numeric" // Set keyboardType appropriately
value={age} value={age}
required required
/> />
{!!ageError && <Text style={styles.errorText}>{ageError}</Text>}
</View> </View>
<View style={{marginTop: 15}}> <View style={{marginTop: 15}}>
<Text <Text
...@@ -166,7 +212,8 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -166,7 +212,8 @@ const MainDetailsFormInSinhala = ({navigation}) => {
marginBottom: 20, marginBottom: 20,
color: COLORS.black, color: COLORS.black,
}}> }}>
වත්මන් පවුල් පසුබිම් තත්ත්වය: වත්මන් පවුල් පසුබිම් තත්ත්වය (මූල්‍යමය / ආර්ථිකමය / හවුල්කරුගේ
සහාය):
</Text> </Text>
<View style={styles.radioContainer}> <View style={styles.radioContainer}>
{familyBackgroundOptions.map(item => ( {familyBackgroundOptions.map(item => (
...@@ -214,41 +261,66 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -214,41 +261,66 @@ const MainDetailsFormInSinhala = ({navigation}) => {
elevation: 17, elevation: 17,
}} }}
keyboardType="number-pad" 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} 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>
<View style={{marginTop: 35}}> <View style={{marginTop: 35}}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: COLORS.pastal_blue, backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
marginBottom: 10, marginBottom: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
elevation: 10, elevation: 10,
borderRadius: 14, borderRadius: 14,
width: '100%', width: '100%',
}} }}
onPress={() => onPress={handleNext}>
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,
},
})
}>
<Text <Text
bold bold
medium medium
...@@ -269,6 +341,12 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -269,6 +341,12 @@ const MainDetailsFormInSinhala = ({navigation}) => {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
brandViewText: { brandViewText: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 40, fontSize: 40,
...@@ -312,6 +390,9 @@ const styles = StyleSheet.create({ ...@@ -312,6 +390,9 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
errorText: {
color: 'red',
},
}); });
export default MainDetailsFormInSinhala; export default MainDetailsFormInSinhala;
/* 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;
...@@ -6,6 +6,7 @@ import { ...@@ -6,6 +6,7 @@ import {
TouchableOpacity, TouchableOpacity,
Text, Text,
ActivityIndicator, ActivityIndicator,
ScrollView,
} from 'react-native'; } from 'react-native';
import axios from 'axios'; import axios from 'axios';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
...@@ -94,40 +95,20 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -94,40 +95,20 @@ const QuestionInEnglishPage = ({navigation, route}) => {
<ActivityIndicator size={150} color={COLORS.dark_purple} /> <ActivityIndicator size={150} color={COLORS.dark_purple} />
</View> </View>
) : ( ) : (
<LinearGradient <ScrollView
style={{ style={styles.scrollContainer}
flex: 1, contentContainerStyle={styles.contentContainer}>
width: '100%', <LinearGradient
height: '100%', style={{
}} flex: 1,
colors={[COLORS.white, '#FDCEDF']}> width: '100%',
{questions height: '100%',
.slice(questionIndex, questionIndex + 2) }}
.map((question, index) => ( colors={[COLORS.white, '#FDCEDF']}>
<View style={{padding: 18, marginTop: 42}} key={question._id}> {questions
<View .slice(questionIndex, questionIndex + 2)
style={{ .map((question, index) => (
justifyContent: 'center', <View style={{padding: 18, marginTop: 42}} key={question._id}>
alignItems: 'center',
}}>
<Text
style={{
color: COLORS.pastal_blue,
fontSize: 22,
fontWeight: 'bold',
}}>
Question {questionIndex + index + 1}
</Text>
</View>
<View
style={{
backgroundColor: 'white',
borderColor: COLORS.pink,
borderWidth: 3,
borderRadius: 17,
marginTop: 5,
padding: 12,
}}>
<View <View
style={{ style={{
justifyContent: 'center', justifyContent: 'center',
...@@ -135,154 +116,178 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -135,154 +116,178 @@ const QuestionInEnglishPage = ({navigation, route}) => {
}}> }}>
<Text <Text
style={{ style={{
color: 'black', color: COLORS.pastal_blue,
fontSize: 15, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: 10,
}}> }}>
{question.question} Question {questionIndex + index + 1}
</Text> </Text>
</View> </View>
<View <View
style={{ style={{
marginTop: 10, backgroundColor: 'white',
gap: 3, borderColor: COLORS.pink,
marginBottom: 5, borderWidth: 3,
color: 'black', borderRadius: 17,
marginRight: 25, marginTop: 5,
padding: 12,
}}> }}>
<RadioButton <View
label={questions[questionIndex + index].answers[0]} style={{
selected={ justifyContent: 'center',
selectedAnswerIndices[questionIndex + index] === 0 alignItems: 'center',
} }}>
onPress={() => <Text
setSelectedAnswer(0, questionIndex + index) style={{
} color: 'black',
value={3} fontSize: 15,
/> fontWeight: 'bold',
<RadioButton marginTop: 10,
label={questions[questionIndex + index].answers[1]} }}>
selected={ {question.question}
selectedAnswerIndices[questionIndex + index] === 1 </Text>
} </View>
onPress={() => <View
setSelectedAnswer(1, questionIndex + index) style={{
} marginTop: 10,
value={2} gap: 3,
/> marginBottom: 5,
<RadioButton color: 'black',
label={questions[questionIndex + index].answers[2]} marginRight: 25,
selected={ }}>
selectedAnswerIndices[questionIndex + index] === 2 <RadioButton
} label={questions[questionIndex + index].answers[0]}
onPress={() => selected={
setSelectedAnswer(2, questionIndex + index) selectedAnswerIndices[questionIndex + index] === 0
} }
value={1} onPress={() =>
/> setSelectedAnswer(0, questionIndex + index)
<RadioButton }
textColor="black" value={3}
label={questions[questionIndex + index].answers[3]} />
selected={ <RadioButton
selectedAnswerIndices[questionIndex + index] === 3 label={questions[questionIndex + index].answers[1]}
} selected={
onPress={() => selectedAnswerIndices[questionIndex + index] === 1
setSelectedAnswer(3, questionIndex + index) }
} onPress={() =>
value={0} setSelectedAnswer(1, questionIndex + index)
/> }
value={2}
/>
<RadioButton
label={questions[questionIndex + index].answers[2]}
selected={
selectedAnswerIndices[questionIndex + index] === 2
}
onPress={() =>
setSelectedAnswer(2, questionIndex + index)
}
value={1}
/>
<RadioButton
textColor="black"
label={questions[questionIndex + index].answers[3]}
selected={
selectedAnswerIndices[questionIndex + index] === 3
}
onPress={() =>
setSelectedAnswer(3, questionIndex + index)
}
value={0}
/>
</View>
</View> </View>
</View> </View>
</View> ))}
))} <View
<View style={{
style={{ flexDirection: 'row',
flexDirection: 'row', justifyContent: 'space-between',
justifyContent: 'space-between', marginTop: 50,
marginTop: 50, marginBottom: 100,
marginBottom: 30, }}>
}}> {!isOnFirstQuestions && (
{!isOnFirstQuestions && ( <TouchableOpacity
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
style={{ style={{
color: 'white', backgroundColor: COLORS.pastal_blue,
fontSize: 20, height: 50,
fontWeight: 'bold', justifyContent: 'center',
}}> alignItems: 'center',
Back marginHorizontal: 20,
</Text> borderRadius: 16,
</TouchableOpacity> width: 140,
)} elevation: 10,
{!isOnLastQuestions && ( }}
<TouchableOpacity onPress={handlePrevious}>
style={{ <Text
backgroundColor: COLORS.pastal_blue, bold
height: 50, medium
justifyContent: 'center', center
alignItems: 'center', style={{
marginHorizontal: isOnFirstQuestions ? 240 : 20, color: 'white',
borderRadius: 16, fontSize: 20,
width: 140, fontWeight: 'bold',
elevation: 10, }}>
}} Back
onPress={handleNext}> </Text>
<Text </TouchableOpacity>
bold )}
medium {!isOnLastQuestions && (
center <TouchableOpacity
style={{ style={{
color: 'white', backgroundColor: COLORS.pastal_blue,
fontWeight: 'bold', height: 50,
fontSize: 20, justifyContent: 'center',
}}> alignItems: 'center',
Next marginHorizontal: isOnFirstQuestions ? 240 : 20,
</Text> borderRadius: 16,
</TouchableOpacity> width: 140,
)} elevation: 10,
{isOnLastQuestions && ( }}
<TouchableOpacity onPress={handleNext}>
style={{ <Text
backgroundColor: '#DE3163', bold
height: 50, medium
justifyContent: 'center', center
alignItems: 'center', style={{
marginHorizontal: 20, color: 'white',
borderRadius: 16, fontWeight: 'bold',
width: 150, fontSize: 20,
elevation: 10, }}>
}} Next
onPress={handleNavigationToQuizScore}> </Text>
<Text </TouchableOpacity>
bold )}
medium {isOnLastQuestions && (
center <TouchableOpacity
style={{ style={{
color: 'white', backgroundColor: '#DE3163',
fontSize: 20, height: 50,
fontWeight: 'bold', justifyContent: 'center',
}}> alignItems: 'center',
Submit marginHorizontal: 20,
</Text> borderRadius: 16,
</TouchableOpacity> width: 150,
)} elevation: 10,
</View> }}
</LinearGradient> onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Submit
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
</ScrollView>
)} )}
</> </>
); );
...@@ -303,4 +308,10 @@ const styles = StyleSheet.create({ ...@@ -303,4 +308,10 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
}); });
...@@ -6,6 +6,7 @@ import { ...@@ -6,6 +6,7 @@ import {
TouchableOpacity, TouchableOpacity,
Text, Text,
ActivityIndicator, ActivityIndicator,
ScrollView,
} from 'react-native'; } from 'react-native';
import axios from 'axios'; import axios from 'axios';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
...@@ -91,40 +92,20 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -91,40 +92,20 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
<ActivityIndicator size={150} color={COLORS.dark_purple} /> <ActivityIndicator size={150} color={COLORS.dark_purple} />
</View> </View>
) : ( ) : (
<LinearGradient <ScrollView
style={{ style={styles.scrollContainer}
flex: 1, contentContainerStyle={styles.contentContainer}>
width: '100%', <LinearGradient
height: '100%', style={{
}} flex: 1,
colors={[COLORS.white, '#FDCEDF']}> width: '100%',
{questions height: '100%',
.slice(questionIndex, questionIndex + 2) }}
.map((question, index) => ( colors={[COLORS.white, '#FDCEDF']}>
<View style={{padding: 18, marginTop: 42}} key={question._id}> {questions
<View .slice(questionIndex, questionIndex + 2)
style={{ .map((question, index) => (
justifyContent: 'center', <View style={{padding: 18, marginTop: 42}} key={question._id}>
alignItems: 'center',
}}>
<Text
style={{
color: COLORS.pastal_blue,
fontSize: 22,
fontWeight: 'bold',
}}>
ප්‍රශ්නය {questionIndex + index + 1}
</Text>
</View>
<View
style={{
backgroundColor: 'white',
borderColor: COLORS.pink,
borderWidth: 3,
borderRadius: 17,
marginTop: 5,
padding: 12,
}}>
<View <View
style={{ style={{
justifyContent: 'center', justifyContent: 'center',
...@@ -132,154 +113,178 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -132,154 +113,178 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
}}> }}>
<Text <Text
style={{ style={{
color: 'black', color: COLORS.pastal_blue,
fontSize: 15, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: 10,
}}> }}>
{question.question} ප්‍රශ්නය {questionIndex + index + 1}
</Text> </Text>
</View> </View>
<View <View
style={{ style={{
marginTop: 1, backgroundColor: 'white',
gap: 3, borderColor: COLORS.pink,
marginBottom: 1, borderWidth: 3,
color: 'black', borderRadius: 17,
marginRight: 25, marginTop: 5,
padding: 12,
}}> }}>
<RadioButton <View
label={questions[questionIndex + index].answers[0]} style={{
selected={ justifyContent: 'center',
selectedAnswerIndices[questionIndex + index] === 0 alignItems: 'center',
} }}>
onPress={() => <Text
setSelectedAnswer(0, questionIndex + index) style={{
} color: 'black',
value={3} fontSize: 15,
/> fontWeight: 'bold',
<RadioButton marginTop: 10,
label={questions[questionIndex + index].answers[1]} }}>
selected={ {question.question}
selectedAnswerIndices[questionIndex + index] === 1 </Text>
} </View>
onPress={() => <View
setSelectedAnswer(1, questionIndex + index) style={{
} marginTop: 1,
value={2} gap: 3,
/> marginBottom: 1,
<RadioButton color: 'black',
label={questions[questionIndex + index].answers[2]} marginRight: 25,
selected={ }}>
selectedAnswerIndices[questionIndex + index] === 2 <RadioButton
} label={questions[questionIndex + index].answers[0]}
onPress={() => selected={
setSelectedAnswer(2, questionIndex + index) selectedAnswerIndices[questionIndex + index] === 0
} }
value={1} onPress={() =>
/> setSelectedAnswer(0, questionIndex + index)
<RadioButton }
textColor="black" value={3}
label={questions[questionIndex + index].answers[3]} />
selected={ <RadioButton
selectedAnswerIndices[questionIndex + index] === 3 label={questions[questionIndex + index].answers[1]}
} selected={
onPress={() => selectedAnswerIndices[questionIndex + index] === 1
setSelectedAnswer(3, questionIndex + index) }
} onPress={() =>
value={0} setSelectedAnswer(1, questionIndex + index)
/> }
value={2}
/>
<RadioButton
label={questions[questionIndex + index].answers[2]}
selected={
selectedAnswerIndices[questionIndex + index] === 2
}
onPress={() =>
setSelectedAnswer(2, questionIndex + index)
}
value={1}
/>
<RadioButton
textColor="black"
label={questions[questionIndex + index].answers[3]}
selected={
selectedAnswerIndices[questionIndex + index] === 3
}
onPress={() =>
setSelectedAnswer(3, questionIndex + index)
}
value={0}
/>
</View>
</View> </View>
</View> </View>
</View> ))}
))} <View
<View style={{
style={{ flexDirection: 'row',
flexDirection: 'row', justifyContent: 'space-between',
justifyContent: 'space-between', marginTop: 50,
marginTop: 50, marginBottom: 100,
marginBottom: 30, }}>
}}> {!isOnFirstQuestions && (
{!isOnFirstQuestions && ( <TouchableOpacity
<TouchableOpacity
style={{
backgroundColor: COLORS.pastal_blue,
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
style={{ style={{
color: 'white', backgroundColor: COLORS.pastal_blue,
fontSize: 20, height: 50,
fontWeight: 'bold', justifyContent: 'center',
}}> alignItems: 'center',
ආපසු marginHorizontal: 20,
</Text> borderRadius: 16,
</TouchableOpacity> width: 140,
)} elevation: 10,
{!isOnLastQuestions && ( }}
<TouchableOpacity onPress={handlePrevious}>
style={{ <Text
backgroundColor: COLORS.pastal_blue, bold
height: 50, medium
justifyContent: 'center', center
alignItems: 'center', style={{
marginHorizontal: isOnFirstQuestions ? 240 : 20, color: 'white',
borderRadius: 16, fontSize: 20,
width: 140, fontWeight: 'bold',
elevation: 10, }}>
}} ආපසු
onPress={handleNext}> </Text>
<Text </TouchableOpacity>
bold )}
medium {!isOnLastQuestions && (
center <TouchableOpacity
style={{ style={{
color: 'white', backgroundColor: COLORS.pastal_blue,
fontSize: 20, height: 50,
fontWeight: 'bold', justifyContent: 'center',
}}> alignItems: 'center',
ඊළඟ marginHorizontal: isOnFirstQuestions ? 240 : 20,
</Text> borderRadius: 16,
</TouchableOpacity> width: 140,
)} elevation: 10,
{isOnLastQuestions && ( }}
<TouchableOpacity onPress={handleNext}>
style={{ <Text
backgroundColor: '#DE3163', bold
height: 50, medium
justifyContent: 'center', center
alignItems: 'center', style={{
marginHorizontal: 20, color: 'white',
borderRadius: 16, fontSize: 20,
width: 150, fontWeight: 'bold',
elevation: 10, }}>
}} ඊළඟ
onPress={handleNavigationToQuizScore}> </Text>
<Text </TouchableOpacity>
bold )}
medium {isOnLastQuestions && (
center <TouchableOpacity
style={{ style={{
color: 'white', backgroundColor: '#DE3163',
fontSize: 20, height: 50,
fontWeight: 'bold', justifyContent: 'center',
}}> alignItems: 'center',
ස්ථිර කරන්න marginHorizontal: 20,
</Text> borderRadius: 16,
</TouchableOpacity> width: 150,
)} elevation: 10,
</View> }}
</LinearGradient> onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ස්ථිර කරන්න
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
</ScrollView>
)} )}
</> </>
); );
...@@ -302,4 +307,10 @@ const styles = StyleSheet.create({ ...@@ -302,4 +307,10 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
}); });
/* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-inline-styles */
/* eslint-disable react/self-closing-comp */
import React from 'react'; import React from 'react';
import {Text, Image, View, StyleSheet, TouchableOpacity} from 'react-native'; import {
import {COLORS, ROUTES} from '../../../constants'; Text,
ImageBackground,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {COLORS, ROUTES, IMGS} from '../../../constants';
const QuizOptionsPage = ({navigation}) => { const QuizOptionsPage = ({navigation}) => {
return ( return (
...@@ -12,13 +19,10 @@ const QuizOptionsPage = ({navigation}) => { ...@@ -12,13 +19,10 @@ const QuizOptionsPage = ({navigation}) => {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
<Image <ImageBackground
source={{ source={IMGS.motherWithMidWife}
uri: 'https://www.cdc.gov/reproductivehealth/features/maternal-depression/images/feature-maternal-health-depression-2021.png?_=20351', style={styles.backgroundImage}
}} resizeMode="cover"></ImageBackground>
style={{width: 450, height: 400}}
resizeMode="contain"
/>
</View> </View>
<View style={styles.bottomView}> <View style={styles.bottomView}>
<View style={{padding: 25}}> <View style={{padding: 25}}>
...@@ -32,7 +36,7 @@ const QuizOptionsPage = ({navigation}) => { ...@@ -32,7 +36,7 @@ const QuizOptionsPage = ({navigation}) => {
color: COLORS.navyBlue, color: COLORS.navyBlue,
fontSize: 22, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 25, marginBottom: 20,
fontFamily: 'monospace', fontFamily: 'monospace',
textAlign: 'center', textAlign: 'center',
}}> }}>
...@@ -55,16 +59,6 @@ const QuizOptionsPage = ({navigation}) => { ...@@ -55,16 +59,6 @@ const QuizOptionsPage = ({navigation}) => {
}}> }}>
Try with Us & Have a fun Try with Us & Have a fun
</Text> </Text>
<Text
style={{
color: 'black',
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'monospace',
textAlign: 'center',
}}>
Play Games & Enjoy your time
</Text>
</View> </View>
<View <View
style={{ style={{
...@@ -76,7 +70,7 @@ const QuizOptionsPage = ({navigation}) => { ...@@ -76,7 +70,7 @@ const QuizOptionsPage = ({navigation}) => {
color: 'black', color: 'black',
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: 30, marginTop: 20,
textAlign: 'center', textAlign: 'center',
fontFamily: 'monospace', fontFamily: 'monospace',
}}> }}>
...@@ -93,7 +87,7 @@ const QuizOptionsPage = ({navigation}) => { ...@@ -93,7 +87,7 @@ const QuizOptionsPage = ({navigation}) => {
color: 'black', color: 'black',
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: 40, marginTop: 30,
textAlign: 'center', textAlign: 'center',
fontFamily: 'monospace', fontFamily: 'monospace',
}}> }}>
...@@ -160,6 +154,12 @@ const styles = StyleSheet.create({ ...@@ -160,6 +154,12 @@ const styles = StyleSheet.create({
flex: 2, flex: 2,
backgroundColor: '#FFC0D9', backgroundColor: '#FFC0D9',
}, },
backgroundImage: {
flex: 1,
width: 350,
height: 400,
borderRadius: 50,
},
}); });
export default QuizOptionsPage; export default QuizOptionsPage;
...@@ -64,7 +64,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => { ...@@ -64,7 +64,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
response.data.prediction.match(/\d+/)[0], response.data.prediction.match(/\d+/)[0],
10, 10,
); );
navigation.navigate(ROUTES.GameLevelPage, {predictedGameLevel}); navigation.navigate(ROUTES.MentalWellBeingTypes, {predictedGameLevel});
} else { } else {
console.error('API call failed with response:', response.data); console.error('API call failed with response:', response.data);
} }
...@@ -85,7 +85,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => { ...@@ -85,7 +85,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
style={styles.backgroundImage} style={styles.backgroundImage}
resizeMode="cover"> resizeMode="cover">
<View style={styles.container}> <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.mainCircle}>
<View style={styles.circle}> <View style={styles.circle}>
<Text style={styles.scoreText}> <Text style={styles.scoreText}>
...@@ -98,7 +98,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => { ...@@ -98,7 +98,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
style={styles.button} style={styles.button}
onPress={handleChooseGamePress}> onPress={handleChooseGamePress}>
<Text bold medium center style={styles.buttonText}> <Text bold medium center style={styles.buttonText}>
Check Your Gaming Level How to Improve Mental Well-Being
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -155,7 +155,7 @@ const styles = StyleSheet.create({ ...@@ -155,7 +155,7 @@ const styles = StyleSheet.create({
marginBottom: 30, marginBottom: 30,
fontWeight: 'bold', fontWeight: 'bold',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', textAlign: 'center',
display: 'flex', display: 'flex',
marginTop: 22, marginTop: 22,
}, },
...@@ -173,6 +173,7 @@ const styles = StyleSheet.create({ ...@@ -173,6 +173,7 @@ const styles = StyleSheet.create({
}, },
buttonText: { buttonText: {
color: 'white', color: 'white',
fontWeight: 'bold',
fontSize: 17, fontSize: 17,
}, },
bottomContainer: { bottomContainer: {
......
...@@ -16,7 +16,7 @@ const WelcomePageGame = ({navigation}) => { ...@@ -16,7 +16,7 @@ const WelcomePageGame = ({navigation}) => {
<Image <Image
source={IMGS.game_img_1} source={IMGS.game_img_1}
style={{ style={{
height: 360, height: 340,
width: 190, width: 190,
borderRadius: 20, borderRadius: 20,
position: 'absolute', position: 'absolute',
...@@ -35,7 +35,7 @@ const WelcomePageGame = ({navigation}) => { ...@@ -35,7 +35,7 @@ const WelcomePageGame = ({navigation}) => {
style={{ style={{
paddingHorizontal: 22, paddingHorizontal: 22,
position: 'absolute', position: 'absolute',
top: 410, top: 390,
width: '100%', width: '100%',
}}> }}>
<Text <Text
...@@ -80,7 +80,7 @@ const WelcomePageGame = ({navigation}) => { ...@@ -80,7 +80,7 @@ const WelcomePageGame = ({navigation}) => {
backgroundColor: COLORS.purple_new, backgroundColor: COLORS.purple_new,
borderColor: COLORS.purple_new, borderColor: COLORS.purple_new,
height: 50, height: 50,
marginBottom: 50, marginBottom: 70,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderRadius: 14, borderRadius: 14,
...@@ -92,7 +92,11 @@ const WelcomePageGame = ({navigation}) => { ...@@ -92,7 +92,11 @@ const WelcomePageGame = ({navigation}) => {
<Text <Text
medium medium
center center
style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}> style={{
color: 'white',
fontSize: 24,
fontWeight: 'bold',
}}>
Let Us Help You Let Us Help You
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
......
...@@ -40,3 +40,29 @@ export let signup = async (name, password, email, age, week) => { ...@@ -40,3 +40,29 @@ export let signup = async (name, password, email, age, week) => {
return error; return error;
} }
}; };
// getUserDetails API Call
// export const getUserDetails = async email => {
// try {
// const token = await AsyncStorage.getItem('userToken'); // Assuming you store token after login
// let response = await axios.get(
// `${BASE_PATH}/user-details?email=${encodeURIComponent(email)}`,
// {
// headers: {
// Authorization: `Bearer ${token}`, // Assuming you use Bearer token for authentication
// },
// },
// );
// console.log('userDetails', response.data);
// if (response.data.success === true) {
// await AsyncStorage.setItem(
// 'userDetails',
// JSON.stringify(response.data.data),
// );
// }
// return response.data;
// } catch (error) {
// console.error('Failed to fetch user details', error);
// throw error; // You might want to handle this differently depending on your error handling strategy
// }
// };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment