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