Commit 6e521176 authored by Malsha Jayakody's avatar Malsha Jayakody

change UIs

parent 66b6c0b7
/* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-inline-styles */
import React from 'react'; import React from 'react';
import { import {
ScrollView,
ImageBackground, ImageBackground,
Dimensions,
Text, Text,
View, View,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
} from 'react-native'; } from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants'; import {IMGS, ROUTES} from '../../../constants';
const ChooseGame = ({navigation, route}) => { const ChooseGame = ({navigation, route}) => {
const {predictedGameLevel} = route.params; const {predictedGameLevel} = route.params;
...@@ -134,7 +132,6 @@ const styles = StyleSheet.create({ ...@@ -134,7 +132,6 @@ const styles = StyleSheet.create({
brandViewText: { brandViewText: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 40, fontSize: 40,
// fontWeight: 'bold',
}, },
bottomView: { bottomView: {
flex: 1.5, flex: 1.5,
......
import React from 'react'; import React from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native'; import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import {COLORS, IMGS, ROUTES} from '../../../constants'; import {COLORS, ROUTES} from '../../../constants';
const GameLevelPage = ({route, navigation}) => { const GameLevelPage = ({route, navigation}) => {
const {predictedGameLevel} = route.params; const {predictedGameLevel} = route.params;
...@@ -27,17 +27,28 @@ const GameLevelPage = ({route, navigation}) => { ...@@ -27,17 +27,28 @@ const GameLevelPage = ({route, navigation}) => {
</View> </View>
<View style={styles.diamondContainer}> <View style={styles.diamondContainer}>
<View style={styles.innerCircle}> <View style={styles.innerCircle}>
<Text style={styles.scoreText}> <Text
{predictedGameLevel === 0 ? '2' : predictedGameLevel} style={{
color: '#ffffff',
fontSize: predictedGameLevel === 0 ? 20 : 100,
fontWeight: 'bold',
}}>
{predictedGameLevel === 0 ? 'No Depression' : predictedGameLevel}
</Text> </Text>
</View> </View>
</View> </View>
<TouchableOpacity <TouchableOpacity
style={styles.button} style={styles.button}
onPress={() => onPress={() => {
navigation.navigate(ROUTES.CHOOSE_GAME, {predictedGameLevel}) if (predictedGameLevel === 0) {
}> navigation.navigate(ROUTES.GAME_WELCOME);
<Text style={styles.buttonText}>Choose a Game</Text> } else {
navigation.navigate(ROUTES.CHOOSE_GAME, {predictedGameLevel});
}
}}>
<Text style={styles.buttonText}>
{predictedGameLevel === 0 ? 'Exit' : 'Choose a Game'}
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</LinearGradient> </LinearGradient>
......
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
ScrollView, ScrollView,
} from 'react-native'; } from 'react-native';
import {ROUTES, COLORS} from '../../../constants'; import {ROUTES, COLORS} from '../../../constants';
import LinearGradient from 'react-native-linear-gradient';
const MainDetailsForm = ({navigation}) => { const MainDetailsForm = ({navigation}) => {
const [maritalStatus, setMaritalStatus] = useState('single'); const [maritalStatus, setMaritalStatus] = useState('single');
...@@ -64,7 +65,13 @@ const MainDetailsForm = ({navigation}) => { ...@@ -64,7 +65,13 @@ const MainDetailsForm = ({navigation}) => {
return ( return (
<> <>
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
<View style={styles.bottomView}> <LinearGradient
style={{
flex: 1,
width: '100%',
height: '100%',
}}
colors={[COLORS.light_purple, COLORS.white, COLORS.rose]}>
<View style={{padding: 25}}> <View style={{padding: 25}}>
<View <View
style={{ style={{
...@@ -86,39 +93,6 @@ const MainDetailsForm = ({navigation}) => { ...@@ -86,39 +93,6 @@ const MainDetailsForm = ({navigation}) => {
Please answer for this questions Please answer for this questions
</Text> </Text>
</View> </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}}> <View style={{marginTop: 15}}>
<Text <Text
semi semi
...@@ -246,7 +220,7 @@ const MainDetailsForm = ({navigation}) => { ...@@ -246,7 +220,7 @@ const MainDetailsForm = ({navigation}) => {
<View style={{marginTop: 55}}> <View style={{marginTop: 55}}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: COLORS.normal_purple, backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
marginBottom: 20, marginBottom: 20,
justifyContent: 'center', justifyContent: 'center',
...@@ -281,13 +255,14 @@ const MainDetailsForm = ({navigation}) => { ...@@ -281,13 +255,14 @@ const MainDetailsForm = ({navigation}) => {
style={{ style={{
color: COLORS.white, color: COLORS.white,
fontSize: 20, fontSize: 20,
fontWeight: 700,
}}> }}>
Next Next
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </LinearGradient>
</ScrollView> </ScrollView>
</> </>
); );
......
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
ScrollView, ScrollView,
} from 'react-native'; } from 'react-native';
import {ROUTES, COLORS} from '../../../constants'; import {ROUTES, COLORS} from '../../../constants';
import LinearGradient from 'react-native-linear-gradient';
const MainDetailsFormInSinhala = ({navigation}) => { const MainDetailsFormInSinhala = ({navigation}) => {
const [maritalStatus, setMaritalStatus] = useState('single'); const [maritalStatus, setMaritalStatus] = useState('single');
...@@ -64,7 +65,13 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -64,7 +65,13 @@ const MainDetailsFormInSinhala = ({navigation}) => {
return ( return (
<> <>
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
<View style={styles.bottomView}> <LinearGradient
style={{
flex: 1,
width: '100%',
height: '100%',
}}
colors={[COLORS.light_purple, COLORS.white, COLORS.rose]}>
<View style={{padding: 25}}> <View style={{padding: 25}}>
<View <View
style={{ style={{
...@@ -86,39 +93,6 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -86,39 +93,6 @@ const MainDetailsFormInSinhala = ({navigation}) => {
කරුණාකර මෙම ප්‍රශ්න සඳහා පිළිතුරු සපයන්න කරුණාකර මෙම ප්‍රශ්න සඳහා පිළිතුරු සපයන්න
</Text> </Text>
</View> </View>
{/* <View style={{marginTop: 5}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 10,
color: COLORS.black,
}}>
ඔබගේ නම:
</Text>
<TextInput
style={{
backgroundColor: '#ffffff',
borderRadius: 15,
height: 48,
marginBottom: 10,
marginTop: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
fontSize: 13,
color: COLORS.black,
elevation: 17,
}}
// value={value}
// onChangeText={(text) => setValue(text)}
/>
</View> */}
<View style={{marginTop: 15}}> <View style={{marginTop: 15}}>
<Text <Text
semi semi
...@@ -247,7 +221,7 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -247,7 +221,7 @@ const MainDetailsFormInSinhala = ({navigation}) => {
<View style={{marginTop: 35}}> <View style={{marginTop: 35}}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: COLORS.normal_purple, backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
marginBottom: 10, marginBottom: 10,
justifyContent: 'center', justifyContent: 'center',
...@@ -288,7 +262,7 @@ const MainDetailsFormInSinhala = ({navigation}) => { ...@@ -288,7 +262,7 @@ const MainDetailsFormInSinhala = ({navigation}) => {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </LinearGradient>
</ScrollView> </ScrollView>
</> </>
); );
...@@ -304,8 +278,6 @@ const styles = StyleSheet.create({ ...@@ -304,8 +278,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',
......
...@@ -4,13 +4,12 @@ import { ...@@ -4,13 +4,12 @@ import {
View, View,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
ScrollView,
Text, Text,
ActivityIndicator, ActivityIndicator,
} 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';
import {COLORS, IMGS, ROUTES} from '../../../constants'; import {COLORS, ROUTES} from '../../../constants';
import RadioButton from '../../../components/RadioButton'; import RadioButton from '../../../components/RadioButton';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
...@@ -46,18 +45,16 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -46,18 +45,16 @@ const QuestionInEnglishPage = ({navigation, route}) => {
const loadData = () => { const loadData = () => {
axios axios
// .get('http://192.168.8.161:8070/api/quiz/all_english')
.get('http://16.16.97.48/api/quiz/all_english') .get('http://16.16.97.48/api/quiz/all_english')
.then(response => { .then(response => {
// console.log(response.data);
setQuestions(response.data.data); setQuestions(response.data.data);
setIsLoading(false); setIsLoading(false);
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
2; 2;
// Ensure loading is set to false even if there's an error
setIsLoading(false); // Ensure loading is set to false even if there's an error setIsLoading(false);
}); });
}; };
const handleNext = () => { const handleNext = () => {
...@@ -75,8 +72,6 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -75,8 +72,6 @@ const QuestionInEnglishPage = ({navigation, route}) => {
const isOnFirstQuestions = questionIndex === 0; const isOnFirstQuestions = questionIndex === 0;
const isOnLastQuestions = questionIndex >= questions.length - 2; const isOnLastQuestions = questionIndex >= questions.length - 2;
const appNavigation = useNavigation();
// Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter // Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter
const handleNavigationToQuizScore = () => { const handleNavigationToQuizScore = () => {
// Create a new object that includes all the formData fields and adds the totalScore as depression_level // Create a new object that includes all the formData fields and adds the totalScore as depression_level
...@@ -117,7 +112,7 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -117,7 +112,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
}}> }}>
<Text <Text
style={{ style={{
color: '#DE3163', color: COLORS.pastal_blue,
fontSize: 22, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
}}> }}>
...@@ -127,7 +122,7 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -127,7 +122,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
<View <View
style={{ style={{
backgroundColor: 'white', backgroundColor: 'white',
borderColor: '#FFC107', // Add this line to set the border color borderColor: COLORS.pink,
borderWidth: 3, borderWidth: 3,
borderRadius: 17, borderRadius: 17,
marginTop: 5, marginTop: 5,
...@@ -150,8 +145,8 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -150,8 +145,8 @@ const QuestionInEnglishPage = ({navigation, route}) => {
</View> </View>
<View <View
style={{ style={{
marginTop: 30, marginTop: 10,
gap: 2, gap: 3,
marginBottom: 5, marginBottom: 5,
color: 'black', color: 'black',
marginRight: 25, marginRight: 25,
...@@ -205,13 +200,13 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -205,13 +200,13 @@ const QuestionInEnglishPage = ({navigation, route}) => {
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginTop: 25, marginTop: 50,
marginBottom: 50, marginBottom: 30,
}}> }}>
{!isOnFirstQuestions && ( {!isOnFirstQuestions && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: '#DE3163', backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -237,7 +232,7 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -237,7 +232,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
{!isOnLastQuestions && ( {!isOnLastQuestions && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: '#DE3163', backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -263,7 +258,7 @@ const QuestionInEnglishPage = ({navigation, route}) => { ...@@ -263,7 +258,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
{isOnLastQuestions && ( {isOnLastQuestions && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: '#116A7B', backgroundColor: '#DE3163',
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
......
...@@ -4,13 +4,12 @@ import { ...@@ -4,13 +4,12 @@ import {
View, View,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
ScrollView,
Text, Text,
ActivityIndicator, ActivityIndicator,
} 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';
import {COLORS, IMGS, ROUTES} from '../../../constants'; import {COLORS, ROUTES} from '../../../constants';
import RadioButton from '../../../components/RadioButton'; import RadioButton from '../../../components/RadioButton';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
...@@ -46,7 +45,6 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -46,7 +45,6 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
const loadData = () => { const loadData = () => {
axios axios
// .get('http://192.168.8.161:8070/api/quiz/all_sinhala')
.get('http://16.16.97.48/api/quiz/all_sinhala') .get('http://16.16.97.48/api/quiz/all_sinhala')
.then(response => { .then(response => {
setQuestions(response.data.data); setQuestions(response.data.data);
...@@ -72,8 +70,6 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -72,8 +70,6 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
const isOnFirstQuestions = questionIndex === 0; const isOnFirstQuestions = questionIndex === 0;
const isOnLastQuestions = questionIndex >= questions.length - 2; const isOnLastQuestions = questionIndex >= questions.length - 2;
const appNavigation = useNavigation();
// Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter // Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter
const handleNavigationToQuizScore = () => { const handleNavigationToQuizScore = () => {
const updatedFormData = { const updatedFormData = {
...@@ -113,7 +109,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -113,7 +109,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
}}> }}>
<Text <Text
style={{ style={{
color: '#DE3163', color: COLORS.pastal_blue,
fontSize: 22, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
}}> }}>
...@@ -123,7 +119,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -123,7 +119,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
<View <View
style={{ style={{
backgroundColor: 'white', backgroundColor: 'white',
borderColor: '#FFC107', // Add this line to set the border color borderColor: COLORS.pink,
borderWidth: 3, borderWidth: 3,
borderRadius: 17, borderRadius: 17,
marginTop: 5, marginTop: 5,
...@@ -146,9 +142,9 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -146,9 +142,9 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
</View> </View>
<View <View
style={{ style={{
marginTop: 30, marginTop: 1,
gap: 2, gap: 3,
marginBottom: 5, marginBottom: 1,
color: 'black', color: 'black',
marginRight: 25, marginRight: 25,
}}> }}>
...@@ -201,13 +197,13 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -201,13 +197,13 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginTop: 25, marginTop: 50,
marginBottom: 50, marginBottom: 30,
}}> }}>
{!isOnFirstQuestions && ( {!isOnFirstQuestions && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: '#DE3163', backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -233,7 +229,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -233,7 +229,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
{!isOnLastQuestions && ( {!isOnLastQuestions && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: '#DE3163', backgroundColor: COLORS.pastal_blue,
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -259,7 +255,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => { ...@@ -259,7 +255,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
{isOnLastQuestions && ( {isOnLastQuestions && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: '#116A7B', backgroundColor: '#DE3163',
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
......
/* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-inline-styles */
import React from 'react'; import React from 'react';
import { import {Text, Image, View, StyleSheet, TouchableOpacity} from 'react-native';
ScrollView, import {COLORS, ROUTES} from '../../../constants';
ImageBackground,
Text,
Image,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
const QuizOptionsPage = ({navigation}) => { const QuizOptionsPage = ({navigation}) => {
return ( return (
......
...@@ -8,11 +8,9 @@ import { ...@@ -8,11 +8,9 @@ import {
ActivityIndicator, ActivityIndicator,
} from 'react-native'; } from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants'; import {COLORS, IMGS, ROUTES} from '../../../constants';
import axios from 'axios';
import {gameLevelPredict} from '../../../services/games'; import {gameLevelPredict} from '../../../services/games';
const QuizScoreDisplayPage = ({route, navigation}) => { const QuizScoreDisplayPage = ({route, navigation}) => {
// const {score} = route.params;
const {formData} = route.params || { const {formData} = route.params || {
formData: {}, formData: {},
}; };
...@@ -43,10 +41,10 @@ const QuizScoreDisplayPage = ({route, navigation}) => { ...@@ -43,10 +41,10 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
musicFields[musicKeys[randomIndex]] = 1; musicFields[musicKeys[randomIndex]] = 1;
try { try {
const response = await gameLevelPredict( const response = await gameLevelPredict(
formData.age, // Assuming formData contains 'age' formData.age,
formData.depression_level, // Passed from previous screen formData.depression_level,
formData.previous_child_birth_experiences, // Assuming formData contains 'previous_child_birth_experiences' formData.previous_child_birth_experiences,
formData.marital_status_divorced, // Assuming formData contains boolean values for these fields formData.marital_status_divorced,
formData.marital_status_married, formData.marital_status_married,
formData.marital_status_single, formData.marital_status_single,
formData.family_background_bad, formData.family_background_bad,
...@@ -99,7 +97,6 @@ const QuizScoreDisplayPage = ({route, navigation}) => { ...@@ -99,7 +97,6 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
<TouchableOpacity <TouchableOpacity
style={styles.button} style={styles.button}
onPress={handleChooseGamePress}> onPress={handleChooseGamePress}>
{/* onPress={() => navigation.navigate(ROUTES.Level01Instructions)}> */}
<Text bold medium center style={styles.buttonText}> <Text bold medium center style={styles.buttonText}>
Check Your Gaming Level Check Your Gaming Level
</Text> </Text>
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
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 LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import Button from '../../../components/Button';
import {COLORS, IMGS, ROUTES} from '../../../constants'; import {COLORS, IMGS, ROUTES} from '../../../constants';
const WelcomePageGame = ({navigation}) => { const WelcomePageGame = ({navigation}) => {
......
...@@ -13,6 +13,17 @@ import Sound from 'react-native-sound'; ...@@ -13,6 +13,17 @@ import Sound from 'react-native-sound';
// A simple array of names, meanings, and origins for demonstration // A simple array of names, meanings, and origins for demonstration
const namesData = [ const namesData = [
{name: 'Yasas', meaning: 'Fame, Glory', origin: 'Sinhalese'}, {name: 'Yasas', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Sama', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Dilshan', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Poorna', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Parami', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Randi', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Isura', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Devin', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Lili', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Ann', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Amara', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Kisuri', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Ashan', meaning: 'Eternal, Immortal', origin: 'Sinhalese'}, {name: 'Ashan', meaning: 'Eternal, Immortal', origin: 'Sinhalese'},
{name: 'Nirmala', meaning: 'Pure, Clean', origin: 'Sinhalese'}, {name: 'Nirmala', meaning: 'Pure, Clean', origin: 'Sinhalese'},
{name: 'Tharaka', meaning: 'Star', origin: 'Sinhalese'}, {name: 'Tharaka', meaning: 'Star', origin: 'Sinhalese'},
......
...@@ -92,26 +92,34 @@ const Game02Level04 = ({navigation}) => { ...@@ -92,26 +92,34 @@ const Game02Level04 = ({navigation}) => {
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y); const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
if (foundBabyItemIndex !== -1) { if (foundBabyItemIndex !== -1) {
setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier // Update the collected items and perform checks inside the update callback
Alert.alert('Good job!', 'You found a baby item!'); setCollectedItems(currentItems => {
const updatedItems = [...currentItems, `${x},${y}`];
// Remove the found baby item from the array to prevent recounting // Remove the found baby item from the array to prevent recounting
const newBabyItems = [...babyItems]; const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1); newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems); setBabyItems(newBabyItems);
// Check if two baby items have been collected // Check if the last baby item has been collected
if (collectedItems.length + 1 >= 2) { if (updatedItems.length >= 2) {
Alert.alert('Good job!', 'You found a baby item!', [ // This is the last item; show only the congratulations message
{ Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
text: 'OK', {
onPress: () => { text: 'OK',
navigation.navigate(ROUTES.Game02ProgressLevel02); onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel02);
backgroundMusic.current.setVolume(0.0);
},
}, },
}, ]);
]); } else {
backgroundMusic.current.setVolume(0.0); // Not the last item, show the generic good job message
} Alert.alert('Good job!', 'You found a baby item!');
}
return updatedItems;
});
} else if (foundLadyItem) { } else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [ Alert.alert('Oops!', "This is a lady's item. Try again!", [
{ {
...@@ -151,7 +159,11 @@ const Game02Level04 = ({navigation}) => { ...@@ -151,7 +159,11 @@ const Game02Level04 = ({navigation}) => {
<Text <Text
medium medium
center center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}> style={{
color: 'black',
fontSize: 30,
fontWeight: 'bold',
}}>
{isMuted ? '🔇' : '🔊'} {isMuted ? '🔇' : '🔊'}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
......
...@@ -29,7 +29,6 @@ const Game02Level05 = ({navigation}) => { ...@@ -29,7 +29,6 @@ const Game02Level05 = ({navigation}) => {
{x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38}, {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
]); ]);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null); const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false); const [isMuted, setIsMuted] = useState(false);
...@@ -93,26 +92,36 @@ const Game02Level05 = ({navigation}) => { ...@@ -93,26 +92,36 @@ const Game02Level05 = ({navigation}) => {
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y); const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
if (foundBabyItemIndex !== -1) { if (foundBabyItemIndex !== -1) {
setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier // Prepare the updated list of baby items by removing the found item
Alert.alert('Good job!', 'You found a baby item!');
// Remove the found baby item from the array to prevent recounting
const newBabyItems = [...babyItems]; const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1); newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems);
// Check if two baby items have been collected // Update the collected items state
if (collectedItems.length + 1 >= 3) { setCollectedItems(currentItems => {
Alert.alert('Good job!', 'You found a baby item!', [ const updatedItems = [...currentItems, `${x},${y}`];
{
text: 'OK', // Check if all baby items have been collected (assuming total items needed to win is 3)
onPress: () => { if (updatedItems.length === 3) {
navigation.navigate(ROUTES.Game02ProgressLevel04); // Show only the congratulations message when the last item is collected
Alert.alert('Congratulations 🥳🥳! You won the game!', '', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel04);
backgroundMusic.current.setVolume(0.0);
},
}, },
}, ]);
]); } else {
backgroundMusic.current.setVolume(0.0); // Show this alert if there are still items left to collect
} Alert.alert('Good job!', 'You found a baby item!');
}
return updatedItems;
});
// Update the baby items array state
setBabyItems(newBabyItems);
} else if (foundLadyItem) { } else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [ Alert.alert('Oops!', "This is a lady's item. Try again!", [
{ {
...@@ -151,7 +160,11 @@ const Game02Level05 = ({navigation}) => { ...@@ -151,7 +160,11 @@ const Game02Level05 = ({navigation}) => {
<Text <Text
medium medium
center center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}> style={{
color: 'black',
fontSize: 30,
fontWeight: 'bold',
}}>
{isMuted ? '🔇' : '🔊'} {isMuted ? '🔇' : '🔊'}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
......
...@@ -32,7 +32,6 @@ const Game02Level06 = ({navigation}) => { ...@@ -32,7 +32,6 @@ const Game02Level06 = ({navigation}) => {
{x: 2, y: 5, type: 'ladyItem', image: IMGS.game_img_29}, {x: 2, y: 5, type: 'ladyItem', image: IMGS.game_img_29},
]); ]);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null); const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false); const [isMuted, setIsMuted] = useState(false);
...@@ -50,8 +49,8 @@ const Game02Level06 = ({navigation}) => { ...@@ -50,8 +49,8 @@ const Game02Level06 = ({navigation}) => {
backgroundMusic.current.setNumberOfLoops(-1); backgroundMusic.current.setNumberOfLoops(-1);
}, },
); );
// Release the audio player resource when the component unmounts
return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts return () => backgroundMusic.current.release();
}, []); }, []);
const toggleMute = () => { const toggleMute = () => {
...@@ -96,26 +95,32 @@ const Game02Level06 = ({navigation}) => { ...@@ -96,26 +95,32 @@ const Game02Level06 = ({navigation}) => {
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y); const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
if (foundBabyItemIndex !== -1) { if (foundBabyItemIndex !== -1) {
setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
Alert.alert('Good job!', 'You found a baby item!');
// Remove the found baby item from the array to prevent recounting // Remove the found baby item from the array to prevent recounting
const newBabyItems = [...babyItems]; const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1); newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems); setBabyItems(newBabyItems);
// Check if two baby items have been collected // Use position as a unique identifier and update the collected items
if (collectedItems.length + 1 >= 4) { setCollectedItems(currentItems => {
Alert.alert('Congratulations 🥳🥳! You won the game.', [ const updatedItems = [...currentItems, `${x},${y}`];
{
text: 'OK', // Check if all baby items have been collected
onPress: () => { if (updatedItems.length >= 4) {
navigation.navigate(ROUTES.Game02ProgressLevel05); Alert.alert('Congratulations 🥳🥳!', 'You won the game.', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel05);
},
}, },
}, ]);
]); backgroundMusic.current.setVolume(0.0);
backgroundMusic.current.setVolume(0.0); } else {
} Alert.alert('Good job!', 'You found a baby item!');
}
return updatedItems;
});
} else if (foundLadyItem) { } else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [ Alert.alert('Oops!', "This is a lady's item. Try again!", [
{ {
...@@ -128,10 +133,6 @@ const Game02Level06 = ({navigation}) => { ...@@ -128,10 +133,6 @@ const Game02Level06 = ({navigation}) => {
} }
}; };
const resetGame = () => {
setPlayerPosition({x: 0, y: 0});
setCollectedItems([]);
};
return ( return (
<ImageBackground <ImageBackground
source={IMGS.game_img_45} source={IMGS.game_img_45}
......
...@@ -32,7 +32,6 @@ const Game02Level07 = ({navigation}) => { ...@@ -32,7 +32,6 @@ const Game02Level07 = ({navigation}) => {
{x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29}, {x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29},
]); ]);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null); const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false); const [isMuted, setIsMuted] = useState(false);
...@@ -89,11 +88,6 @@ const Game02Level07 = ({navigation}) => { ...@@ -89,11 +88,6 @@ const Game02Level07 = ({navigation}) => {
checkForItem(newX, newY); checkForItem(newX, newY);
}; };
const resetGame = () => {
setPlayerPosition({x: 0, y: 0});
setCollectedItems([]);
};
const checkForItem = (x, y) => { const checkForItem = (x, y) => {
const foundBabyItemIndex = babyItems.findIndex( const foundBabyItemIndex = babyItems.findIndex(
item => item.x === x && item.y === y, item => item.x === x && item.y === y,
...@@ -101,33 +95,41 @@ const Game02Level07 = ({navigation}) => { ...@@ -101,33 +95,41 @@ const Game02Level07 = ({navigation}) => {
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y); const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
if (foundBabyItemIndex !== -1) { if (foundBabyItemIndex !== -1) {
setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier // Use position as a unique identifier and update the collected items
Alert.alert('Good job!', 'You found a baby item!'); setCollectedItems(currentItems => {
const updatedItems = [...currentItems, `${x},${y}`];
// Remove the found baby item from the array to prevent recounting // Remove the found baby item from the array to prevent recounting
const newBabyItems = [...babyItems]; const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1); newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems); setBabyItems(newBabyItems);
// Check if two baby items have been collected // Check if all baby items have been collected (assuming total items needed to win is 3)
if (collectedItems.length + 1 >= 4) { if (updatedItems.length >= 4) {
Alert.alert('Congratulations 🥳🥳! You won the game.', [ // Only show the congratulations message when the last item is collected
{ Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
text: 'OK', {
onPress: () => { text: 'OK',
navigation.navigate(ROUTES.Game02ProgressLevel02); onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel02);
backgroundMusic.current.setVolume(0.0);
},
}, },
}, ]);
]); } else {
backgroundMusic.current.setVolume(0.0); // This alert is for collecting but not finishing the game
} Alert.alert('Good job!', 'You found a baby item!');
}
return updatedItems;
});
} else if (foundLadyItem) { } else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [ Alert.alert('Oops!', "This is a lady's item. Try again!", [
{ {
text: 'OK', text: 'OK',
onPress: () => { // onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS); // navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
}, // },
}, },
]); ]);
} }
......
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