After Width: | Height: | Size: 743 B |
After Width: | Height: | Size: 782 B |
After Width: | Height: | Size: 758 B |
After Width: | Height: | Size: 787 B |
After Width: | Height: | Size: 781 B |
After Width: | Height: | Size: 769 B |
After Width: | Height: | Size: 835 B |
After Width: | Height: | Size: 739 B |
After Width: | Height: | Size: 533 B |
After Width: | Height: | Size: 865 B |
After Width: | Height: | Size: 693 B |
After Width: | Height: | Size: 409 B |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 257 KiB |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,52 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
import { NavigationContainer } from '@react-navigation/native'
|
||||||
|
import { createStackNavigator } from '@react-navigation/stack'
|
||||||
|
|
||||||
|
|
||||||
|
import Home from '../screens/Home'
|
||||||
|
import Store from '../screens/Store'
|
||||||
|
|
||||||
|
|
||||||
|
// import Detail from '../screens/Detail'
|
||||||
|
// import Settings from '../screens/Settings'
|
||||||
|
// import Profile from '../screens/Profile'
|
||||||
|
|
||||||
|
const Stack = createStackNavigator()
|
||||||
|
|
||||||
|
|
||||||
|
function MainStackNavigator() {
|
||||||
|
return (
|
||||||
|
<NavigationContainer>
|
||||||
|
<Stack.Navigator
|
||||||
|
|
||||||
|
initialRouteName='Home'
|
||||||
|
|
||||||
|
screenOptions={{headerShown: false,}}
|
||||||
|
>
|
||||||
|
|
||||||
|
<Stack.Screen
|
||||||
|
name='Home'
|
||||||
|
component={Home}
|
||||||
|
/>
|
||||||
|
<Stack.Screen
|
||||||
|
name='Store'
|
||||||
|
component={Store}
|
||||||
|
/>
|
||||||
|
{/* <Stack.Screen
|
||||||
|
name='Detail'
|
||||||
|
component={Detail}
|
||||||
|
options={({ route }) => ({
|
||||||
|
title: route.params.item.name
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<Stack.Screen
|
||||||
|
name='Settings'
|
||||||
|
component={Settings}
|
||||||
|
options={{ title: 'Settings' }}
|
||||||
|
/> */}
|
||||||
|
</Stack.Navigator>
|
||||||
|
</NavigationContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainStackNavigator
|
@ -0,0 +1,160 @@
|
|||||||
|
import { StatusBar } from 'expo-status-bar'
|
||||||
|
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||||
|
|
||||||
|
const avatar = require('../../assets/Icons/BobClassic.png');
|
||||||
|
const engrenage = require('../../assets/Icons/Engrenage.png');
|
||||||
|
const gamepad = require('../../assets/Icons/Gamepad.png');
|
||||||
|
const message = require('../../assets/Icons/Messages.png');
|
||||||
|
const store = require('../../assets/Icons/Store.png');
|
||||||
|
|
||||||
|
function Home(props) {
|
||||||
|
const { navigation } = props
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Pressable onPress={() => Alert.alert('Profil Joueur')}>
|
||||||
|
<Image
|
||||||
|
style={styles.avatar}
|
||||||
|
source={avatar}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
<Text style={styles.titre}>BOB PARTY</Text>
|
||||||
|
<Pressable onPress={() => Alert.alert('Paramètres')}>
|
||||||
|
<Image
|
||||||
|
style={styles.engrenage}
|
||||||
|
source={engrenage}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
<View style={styles.buttons}>
|
||||||
|
<Button
|
||||||
|
title='Jouer Seul'
|
||||||
|
onPress={() => Alert.alert('On Joue seul')}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
title='Défier mes amis'
|
||||||
|
onPress={() => Alert.alert('On Joue avec les potos')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Pressable onPress={() => Alert.alert('Messagerie')}>
|
||||||
|
<Image
|
||||||
|
style={styles.iconFooter}
|
||||||
|
source={message}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
<Pressable onPress={() => Alert.alert('Menu des jeux')}>
|
||||||
|
<Image
|
||||||
|
style={styles.iconFooter}
|
||||||
|
source={gamepad}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
<Pressable onPress={() => navigation.navigate('Store')}>
|
||||||
|
<Image
|
||||||
|
style={styles.iconStore}
|
||||||
|
source={store}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function Button(props) {
|
||||||
|
const { onPress, title = 'Save' } = props;
|
||||||
|
return (
|
||||||
|
<Pressable style={styles.button} onPress={onPress}>
|
||||||
|
<Text style={styles.text}>{title}</Text>
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#45444E',
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
height: '30%',
|
||||||
|
width: '100%',
|
||||||
|
marginTop: '10%',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 32,
|
||||||
|
borderRadius: 10,
|
||||||
|
elevation: 3,
|
||||||
|
backgroundColor: '#0085FF',
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 16,
|
||||||
|
lineHeight: 21,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
letterSpacing: 0.25,
|
||||||
|
color: 'white',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flex : 0.15,
|
||||||
|
width: '100%',
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: '#2D2C33',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-around',
|
||||||
|
},
|
||||||
|
titre: {
|
||||||
|
flex: 0.7,
|
||||||
|
flexDirection: 'column',
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: 30,
|
||||||
|
fontFamily: 'Helvetica',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
letterSpacing: 0.25,
|
||||||
|
color: 'white',
|
||||||
|
},
|
||||||
|
engrenage: {
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
buttons: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: '70%',
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
flex: 0.15,
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: '#2D2C33',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'space-evenly',
|
||||||
|
},
|
||||||
|
iconFooter: {
|
||||||
|
marginBot: 25,
|
||||||
|
marginTop: 10,
|
||||||
|
width: 65,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
iconStore: {
|
||||||
|
marginBot: 25,
|
||||||
|
marginTop: 10,
|
||||||
|
marginLeft: 7,
|
||||||
|
marginRight: 8,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Home
|
@ -0,0 +1,156 @@
|
|||||||
|
import { StatusBar } from 'expo-status-bar'
|
||||||
|
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||||
|
|
||||||
|
const avatar = require('../../assets/Icons/BobClassic.png');
|
||||||
|
const engrenage = require('../../assets/Icons/Engrenage.png');
|
||||||
|
const gamepad = require('../../assets/Icons/Gamepad.png');
|
||||||
|
const message = require('../../assets/Icons/Messages.png');
|
||||||
|
const store = require('../../assets/Icons/Store.png');
|
||||||
|
|
||||||
|
function Store(props) {
|
||||||
|
const { navigation } = props
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Pressable onPress={() => Alert.alert('Profil Joueur')}>
|
||||||
|
<Image
|
||||||
|
style={styles.avatar}
|
||||||
|
source={avatar}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
<Text style={styles.titre}>BOB PARTY</Text>
|
||||||
|
<Pressable onPress={() => Alert.alert('Paramètres')}>
|
||||||
|
<Image
|
||||||
|
style={styles.engrenage}
|
||||||
|
source={engrenage}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
<View style={styles.buttons}>
|
||||||
|
<Button
|
||||||
|
title='LE SHOP'
|
||||||
|
onPress={() => Alert.alert('On Joue seul')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Pressable onPress={() => Alert.alert('Messagerie')}>
|
||||||
|
<Image
|
||||||
|
style={styles.iconFooter}
|
||||||
|
source={message}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
<Pressable onPress={() => navigation.navigate('Home')}>
|
||||||
|
<Image
|
||||||
|
style={styles.iconFooter}
|
||||||
|
source={gamepad}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
<Pressable onPress={() => Alert.alert('le magasin')}>
|
||||||
|
<Image
|
||||||
|
style={styles.iconStore}
|
||||||
|
source={store}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function Button(props) {
|
||||||
|
const { onPress, title = 'Save' } = props;
|
||||||
|
return (
|
||||||
|
<Pressable style={styles.button} onPress={onPress}>
|
||||||
|
<Text style={styles.text}>{title}</Text>
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#45444E',
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
height: '30%',
|
||||||
|
width: '100%',
|
||||||
|
marginTop: '10%',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 32,
|
||||||
|
borderRadius: 10,
|
||||||
|
elevation: 3,
|
||||||
|
backgroundColor: '#0085FF',
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 16,
|
||||||
|
lineHeight: 21,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
letterSpacing: 0.25,
|
||||||
|
color: 'white',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flex : 0.15,
|
||||||
|
width: '100%',
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: '#2D2C33',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-around',
|
||||||
|
},
|
||||||
|
titre: {
|
||||||
|
flex: 0.7,
|
||||||
|
flexDirection: 'column',
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: 30,
|
||||||
|
fontFamily: 'Helvetica',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
letterSpacing: 0.25,
|
||||||
|
color: 'white',
|
||||||
|
},
|
||||||
|
engrenage: {
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
buttons: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: '70%',
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
flex: 0.15,
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: '#2D2C33',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'space-evenly',
|
||||||
|
},
|
||||||
|
iconFooter: {
|
||||||
|
marginBot: 25,
|
||||||
|
marginTop: 10,
|
||||||
|
width: 65,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
iconStore: {
|
||||||
|
marginBot: 25,
|
||||||
|
marginTop: 10,
|
||||||
|
marginLeft: 7,
|
||||||
|
marginRight: 8,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Store
|