Lucie Bedouret
3 years ago
parent
f507c9061f
commit
bf070e09bf
@ -0,0 +1,43 @@
|
||||
import { FC, ReactNode } from "react"
|
||||
import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
|
||||
import React from "react"
|
||||
import { Skin } from "../core/skin"
|
||||
import { trace } from "console"
|
||||
|
||||
export const ElementAffichage :
|
||||
FC<{element: any, styleImage: ImageStyle, styleTitle : TextStyle,nav: any}> =
|
||||
({element, styleImage, styleTitle, nav}) =>
|
||||
{
|
||||
if (element instanceof Skin)
|
||||
{
|
||||
return(
|
||||
<View>
|
||||
<Pressable onPress={() => Alert.alert("Achat du skin")}>
|
||||
<Image
|
||||
style={styleImage}
|
||||
source={element.getSkinSource()}
|
||||
/>
|
||||
<Text style={styleTitle}>{element.getSkinName()}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return(
|
||||
<View>
|
||||
<Text>Type invalide pour ce composant</Text>
|
||||
</View>
|
||||
)
|
||||
/*else if(element.type()==Game)
|
||||
{
|
||||
return (
|
||||
<View>
|
||||
<Pressable onPress={() => Alert.alert("Lancement du jeu")}>
|
||||
<Image
|
||||
style={style}
|
||||
source={element.getImageSource()}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
}*/
|
||||
}
|
||||
@ -0,0 +1,163 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||
import React from 'react';
|
||||
import { Skin } from '../core/skin';
|
||||
import { TopBar } from '../components/TopBar';
|
||||
import { BotBar } from '../components/BotBar';
|
||||
import { ElementAffichage } from '../components/Element';
|
||||
|
||||
const avatar = require('../../assets/Icons/BobClassic.png');
|
||||
const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
|
||||
const engrenage = require('../../assets/Icons/UnSelected/Cogs.png');
|
||||
const gamepad = require('../../assets/Icons/Selected/SGamepad.png');
|
||||
const message = require('../../assets/Icons/UnSelected/Chat.png');
|
||||
const store = require('../../assets/Icons/UnSelected/Store.png');
|
||||
|
||||
function GameChoice(props: { navigation: any; }) {
|
||||
const { navigation } = props
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<TopBar
|
||||
skin={skinTest}
|
||||
styleAvatar={styles.avatar}
|
||||
title="JOUONS !"
|
||||
rightIcon={engrenage}
|
||||
styleIcon={styles.engrenage}
|
||||
nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}
|
||||
/>
|
||||
<View style={styles.body}>
|
||||
<ElementAffichage
|
||||
element={skinTest}
|
||||
styleImage={styles.imageSkin}
|
||||
styleTitle={styles.nomSkin}
|
||||
nav={navigation}
|
||||
/>
|
||||
</View>
|
||||
<BotBar
|
||||
messages={message}
|
||||
games={gamepad}
|
||||
shop={store}
|
||||
style={styles.iconFooter}
|
||||
styleStore={styles.iconStore}
|
||||
nav={navigation}
|
||||
styleBar={styles.footer}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Button(props: { onPress: any; title?: any | undefined; }) {
|
||||
const { onPress, title = 'Save' } = props;
|
||||
return (
|
||||
<Pressable style={styles.button} onPress={onPress}>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: {
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
width: '70%',
|
||||
},
|
||||
|
||||
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,
|
||||
},
|
||||
|
||||
footer: {
|
||||
flex: 0.15,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
iconFooter: {
|
||||
marginBottom: 25,
|
||||
marginTop: 10,
|
||||
width: 65,
|
||||
height: 50,
|
||||
},
|
||||
iconStore: {
|
||||
marginBottom: 25,
|
||||
marginTop: 10,
|
||||
marginLeft: 7,
|
||||
marginRight: 8,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
imageSkin : {
|
||||
borderRadius: 15,
|
||||
marginTop: 15,
|
||||
marginRight: 15,
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
nomSkin :{
|
||||
textAlign: 'center',
|
||||
fontSize: 15,
|
||||
fontFamily: 'Helvetica',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default GameChoice
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue