ADD composant jeu/skin et de la page (non terminée) de GameChoice

bob_party/src/components/Element.tsx

@@ -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> 
+            )
+        }*/
+}

bob_party/src/components/TopBar.tsx

@@ -7,7 +7,9 @@ import MainTabNavigator from "../navigation/AppNavigator"
 import { BottomTabNavigationProp } from "@react-navigation/bottom-tabs"
 
 
-export const TopBar : FC<{skin: Skin, styleAvatar: ImageStyle, title: String, rightIcon: ImageSourcePropType, styleIcon: ImageStyle,nav: any, styleTitle: TextStyle, styleHeader : any}> = ({skin, styleAvatar, title, rightIcon,styleIcon, nav, styleTitle, styleHeader}) => 
+export const TopBar : 
+FC<{skin: Skin, styleAvatar: ImageStyle, title: String, rightIcon: ImageSourcePropType, styleIcon: ImageStyle,nav: any, styleTitle: TextStyle, styleHeader : any}> = 
+({skin, styleAvatar, title, rightIcon, styleIcon, nav, styleTitle, styleHeader}) => 
 {
     return (
     <View style={styleHeader}>

bob_party/src/navigation/AppNavigator.tsx

@@ -8,6 +8,7 @@ import Store from '../screens/Store'
 import Chat from '../screens/Chat'
 import Settings from '../screens/Settings'
 import Profile from '../screens/Profile'
+import GameChoice from '../screens/GameChoice'
 
 
 import Test from '../screens/Test'
@@ -20,6 +21,7 @@ function HomeStackScreen() {
     <HomeStack.Navigator screenOptions={{headerShown: false}}>
       <HomeStack.Screen name="Home" component={Home} />
       <HomeStack.Screen name="Settings" component={Settings} />
+      <HomeStack.Screen name='GameChoice' component={GameChoice} />
     </HomeStack.Navigator>
   );
 }

bob_party/src/screens/Chat.tsx

@@ -19,7 +19,7 @@ function Chat(props: { navigation: any; }) {
       <TopBar
           skin={skinTest} 
           styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
+          title="CHAT" 
           rightIcon={engrenage} 
           styleIcon={styles.engrenage} 
           nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}

bob_party/src/screens/GameChoice.tsx

@@ -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

bob_party/src/screens/Home.tsx

@@ -39,11 +39,11 @@ function Home(props: { navigation: any; }) {
       <View style={styles.body}>
         <Button 
         title='Jouer Seul'
-        onPress={() => Alert.alert('On Joue seul')}
+        onPress={() => navigation.navigate('GameChoice')}
         />
         <Button 
         title='Défier mes amis'
-        onPress={() => Alert.alert('On Joue avec les potos')}
+        onPress={() => navigation.navigate('GameChoice')}
         />
       </View>
       <BotBar 

bob_party/src/screens/Profile.tsx

@@ -21,7 +21,7 @@ function Profile(props: { navigation: any; }) {
         <TopBar
           skin={skinTest} 
           styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
+          title="NomUser(à changer)" 
           rightIcon={engrenage} 
           styleIcon={styles.engrenage} 
           nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}

bob_party/src/screens/Store.tsx

@@ -6,6 +6,7 @@ import { User } from '../core/user';
 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');
@@ -22,13 +23,18 @@ function Store(props: { navigation: any; }) {
         <TopBar
           skin={skinTest} 
           styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
+          title="BOUTIQUE" 
           rightIcon={engrenage} 
           styleIcon={styles.engrenage} 
           nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}
         />
       <View style={styles.body}>
-        <Text style={styles.text}>couille</Text>
+        <ElementAffichage
+          element={skinTest}
+          styleImage={styles.imageSkin}
+          styleTitle={styles.nomSkin}
+          nav={navigation}
+        />
       </View>
       <BotBar 
           messages={message}
@@ -139,6 +145,21 @@ const styles = StyleSheet.create({
     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',
+  },
 
 });