Commit a15c65e7 authored by Malsha Jayakody's avatar Malsha Jayakody

implement ramaining game levels with background music

parent d542574b
This diff is collapsed.
/* 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, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound';
const babyImage = IMGS.game_img_13;
const cartImage = IMGS.game_img_14;
const shoes = IMGS.game_img_16;
const cloth = IMGS.game_img_17;
const choices = {
babyImage: babyImage,
cartImage: cartImage,
shoes: shoes,
cloth: cloth,
};
const getChoiceImage = choice => {
return choices[choice];
};
const GameLevel6 = () => {
const [playerChoice, setPlayerChoice] = useState(null);
const [computerChoice, setComputerChoice] = useState(null);
const [computerChoice2, setComputerChoice2] = useState(null);
const [computerChoice3, setComputerChoice3] = 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!');
setPoints(0);
}
}, [points]);
const play = choice => {
const computer = getRandomChoice();
const computerChoice2 = getRandomChoice();
const computerChoice3 = getRandomChoice();
const result = getWinner(
choice,
computer,
computerChoice2,
computerChoice3,
);
setPlayerChoice(choice);
setComputerChoice(computer);
setComputerChoice2(computerChoice2);
setComputerChoice3(computerChoice3);
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, computer1, computer2, computer3) => {
const choices = [player, computer1, computer2, computer3];
const winConditions = {
babyImage: 'babyImage',
cartImage: 'cartImage',
shoes: 'shoes',
cloth: 'cloth',
};
let playerWins = 0;
let computerWins = {computer1: 0, computer2: 0, computer3: 0};
choices.forEach((choice, index) => {
for (let i = 0; i < choices.length; i++) {
if (i !== index) {
if (winConditions[choice] === choices[i]) {
if (index === 0) {
playerWins += 1;
} else {
computerWins[`computer${index}`] += 1;
}
}
}
}
});
// Evaluate overall result
if (playerWins > 0) {
return 'You Win!';
} else if (Object.values(computerWins).some(val => val > 0)) {
return 'Computer Wins!';
} else {
return 'Draw';
}
};
return (
<ImageBackground
source={IMGS.game_img_15}
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,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}>
{/* <Text style={styles.headerText}>Rock Paper Scissors</Text> */}
<View style={styles.resultContainer}>
<View style={styles.rowContainer}>
<View style={styles.circle}>
<Text style={styles.playerText}>Player 01</Text>
{computerChoice && (
<Image
source={getChoiceImage(computerChoice)}
style={styles.selectImage}
/>
)}
</View>
<View style={styles.circle}>
<Text style={styles.playerText}>Player 02</Text>
{playerChoice && (
<Image
source={getChoiceImage(computerChoice2)}
style={styles.selectImage}
/>
)}
</View>
</View>
<Text style={styles.resultText}>VS</Text>
<View style={styles.rowContainer}>
<View style={styles.circle}>
<Text style={styles.playerText}>Player 03</Text>
{playerChoice && (
<Image
source={getChoiceImage(computerChoice3)}
style={styles.selectImage}
/>
)}
</View>
<View style={styles.circle}>
<Text style={styles.playerText}>You</Text>
{playerChoice && (
<Image
source={getChoiceImage(playerChoice)}
style={styles.selectImage}
/>
)}
</View>
</View>
<Text style={styles.resultText}>Result: {result}</Text>
<Text style={styles.pointsText}>Points: {points}</Text>
</View>
<View style={styles.choicesContainer}>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('babyImage')}
style={styles.choiceButton}>
<Image source={babyImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('cart')}
style={styles.choiceButton}>
<Image source={cartImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('cloth')}
style={styles.choiceButton}>
<Image source={cloth} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('shoes')}
style={styles.choiceButton}>
<Image source={shoes} 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: 10,
},
headerText: {
fontSize: 30,
color: '#9400D3',
fontWeight: 'bold',
marginTop: 10,
},
choicesContainer: {
flexDirection: 'row',
alignItems: 'center',
},
rowContainer: {
flexDirection: 'row',
alignItems: 'center',
},
choiceButton: {
margin: 10,
padding: 10,
},
choiceImage: {
width: 60,
height: 60,
},
selectImage: {
width: 100,
height: 100,
},
resultContainer: {
alignItems: 'center',
justifyContent: 'center',
},
resultText: {
fontSize: 24,
color: 'black',
fontWeight: 'bold',
marginTop: 10,
},
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: 170,
borderRadius: 85,
backgroundColor: '#000033',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#6F2DA8',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 5,
margin: 20,
},
square: {
width: 80,
height: 80,
borderRadius: 20,
backgroundColor: '#54BAB9',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#CCCCFF',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 2,
elevation: 5,
gap: 85,
margin: 7,
marginBottom: 56,
},
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,
},
});
export default GameLevel6;
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
ScrollView,
ImageBackground,
Text,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {ROUTES, COLORS} from '../../../../constants';
import LinearGradient from 'react-native-linear-gradient';
const Level01InstructionsPage = ({navigation}) => {
return (
<>
<ScrollView style={styles.container}>
<LinearGradient
style={{
flex: 1,
}}
colors={[COLORS.white, COLORS.light_purple]}>
{/* <View style={{ backgroundColor: "#FFDFDD", height: '100%' }}> */}
<View style={{padding: 25}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
}}>
<Text
style={{
display: 'flex',
color: '#000080',
fontSize: 28,
fontWeight: 'bold',
marginBottom: 25,
marginTop: 35,
}}>
INSTRUCTIONS
</Text>
</View>
<View
style={{
justifyContent: 'center',
padding: 10,
}}>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 30,
}}>
01. You can match same candy types more than three.
</Text>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 20,
}}>
02. After matching same type candy types, those are removed.
</Text>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 20,
}}>
03. According to your matching, you can get a score for that.
</Text>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 20,
}}>
04. You can get an any score in the give time period.
</Text>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 20,
}}>
05. The game will be given winning score automatically.
</Text>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 20,
}}>
06. If you get a highest score more than winning score, You can
win the game.
</Text>
<Text
style={{
color: 'black',
fontSize: 16,
// fontWeight: "bold",
textAlign: 'justify',
marginTop: 20,
}}>
07. If you cannot find same cand types, you can click refresh
button to refresh the board. (Your score and remaining time
period will not change.)
</Text>
</View>
<View style={{marginTop: 40}}>
<TouchableOpacity
style={{
backgroundColor: '#A685E2',
height: 50,
marginBottom: 20,
justifyContent: 'center',
alignItems: 'center',
// marginHorizontal: 25,
borderRadius: 16,
width: '100%',
}}
onPress={() => navigation.navigate(ROUTES.GameLevel0)}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
}}>
Play
</Text>
</TouchableOpacity>
</View>
{/* </View> */}
</View>
</LinearGradient>
</ScrollView>
</>
);
};
const styles = StyleSheet.create({
brandViewText: {
color: '#F5A8A8',
fontSize: 40,
fontWeight: 'bold',
},
});
export default Level01InstructionsPage;
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 Level01 = ({route, navigation}) => {
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}>1</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.GameLevel0)}>
<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 Level01;
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 Level02 = ({route, navigation}) => {
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}>2</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.GameLevel1)}>
<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 Level02;
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 Level03 = ({route, navigation}) => {
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}>3</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.GameLevel2)}>
<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 Level03;
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 Level04 = ({route, navigation}) => {
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}>5</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.GameLevel4)}>
<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 Level04;
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';
import GameLevel5 from '../GameLevel5';
const Level05 = ({route, navigation}) => {
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}>4</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.GameLevel3)}>
<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 Level05;
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 Level06 = ({route, navigation}) => {
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}>3</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.GameLevel3)}>
<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 Level06;
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
// Import statements
import React, {useState, useRef, useEffect} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Image,
Alert,
ScrollView,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
const Game02Level01 = ({navigation, route}) => {
const [budget, setBudget] = useState(5000); // Starting budget
const [collectedItems, setCollectedItems] = useState([]);
const [healthyCost, setHealthyCost] = useState(0);
const [unhealthyCost, setUnhealthyCost] = useState(0);
const cartIcon = IMGS.game_img_18;
const [cartVisible, setCartVisible] = useState(false);
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 openCart = () => {
setCartVisible(true);
};
// Dummy data for items
const items = [
{
id: 1,
name: 'Spinach',
cost: 150,
type: 'healthy',
image: IMGS.game_img_19,
},
{
id: 2,
name: 'Candy',
cost: 150,
type: 'unhealthy',
image: IMGS.game_img_20,
},
{
id: 3,
name: 'Carrot',
cost: 250,
type: 'healthy',
image: IMGS.game_img_21,
},
{
id: 4,
name: 'French Fries',
cost: 140,
type: 'unhealthy',
image: IMGS.game_img_22,
},
{
id: 5,
name: 'Tomato',
cost: 130,
type: 'healthy',
image: IMGS.game_img_23,
},
{
id: 6,
name: 'Doughnut',
cost: 100,
type: 'unhealthy',
image: IMGS.game_img_24,
},
{
id: 7,
name: 'Fruits',
cost: 250,
type: 'healthy',
image: IMGS.game_img_25,
},
{
id: 8,
name: 'Eggs',
cost: 80,
type: 'healthy',
image: IMGS.game_img_26,
},
{
id: 9,
name: 'Milk',
cost: 200,
type: 'healthy',
image: IMGS.game_img_27,
},
{
id: 10,
name: 'Water',
cost: 150,
type: 'healthy',
image: IMGS.game_img_28,
},
{
id: 11,
name: 'Hot dogs',
cost: 150,
type: 'unhealthy',
image: IMGS.game_img_29,
},
{
id: 12,
name: 'Oats',
cost: 300,
type: 'healthy',
image: IMGS.game_img_30,
},
];
const collectItem = item => {
if (budget - item.cost >= 0) {
setBudget(budget - item.cost);
setCollectedItems([...collectedItems, item]);
if (item.type === 'healthy') {
setHealthyCost(prevCost => prevCost + item.cost);
} else {
setUnhealthyCost(prevCost => prevCost + item.cost);
}
// Use a setTimeout to ensure state updates have been applied before check
setTimeout(() => {
if (unhealthyCost > 2000) {
Alert.alert('Game lost!', 'Choose healthier foods. 🍇🍌🍉🥬🥕🍒',
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
]);
} else if (healthyCost > 2000) {
Alert.alert('Game won!',
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel03);
},
},
]);
}
}, 0);
} else {
Alert.alert('Not enough budget',
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.CHOOSE_GAME);
},
},
]);
}
};
return (
<ScrollView style={styles.container}>
<View style={styles.rack}>
<View style={styles.mainSquare}>
<View style={styles.main}>
<Text style={styles.budgetText}>Budget: Rs:{budget}</Text>
</View>
<View>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.itemsContainer}>
{items.map(item => (
<TouchableOpacity
key={item.id}
style={styles.item}
onPress={() => collectItem(item)}>
<Image source={item.image} style={styles.itemImage} />
<Text style={styles.itemText}>{item.name}</Text>
<Text style={styles.itemText}>Rs:{item.cost}</Text>
</TouchableOpacity>
))}
</View>
<View style={styles.two}>
<View style={styles.one}>
<Text style={styles.budgetText}>
Healthy Foods Cost: Rs:{healthyCost}
</Text>
</View>
<View style={styles.one}>
<Text style={styles.budgetText}>
Unhealthy Foods Cost: Rs:{unhealthyCost}
</Text>
</View>
</View>
<View>
<TouchableOpacity onPress={openCart} style={styles.cartIconContainer}>
<Image source={cartIcon} style={styles.cartIcon} />
<View style={styles.cartItemCountContainer}>
<Text style={styles.cartItemCountText}>
{collectedItems.length}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f0f0f0',
},
rack: {
padding: 20,
backgroundColor: '#380000',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
height: 844,
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
budgetText: {
display: 'flex',
justifyContent: 'center',
color: 'white',
alignItems: 'center',
margin: 10,
},
itemsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
},
item: {
width: '20%',
padding: 6,
margin: '1%',
borderWidth: 1,
borderColor: '#ccc',
backgroundColor: '#fff',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
alignItems: 'center',
},
itemImage: {
width: 50,
height: 50,
marginBottom: 5,
},
main: {
width: 180,
height: 40,
marginBottom: 1,
backgroundColor: '#6633CC',
borderRadius: 10,
justifyContent: 'center',
display: 'flex',
alignContent: 'flex-start',
marginTop: 8,
},
mainSquare: {
width: '100%',
height: 60,
marginBottom: 10,
display: 'flex',
alignContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
},
one: {
width: 250,
height: 40,
marginBottom: 15,
backgroundColor: '#FF3399',
borderRadius: 10,
justifyContent: 'center',
display: 'flex',
alignContent: 'center',
},
two: {
width: 130,
height: 30,
margin: 5,
borderRadius: 10,
marginLeft: 70,
flexDirection: 'column',
alignItems: 'center',
},
cartIconContainer: {
position: 'absolute',
top: 10,
right: 50,
zIndex: 1,
},
cartIcon: {
width: 230,
height: 230,
// marginTop: 1,
left: 50,
},
cartItemCountContainer: {
position: 'absolute',
right: 130,
top: 83,
backgroundColor: '#666699',
borderRadius: 45,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
cartItemCountText: {
color: 'white',
},
itemText: {
color: 'black',
},
});
export default Game02Level01;
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ScrollView,
Alert,
Image,
Button,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
// Dummy data for baby gear items
const babyGearItems = [
{id: 1, image: IMGS.game_img_38, cost: 1200, essential: false},
{id: 2, image: IMGS.game_img_32, cost: 500, essential: true},
{id: 3, image: IMGS.game_img_31, cost: 800, essential: true},
{id: 4, image: IMGS.game_img_34, cost: 200, essential: true},
{id: 5, image: IMGS.game_img_37, cost: 350, essential: false},
{id: 6, image: IMGS.game_img_36, cost: 200, essential: true},
{id: 7, image: IMGS.game_img_35, cost: 450, essential: true},
{id: 8, image: IMGS.game_img_33, cost: 700, essential: true},
{id: 9, image: IMGS.game_img_39, cost: 900, essential: false},
{id: 10, image: IMGS.game_img_40, cost: 300, essential: true},
{id: 11, image: IMGS.game_img_41, cost: 950, essential: false},
{id: 12, image: IMGS.game_img_42, cost: 150, essential: true},
];
const CravingsPuzzleGame02Level02 = ({navigation}) => {
const initialBudget = 10000;
const [budget, setBudget] = useState(10000); // Starting budget
const [purchasedItems, setPurchasedItems] = useState([]);
const cartIcon = IMGS.game_img_18;
const [cartVisible, setCartVisible] = useState(false);
const [healthyCost, setHealthyCost] = useState(0);
const [unhealthyCost, setUnhealthyCost] = useState(0);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_b.mp3'),
error => {
if (error) {
console.log('Failed to load the sound', error);
return;
}
// Play the music as soon as the component mounts and loop indefinitely
backgroundMusic.current.play();
// backgroundMusic.current.setNumberOfLoops(-1);
},
);
return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
}, []);
const toggleMute = () => {
setIsMuted(!isMuted);
// Make sure backgroundMusic.current is not null
if (backgroundMusic.current) {
if (isMuted) {
backgroundMusic.current.setVolume(1.0);
} else {
backgroundMusic.current.setVolume(0.0);
}
}
};
const openCart = () => {
setCartVisible(true);
};
const resetGame = () => {
setBudget(initialBudget); // Reset budget to initial
setPurchasedItems([]); // Clear purchased items
setHealthyCost(0); // Reset healthy cost counter
setUnhealthyCost(0); // Reset unhealthy cost counter
};
const purchaseItem = item => {
if (budget - item.cost >= 0) {
setBudget(budget - item.cost);
setPurchasedItems([...purchasedItems, item]);
if (item.essential === true) {
setHealthyCost(prevCost => prevCost + item.cost);
} else {
setUnhealthyCost(prevCost => prevCost + item.cost);
}
setTimeout(() => {
if (unhealthyCost > 2000) {
Alert.alert('Game lost!', 'Choose essintial items!', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
]);
} else if (healthyCost > 2000) {
Alert.alert('Game won!', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel06);
},
},
]);
}
}, 0);
} else {
Alert.alert('Not enough budget');
}
setBudget(currentBudget => currentBudget - item.cost);
setPurchasedItems(currentItems => [...currentItems, item]);
};
return (
<ScrollView style={styles.container}>
<View style={styles.mainSquare}>
<View style={styles.budgetContainer}>
<Text style={styles.budgetText}>Budget: Rs {budget}</Text>
<Button title="Refresh" onPress={resetGame} color="#DE3163" />
</View>
<View>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
</View>
<Text style={styles.new}>Select necessary items for a baby</Text>
<View style={styles.itemsContainer}>
{babyGearItems.map(item => (
<TouchableOpacity
key={item.id}
style={styles.item}
onPress={() => purchaseItem(item)}>
<Image source={item.image} style={styles.itemImage} />
<Text style={styles.itemText}>Rs {item.cost}</Text>
</TouchableOpacity>
))}
<View style={styles.two}>
<View style={styles.one}>
<Text style={styles.budgetNewText}>
Healthy Foods Cost: Rs:{healthyCost}
</Text>
</View>
<View style={styles.one}>
<Text style={styles.budgetNewText}>
Unhealthy Foods Cost: Rs:{unhealthyCost}
</Text>
</View>
</View>
<View>
<TouchableOpacity onPress={openCart} style={styles.cartIconContainer}>
<Image source={cartIcon} style={styles.cartIcon} />
<View style={styles.cartItemCountContainer}>
<Text style={styles.cartItemCountText}>
{purchasedItems.length}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
budgetText: {
fontSize: 18,
fontWeight: 'bold',
backgroundColor: 'black',
color: 'white',
padding: 10,
width: 200,
marginRight: 10,
marginTop: 2,
},
new: {
fontSize: 15,
fontWeight: 'bold',
backgroundColor: '#6633CC',
color: 'white',
padding: 5,
},
itemsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
backgroundColor: '#380000',
height: 800,
},
budgetContainer: {
flexDirection: 'row',
// flexWrap: 'wrap',
// justifyContent: 'space-around',
},
itemImage: {
width: 60,
height: 70,
marginBottom: 5,
},
item: {
width: '20%',
height: '15%',
backgroundColor: '#f9f9f9',
padding: 8,
alignItems: 'center',
margin: 5,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
itemText: {
fontSize: 14,
color: 'black',
},
cartIconContainer: {
position: 'absolute',
top: 50,
right: 1,
zIndex: 1,
},
cartIcon: {
width: 230,
height: 230,
// marginTop: 10,
// left: 50,
},
cartItemCountContainer: {
position: 'absolute',
// right: 130,
top: 82,
backgroundColor: '#666699',
borderRadius: 45,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
cartItemCountText: {
color: 'white',
},
one: {
width: 250,
height: 50,
// marginBottom: 15,
// backgroundColor: '#FF3399',
// borderRadius: 10,
justifyContent: 'center',
display: 'flex',
alignContent: 'center',
},
mainSquare: {
width: '100%',
height: 60,
marginBottom: 10,
display: 'flex',
alignContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
marginTop: 5,
},
budgetNewText: {
fontSize: 15,
fontWeight: 'bold',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
color: 'black',
padding: 10,
width: 280,
zIndex: 2,
marginTop: 2,
borderRadius: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
});
export default CravingsPuzzleGame02Level02;
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
Alert,
} from 'react-native';
import {IMGS, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound';
// A simple array of names, meanings, and origins for demonstration
const namesData = [
{name: 'Yasas', meaning: 'Fame, Glory', origin: 'Sinhalese'},
{name: 'Ashan', meaning: 'Eternal, Immortal', origin: 'Sinhalese'},
{name: 'Nirmala', meaning: 'Pure, Clean', origin: 'Sinhalese'},
{name: 'Tharaka', meaning: 'Star', origin: 'Sinhalese'},
{
name: 'Lakshmi',
meaning: 'Fortune, Wealth',
origin: 'Sinhalese/Tamil',
},
{
name: 'Anjali',
meaning: 'Gift, Offering',
origin: 'Sinhalese/Tamil',
},
{name: 'Kumara', meaning: 'Prince', origin: 'Sinhalese'},
{name: 'Suren', meaning: 'Wise', origin: 'Tamil'},
{name: 'Vihanga', meaning: 'Bird', origin: 'Sinhalese'},
{name: 'Aruni', meaning: 'Dawn', origin: 'Sinhalese'},
{name: 'Bhagya', meaning: 'Luck, Fortune', origin: 'Sinhalese'},
{name: 'Ruwan', meaning: 'Gold', origin: 'Sinhalese'},
{name: 'Nilani', meaning: 'Moon', origin: 'Tamil'},
{name: 'Asha', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Malsha', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Kasuni', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Kasun', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Avarjana', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Nadeesha', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Nimesha', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Mihiranga', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Maheshika', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Sasvi', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Sameera', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Budara', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Vinuki', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Kyron', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Ramesh', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Hansa', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Hansi', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Nipun', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Dinithi', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Geethmi', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Chathuni', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Mahela', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Ravindu', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Sahan', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Tharushi', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Sanduni', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Sachini', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Pawani', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Pasan', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Kumari', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Kasun', meaning: 'Moon', origin: 'Sinhalese'},
{name: 'Nila', meaning: 'Moon', origin: 'Tamil'},
{name: 'Mohomad', meaning: 'Moon', origin: 'Tamil'},
{name: 'Kathrina', meaning: 'Moon', origin: 'Tamil'},
{name: 'Umar', meaning: 'Moon', origin: 'Tamil'},
{name: 'Fathima', meaning: 'Moon', origin: 'Tamil'},
];
const PuzzleGame02Level03 = ({navigation}) => {
const letters = [
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z',
];
const [guess, setGuess] = useState([]);
const [nameInfo, setNameInfo] = useState(null);
const babyImage = IMGS.game_img_13;
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_c.mp3'),
error => {
if (error) {
console.log('Failed to load the sound', error);
return;
}
// Play the music as soon as the component mounts and loop indefinitely
backgroundMusic.current.play();
// backgroundMusic.current.setNumberOfLoops(-1);
},
);
return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
}, []);
const toggleMute = () => {
setIsMuted(!isMuted);
// Make sure backgroundMusic.current is not null
if (backgroundMusic.current) {
if (isMuted) {
backgroundMusic.current.setVolume(1.0);
} else {
backgroundMusic.current.setVolume(0.0);
}
}
};
const checkGuess = () => {
const guessString = guess.join('');
const nameEntry = namesData.find(
entry => entry.name.toLowerCase() === guessString.toLowerCase(),
);
if (nameEntry) {
setNameInfo(nameEntry);
Alert.alert('Correct!', `You've guessed a name: ${nameEntry.name}`, [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel01);
},
},
]);
setGuess([]);
} else {
Alert.alert('Try Again', "That's not a match. Keep trying!");
setGuess([]);
setNameInfo(null);
}
};
const addLetterToGuess = letter => {
setGuess([...guess, letter]);
};
const resetGame = () => {
setGuess([]);
setNameInfo(null);
};
return (
<View style={styles.container}>
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginBottom: 10,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
// marginTop: 1,
marginLeft: 300,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Text style={styles.instructions}>Suggest a name for your baby!</Text>
<View>
<Image source={babyImage} style={styles.babyImage} />
</View>
<TouchableOpacity onPress={resetGame} style={styles.button}>
<Text style={styles.buttonText}>Refresh</Text>
</TouchableOpacity>
<View style={styles.itemcContainer}>
<View style={styles.lettersContainer}>
{letters.map((letter, index) => (
<TouchableOpacity
key={index}
style={styles.letterBox}
onPress={() => addLetterToGuess(letter)}>
<Text style={styles.letterText}>{letter}</Text>
</TouchableOpacity>
))}
</View>
</View>
<Text style={styles.guessText}>Current Guess</Text>
<View style={styles.currentGuess}>
<Text style={styles.guessText}>{guess.join('')}</Text>
</View>
<TouchableOpacity onPress={checkGuess} style={styles.button}>
<Text style={styles.buttonText}>Submit Guess</Text>
</TouchableOpacity>
{nameInfo && (
<View style={styles.infoContainer}>
<Text style={styles.nameText}>Name: {nameInfo.name}</Text>
{/* <Text style={styles.detailText}>Meaning: {nameInfo.meaning}</Text> */}
<Text style={styles.detailText}>Origin: {nameInfo.origin}</Text>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
backgroundColor: '#32AFA9',
},
itemcContainer: {
alignItems: 'center',
justifyContent: 'center',
// padding: 2,
// backgroundColor: '#33CCCC',
},
instructions: {
marginBottom: 5,
fontSize: 22,
color: 'black',
fontWeight: 'bold',
},
input: {
borderWidth: 1,
borderColor: '#ddd',
width: '80%',
padding: 10,
marginBottom: 20,
color: 'black',
},
button: {
backgroundColor: '#660033',
padding: 10,
borderRadius: 5,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
infoContainer: {
marginTop: 20,
marginBottom: 70,
},
nameText: {
fontSize: 20,
fontWeight: 'bold',
color: 'black',
marginBottom: 10,
},
detailText: {
fontSize: 16,
color: 'black',
fontWeight: 'bold',
},
lettersContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
marginBottom: 20,
},
letterBox: {
width: 40,
height: 45,
backgroundColor: '#003366',
justifyContent: 'center',
alignItems: 'center',
margin: 5,
borderRadius: 5,
},
letterText: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
},
guessText: {
fontSize: 20,
marginBottom: 10,
fontWeight: 'bold',
color: '#CC0066',
},
currentGuess: {
fontSize: 16,
fontWeight: 'bold',
borderColor: 'blue',
},
babyImage: {
width: 80,
height: 100,
marginBottom: 10,
marginTop: 5,
},
});
export default PuzzleGame02Level03;
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
Alert,
StyleSheet,
Image,
ImageBackground,
} from 'react-native';
import {IMGS, COLORS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
const gridSize = 5; // 5x5 grid
const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
const Game02Level04 = ({navigation}) => {
const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
const player = IMGS.game_img_43;
const [collectedItems, setCollectedItems] = useState([]);
const [babyItems, setBabyItems] = useState([
{x: 2, y: 3, type: 'babyItem', image: IMGS.game_img_17},
{x: 0, y: 4, type: 'babyItem', image: IMGS.game_img_36},
]);
const [ladyItems, setLadyItems] = useState([
{x: 1, y: 1, type: 'ladyItem', image: IMGS.game_img_37},
{x: 4, y: 2, type: 'ladyItem', image: IMGS.game_img_39},
]);
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);
}
}
};
const movePlayer = direction => {
let newX = playerPosition.x;
let newY = playerPosition.y;
switch (direction) {
case 'up':
newY = Math.max(0, playerPosition.y - 1);
break;
case 'down':
newY = Math.min(gridSize - 1, playerPosition.y + 1);
break;
case 'left':
newX = Math.max(0, playerPosition.x - 1);
break;
case 'right':
newX = Math.min(gridSize - 1, playerPosition.x + 1);
break;
}
setPlayerPosition({x: newX, y: newY});
checkForItem(newX, newY);
};
const checkForItem = (x, y) => {
const foundBabyItemIndex = babyItems.findIndex(
item => item.x === x && item.y === y,
);
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
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
const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems);
// Check if two baby items have been collected
if (collectedItems.length + 1 >= 2) {
Alert.alert('Good job!', 'You found a baby item!', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel02);
},
},
]);
}
} else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
]);
}
};
const resetGame = () => {
setPlayerPosition({x: 0, y: 0}); // Reset player position to the starting point
setCollectedItems([]); // Clear collected items
};
return (
<ImageBackground
source={IMGS.game_img_44}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginLeft: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 8,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Text style={styles.mainText}>Select Suitable Baby Items</Text>
<View style={styles.gameBoard}>
{initialBoard.map((row, rowIndex) => (
<View key={`row-${rowIndex}`} style={styles.row}>
{row.map((cell, cellIndex) => (
<View key={`cell-${cellIndex}`} style={styles.cell}>
{playerPosition.x === cellIndex &&
playerPosition.y === rowIndex && (
<Image source={player} style={styles.playerImage} />
)}
{babyItems.concat(ladyItems).map((item, index) => {
const itemKey = `${item.x},${item.y}`;
if (
item.x === cellIndex &&
item.y === rowIndex &&
!collectedItems.includes(itemKey)
) {
return (
<Image
key={index}
source={item.image}
style={styles.itemImage}
/>
);
}
return null;
})}
</View>
))}
</View>
))}
</View>
{/* Up Button */}
<TouchableOpacity
onPress={() => movePlayer('up')}
style={[styles.button, styles.buttonUp]}>
<Text style={styles.buttonText}>🔼</Text>
</TouchableOpacity>
<View style={styles.controls}>
<TouchableOpacity
onPress={() => movePlayer('right')}
style={[styles.button, styles.buttonLeft]}>
<Text style={styles.buttonText}>▶️</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => movePlayer('left')}
style={[styles.button, styles.buttonRight]}>
<Text style={styles.buttonText}>◀️</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={() => movePlayer('down')}
style={[styles.button, styles.buttonDown]}>
<Text style={styles.buttonText}>🔽</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
gameBoard: {
width: 350,
height: 350,
borderWidth: 2,
marginBottom: 20,
backgroundColor: '#354259',
borderColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
cell: {
flex: 1,
borderWidth: 1,
borderColor: '#ddd',
alignItems: 'center',
justifyContent: 'center',
},
player: {
backgroundColor: '#add8e6',
},
controls: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '50%',
},
button: {
padding: 10,
backgroundColor: '#056676',
// marginBottom: 75,
},
playerImage: {
width: '100%', // Adjust as needed
height: '100%', // Adjust as needed
resizeMode: 'contain', // This ensures the image scales correctly within the cell
},
itemImage: {
width: '80%', // Adjust based on your cell size
height: '80%',
resizeMode: 'contain',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
mainText: {
color: 'white',
fontWeight: 'bold',
marginBottom: 35,
fontSize: 22,
backgroundColor: '#990033',
width: '100%',
padding: 15,
borderRadius: 20,
},
buttonUp: {
top: 1,
},
buttonLeft: {
left: 200,
},
buttonRight: {
right: 70,
},
buttonDown: {
bottom: 1,
},
});
export default Game02Level04;
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
Alert,
StyleSheet,
Image,
ImageBackground,
} from 'react-native';
import {IMGS, COLORS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
const gridSize = 7;
const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
const Game02Level05 = ({navigation}) => {
const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
const player = IMGS.game_img_43;
const [collectedItems, setCollectedItems] = useState([]);
const [babyItems, setBabyItems] = useState([
{x: 2, y: 3, type: 'babyItem', image: IMGS.game_img_17},
{x: 0, y: 4, type: 'babyItem', image: IMGS.game_img_36},
{x: 5, y: 6, type: 'babyItem', image: IMGS.game_img_16},
]);
const [ladyItems, setLadyItems] = useState([
{x: 1, y: 1, type: 'ladyItem', image: IMGS.game_img_37},
{x: 4, y: 4, type: 'ladyItem', image: IMGS.game_img_39},
{x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
]);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_e.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 movePlayer = direction => {
let newX = playerPosition.x;
let newY = playerPosition.y;
switch (direction) {
case 'up':
newY = Math.max(0, playerPosition.y - 1);
break;
case 'down':
newY = Math.min(gridSize - 1, playerPosition.y + 1);
break;
case 'left':
newX = Math.max(0, playerPosition.x - 1);
break;
case 'right':
newX = Math.min(gridSize - 1, playerPosition.x + 1);
break;
}
setPlayerPosition({x: newX, y: newY});
checkForItem(newX, newY);
};
const checkForItem = (x, y) => {
const foundBabyItemIndex = babyItems.findIndex(
item => item.x === x && item.y === y,
);
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
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
const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems);
// Check if two baby items have been collected
if (collectedItems.length + 1 >= 3) {
Alert.alert('Good job!', 'You found a baby item!', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel04);
},
},
]);
}
} else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
]);
}
};
const resetGame = () => {
setPlayerPosition({x: 0, y: 0});
setCollectedItems([]);
};
return (
<ImageBackground
source={IMGS.game_img_45}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginLeft: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 8,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Text style={styles.mainText}>Select Suitable Baby Items</Text>
<View style={styles.gameBoard}>
{initialBoard.map((row, rowIndex) => (
<View key={`row-${rowIndex}`} style={styles.row}>
{row.map((cell, cellIndex) => (
<View key={`cell-${cellIndex}`} style={styles.cell}>
{playerPosition.x === cellIndex &&
playerPosition.y === rowIndex && (
<Image source={player} style={styles.playerImage} />
)}
{babyItems.concat(ladyItems).map((item, index) => {
const itemKey = `${item.x},${item.y}`;
if (
item.x === cellIndex &&
item.y === rowIndex &&
!collectedItems.includes(itemKey)
) {
return (
<Image
key={index}
source={item.image}
style={styles.itemImage}
/>
);
}
return null;
})}
</View>
))}
</View>
))}
</View>
{/* Up Button */}
<TouchableOpacity
onPress={() => movePlayer('up')}
style={[styles.button, styles.buttonUp]}>
<Text style={styles.buttonText}>🔼</Text>
</TouchableOpacity>
<View style={styles.controls}>
<TouchableOpacity
onPress={() => movePlayer('right')}
style={[styles.button, styles.buttonLeft]}>
<Text style={styles.buttonText}>▶️</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => movePlayer('left')}
style={[styles.button, styles.buttonRight]}>
<Text style={styles.buttonText}>◀️</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={() => movePlayer('down')}
style={[styles.button, styles.buttonDown]}>
<Text style={styles.buttonText}>🔽</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
gameBoard: {
width: 370,
height: 370,
borderWidth: 2,
marginBottom: 20,
backgroundColor: '#003333',
borderColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
cell: {
flex: 1,
borderWidth: 1,
borderColor: '#ddd',
alignItems: 'center',
justifyContent: 'center',
},
player: {
backgroundColor: '#add8e6',
},
controls: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '50%',
},
button: {
padding: 10,
backgroundColor: '#046582',
// marginBottom: 75,
},
playerImage: {
width: '100%', // Adjust as needed
height: '100%', // Adjust as needed
resizeMode: 'contain', // This ensures the image scales correctly within the cell
},
itemImage: {
width: '80%', // Adjust based on your cell size
height: '80%',
resizeMode: 'contain',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
mainText: {
color: 'white',
fontWeight: 'bold',
marginBottom: 35,
fontSize: 22,
backgroundColor: '#990033',
width: '100%',
padding: 15,
borderRadius: 20,
},
buttonUp: {
top: 1,
},
buttonLeft: {
left: 200,
},
buttonRight: {
right: 70,
},
buttonDown: {
bottom: 1,
},
});
export default Game02Level05;
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
Alert,
StyleSheet,
Image,
ImageBackground,
} from 'react-native';
import {IMGS, COLORS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
const gridSize = 7;
const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
const Game02Level06 = ({navigation}) => {
const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
const player = IMGS.game_img_43;
const [collectedItems, setCollectedItems] = useState([]);
const [babyItems, setBabyItems] = useState([
{x: 2, y: 3, type: 'babyItem', image: IMGS.game_img_17},
{x: 0, y: 4, type: 'babyItem', image: IMGS.game_img_36},
{x: 5, y: 6, type: 'babyItem', image: IMGS.game_img_16},
{x: 3, y: 0, type: 'babyItem', image: IMGS.game_img_33},
]);
const [ladyItems, setLadyItems] = useState([
{x: 1, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
{x: 4, y: 4, type: 'ladyItem', image: IMGS.game_img_39},
{x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
{x: 2, y: 5, type: 'ladyItem', image: IMGS.game_img_29},
]);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_e.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 movePlayer = direction => {
let newX = playerPosition.x;
let newY = playerPosition.y;
switch (direction) {
case 'up':
newY = Math.max(0, playerPosition.y - 1);
break;
case 'down':
newY = Math.min(gridSize - 1, playerPosition.y + 1);
break;
case 'left':
newX = Math.max(0, playerPosition.x - 1);
break;
case 'right':
newX = Math.min(gridSize - 1, playerPosition.x + 1);
break;
}
setPlayerPosition({x: newX, y: newY});
checkForItem(newX, newY);
};
const checkForItem = (x, y) => {
const foundBabyItemIndex = babyItems.findIndex(
item => item.x === x && item.y === y,
);
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
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
const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems);
// Check if two baby items have been collected
if (collectedItems.length + 1 >= 4) {
Alert.alert('Congratulations 🥳🥳! You won the game.', [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Game02ProgressLevel05);
},
},
]);
}
} else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
]);
}
};
const resetGame = () => {
setPlayerPosition({x: 0, y: 0});
setCollectedItems([]);
};
return (
<ImageBackground
source={IMGS.game_img_45}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginLeft: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 8,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Text style={styles.mainText}>Select Suitable Baby Items</Text>
<View style={styles.gameBoard}>
{initialBoard.map((row, rowIndex) => (
<View key={`row-${rowIndex}`} style={styles.row}>
{row.map((cell, cellIndex) => (
<View key={`cell-${cellIndex}`} style={styles.cell}>
{playerPosition.x === cellIndex &&
playerPosition.y === rowIndex && (
<Image source={player} style={styles.playerImage} />
)}
{babyItems.concat(ladyItems).map((item, index) => {
const itemKey = `${item.x},${item.y}`;
if (
item.x === cellIndex &&
item.y === rowIndex &&
!collectedItems.includes(itemKey)
) {
return (
<Image
key={index}
source={item.image}
style={styles.itemImage}
/>
);
}
return null;
})}
</View>
))}
</View>
))}
</View>
{/* Up Button */}
<TouchableOpacity
onPress={() => movePlayer('up')}
style={[styles.button, styles.buttonUp]}>
<Text style={styles.buttonText}>🔼</Text>
</TouchableOpacity>
<View style={styles.controls}>
<TouchableOpacity
onPress={() => movePlayer('right')}
style={[styles.button, styles.buttonLeft]}>
<Text style={styles.buttonText}>▶️</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => movePlayer('left')}
style={[styles.button, styles.buttonRight]}>
<Text style={styles.buttonText}>◀️</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={() => movePlayer('down')}
style={[styles.button, styles.buttonDown]}>
<Text style={styles.buttonText}>🔽</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
gameBoard: {
width: 370,
height: 370,
borderWidth: 2,
marginBottom: 20,
backgroundColor: '#003333',
borderColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
cell: {
flex: 1,
borderWidth: 1,
borderColor: '#ddd',
alignItems: 'center',
justifyContent: 'center',
},
player: {
backgroundColor: '#add8e6',
},
controls: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '50%',
},
button: {
padding: 10,
backgroundColor: '#056676',
// marginBottom: 75,
},
playerImage: {
width: '100%', // Adjust as needed
height: '100%', // Adjust as needed
resizeMode: 'contain', // This ensures the image scales correctly within the cell
},
itemImage: {
width: '80%', // Adjust based on your cell size
height: '80%',
resizeMode: 'contain',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
mainText: {
color: 'white',
fontWeight: 'bold',
marginBottom: 35,
fontSize: 22,
backgroundColor: '#990033',
width: '100%',
padding: 15,
borderRadius: 20,
},
buttonUp: {
top: 1,
},
buttonLeft: {
left: 200,
},
buttonRight: {
right: 70,
},
buttonDown: {
bottom: 1,
},
});
export default Game02Level06;
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
View,
Text,
TouchableOpacity,
Alert,
StyleSheet,
Image,
ImageBackground,
} from 'react-native';
import {IMGS, COLORS, ROUTES} from '../../../../constants';
import Sound from 'react-native-sound';
const gridSize = 9;
const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
const Game02Level07 = ({navigation}) => {
const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
const player = IMGS.game_img_43;
const [collectedItems, setCollectedItems] = useState([]);
const [babyItems, setBabyItems] = useState([
{x: 3, y: 7, type: 'babyItem', image: IMGS.game_img_17},
{x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
{x: 1, y: 2, type: 'babyItem', image: IMGS.game_img_16},
{x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
]);
const [ladyItems, setLadyItems] = useState([
{x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
{x: 4, y: 3, type: 'ladyItem', image: IMGS.game_img_39},
{x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
{x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29},
]);
const [selectedCandy, setSelectedCandy] = useState(null);
const backgroundMusic = useRef(null);
const [isMuted, setIsMuted] = useState(false);
useEffect(() => {
backgroundMusic.current = new Sound(
require('../../../../assets/audios/music_name_e.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 movePlayer = direction => {
let newX = playerPosition.x;
let newY = playerPosition.y;
switch (direction) {
case 'up':
newY = Math.max(0, playerPosition.y - 1);
break;
case 'down':
newY = Math.min(gridSize - 1, playerPosition.y + 1);
break;
case 'left':
newX = Math.max(0, playerPosition.x - 1);
break;
case 'right':
newX = Math.min(gridSize - 1, playerPosition.x + 1);
break;
}
setPlayerPosition({x: newX, y: newY});
checkForItem(newX, newY);
};
const resetGame = () => {
setPlayerPosition({x: 0, y: 0});
setCollectedItems([]);
};
const checkForItem = (x, y) => {
const foundBabyItemIndex = babyItems.findIndex(
item => item.x === x && item.y === y,
);
const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
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
const newBabyItems = [...babyItems];
newBabyItems.splice(foundBabyItemIndex, 1);
setBabyItems(newBabyItems);
// Check if two baby items have been collected
if (collectedItems.length + 1 >= 4) {
Alert.alert('Congratulations 🥳🥳! You won the game.');
}
} else if (foundLadyItem) {
Alert.alert('Oops!', "This is a lady's item. Try again!", [
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
},
},
]);
}
};
return (
<ImageBackground
source={IMGS.game_img_45}
style={styles.backgroundImage}
resizeMode="cover">
<View style={{marginTop: 1}}>
<TouchableOpacity
style={{
backgroundColor: COLORS.white,
borderColor: COLORS.white,
height: 60,
marginLeft: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 8,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Text style={styles.mainText}>Select Suitable Baby Items</Text>
<View style={styles.gameBoard}>
{initialBoard.map((row, rowIndex) => (
<View key={`row-${rowIndex}`} style={styles.row}>
{row.map((cell, cellIndex) => (
<View key={`cell-${cellIndex}`} style={styles.cell}>
{playerPosition.x === cellIndex &&
playerPosition.y === rowIndex && (
<Image source={player} style={styles.playerImage} />
)}
{babyItems.concat(ladyItems).map((item, index) => {
const itemKey = `${item.x},${item.y}`;
if (
item.x === cellIndex &&
item.y === rowIndex &&
!collectedItems.includes(itemKey)
) {
return (
<Image
key={index}
source={item.image}
style={styles.itemImage}
/>
);
}
return null;
})}
</View>
))}
</View>
))}
</View>
{/* Up Button */}
<TouchableOpacity
onPress={() => movePlayer('up')}
style={[styles.button, styles.buttonUp]}>
<Text style={styles.buttonText}>🔼</Text>
</TouchableOpacity>
<View style={styles.controls}>
<TouchableOpacity
onPress={() => movePlayer('right')}
style={[styles.button, styles.buttonLeft]}>
<Text style={styles.buttonText}>▶️</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => movePlayer('left')}
style={[styles.button, styles.buttonRight]}>
<Text style={styles.buttonText}>◀️</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={() => movePlayer('down')}
style={[styles.button, styles.buttonDown]}>
<Text style={styles.buttonText}>🔽</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
gameBoard: {
width: 370,
height: 420,
borderWidth: 2,
marginBottom: 10,
backgroundColor: '#003333',
borderColor: 'white',
},
row: {
flex: 1,
flexDirection: 'row',
},
cell: {
flex: 1,
borderWidth: 1,
borderColor: '#ddd',
alignItems: 'center',
justifyContent: 'center',
},
player: {
backgroundColor: '#add8e6',
},
controls: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '50%',
},
button: {
padding: 10,
backgroundColor: '#056676',
// marginBottom: 15,
},
playerImage: {
width: '100%', // Adjust as needed
height: '100%', // Adjust as needed
resizeMode: 'contain', // This ensures the image scales correctly within the cell
},
itemImage: {
width: '80%', // Adjust based on your cell size
height: '80%',
resizeMode: 'contain',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
mainText: {
color: 'white',
fontWeight: 'bold',
marginBottom: 25,
fontSize: 22,
backgroundColor: '#990033',
width: '100%',
padding: 10,
borderRadius: 20,
},
buttonUp: {
top: 1,
},
buttonLeft: {
left: 200,
},
buttonRight: {
right: 70,
},
buttonDown: {
bottom: 1,
},
});
export default Game02Level07;
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 Game02ProgressLevel01 = ({route, navigation}) => {
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}>1</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.Game02Level01)}>
<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 Game02ProgressLevel01;
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 Game02ProgressLevel02 = ({route, navigation}) => {
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}>2</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() =>
navigation.navigate(ROUTES.CravingsPuzzleGame02Level02)
}>
<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 Game02ProgressLevel02;
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 Game02ProgressLevel03 = ({route, navigation}) => {
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}>3</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.PuzzleGame02Level03)}>
<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 Game02ProgressLevel03;
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 Game02ProgressLevel04 = ({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}>4</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.Game02Level04)}>
<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 Game02ProgressLevel04;
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 Game02ProgressLevel05 = ({route, navigation}) => {
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}>5</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.Game02Level05)}>
<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 Game02ProgressLevel05;
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 Game02ProgressLevel06 = ({route, navigation}) => {
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}>7</Text>
</View>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(ROUTES.Game02Level07)}>
<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 Game02ProgressLevel06;
import axios from 'axios';
// const BASE_PATH = 'http://10.0.2.2:8000';
const BASE_PATH = 'http://172.104.34.100:8000/';
import AsyncStorage from '@react-native-async-storage/async-storage';
//initialize payment API Call
export let gameLevelPredict = async (
age,
depression_level,
previous_child_birth_experiences,
marital_status_divorced,
marital_status_married,
marital_status_single,
family_background_bad,
family_background_good,
family_background_normal,
music_name_a,
music_name_b,
music_name_c,
music_name_d,
music_name_e,
music_name_f,
) => {
try {
let value = await axios.post(BASE_PATH + '/predict/', {
age: age,
depression_level: depression_level,
previous_child_birth_experiences: previous_child_birth_experiences,
marital_status_divorced: marital_status_divorced,
marital_status_married: marital_status_married,
marital_status_single: marital_status_single,
family_background_bad: family_background_bad,
family_background_good: family_background_good,
family_background_normal: family_background_normal,
music_name_a: music_name_a,
music_name_b: music_name_b,
music_name_c: music_name_c,
music_name_d: music_name_d,
music_name_e: music_name_e,
music_name_f: music_name_f,
});
return value;
} catch (error) {
return error;
}
};
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