Skip to content

E
EmidWife-New
Commit d542574b authored by Malsha Jayakody's avatar Malsha Jayakody
Browse files
Options

game design

parent 92092c6d
Show whitespace changes
Inline Side-by-side
Showing with 2546 additions and 0 deletions
src/constants/colors.js
View file @ d542574b
...@@ -9,4 +9,14 @@ export default { ...@@ -9,4 +9,14 @@ export default {
gray: '#666666', gray: '#666666',
grayLight: '#ccc', grayLight: '#ccc',
black: '#0a0a0a', black: '#0a0a0a',
navyBlue: '#000080',
purple: '#DFCCFB',
light_purple: '#D9ACF5',
dark_purple: '#BEADFA',
pink: '#EF9595',
normal_purple: '#80558C',
rose: '#FFACC7',
pastalBlue: '#D2E9E9',
purple_new: '#AC87C5',
pink_new: '#FF8080',
}; };
src/screens/home/game/GameLevelPage.js 0 → 100644
View file @ d542574b
import React from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {COLORS, IMGS, ROUTES} from '../../../constants';
const GameLevelPage = ({route, navigation}) => {
const {predictedGameLevel} = route.params;
return (
<LinearGradient
style={{
flex: 1,
}}
colors={[
'#D9EDBF',
'#FFD3B5',
COLORS.white,
'#E8D3FF',
'#DAF1F9',
'#F6DFEB',
]}
start={{x: 0.0, y: 0.0}}
end={{x: 1.0, y: 1.0}}>
<View style={styles.container}>
<View style={styles.mainContainer}>
<Text style={styles.mainText}>Your Gaming Level</Text>
</View>
<View style={styles.diamondContainer}>
<View style={styles.innerCircle}>
<Text style={styles.scoreText}>{predictedGameLevel}</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() =>
navigation.navigate(ROUTES.CHOOSE_GAME, {predictedGameLevel})
}>
<Text style={styles.buttonText}>Choose a Game</Text>
</TouchableOpacity>
</View>
</LinearGradient>
);
};
const styles = StyleSheet.create({
gradientBackground: {
flex: 1,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
diamondContainer: {
width: 250,
height: 250,
transform: [{rotate: '45deg'}],
backgroundColor: '#e76f51',
alignItems: 'center',
justifyContent: 'center',
elevation: 10,
borderRadius: 20,
},
innerCircle: {
width: 180,
height: 180,
borderRadius: 90,
backgroundColor: '#f4a261',
alignItems: 'center',
justifyContent: 'center',
transform: [{rotate: '-45deg'}],
elevation: 50,
},
scoreText: {
color: '#ffffff',
fontSize: 100,
fontWeight: 'bold',
},
mainText: {
color: 'white',
fontSize: 25,
fontWeight: 'bold',
position: 'absolute',
},
button: {
backgroundColor: '#f4a261',
top: 150,
borderRadius: 10,
elevation: 5,
width: '90%',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
height: 50,
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
mainContainer: {
elevation: 80,
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
backgroundColor: '#f4a261',
height: 50,
width: '100%',
bottom: 200,
},
});
export default GameLevelPage;
src/screens/home/game/MainDetailsFormInSinhala.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
ScrollView,
} from 'react-native';
import {ROUTES, COLORS} from '../../../constants';
const MainDetailsFormInSinhala = ({navigation}) => {
const [maritalStatus, setMaritalStatus] = useState('single');
const [familyBackground, setFamilyBackground] = useState('normal');
const [age, setAge] = useState('');
const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
useState('');
const maritalStatusOptions = [
{
key: 'single',
text: 'අවිවාහක',
selected: maritalStatus === 'single',
},
{
key: 'married',
text: 'විවාහක',
selected: maritalStatus === 'married',
},
{
key: 'divorced',
text: 'වෙන්වී සිටී',
selected: maritalStatus === 'divorced',
},
];
const familyBackgroundOptions = [
{
key: 'normal',
text: 'සාමාන්‍යයි',
selected: familyBackground === 'normal',
},
{
key: 'bad',
text: 'නරකයි',
selected: familyBackground === 'bad',
},
{
key: 'good',
text: 'හොඳයි',
selected: familyBackground === 'good',
},
];
const handleMaritalStatusSelect = key => {
setMaritalStatus(key);
};
const handleFamilyBackgroundSelect = key => {
setFamilyBackground(key);
};
return (
<>
<ScrollView style={styles.container}>
<View style={styles.bottomView}>
<View style={{padding: 25}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
}}>
<Text
style={{
color: COLORS.black,
fontSize: 17,
fontWeight: 'bold',
marginTop: 40,
marginBottom: 40,
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
}}>
කරුණාකර මෙම ප්‍රශ්න සඳහා පිළිතුරු සපයන්න
</Text>
</View>
{/* <View style={{marginTop: 5}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 10,
color: COLORS.black,
}}>
ඔබගේ නම:
</Text>
<TextInput
style={{
backgroundColor: '#ffffff',
borderRadius: 15,
height: 48,
marginBottom: 10,
marginTop: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
fontSize: 13,
color: COLORS.black,
elevation: 17,
}}
// value={value}
// onChangeText={(text) => setValue(text)}
/>
</View> */}
<View style={{marginTop: 15}}>
<Text
semi
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,
}}
onChangeText={text => setAge(text)} // Use setAge for the age field
keyboardType="numeric" // Set keyboardType appropriately
value={age}
/>
</View>
<View style={{marginTop: 15}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20,
color: COLORS.black,
}}>
විවාහක/අවිවාහක බව:{' '}
</Text>
<View style={styles.radioContainer}>
{maritalStatusOptions.map(item => (
<View key={item.key} style={styles.radioButtonContainer}>
<TouchableOpacity
style={styles.circle}
onPress={() => handleMaritalStatusSelect(item.key)}>
{item.selected ? (
<View style={styles.checkedCircle} />
) : null}
</TouchableOpacity>
<Text style={styles.radioText}>{item.text}</Text>
</View>
))}
</View>
</View>
<View style={{marginTop: 15}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20,
color: COLORS.black,
}}>
පවුල් පසුබිම:
</Text>
<View style={styles.radioContainer}>
{familyBackgroundOptions.map(item => (
<View key={item.key} style={styles.radioButtonContainer}>
<TouchableOpacity
style={styles.circle}
onPress={() => handleFamilyBackgroundSelect(item.key)}>
{item.selected ? (
<View style={styles.checkedCircle} />
) : null}
</TouchableOpacity>
<Text style={styles.radioText}>{item.text}</Text>
</View>
))}
</View>
</View>
<View style={{marginTop: 15}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20,
color: COLORS.black,
}}>
පෙර දරු උපත් සංඛ්‍යාව:
</Text>
<TextInput
style={{
backgroundColor: '#ffffff',
borderRadius: 15,
height: 48,
marginBottom: 10,
marginTop: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
fontSize: 13,
color: COLORS.black,
elevation: 17,
}}
keyboardType="number-pad"
onChangeText={text => setPreviousChildBirthExperiences(text)} // Use setAge for the age field // Set keyboardType appropriately
value={previousChildBirthExperiences}
/>
</View>
<View style={{marginTop: 55}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.normal_purple,
height: 50,
marginBottom: 10,
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,
},
})
}>
<Text
bold
medium
center
style={{
color: COLORS.white,
fontSize: 20,
}}>
Next
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</>
);
};
const styles = StyleSheet.create({
brandViewText: {
color: '#FFFFFF',
fontSize: 40,
fontWeight: 'bold',
},
bottomView: {
flex: 1,
height: 860,
backgroundColor: COLORS.purple,
// borderTopStartRadius: 30,
// borderTopEndRadius: 30,
},
radioContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
marginTop: 10,
},
radioButtonContainer: {
flexDirection: 'row',
alignItems: 'center',
},
circle: {
height: 20,
width: 20,
borderRadius: 10,
borderWidth: 1,
borderColor: '#ACACAC',
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 10,
},
checkedCircle: {
width: 14,
height: 14,
borderRadius: 7,
backgroundColor: '#794F9B',
},
radioText: {
marginLeft: 5,
color: COLORS.black,
},
container: {
flex: 1,
},
});
export default MainDetailsFormInSinhala;
src/screens/home/game/QuestionsInEnglish.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React, {useEffect, useState} from 'react';
import {
View,
StyleSheet,
TouchableOpacity,
ScrollView,
Text,
ActivityIndicator,
} from 'react-native';
import axios from 'axios';
import {useNavigation} from '@react-navigation/native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
import RadioButton from '../../../components/RadioButton';
import LinearGradient from 'react-native-linear-gradient';
const QuestionInEnglishPage = ({navigation, route}) => {
const {formData} = route.params;
const [questions, setQuestions] = useState([]);
const [questionIndex, setQuestionIndex] = useState(0);
const [selectedAnswerIndices, setSelectedAnswerIndices] = useState(
new Array(questions.length).fill(null),
);
const [totalScore, setTotalScore] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const setSelectedAnswer = (optionIndex, questionIndex) => {
const newSelectedAnswerIndices = [...selectedAnswerIndices];
newSelectedAnswerIndices[questionIndex] = optionIndex;
setSelectedAnswerIndices(newSelectedAnswerIndices);
// Calculate the total score based on the selected answer indices
let newTotalScore = 0;
for (let i = 0; i < selectedAnswerIndices.length; i++) {
const selectedOptionIndex = selectedAnswerIndices[i];
if (selectedOptionIndex !== null) {
newTotalScore += questions[i].scores[selectedOptionIndex];
}
}
setTotalScore(newTotalScore);
};
useEffect(() => {
loadData();
}, []);
const loadData = () => {
axios
// .get('http://192.168.8.161:8070/api/quiz/all_english')
.get('http://10.0.2.2:8070/api/quiz/all_english')
.then(response => {
// console.log(response.data);
setQuestions(response.data.data);
setIsLoading(false);
})
.catch(error => {
console.error(error);
2;
setIsLoading(false); // Ensure loading is set to false even if there's an error
});
};
const handleNext = () => {
if (questionIndex < questions.length - 2) {
setQuestionIndex(questionIndex + 2);
}
};
const handlePrevious = () => {
if (questionIndex > 0) {
setQuestionIndex(questionIndex - 2);
}
};
const isOnFirstQuestions = questionIndex === 0;
const isOnLastQuestions = questionIndex >= questions.length - 2;
const appNavigation = useNavigation();
// Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter
const handleNavigationToQuizScore = () => {
// Create a new object that includes all the formData fields and adds the totalScore as depression_level
const updatedFormData = {
...formData,
depression_level: totalScore,
};
// Navigate to the QUIZ_SCORE page, passing the updated formData
navigation.navigate(ROUTES.QUIZ_SCORE, {
depression_level: totalScore, // You can still pass totalScore separately if needed
formData: updatedFormData,
});
};
return (
<>
{isLoading ? (
<View style={styles.loaderContainer}>
<ActivityIndicator size={150} color={COLORS.dark_purple} />
</View>
) : (
<ScrollView style={styles.container}>
<LinearGradient
style={{
flex: 1,
}}
colors={[COLORS.white, '#FDCEDF']}>
{questions
.slice(questionIndex, questionIndex + 2)
.map((question, index) => (
<View style={{padding: 18, marginTop: 42}} key={question._id}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: '#DE3163',
fontSize: 22,
fontWeight: 'bold',
}}>
Question {questionIndex + index + 1}
</Text>
</View>
<View
style={{
backgroundColor: 'white',
borderColor: '#FFC107', // Add this line to set the border color
borderWidth: 3,
borderRadius: 17,
marginTop: 10,
padding: 14,
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: 'black',
fontSize: 15,
fontWeight: 'bold',
marginTop: 16,
}}>
{question.question}
</Text>
</View>
<View
style={{
marginTop: 30,
gap: 15,
marginBottom: 15,
color: 'black',
marginRight: 25,
}}>
<RadioButton
label={questions[questionIndex + index].answers[0]}
selected={
selectedAnswerIndices[questionIndex + index] === 0
}
onPress={() =>
setSelectedAnswer(0, questionIndex + index)
}
value={3}
/>
<RadioButton
label={questions[questionIndex + index].answers[1]}
selected={
selectedAnswerIndices[questionIndex + index] === 1
}
onPress={() =>
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
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 25,
marginBottom: 50,
}}>
{!isOnFirstQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Back
</Text>
</TouchableOpacity>
)}
{!isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: isOnFirstQuestions ? 240 : 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handleNext}>
<Text
bold
medium
center
style={{
color: 'white',
fontWeight: 'bold',
fontSize: 20,
}}>
Next
</Text>
</TouchableOpacity>
)}
{isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#116A7B',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 150,
elevation: 10,
}}
onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
Submit
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
</ScrollView>
)}
</>
);
};
export default QuestionInEnglishPage;
const styles = StyleSheet.create({
brandViewText: {
fontSize: 40,
fontWeight: 'bold',
},
bottomView: {
flex: 1.5,
},
loaderContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
src/screens/home/game/QuestionsInShinhala.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React, {useEffect, useState} from 'react';
import {
View,
StyleSheet,
TouchableOpacity,
ScrollView,
Text,
ActivityIndicator,
} from 'react-native';
import axios from 'axios';
import {useNavigation} from '@react-navigation/native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
import RadioButton from '../../../components/RadioButton';
import LinearGradient from 'react-native-linear-gradient';
const QuestionInSinhalaPage = ({navigation, route}) => {
const [questions, setQuestions] = useState([]);
const [questionIndex, setQuestionIndex] = useState(0);
const [selectedAnswerIndices, setSelectedAnswerIndices] = useState(
new Array(questions.length).fill(null),
);
const [totalScore, setTotalScore] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const {formData} = route.params;
const setSelectedAnswer = (optionIndex, questionIndex) => {
const newSelectedAnswerIndices = [...selectedAnswerIndices];
newSelectedAnswerIndices[questionIndex] = optionIndex;
setSelectedAnswerIndices(newSelectedAnswerIndices);
// Calculate the total score based on the selected answer indices
let newTotalScore = 0;
for (let i = 0; i < selectedAnswerIndices.length; i++) {
const selectedOptionIndex = selectedAnswerIndices[i];
if (selectedOptionIndex !== null) {
newTotalScore += questions[i].scores[selectedOptionIndex];
}
}
setTotalScore(newTotalScore);
};
useEffect(() => {
loadData();
}, []);
const loadData = () => {
axios
// .get('http://192.168.8.161:8070/api/quiz/all_sinhala')
.get('http://10.0.2.2:8070/api/quiz/all_sinhala')
.then(response => {
setQuestions(response.data.data);
setIsLoading(false);
})
.catch(error => {
console.error(error);
setIsLoading(false); // Ensure loading is set to false even if there's an error
});
};
const handleNext = () => {
if (questionIndex < questions.length - 2) {
setQuestionIndex(questionIndex + 2);
}
};
const handlePrevious = () => {
if (questionIndex > 0) {
setQuestionIndex(questionIndex - 2);
}
};
const isOnFirstQuestions = questionIndex === 0;
const isOnLastQuestions = questionIndex >= questions.length - 2;
const appNavigation = useNavigation();
// Handle navigation to the "Quiz Score" page and pass the totalScore as a parameter
const handleNavigationToQuizScore = () => {
const updatedFormData = {
...formData,
depression_level: totalScore,
};
// Navigate to the QUIZ_SCORE page, passing the updated formData
navigation.navigate(ROUTES.QUIZ_SCORE, {
depression_level: totalScore, // You can still pass totalScore separately if needed
formData: updatedFormData,
});
};
return (
<>
{isLoading ? (
<View style={styles.loaderContainer}>
<ActivityIndicator size={150} color={COLORS.dark_purple} />
</View>
) : (
<ScrollView style={styles.container}>
<LinearGradient
style={{
flex: 1,
}}
colors={[COLORS.white, '#FDCEDF']}>
{questions
.slice(questionIndex, questionIndex + 2)
.map((question, index) => (
<View style={{padding: 18, marginTop: 42}} key={question._id}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: '#DE3163',
fontSize: 22,
fontWeight: 'bold',
}}>
ප්‍රශ්නය {questionIndex + index + 1}
</Text>
</View>
<View
style={{
backgroundColor: 'white',
borderColor: '#FFC107', // Add this line to set the border color
borderWidth: 3,
borderRadius: 17,
marginTop: 10,
padding: 14,
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: 'black',
fontSize: 15,
fontWeight: 'bold',
marginTop: 16,
}}>
{question.question}
</Text>
</View>
<View
style={{
marginTop: 30,
gap: 10,
marginBottom: 15,
color: 'black',
marginRight: 25,
}}>
<RadioButton
label={questions[questionIndex + index].answers[0]}
selected={
selectedAnswerIndices[questionIndex + index] === 0
}
onPress={() =>
setSelectedAnswer(0, questionIndex + index)
}
value={3}
/>
<RadioButton
label={questions[questionIndex + index].answers[1]}
selected={
selectedAnswerIndices[questionIndex + index] === 1
}
onPress={() =>
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
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 25,
marginBottom: 50,
}}>
{!isOnFirstQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handlePrevious}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ආපසු
</Text>
</TouchableOpacity>
)}
{!isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#DE3163',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: isOnFirstQuestions ? 240 : 20,
borderRadius: 16,
width: 140,
elevation: 10,
}}
onPress={handleNext}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ඊළඟ
</Text>
</TouchableOpacity>
)}
{isOnLastQuestions && (
<TouchableOpacity
style={{
backgroundColor: '#116A7B',
height: 50,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
borderRadius: 16,
width: 150,
elevation: 10,
}}
onPress={handleNavigationToQuizScore}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 20,
fontWeight: 'bold',
}}>
ස්ථිර කරන්න
</Text>
</TouchableOpacity>
)}
</View>
</LinearGradient>
</ScrollView>
)}
</>
);
};
export default QuestionInSinhalaPage;
const styles = StyleSheet.create({
brandViewText: {
color: '#FFFFFF',
fontSize: 40,
fontWeight: 'bold',
},
bottomView: {
flex: 1.5,
backgroundColor: '#FFFFFF',
},
loaderContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
src/screens/home/game/QuizOptions.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
ScrollView,
ImageBackground,
Text,
Image,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
const QuizOptionsPage = ({navigation}) => {
return (
<>
<View
style={{
flex: 1,
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"
/>
</View>
<View style={styles.bottomView}>
<View style={{padding: 25}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
}}>
<Text
style={{
display: 'flex',
color: '#DC143C',
fontSize: 20,
fontWeight: 'bold',
marginBottom: 25,
}}>
The Edinburgh Postnatal Depression
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Scale (EDPS)
</Text>
</View>
<View
style={{
justifyContent: 'center',
padding: 10,
}}>
<Text
style={{
color: 'black',
fontSize: 14,
fontWeight: 'bold',
textAlign: 'justify',
}}>
The questionnaire below is called the Edinburgh Postnatal
Depression Scale (EDPS) The EDPS was developed to identify women
who may have postpartum depression. Each answer is given a score
of 0 to 3 . The maximum score is 30.
</Text>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: 'black',
fontSize: 18,
fontWeight: 'bold',
marginTop: 40,
textAlign: 'justify',
}}>
Select Your Prefered Option to Answer
</Text>
</View>
<View style={{marginTop: 40}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.pink_new,
height: 50,
marginBottom: 20,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: '100%',
elevation: 10,
}}
onPress={() => navigation.navigate(ROUTES.GAME_MAIN_DETAILS)}>
<Text
medium
center
style={{color: 'white', fontSize: 20, fontWeight: 'bold'}}>
English
</Text>
</TouchableOpacity>
</View>
<View style={{marginTop: 7}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.pink_new,
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: '100%',
elevation: 10,
}}
onPress={() =>
navigation.navigate(ROUTES.MainDetailsFormInSinhala)
}>
<Text
medium
center
style={{color: 'white', fontSize: 20, fontWeight: 'bold'}}>
සිංහල
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
brandViewText: {
color: '#F7A4A4',
fontSize: 40,
fontWeight: 'bold',
},
bottomView: {
flex: 2,
backgroundColor: '#FFE6EB',
},
});
export default QuizOptionsPage;
src/screens/home/game/QuizScore.js 0 → 100644
View file @ d542574b
import React, {useState, useEffect} from 'react';
import {
View,
StyleSheet,
TouchableOpacity,
ImageBackground,
Text,
ActivityIndicator,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
import axios from 'axios';
import {gameLevelPredict} from '../../../services/games';
const QuizScoreDisplayPage = ({route, navigation}) => {
// const {score} = route.params;
const {formData} = route.params || {
formData: {},
};
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Simulate a loading process, e.g., fetching data
const timer = setTimeout(() => {
setIsLoading(false);
}, 2000); // 2000 milliseconds = 2 seconds
return () => clearTimeout(timer); // Clean up the timer
}, []);
const handleChooseGamePress = async () => {
let musicFields = {
music_name_a: 0,
music_name_b: 0,
music_name_c: 0,
music_name_d: 0,
music_name_e: 0,
music_name_f: 0,
};
// Generate a random index to set one music name field to 1
const musicKeys = Object.keys(musicFields);
const randomIndex = Math.floor(Math.random() * musicKeys.length);
musicFields[musicKeys[randomIndex]] = 1;
console.log(musicFields, 'musicFields');
try {
const response = await gameLevelPredict(
formData.age, // Assuming formData contains 'age'
formData.depression_level, // Passed from previous screen
formData.previous_child_birth_experiences, // Assuming formData contains 'previous_child_birth_experiences'
formData.marital_status_divorced, // Assuming formData contains boolean values for these fields
formData.marital_status_married,
formData.marital_status_single,
formData.family_background_bad,
formData.family_background_good,
formData.family_background_normal,
musicFields.music_name_a,
musicFields.music_name_b,
musicFields.music_name_c,
musicFields.music_name_d,
musicFields.music_name_e,
musicFields.music_name_f,
);
console.log(formData.age, 'age');
console.log(formData.depression_level, 'depression_level');
console.log(
formData.previous_child_birth_experiences,
'previous_child_birth_experiences',
);
console.log(formData.marital_status_divorced, 'marital_status_divorced');
console.log(formData.marital_status_married, 'marital_status_married');
console.log(formData.marital_status_single, 'marital_status_single');
console.log(formData.family_background_bad, 'family_background_bad');
console.log(formData.family_background_good, 'family_background_good');
console.log(
formData.family_background_normal,
'family_background_normal',
);
console.log(musicFields.music_name_a, 'a');
console.log(musicFields.music_name_b, 'b');
console.log(musicFields.music_name_c, 'c');
console.log(musicFields.music_name_d, 'd');
console.log(musicFields.music_name_e, 'e');
console.log(musicFields.music_name_f, 'f');
if (response && response.data && response.data.prediction) {
console.log('API call successful with response:', response.data);
const predictedGameLevel = parseInt(
response.data.prediction.match(/\d+/)[0],
10,
);
navigation.navigate(ROUTES.GameLevelPage, {predictedGameLevel});
} else {
console.error('API call failed with response:', response.data);
}
} catch (error) {
console.error('API call encountered an error:', error);
}
};
return (
<>
{isLoading ? (
<View style={styles.loaderContainer}>
<ActivityIndicator size={150} color={COLORS.dark_purple} />
</View>
) : (
<ImageBackground
source={IMGS.game_img_5}
style={styles.backgroundImage}
resizeMode="cover">
<View style={styles.container}>
<Text style={styles.mainText}>Your Depression Level</Text>
<View style={styles.mainCircle}>
<View style={styles.circle}>
<Text style={styles.scoreText}>
{formData.depression_level}/30
</Text>
</View>
</View>
<View style={styles.bottomContainer}>
<TouchableOpacity
style={styles.button}
onPress={handleChooseGamePress}>
{/* onPress={() => navigation.navigate(ROUTES.Level01Instructions)}> */}
<Text bold medium center style={styles.buttonText}>
Check Your Gaming Level
</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
)}
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: 50,
},
backgroundImage: {
flex: 1,
width: '79%',
height: '80%',
},
circle: {
width: 180,
height: 180,
borderRadius: 100,
backgroundColor: '#FF9494',
alignItems: 'center',
justifyContent: 'center',
marginTop: 3,
},
mainCircle: {
width: 210,
height: 210,
borderRadius: 125,
backgroundColor: '#FFD1D1',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#DE3163',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 5,
marginTop: 330,
marginLeft: 210,
},
scoreText: {
color: '#fff',
fontSize: 40,
},
mainText: {
color: '#000',
fontSize: 22,
marginBottom: 30,
fontWeight: 'bold',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
marginTop: 22,
},
button: {
backgroundColor: '#1572A1',
height: 50,
marginBottom: 90,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 160,
borderRadius: 14,
width: 350,
marginLeft: 250,
elevation: 10,
},
buttonText: {
color: 'white',
fontSize: 17,
},
bottomContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: '#9AD0EC',
borderTopLeftRadius: 65,
borderTopRightRadius: 165,
width: 500,
},
loaderContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default QuizScoreDisplayPage;
src/screens/home/game/WelcomeGame.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Image, TouchableOpacity, Text, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Button from '../../../components/Button';
import {COLORS, IMGS, ROUTES} from '../../../constants';
const WelcomePageGame = ({navigation}) => {
return (
<LinearGradient
style={{
flex: 1,
}}
colors={[COLORS.purple, COLORS.white]}>
<View>
<View>
<Image
source={IMGS.game_img_1}
style={{
height: 400,
width: 210,
borderRadius: 20,
position: 'absolute',
top: 2,
left: 2,
transform: [
{translateX: 50},
{translateY: 50},
{rotate: '-15deg'},
],
}}
/>
</View>
<View
style={{
paddingHorizontal: 22,
position: 'absolute',
top: 450,
width: '100%',
}}>
<Text
style={{
fontSize: 48,
color: COLORS.black,
fontWeight: 'bold',
}}>
Let's Get
</Text>
<Text
style={{
fontSize: 48,
color: COLORS.black,
fontWeight: 'bold',
}}>
Started...
</Text>
<View style={{marginVertical: 20}}>
<Text
style={{
fontSize: 16,
color: COLORS.black,
fontWeight: 'bold',
marginVertical: 20,
}}>
Enjoy every single moment.
</Text>
<Text
style={{
fontSize: 16,
color: COLORS.black,
fontWeight: 'bold',
}}>
Bad moments don't make bad mamas.
</Text>
</View>
<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>
</LinearGradient>
);
};
export default WelcomePageGame;
src/screens/home/game/game01/GameLevel0.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Alert,
Button,
ImageBackground,
} from 'react-native';
import {IMGS, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound';
const BoardSize = 3;
const CandyTypes = ['🤰', '🍼', '👶'];
const GameLevel0 = ({navigation}) => {
const [board, setBoard] = useState(createBoard());
const [score, setScore] = useState(0);
const [timeLeft, setTimeLeft] = useState(20);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_a.mp3'),
error => {
if (error) {
console.log('Failed to load the sound', error);
return;
}
// Play the music as soon as the component mounts and loop indefinitely
backgroundMusic.current.play();
backgroundMusic.current.setNumberOfLoops(-1);
},
);
return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
}, []);
const toggleMute = () => {
setIsMuted(!isMuted);
// Make sure backgroundMusic.current is not null
if (backgroundMusic.current) {
if (isMuted) {
backgroundMusic.current.setVolume(1.0);
} else {
backgroundMusic.current.setVolume(0.0);
}
}
};
const resetGame = () => {
setBoard(createBoard());
// setScore(0);
// setTimeLeft(60); // Reset time to 60 seconds
setSelectedCandy(null);
};
useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
}, 1000);
return () => clearInterval(timer);
}, []);
useEffect(() => {
if (timeLeft === 0 && score >= 25) {
Alert.alert(
'Congratulations 🥳🥳',
`Time is up! You win!
`,
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Level03);
},
},
],
);
} else if (timeLeft === 0 && score < 25) {
Alert.alert(
'Game Over',
`Time is up! You lose!
`,
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
],
);
}
}, [timeLeft, score, navigation]);
function createBoard() {
const newBoard = [];
for (let row = 0; row < BoardSize; row++) {
const newRow = [];
for (let col = 0; col < BoardSize; col++) {
newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
}
newBoard.push(newRow);
}
return newBoard;
}
function handlePress(row, col) {
if (selectedCandy) {
const [selectedRow, selectedCol] = selectedCandy;
const dx = Math.abs(selectedRow - row);
const dy = Math.abs(selectedCol - col);
if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
// Adjacent candy selected
const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
[newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
newBoard[row][col],
newBoard[selectedRow][selectedCol],
];
if (checkForMatch(newBoard)) {
setBoard(newBoard);
}
}
setSelectedCandy(null);
} else {
setSelectedCandy([row, col]);
}
}
function isBoardClear() {
for (let row = 0; row < BoardSize; row++) {
for (let col = 0; col < BoardSize; col++) {
if (board[row][col] !== null) {
return false;
}
}
}
return true;
}
function checkForMatch(board) {
const toClear = [];
// Check for horizontal matches
for (let row = 0; row < BoardSize; row++) {
for (let col = 0; col < BoardSize - 2; col++) {
const candy = board[row][col];
if (
candy &&
candy === board[row][col + 1] &&
candy === board[row][col + 2]
) {
toClear.push([row, col], [row, col + 1], [row, col + 2]);
}
}
}
// Check for vertical matches
for (let col = 0; col < BoardSize; col++) {
for (let row = 0; row < BoardSize - 2; row++) {
const candy = board[row][col];
if (
candy &&
candy === board[row + 1][col] &&
candy === board[row + 2][col]
) {
toClear.push([row, col], [row + 1, col], [row + 2, col]);
}
}
}
if (toClear.length === 0) return false; // No matches found
// Clear matched candies
let points = 0;
toClear.forEach(([row, col]) => {
if (board[row][col] !== null) {
points += 5; // Assuming each candy gives 5 points
board[row][col] = null;
}
});
setScore(prevScore => prevScore + points);
// Make candies fall down
for (let col = 0; col < BoardSize; col++) {
let shift = 0;
for (let row = BoardSize - 1; row >= 0; row--) {
if (board[row][col] === null) {
shift++;
} else if (shift > 0) {
board[row + shift][col] = board[row][col];
board[row][col] = null;
}
}
}
// Refill the board
for (let col = 0; col < BoardSize; col++) {
for (let row = 0; row < BoardSize; row++) {
if (board[row][col] === null) {
board[row][col] =
CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
}
}
}
return true; // Matches were found and cleared
}
return (
<ImageBackground
source={IMGS.game_img_6}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginBottom: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 12,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Button
title="Refresh"
onPress={resetGame}
color="#097969"
style={{marginBottom: 10}}
/>
<Text style={styles.text}>Winning Score: 25</Text>
<Text style={styles.text}>Score: {score}</Text>
<Text style={styles.text}>Time Left: {timeLeft}s</Text>
<View style={styles.board}>
{board.map((row, rowIndex) => (
<View key={rowIndex} style={styles.row}>
{row.map((candy, colIndex) => (
<TouchableOpacity
key={colIndex}
style={styles.candy}
onPress={() => handlePress(rowIndex, colIndex)}>
<Text style={styles.candyText}>{candy}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
<View style={{marginTop: 90}}>
<TouchableOpacity
style={{
backgroundColor: '#804674',
height: 50,
marginBottom: 60,
justifyContent: 'center',
alignItems: 'center',
// marginHorizontal: 25,
borderRadius: 16,
width: 320,
}}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
}}>
Exit
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
board: {
width: 250,
height: 250,
backgroundColor: '#CCCCFF',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
// borderRadius: 25,
},
row: {
flex: 1,
flexDirection: 'row',
},
candy: {
flex: 1,
aspectRatio: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
borderWidth: 1,
borderRadius: 4,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 2,
},
candyText: {
fontSize: 30,
textAlign: 'center',
textAlignVertical: 'center',
includeFontPadding: false,
flex: 1,
},
text: {
color: 'black',
marginBottom: 5,
fontWeight: 'bold',
fontSize: 16,
},
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default GameLevel0;
src/screens/home/game/game01/GameLevel3.js 0 → 100644
View file @ d542574b
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Alert,
Button,
ImageBackground,
} from 'react-native';
import {IMGS, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound';
const BoardSize = 8;
const CandyTypes = ['🤰', '🥦', '🐶', '🍧', '🍉', '🍄', '🍬', '👶', '🚫'];
const WinningScore = 75;
const InitialTime = 60;
const CandyCrushGameLevel03 = ({navigation}) => {
const [board, setBoard] = useState(createBoard());
const [score, setScore] = useState(0);
const [timeLeft, setTimeLeft] = useState(60);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_d.mp3'),
error => {
if (error) {
console.log('Failed to load the sound', error);
return;
}
// Play the music as soon as the component mounts and loop indefinitely
backgroundMusic.current.play();
backgroundMusic.current.setNumberOfLoops(-1);
},
);
return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
}, []);
const toggleMute = () => {
setIsMuted(!isMuted);
// Make sure backgroundMusic.current is not null
if (backgroundMusic.current) {
if (isMuted) {
backgroundMusic.current.setVolume(1.0);
} else {
backgroundMusic.current.setVolume(0.0);
}
}
};
useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
}, 1000);
return () => clearInterval(timer);
}, []);
useEffect(() => {
if (timeLeft === 0 && score >= 75) {
Alert.alert(
'Congratulations 🥳🥳',
`Time is up! You win!
`,
[
{
text: 'OK',
onPress: () => {
// Navigate to different screens based on the score
// if (score >= 50) {
navigation.navigate(ROUTES.Level04);
// } else {
// navigation.navigate("Candy Crush");
// }
},
},
],
);
} else if (timeLeft === 0 && score < 75) {
Alert.alert(
'Game Over',
`Time is up! You lose!
`,
[
{
text: 'OK',
onPress: () => {
// Navigate to different screens based on the score
// if (score >= 50) {
// navigation.navigate("GameLevel03");
// } else {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
// }
},
},
],
);
}
}, [timeLeft, score, navigation]);
function createBoard() {
const newBoard = [];
for (let row = 0; row < BoardSize; row++) {
const newRow = [];
for (let col = 0; col < BoardSize; col++) {
newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
}
newBoard.push(newRow);
}
return newBoard;
}
const resetGame = () => {
setBoard(createBoard());
// setScore(0);
// setTimeLeft(InitialTime);
setSelectedCandy(null);
};
const handlePress = (row, col) => {
if (board[row][col] === '🚫') return; // Prevent pressing the "🚫" emoji
if (selectedCandy) {
const [selectedRow, selectedCol] = selectedCandy;
const dx = Math.abs(selectedRow - row);
const dy = Math.abs(selectedCol - col);
if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
// Adjacent candy selected
const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
[newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
newBoard[row][col],
newBoard[selectedRow][selectedCol],
];
if (checkForMatch(newBoard)) {
setBoard(newBoard);
}
}
setSelectedCandy(null);
} else {
setSelectedCandy([row, col]);
}
};
function checkForMatch(board) {
const toClear = [];
// Check for horizontal matches
for (let row = 0; row < BoardSize; row++) {
for (let col = 0; col < BoardSize - 2; col++) {
const candy = board[row][col];
if (
candy &&
candy === board[row][col + 1] &&
candy === board[row][col + 2]
) {
toClear.push([row, col], [row, col + 1], [row, col + 2]);
}
}
}
// Check for vertical matches
for (let col = 0; col < BoardSize; col++) {
for (let row = 0; row < BoardSize - 2; row++) {
const candy = board[row][col];
if (
candy &&
candy === board[row + 1][col] &&
candy === board[row + 2][col]
) {
toClear.push([row, col], [row + 1, col], [row + 2, col]);
}
}
}
if (toClear.length === 0) return false; // No matches found
// Clear matched candies
let points = 0;
toClear.forEach(([row, col]) => {
if (board[row][col] !== null) {
points += 5; // Assuming each candy gives 5 points
board[row][col] = null;
}
});
setScore(prevScore => prevScore + points);
// Make candies fall down
for (let col = 0; col < BoardSize; col++) {
let shift = 0;
for (let row = BoardSize - 1; row >= 0; row--) {
if (board[row][col] === null) {
shift++;
} else if (shift > 0) {
board[row + shift][col] = board[row][col];
board[row][col] = null;
}
}
}
// Refill the board
for (let col = 0; col < BoardSize; col++) {
for (let row = 0; row < BoardSize; row++) {
if (board[row][col] === null) {
board[row][col] =
CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
}
}
}
return true; // Matches were found and cleared
}
return (
<ImageBackground
source={IMGS.game_img_8}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginBottom: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 12,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Button title="Refresh" onPress={resetGame} color="#702963" />
<Text style={styles.text}>Winning Score: 75</Text>
<Text style={styles.text}>Score: {score}</Text>
<Text style={styles.text}>Time Left: {timeLeft}s</Text>
<View style={styles.board}>
{board.map((row, rowIndex) => (
<View key={rowIndex} style={styles.row}>
{row.map((candy, colIndex) => (
<TouchableOpacity
key={colIndex}
style={styles.candy}
onPress={() => handlePress(rowIndex, colIndex)}>
<Text style={styles.candyText}>{candy}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
<View style={{marginTop: 60}}>
<TouchableOpacity
style={{
backgroundColor: '#702963',
height: 50,
marginBottom: 60,
justifyContent: 'center',
alignItems: 'center',
// marginHorizontal: 25,
borderRadius: 16,
width: 320,
}}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
}}>
Exit
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'black',
marginBottom: 5,
fontWeight: 'bold',
fontSize: 16,
},
board: {
width: 380,
height: 400,
backgroundColor: '#191970',
borderColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
candy: {
flex: 1,
aspectRatio: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
borderWidth: 1,
borderRadius: 4,
},
candyText: {
fontSize: 30,
},
});
export default CandyCrushGameLevel03;
src/screens/home/game/game01/GameLevel5.js 0 → 100644
View file @ d542574b
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
StyleSheet,
Alert,
ImageBackground,
} from 'react-native';
import {IMGS, COLORS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
const rockImage = IMGS.game_img_10;
const paperImage = IMGS.game_img_11;
const scissorsImage = IMGS.game_img_12;
const choices = {
rock: rockImage,
paper: paperImage,
scissors: scissorsImage,
};
const getChoiceImage = choice => {
return choices[choice];
};
const GameLevel5 = ({navigation}) => {
const [playerChoice, setPlayerChoice] = useState(null);
const [computerChoice, setComputerChoice] = useState(null);
const [result, setResult] = useState('');
const [points, setPoints] = useState(0);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_f.mp3'),
error => {
if (error) {
console.log('Failed to load the sound', error);
return;
}
// Play the music as soon as the component mounts and loop indefinitely
backgroundMusic.current.play();
backgroundMusic.current.setNumberOfLoops(-1);
},
);
return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
}, []);
const toggleMute = () => {
setIsMuted(!isMuted);
// Make sure backgroundMusic.current is not null
if (backgroundMusic.current) {
if (isMuted) {
backgroundMusic.current.setVolume(1.0);
} else {
backgroundMusic.current.setVolume(0.0);
}
}
};
useEffect(() => {
if (points >= 200) {
Alert.alert('Congratulations 🥳🥳', 'You have won the game!', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Level06);
},
},
]);
setPoints(0);
}
}, [points]);
const play = choice => {
const computer = getRandomChoice();
const result = getWinner(choice, computer);
setPlayerChoice(choice);
setComputerChoice(computer);
setResult(result);
if (result === 'You Win!') {
setPoints(currentPoints => {
const updatedPoints = currentPoints + 10;
return updatedPoints;
});
}
};
useEffect(() => {
console.log(`Points updated: ${points}`);
}, [points]);
const getRandomChoice = () => {
const keys = Object.keys(choices);
const randomIndex = Math.floor(Math.random() * keys.length);
return keys[randomIndex];
};
const getWinner = (player, computer) => {
if (player === computer) return 'Draw';
if (
(player === 'rock' && computer === 'scissors') ||
(player === 'paper' && computer === 'rock') ||
(player === 'scissors' && computer === 'paper')
) {
return 'You Win!';
} else {
return 'Computer Wins!';
}
};
return (
<ImageBackground
source={IMGS.game_img_9}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 10}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginBottom: 2,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
// marginTop: 4,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Text style={styles.headerText}>Rock Paper Scissors</Text>
<View style={styles.new}>
<Text style={styles.resultText}>Result: {result ? result : '-'}</Text>
<Text style={styles.pointsText}>Points: {points}</Text>
</View>
<View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}>
<View style={styles.resultContainer}>
<View style={styles.circle}>
<Text style={styles.playerText}>Computer</Text>
{computerChoice && (
<Image
source={getChoiceImage(computerChoice)}
style={styles.choiceImage}
/>
)}
</View>
<Text style={styles.resultText}>VS</Text>
<View style={styles.circle}>
<Text style={styles.playerText}>You</Text>
{playerChoice && (
<Image
source={getChoiceImage(playerChoice)}
style={styles.choiceImage}
/>
)}
</View>
</View>
<View style={styles.choicesContainer}>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('rock')}
style={styles.choiceButton}>
<Image source={rockImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('paper')}
style={styles.choiceButton}>
<Image source={paperImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('scissors')}
style={styles.choiceButton}>
<Image source={scissorsImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
</View>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
gradient: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-around',
padding: 30,
// backgroundColor: 'black',
},
headerText: {
fontSize: 30,
color: '#9400D3',
fontWeight: 'bold',
// marginTop: 3,
marginBottom: 20,
},
choicesContainer: {
flexDirection: 'row',
alignItems: 'center',
},
choiceButton: {
margin: 10,
padding: 10,
},
choiceImage: {
width: 100,
height: 100,
},
resultContainer: {
alignItems: 'center',
justifyContent: 'center',
},
resultText: {
fontSize: 24,
color: 'black',
fontWeight: 'bold',
marginTop: 1,
},
playerText: {
fontSize: 16,
color: 'white',
fontWeight: 'bold',
marginTop: 20,
marginBottom: 15,
},
pointsText: {
fontSize: 20,
fontWeight: 'bold',
color: 'black', // Make sure this color is visible on your background
// add other styles to position your points text if necessary
},
circle: {
width: 160,
height: 160,
borderRadius: 105,
backgroundColor: '#553C8B',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#6F2DA8',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 5,
},
square: {
width: 100,
height: 100,
borderRadius: 20,
backgroundColor: '#CCC1FF',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#CCCCFF',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 2,
elevation: 5,
marginRight: 10,
marginBottom: 42,
marginTop: 22,
},
mainsquare: {
width: 200,
height: 250,
borderRadius: 20,
backgroundColor: '#E8ADAA',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#CCCCFF',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 2,
elevation: 5,
},
new: {
backgroundColor: '#F6A7BA',
width: '80%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 100,
borderRadius: 30,
},
});
export default GameLevel5;
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