Skip to content

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

game UI implementation

parent cc87e799
Show whitespace changes
Inline Side-by-side
Showing with 1494 additions and 1 deletion
src/components/RadioButton.js 0 → 100644
View file @ 92092c6d
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
const RadioButton = ({label, selected, onPress, textColor}) => (
<TouchableOpacity onPress={onPress}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View
style={{
width: 20,
height: 20,
borderRadius: 10,
borderWidth: 2,
borderColor: selected ? '#0047AB' : 'gray',
marginRight: 10,
justifyContent: 'center',
alignItems: 'center',
}}>
{selected && (
<View
style={{
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'black',
}}
/>
)}
</View>
<Text
style={{
color: '#0047AB',
fontSize: 15,
fontWeight: 'bold',
color: textColor || '#000',
}}>
{label}
</Text>
</View>
</TouchableOpacity>
);
export default RadioButton;
src/constants/imgs.js
View file @ 92092c6d
...@@ -5,4 +5,52 @@ export default { ...@@ -5,4 +5,52 @@ export default {
ex_2: require('../assets/ex_2.jpg'), ex_2: require('../assets/ex_2.jpg'),
ex_3: require('../assets/ex_3.jpg'), ex_3: require('../assets/ex_3.jpg'),
ex_4: require('../assets/ex_4.jpg'), ex_4: require('../assets/ex_4.jpg'),
//games
game_img_1: require('../assets/game_img_1.png'),
game_img_2: require('../assets/game_img_2.png'),
game_img_3: require('../assets/Game01.jpg'),
game_img_4: require('../assets/Game02.jpg'),
game_img_5: require('../assets/score_background.png'),
game_img_6: require('../assets/gameBackground.jpg'),
game_img_7: require('../assets/Game02background.jpg'),
game_img_8: require('../assets/game03background.jpg'),
game_img_9: require('../assets/rockpapergame.jpeg'),
game_img_10: require('../assets/rock.png'),
game_img_11: require('../assets/paper.png'),
game_img_12: require('../assets/scissors.png'),
game_img_13: require('../assets/baby.png'),
game_img_14: require('../assets/cart.png'),
game_img_15: require('../assets/background06.jpeg'),
game_img_16: require('../assets/shoes.png'),
game_img_17: require('../assets/cloths.png'),
game_img_18: require('../assets/shoppingCart.png'),
game_img_19: require('../assets/games/Spinach.png'),
game_img_20: require('../assets/games/Candy.png'),
game_img_21: require('../assets/games/Carrot.png'),
game_img_22: require('../assets/games/FrenchFries.png'),
game_img_23: require('../assets/games/Tomato.png'),
game_img_24: require('../assets/games/Doughnut.png'),
game_img_25: require('../assets/games/Fruits.png'),
game_img_26: require('../assets/games/Eggs.png'),
game_img_27: require('../assets/games/Milk.png'),
game_img_28: require('../assets/games/Water.png'),
game_img_29: require('../assets/games/Hotdogs.png'),
game_img_30: require('../assets/games/Oats.png'),
game_img_31: require('../assets/games/level0201.png'),
game_img_32: require('../assets/games/level0202.png'),
game_img_33: require('../assets/games/level0203.png'),
game_img_34: require('../assets/games/level0204.png'),
game_img_35: require('../assets/games/level0205.png'),
game_img_36: require('../assets/games/level0206.png'),
game_img_37: require('../assets/games/level0207.png'),
game_img_38: require('../assets/games/level0208.png'),
game_img_39: require('../assets/games/level0209.png'),
game_img_40: require('../assets/games/level0210.png'),
game_img_41: require('../assets/games/level0211.png'),
game_img_42: require('../assets/games/level0212.png'),
game_img_43: require('../assets/games/baby02.png'),
game_img_44: require('../assets/games/game02Backgroundnew.jpeg'),
game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'),
}; };
src/constants/routes.js
View file @ 92092c6d
...@@ -22,5 +22,49 @@ export default { ...@@ -22,5 +22,49 @@ export default {
EXERCISE_MAIN_MENU: 'Exercise_Home_Menu', EXERCISE_MAIN_MENU: 'Exercise_Home_Menu',
EXERCISE_VIEW: 'Exercise_View', EXERCISE_VIEW: 'Exercise_View',
EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View', EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View',
EXERCISE_PROGRESS: 'Exercise_PROGRESS' EXERCISE_PROGRESS: 'Exercise_PROGRESS',
//GAMES
GAME_HOME: 'Game_Home',
GAME_WELCOME: 'Game_Welcome',
GAME_FORM: 'Game_Form',
GAME_MAIN_MENU: 'Game_Home_Menu',
GAME_VIEW: 'Game_View',
GAME_QUIZ_OPTIONS: 'Game_Quiz_Options',
GAME_QUIZ_IN_ENGLISH: 'Game_Quiz_In_English',
GAME_QUIZ_IN_SINHALA: 'Game_Quiz_In_Sinhala',
GAME_MAIN_DETAILS: 'Main_Details_Form',
QUIZ_SCORE: 'Quiz_Score',
CHOOSE_GAME: 'Choose_Game',
Level01Instructions: 'Level01Instructions',
GameLevel1: 'GameLevel1',
GameLevel2: 'GameLevel2',
GameLevel3: 'GameLevel3',
GameLevel4: 'GameLevel4',
GameLevel5: 'GameLevel5',
GameLevel6: 'GameLevel6',
GameLevel0: 'GameLevel0',
Game02Level01: 'Game02Level01',
CravingsPuzzleGame02Level02: 'CravingsPuzzleGame02Level02',
PuzzleGame02Level03: 'PuzzleGame02Level03',
Game02Level04: 'Game02Level04',
Game02Level05: 'Game02Level05',
Game02Level06: 'Game02Level06',
Game02Level07: 'Game02Level07',
GameLevelPage: 'GameLevelPage',
MainDetailsFormInSinhala: 'MainDetailsFormInSinhala',
Level01: 'Level01',
Level02: 'Level02',
Level03: 'Level03',
Level04: 'Level04',
Level05: 'Level05',
Level06: 'Level06',
Game02ProgressLevel01: 'Game02ProgressLevel01',
Game02ProgressLevel02: 'Game02ProgressLevel02',
Game02ProgressLevel03: 'Game02ProgressLevel03',
Game02ProgressLevel04: 'Game02ProgressLevel04',
Game02ProgressLevel05: 'Game02ProgressLevel05',
Game02ProgressLevel06: 'Game02ProgressLevel06',
}; };
src/navigations/GameNavigator.js 0 → 100644
View file @ 92092c6d
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
import HealthFormExercise from '../screens/home/exercise/HealthFormExercise';
import MainMenuExercise from '../screens/home/exercise/MainMenuExercise';
import ExerciseView from '../screens/home/exercise/ExerciseView';
import {COLORS, ROUTES} from '../constants';
import WelcomePageGame from '../screens/home/game/WelcomeGame';
import QuizOptionsPage from '../screens/home/game/QuizOptions';
import QuestionInEnglishPage from '../screens/home/game/QuestionsInEnglish';
import QuestionInSinhalaPage from '../screens/home/game/QuestionsInShinhala';
import MainDetailsForm from '../screens/home/game/MainDetailsForm';
import QuizScoreDisplayPage from '../screens/home/game/QuizScore';
import ChooseGame from '../screens/home/game/ChooseGame';
import Level01InstructionsPage from '../screens/home/game/game01/Level01Instructions';
import GameLevel1 from '../screens/home/game/game01/GameLevel1';
import CandyCrushGameLevel02 from '../screens/home/game/game01/GameLevel2';
import CandyCrushGameLevel03 from '../screens/home/game/game01/GameLevel3';
import CandyCrushGameLevel04 from '../screens/home/game/game01/GameLevel04';
import GameLevel5 from '../screens/home/game/game01/GameLevel5';
import GameLevel6 from '../screens/home/game/game01/GameLevel6';
import GameLevel0 from '../screens/home/game/game01/GameLevel0';
import Game02Level01 from '../screens/home/game/game02/level01';
import CravingsPuzzleGame02Level02 from '../screens/home/game/game02/level02';
import PuzzleGame02Level03 from '../screens/home/game/game02/level03';
import Game02Level04 from '../screens/home/game/game02/level04';
import Game02Level05 from '../screens/home/game/game02/level05';
import Game02Level06 from '../screens/home/game/game02/level06';
import Game02Level07 from '../screens/home/game/game02/level07';
import GameLevelPage from '../screens/home/game/GameLevelPage';
import MainDetailsFormInSinhala from '../screens/home/game/MainDetailsFormInSinhala';
import Level01 from '../screens/home/game/game01/progress/Level01';
import Level02 from '../screens/home/game/game01/progress/Level02';
import Level03 from '../screens/home/game/game01/progress/Level03';
import Level04 from '../screens/home/game/game01/progress/Level04';
import Level05 from '../screens/home/game/game01/progress/Level05';
import Level06 from '../screens/home/game/game01/progress/Level06';
import Game02ProgressLevel01 from '../screens/home/game/game02/progress/Level01';
import Game02ProgressLevel02 from '../screens/home/game/game02/progress/Level02';
import Game02ProgressLevel03 from '../screens/home/game/game02/progress/Level03';
import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04';
import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05';
import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06';
const Stack = createStackNavigator();
function GameNavigator() {
return (
<Stack.Navigator
screenOptions={{
headerBackTitleVisible: false,
headerShown: false,
}}
initialRouteName={ROUTES.EXERCISE_MAIN_MENU}>
<Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
<Stack.Screen
name={ROUTES.GAME_QUIZ_OPTIONS}
component={QuizOptionsPage}
/>
<Stack.Screen
name={ROUTES.GAME_QUIZ_IN_ENGLISH}
component={QuestionInEnglishPage}
/>
<Stack.Screen
name={ROUTES.GAME_QUIZ_IN_SINHALA}
component={QuestionInSinhalaPage}
/>
<Stack.Screen name={ROUTES.GAME_FORM} component={HealthFormExercise} />
<Stack.Screen name={ROUTES.GAME_MAIN_MENU} component={MainMenuExercise} />
<Stack.Screen name={ROUTES.GAME_VIEW} component={ExerciseView} />
<Stack.Screen name={ROUTES.QUIZ_SCORE} component={QuizScoreDisplayPage} />
<Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} />
{/* {/* <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} /> */}
{/* <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} />
<Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} /> */}
<Stack.Screen name={ROUTES.GameLevel1} component={GameLevel1} />
<Stack.Screen
name={ROUTES.GameLevel2}
component={CandyCrushGameLevel02}
/>
<Stack.Screen
name={ROUTES.GameLevel3}
component={CandyCrushGameLevel03}
/>
<Stack.Screen
name={ROUTES.GameLevel4}
component={CandyCrushGameLevel04}
/>
<Stack.Screen name={ROUTES.GameLevel5} component={GameLevel5} />
<Stack.Screen name={ROUTES.GameLevel0} component={GameLevel0} />
<Stack.Screen name={ROUTES.GameLevel6} component={GameLevel6} />
<Stack.Screen name={ROUTES.Game02Level01} component={Game02Level01} />
<Stack.Screen
name={ROUTES.CravingsPuzzleGame02Level02}
component={CravingsPuzzleGame02Level02}
/>
<Stack.Screen
name={ROUTES.PuzzleGame02Level03}
component={PuzzleGame02Level03}
/>
<Stack.Screen name={ROUTES.Game02Level04} component={Game02Level04} />
<Stack.Screen
name={ROUTES.Level01Instructions}
component={Level01InstructionsPage}
/>
<Stack.Screen name={ROUTES.Game02Level05} component={Game02Level05} />
<Stack.Screen name={ROUTES.Game02Level06} component={Game02Level06} />
<Stack.Screen name={ROUTES.Game02Level07} component={Game02Level07} />
<Stack.Screen
name={ROUTES.GAME_MAIN_DETAILS}
component={MainDetailsForm}
/>
<Stack.Screen
name={ROUTES.MainDetailsFormInSinhala}
component={MainDetailsFormInSinhala}
/>
<Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} />
<Stack.Screen name={ROUTES.Level01} component={Level01} />
<Stack.Screen name={ROUTES.Level02} component={Level02} />
<Stack.Screen name={ROUTES.Level03} component={Level03} />
<Stack.Screen name={ROUTES.Level04} component={Level04} />
<Stack.Screen name={ROUTES.Level05} component={Level05} />
<Stack.Screen name={ROUTES.Level06} component={Level06} />
<Stack.Screen
name={ROUTES.Game02ProgressLevel01}
component={Game02ProgressLevel01}
/>
<Stack.Screen
name={ROUTES.Game02ProgressLevel02}
component={Game02ProgressLevel02}
/>
<Stack.Screen
name={ROUTES.Game02ProgressLevel03}
component={Game02ProgressLevel03}
/>
<Stack.Screen
name={ROUTES.Game02ProgressLevel04}
component={Game02ProgressLevel04}
/>
<Stack.Screen
name={ROUTES.Game02ProgressLevel05}
component={Game02ProgressLevel05}
/>
<Stack.Screen
name={ROUTES.Game02ProgressLevel06}
component={Game02ProgressLevel06}
/>
</Stack.Navigator>
);
}
export default GameNavigator;
src/screens/home/game/ChooseGame.js 0 → 100644
View file @ 92092c6d
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
ScrollView,
ImageBackground,
Dimensions,
Text,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
const ChooseGame = ({navigation, route}) => {
const {predictedGameLevel} = route.params;
const navigateBasedOnGameAndLevel = gameSelected => {
const gameLevelRoutes =
gameSelected === 'MommysSweetMatch'
? {
0: ROUTES.GameLevel1,
1: ROUTES.GameLevel0,
2: ROUTES.GameLevel1,
3: ROUTES.GameLevel2,
4: ROUTES.GameLevel3,
5: ROUTES.GameLevel4,
6: ROUTES.GameLevel5,
7: ROUTES.GameLevel6,
8: ROUTES.GameLevel3,
9: ROUTES.GameLevel4,
}
: {
0: ROUTES.PuzzleGame02Level03,
1: ROUTES.Game02Level01,
2: ROUTES.CravingsPuzzleGame02Level02,
3: ROUTES.PuzzleGame02Level03,
4: ROUTES.Game02Level04,
5: ROUTES.Game02Level05,
6: ROUTES.Game02Level06,
7: ROUTES.Game02Level07,
8: ROUTES.Game02Level04,
9: ROUTES.Game02Level06,
};
const routeName = gameLevelRoutes[predictedGameLevel];
if (routeName) {
navigation.navigate(routeName);
} else {
console.error('Unexpected prediction value:', predictedGameLevel);
}
};
return (
<>
<View style={styles.bottomView}>
<View style={{padding: 25}}>
<View style={{marginTop: 40}}>
<TouchableOpacity
style={{
backgroundColor: '#260B8C',
height: 300,
marginBottom: 20,
alignItems: 'center',
marginHorizontal: 10,
borderRadius: 24,
width: 340,
}}
onPress={() => navigateBasedOnGameAndLevel('MommysSweetMatch')}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<ImageBackground
source={IMGS.game_img_3}
style={styles.backgroundImage}
resizeMode="cover">
<View style={styles.box}></View>
<Text
bold
medium
style={{
color: 'black',
fontSize: 25,
marginTop: -45,
marginLeft: 20,
fontWeight: 'bold',
}}>
Mommy's Sweet Match
</Text>
</ImageBackground>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{marginTop: 35}}>
<TouchableOpacity
style={{
backgroundColor: '#260B8C',
height: 300,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 10,
borderRadius: 24,
width: 340,
}}
onPress={() => navigateBasedOnGameAndLevel('BumpBoutique')}>
<ImageBackground
source={IMGS.game_img_4}
style={styles.backgroundImage}
resizeMode="cover">
<View style={styles.box}></View>
<Text
bold
medium
center
style={{
color: 'black',
fontSize: 25,
marginTop: -45,
marginLeft: 20,
fontWeight: 'bold',
}}>
Bump Boutique
</Text>
</ImageBackground>
</TouchableOpacity>
</View>
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
brandViewText: {
color: '#FFFFFF',
fontSize: 40,
// fontWeight: 'bold',
},
bottomView: {
flex: 1.5,
backgroundColor: '#FFFFFF',
},
backgroundImage: {
flex: 1,
width: 340,
height: 300,
borderRadius: 50,
},
imageContainer: {
borderRadius: 24,
overflow: 'hidden',
width: '100%',
height: '100%',
},
box: {
backgroundColor: 'white',
height: 50,
marginTop: 250,
opacity: 0.5,
},
});
export default ChooseGame;
src/screens/home/game/MainDetailsForm.js 0 → 100644
View file @ 92092c6d
/* 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 MainDetailsForm = ({navigation}) => {
const [maritalStatus, setMaritalStatus] = useState('single');
const [familyBackground, setFamilyBackground] = useState('normal');
const [age, setAge] = useState('');
const [previousChildBirthExperiences, setPreviousChildBirthExperiences] =
useState('');
const maritalStatusOptions = [
{
key: 'single',
text: 'Single',
selected: maritalStatus === 'single',
},
{
key: 'married',
text: 'Married',
selected: maritalStatus === 'married',
},
{
key: 'divorced',
text: 'Divorced',
selected: maritalStatus === 'divorced',
},
];
const familyBackgroundOptions = [
{
key: 'normal',
text: 'Normal',
selected: familyBackground === 'normal',
},
{
key: 'bad',
text: 'Bad',
selected: familyBackground === 'bad',
},
{
key: 'good',
text: 'Good',
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: 20,
fontWeight: 'bold',
marginTop: 40,
marginBottom: 40,
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
}}>
Please answer for this questions
</Text>
</View>
{/* <View style={{marginTop: 5}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 10,
color: COLORS.black,
}}>
Your Name:
</Text>
<TextInput
style={{
backgroundColor: '#ffffff',
borderRadius: 15,
height: 48,
marginBottom: 10,
marginTop: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
fontSize: 13,
color: COLORS.black,
elevation: 17,
}}
// value={value}
// onChangeText={(text) => setValue(text)}
/>
</View> */}
<View style={{marginTop: 15}}>
<Text
semi
style={{
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20,
color: COLORS.black,
}}>
Your Age:
</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,
}}>
Marital Status:{' '}
</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,
}}>
Family Background:
</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,
}}>
Previous Child Birth Experiences:
</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: 20,
justifyContent: 'center',
alignItems: 'center',
elevation: 10,
borderRadius: 14,
width: '100%',
}}
onPress={() =>
navigation.navigate(ROUTES.GAME_QUIZ_IN_ENGLISH, {
formData: {
age: age,
marital_status_divorced:
maritalStatus === 'divorced' ? 1 : 0,
marital_status_married:
maritalStatus === 'married' ? 1 : 0,
marital_status_single: maritalStatus === 'single' ? 1 : 0,
family_background_bad: familyBackground === 'bad' ? 1 : 0,
family_background_good:
familyBackground === 'good' ? 1 : 0,
family_background_normal:
familyBackground === 'normal' ? 1 : 0,
previous_child_birth_experiences:
previousChildBirthExperiences,
},
})
}>
<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 MainDetailsForm;
src/screens/home/game/game01/GameLevel1.js 0 → 100644
View file @ 92092c6d
/* 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 = 5;
const CandyTypes = ['🤰', '🍼', '🍀', '🧸', '🎈'];
const GameLevel1 = ({navigation}) => {
const [board, setBoard] = useState(createBoard());
const [score, setScore] = useState(0);
const [timeLeft, setTimeLeft] = useState(30);
const [selectedCandy, setSelectedCandy] = useState(null);
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 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 >= 50) {
Alert.alert(
'Congratulations 🥳🥳',
`Time is up! You win!
`,
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Level02);
},
},
],
);
} else if (timeLeft === 0 && score < 50) {
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: 50</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: 50}}>
<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: 350,
height: 350,
backgroundColor: '#E56E94',
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 GameLevel1;
src/screens/home/game/game01/GameLevel2.js 0 → 100644
View file @ 92092c6d
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 = 7; // Increased board size
const CandyTypes = ['🤰', '🍼', '🌼', '🧸', '🤱', '🍇', '🍬']; // Increased candy types
const WinningScore = 100;
const CandyCrushGameLevel02 = ({navigation}) => {
const [board, setBoard] = useState(createBoard());
const [score, setScore] = useState(0);
const [timeLeft, setTimeLeft] = useState(50);
const [selectedCandy, setSelectedCandy] = useState(null);
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 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 >= 55) {
Alert.alert(
'Congratulations 🥳🥳',
`Time is up! You win!
`,
[
{
text: 'OK',
onPress: () => {
navigation.navigate(ROUTES.Level03);
},
},
],
);
} else if (timeLeft === 0 && score < 55) {
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;
}
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_7}
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="#DE3163"
style={{marginBottom: 10}}
/>
<Text style={styles.text}>Winning Score: 55</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: '#DE3163',
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({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
board: {
width: 380, // Adjusted according to the new board size
height: 400, // Adjusted according to the new board size
backgroundColor: '#097969',
borderColor: 'white',
},
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 CandyCrushGameLevel02;
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