Skip to content

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

add scroll views

parent 248bc388
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 330 deletions
src/screens/home/game/game01/GameLevel04.js
View file @ 94ea193e
...@@ -8,6 +8,7 @@ import { ...@@ -8,6 +8,7 @@ import {
Alert, Alert,
Button, Button,
ImageBackground, ImageBackground,
ScrollView,
} from 'react-native'; } from 'react-native';
import {IMGS, ROUTES, COLORS} from '../../../../constants'; import {IMGS, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound'; import Sound from 'react-native-sound';
...@@ -260,97 +261,100 @@ const CandyCrushGameLevel04 = ({navigation}) => { ...@@ -260,97 +261,100 @@ const CandyCrushGameLevel04 = ({navigation}) => {
} }
return ( return (
<ImageBackground <ScrollView
source={IMGS.game_img_7} style={styles.scrollContainer}
style={styles.backgroundImage} contentContainerStyle={styles.contentContainer}>
resizeMode="cover"> <ImageBackground
<View> source={IMGS.game_img_7}
<TouchableOpacity style={styles.backgroundImage}
style={{ resizeMode="cover">
backgroundColor: COLORS.white, <View>
borderColor: COLORS.white, <TouchableOpacity
height: 60,
marginBottom: 5,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 10,
}}
onPress={toggleMute}>
<Text
medium
center
style={{ style={{
color: 'black', backgroundColor: COLORS.white,
fontSize: 30, borderColor: COLORS.white,
fontWeight: 'bold', height: 60,
}}> marginBottom: 5,
{isMuted ? '🔇' : '🔊'} justifyContent: 'center',
</Text> alignItems: 'center',
</TouchableOpacity> borderRadius: 14,
</View> width: 50,
<Button }}
title="Refresh" onPress={toggleMute}>
onPress={resetGame} <Text
color="#702963" medium
sx={{marginBottom: 5}} center
/> style={{
color: 'black',
fontSize: 30,
fontWeight: 'bold',
}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Button
title="Refresh"
onPress={resetGame}
color="#702963"
sx={{marginBottom: 5}}
/>
<Text style={styles.text}>Level: {currentLevel + 1}</Text> <Text style={styles.text}>Level: {currentLevel + 1}</Text>
<Text style={styles.text}> <Text style={styles.text}>
Winning Score: {levels[currentLevel].winningScore} Winning Score: {levels[currentLevel].winningScore}
</Text> </Text>
<Text style={styles.text}>Score: {score}</Text> <Text style={styles.text}>Score: {score}</Text>
<Text style={styles.text}>Time Left: {timeLeft}s</Text> <Text style={styles.text}>Time Left: {timeLeft}s</Text>
<Button <Button
title="Next Level" title="Next Level"
onPress={nextLevel} onPress={nextLevel}
color="#702963" color="#702963"
// style={{ marginBottom: 5, width: 100 }} // style={{ marginBottom: 5, width: 100 }}
/> />
<Text style={styles.text}> {''}</Text> <Text style={styles.text}> {''}</Text>
<View style={styles.board}> <View style={styles.board}>
{board.map((row, rowIndex) => ( {board.map((row, rowIndex) => (
<View key={rowIndex} style={styles.row}> <View key={rowIndex} style={styles.row}>
{row.map((candy, colIndex) => ( {row.map((candy, colIndex) => (
<TouchableOpacity <TouchableOpacity
key={colIndex} key={colIndex}
style={styles.candy} style={styles.candy}
onPress={() => handlePress(rowIndex, colIndex)}> onPress={() => handlePress(rowIndex, colIndex)}>
<Text style={styles.candyText}>{candy}</Text> <Text style={styles.candyText}>{candy}</Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
))} ))}
</View> </View>
<View> <View>
<TouchableOpacity <TouchableOpacity
style={{
backgroundColor: '#702963',
height: 50,
marginBottom: 120,
justifyContent: 'center',
alignItems: 'center',
// marginHorizontal: 25,
borderRadius: 16,
width: 320,
}}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
<Text
bold
medium
center
style={{ style={{
color: 'white', backgroundColor: '#702963',
fontSize: 22, height: 50,
fontWeight: 'bold', marginBottom: 60,
}}> justifyContent: 'center',
Exit alignItems: 'center',
</Text> // marginHorizontal: 25,
</TouchableOpacity> borderRadius: 16,
</View> width: 320,
</ImageBackground> }}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
}}>
Exit
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
); );
}; };
...@@ -389,6 +393,12 @@ const styles = StyleSheet.create({ ...@@ -389,6 +393,12 @@ const styles = StyleSheet.create({
candyText: { candyText: {
fontSize: 30, fontSize: 30,
}, },
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
}); });
export default CandyCrushGameLevel04; export default CandyCrushGameLevel04;
src/screens/home/game/game01/GameLevel3.js
View file @ 94ea193e
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
Alert, Alert,
Button, Button,
ImageBackground, ImageBackground,
ScrollView,
} from 'react-native'; } from 'react-native';
import {IMGS, ROUTES, COLORS} from '../../../../constants'; import {IMGS, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound'; import Sound from 'react-native-sound';
...@@ -215,77 +216,81 @@ const CandyCrushGameLevel03 = ({navigation}) => { ...@@ -215,77 +216,81 @@ const CandyCrushGameLevel03 = ({navigation}) => {
return true; // Matches were found and cleared return true; // Matches were found and cleared
} }
return ( return (
<ImageBackground <ScrollView
source={IMGS.game_img_8} style={styles.scrollContainer}
style={styles.backgroundImage} contentContainerStyle={styles.contentContainer}>
resizeMode="cover"> <ImageBackground
<View style={{marginTop: 1}}> source={IMGS.game_img_8}
<TouchableOpacity style={styles.backgroundImage}
style={{ resizeMode="cover">
backgroundColor: COLORS.white, <View style={{marginTop: 1}}>
borderColor: COLORS.white, <TouchableOpacity
height: 60,
marginBottom: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
width: 50,
marginTop: 12,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Button title="Refresh" onPress={resetGame} color="#702963" />
<Text style={styles.text}>Winning Score: 75</Text>
<Text style={styles.text}>Score: {score}</Text>
<Text style={styles.text}>Time Left: {timeLeft}s</Text>
<View style={styles.board}>
{board.map((row, rowIndex) => (
<View key={rowIndex} style={styles.row}>
{row.map((candy, colIndex) => (
<TouchableOpacity
key={colIndex}
style={styles.candy}
onPress={() => handlePress(rowIndex, colIndex)}>
<Text style={styles.candyText}>{candy}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
<View style={{marginTop: 60}}>
<TouchableOpacity
style={{
backgroundColor: '#702963',
height: 50,
marginBottom: 60,
justifyContent: 'center',
alignItems: 'center',
// marginHorizontal: 25,
borderRadius: 16,
width: 320,
}}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
<Text
bold
medium
center
style={{ style={{
color: 'white', backgroundColor: COLORS.white,
fontSize: 22, borderColor: COLORS.white,
fontWeight: 'bold', height: 60,
}}> marginBottom: 40,
Exit justifyContent: 'center',
</Text> alignItems: 'center',
</TouchableOpacity> borderRadius: 14,
</View> width: 50,
</ImageBackground> marginTop: 12,
}}
onPress={toggleMute}>
<Text
medium
center
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
{isMuted ? '🔇' : '🔊'}
</Text>
</TouchableOpacity>
</View>
<Button title="Refresh" onPress={resetGame} color="#702963" />
<Text style={styles.text}>Winning Score: 75</Text>
<Text style={styles.text}>Score: {score}</Text>
<Text style={styles.text}>Time Left: {timeLeft}s</Text>
<View style={styles.board}>
{board.map((row, rowIndex) => (
<View key={rowIndex} style={styles.row}>
{row.map((candy, colIndex) => (
<TouchableOpacity
key={colIndex}
style={styles.candy}
onPress={() => handlePress(rowIndex, colIndex)}>
<Text style={styles.candyText}>{candy}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
<View style={{marginTop: 60}}>
<TouchableOpacity
style={{
backgroundColor: '#702963',
height: 50,
marginBottom: 60,
justifyContent: 'center',
alignItems: 'center',
// marginHorizontal: 25,
borderRadius: 16,
width: 320,
}}
onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
<Text
bold
medium
center
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
}}>
Exit
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
); );
}; };
...@@ -323,6 +328,12 @@ const styles = StyleSheet.create({ ...@@ -323,6 +328,12 @@ const styles = StyleSheet.create({
candyText: { candyText: {
fontSize: 30, fontSize: 30,
}, },
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
}); });
export default CandyCrushGameLevel03; export default CandyCrushGameLevel03;
src/screens/home/game/game01/GameLevel5.js
View file @ 94ea193e
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
Image, Image,
StyleSheet, StyleSheet,
Alert, Alert,
ScrollView,
ImageBackground, ImageBackground,
} from 'react-native'; } from 'react-native';
import {IMGS, COLORS, ROUTES} from '../../../../constants'; import {IMGS, COLORS, ROUTES} from '../../../../constants';
...@@ -119,86 +120,90 @@ const GameLevel5 = ({navigation}) => { ...@@ -119,86 +120,90 @@ const GameLevel5 = ({navigation}) => {
}; };
return ( return (
<ImageBackground <ScrollView
source={IMGS.game_img_9} style={styles.scrollContainer}
style={styles.backgroundImage} contentContainerStyle={styles.contentContainer}>
resizeMode="cover"> <ImageBackground
<View style={{marginTop: 10}}> source={IMGS.game_img_9}
<TouchableOpacity style={styles.backgroundImage}
style={{ resizeMode="cover">
backgroundColor: COLORS.white, <View style={{marginTop: 10}}>
borderColor: COLORS.white, <TouchableOpacity
height: 60, style={{
marginBottom: 2, backgroundColor: COLORS.white,
justifyContent: 'center', borderColor: COLORS.white,
alignItems: 'center', height: 60,
borderRadius: 14, marginBottom: 2,
width: 50, justifyContent: 'center',
// marginTop: 4, alignItems: 'center',
}} borderRadius: 14,
onPress={toggleMute}> width: 50,
<Text // marginTop: 4,
medium }}
center onPress={toggleMute}>
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}> <Text
{isMuted ? '🔇' : '🔊'} medium
</Text> center
</TouchableOpacity> style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
</View> {isMuted ? '🔇' : '🔊'}
<Text style={styles.headerText}>Rock Paper Scissors</Text> </Text>
<View style={styles.new}> </TouchableOpacity>
<Text style={styles.resultText}>Result: {result ? result : '-'}</Text> </View>
<Text style={styles.pointsText}>Points: {points}</Text> <Text style={styles.headerText}>Rock Paper Scissors</Text>
</View> <View style={styles.new}>
<Text style={styles.resultText}>Result: {result ? result : '-'}</Text>
<Text style={styles.pointsText}>Points: {points}</Text>
</View>
<View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}> <View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}>
<View style={styles.resultContainer}> <View style={styles.resultContainer}>
<View style={styles.circle}> <View style={styles.circle}>
<Text style={styles.playerText}>Computer</Text> <Text style={styles.playerText}>Computer</Text>
{computerChoice && ( {computerChoice && (
<Image <Image
source={getChoiceImage(computerChoice)} source={getChoiceImage(computerChoice)}
style={styles.choiceImage} style={styles.choiceImage}
/> />
)} )}
</View> </View>
<Text style={styles.resultText}>VS</Text> <Text style={styles.resultText}>VS</Text>
<View style={styles.circle}> <View style={styles.circle}>
<Text style={styles.playerText}>You</Text> <Text style={styles.playerText}>You</Text>
{playerChoice && ( {playerChoice && (
<Image <Image
source={getChoiceImage(playerChoice)} source={getChoiceImage(playerChoice)}
style={styles.choiceImage} style={styles.choiceImage}
/> />
)} )}
</View> </View>
</View>
<View style={styles.choicesContainer}>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('rock')}
style={styles.choiceButton}>
<Image source={rockImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('paper')}
style={styles.choiceButton}>
<Image source={paperImage} style={styles.choiceImage} />
</TouchableOpacity>
</View> </View>
<View style={styles.square}> <View style={styles.choicesContainer}>
<TouchableOpacity <View style={styles.square}>
onPress={() => play('scissors')} <TouchableOpacity
style={styles.choiceButton}> onPress={() => play('rock')}
<Image source={scissorsImage} style={styles.choiceImage} /> style={styles.choiceButton}>
</TouchableOpacity> <Image source={rockImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('paper')}
style={styles.choiceButton}>
<Image source={paperImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
<View style={styles.square}>
<TouchableOpacity
onPress={() => play('scissors')}
style={styles.choiceButton}>
<Image source={scissorsImage} style={styles.choiceImage} />
</TouchableOpacity>
</View>
</View> </View>
</View> </View>
</View> </ImageBackground>
</ImageBackground> </ScrollView>
); );
}; };
...@@ -308,6 +313,12 @@ const styles = StyleSheet.create({ ...@@ -308,6 +313,12 @@ const styles = StyleSheet.create({
height: 100, height: 100,
borderRadius: 30, borderRadius: 30,
}, },
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
}); });
export default GameLevel5; export default GameLevel5;
src/screens/home/game/game01/GameLevel6.js
View file @ 94ea193e
...@@ -8,6 +8,7 @@ import { ...@@ -8,6 +8,7 @@ import {
StyleSheet, StyleSheet,
Alert, Alert,
ImageBackground, ImageBackground,
ScrollView,
} from 'react-native'; } from 'react-native';
import {IMGS, ROUTES, COLORS} from '../../../../constants'; import {IMGS, ROUTES, COLORS} from '../../../../constants';
import Sound from 'react-native-sound'; import Sound from 'react-native-sound';
...@@ -148,110 +149,114 @@ const GameLevel6 = () => { ...@@ -148,110 +149,114 @@ const GameLevel6 = () => {
}; };
return ( return (
<ImageBackground <ScrollView
source={IMGS.game_img_15} style={styles.scrollContainer}
style={styles.backgroundImage} contentContainerStyle={styles.contentContainer}>
resizeMode="cover"> <ImageBackground
<View style={{marginTop: 10}}> source={IMGS.game_img_15}
<TouchableOpacity style={styles.backgroundImage}
style={{ resizeMode="cover">
backgroundColor: COLORS.white, <View style={{marginTop: 10}}>
borderColor: COLORS.white, <TouchableOpacity
height: 60, style={{
// marginBottom: 2, backgroundColor: COLORS.white,
justifyContent: 'center', borderColor: COLORS.white,
alignItems: 'center', height: 60,
borderRadius: 14, // marginBottom: 2,
width: 50, justifyContent: 'center',
}} alignItems: 'center',
onPress={toggleMute}> borderRadius: 14,
<Text width: 50,
medium }}
center onPress={toggleMute}>
style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}> <Text
{isMuted ? '🔇' : '🔊'} medium
</Text> center
</TouchableOpacity> style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
</View> {isMuted ? '🔇' : '🔊'}
<View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}> </Text>
{/* <Text style={styles.headerText}>Rock Paper Scissors</Text> */} </TouchableOpacity>
<View style={styles.resultContainer}> </View>
<View style={styles.rowContainer}> <View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}>
<View style={styles.circle}> {/* <Text style={styles.headerText}>Rock Paper Scissors</Text> */}
<Text style={styles.playerText}>Player 01</Text> <View style={styles.resultContainer}>
{computerChoice && ( <View style={styles.rowContainer}>
<Image <View style={styles.circle}>
source={getChoiceImage(computerChoice)} <Text style={styles.playerText}>Player 01</Text>
style={styles.selectImage} {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> </View>
<View style={styles.circle}> <Text style={styles.resultText}>VS</Text>
<Text style={styles.playerText}>Player 02</Text> <View style={styles.rowContainer}>
{playerChoice && ( <View style={styles.circle}>
<Image <Text style={styles.playerText}>Player 03</Text>
source={getChoiceImage(computerChoice2)} {playerChoice && (
style={styles.selectImage} <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> </View>
<Text style={styles.resultText}>Result: {result}</Text>
<Text style={styles.pointsText}>Points: {points}</Text>
</View> </View>
<Text style={styles.resultText}>VS</Text> <View style={styles.choicesContainer}>
<View style={styles.rowContainer}> <View style={styles.square}>
<View style={styles.circle}> <TouchableOpacity
<Text style={styles.playerText}>Player 03</Text> onPress={() => play('babyImage')}
{playerChoice && ( style={styles.choiceButton}>
<Image <Image source={babyImage} style={styles.choiceImage} />
source={getChoiceImage(computerChoice3)} </TouchableOpacity>
style={styles.selectImage}
/>
)}
</View> </View>
<View style={styles.circle}> <View style={styles.square}>
<Text style={styles.playerText}>You</Text> <TouchableOpacity
{playerChoice && ( onPress={() => play('cart')}
<Image style={styles.choiceButton}>
source={getChoiceImage(playerChoice)} <Image source={cartImage} style={styles.choiceImage} />
style={styles.selectImage} </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>
<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> </View>
</View> </ImageBackground>
</ImageBackground> </ScrollView>
); );
}; };
...@@ -359,6 +364,12 @@ const styles = StyleSheet.create({ ...@@ -359,6 +364,12 @@ const styles = StyleSheet.create({
shadowRadius: 2, shadowRadius: 2,
elevation: 5, elevation: 5,
}, },
scrollContainer: {
flexGrow: 1,
},
contentContainer: {
paddingBottom: 40, // Adds padding at the bottom
},
}); });
export default GameLevel6; export default GameLevel6;
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