avancées tests

bob_party/package.json

@@ -14,13 +14,13 @@
     "@react-navigation/stack": "^6.3.2",
     "expo": "^46.0.15",
     "expo-status-bar": "~1.4.0",
-    "jest": "^29.1.2",
+    "jest": "^26.6.3",
     "node": "^18.10.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "^0.69.6",
-    "react-native-gesture-handler": "^2.7.1",
-    "react-native-safe-area-context": "^4.4.1",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-safe-area-context": "4.3.1",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {

bob_party/src/components/BotBar.tsx

@@ -1,30 +1,87 @@
 import { FC, ReactNode } from "react"
-import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import { Pressable, Image, View} from "react-native"
 import React from "react"
 
+/*
+    Importing the correct stylesheet
+*/
+import styles from './style/BotBar.style';
+
+/* 
+    Images that are required to create a bottom bar
+*/
+
+/*
+    Icons when the corresponding screen is not displayed (white ones)
+*/
+const gamepad = require('../../assets/Icons/UnSelected/Gamepad.png');
+const message = require('../../assets/Icons/UnSelected/Chat.png');
+const store = require('../../assets/Icons/UnSelected/Store.png');
+
+/*
+    Icons when the corresponding screen is displayed (blue ones)
+*/
+const sgamepad = require('../../assets/Icons/Selected/SGamepad.png');
+const smessage = require('../../assets/Icons/Selected/SChat.png');
+const sstore = require('../../assets/Icons/Selected/SStore.png');
+
 
 export const BotBar : 
-FC<{messages:ImageSourcePropType, games: ImageSourcePropType, shop: ImageSourcePropType, style: ImageStyle, styleStore: ImageStyle, nav: any, styleBar : any}> = 
-({messages, games, shop,style, styleStore, nav,styleBar}) => 
+/* Parameters :
+   * nav : tool needed to allow the navigation between the screens
+   * state : optional parameter that indicates from which screen the component has been called
+        (the string must be the name of the screen)
+*/
+FC<{nav: any, state?: String}> = 
+({nav, state}) => 
 {
+    /* 
+        By default, all the images are the white ones
+    */
+    var imgLeft=message, imgMid=gamepad, imgRight=store
+   
+    /*
+        For each screen corresponding to a screen of the bottom bar, 
+        we need to change one of the icons to the corresponding blue one
+            (for example, when the chat screen is displayed, 
+             the icon of the messages must switch to the blue one)
+    */
+    switch (state) {
+        case 'Home':
+            imgMid = sgamepad
+            break;
+        case 'Chat':
+            imgLeft = smessage
+            break;
+        case 'Store':
+            imgRight = sstore
+            break;
+        default:
+            break;
+    }
+
+        /*
+        Once the icons are correctly attributed,
+        the function can display the component
+        */
     return (
-    <View style={styleBar}>
+    <View style={styles.footer}>
             <Pressable onPress={() => nav.navigate('ChatTab')}>
                 <Image
-                    style={style}
-                    source={messages}
+                    style={styles.icon}
+                    source={imgLeft}
                 />
             </Pressable>
-            <Pressable onPress={()=> nav.navigate('HomeTab')}>
+            <Pressable onPress={()=> {nav.navigate('HomeTab', {screen: 'Home'})}}>
                 <Image
-                    style={style}
-                    source={games}
+                    style={styles.icon}
+                    source={imgMid}
                 />
             </Pressable>
             <Pressable onPress={() => nav.navigate('StoreTab')}>
                 <Image
-                    style={styleStore}
-                    source={shop}
+                    style={styles.icon}
+                    source={imgRight}
                 />
             </Pressable>
     </View>

bob_party/src/components/ButtonChangeSkin.tsx

@@ -0,0 +1,16 @@
+import { FC} from "react"
+import { Pressable, Text} from "react-native"
+import React from "react"
+import styles from "./style/ButtonChangeSkin.style"
+
+export const ButtonChangeSkin:
+FC<{ onPress: any;}>
+=
+({onPress}) =>
+     {
+    return (
+      <Pressable style={styles.button} onPress={onPress}>
+        <Text style={styles.text}>Changer de skin</Text>
+      </Pressable>
+    );
+  }

bob_party/src/components/ButtonGameTypeChoice.tsx

@@ -0,0 +1,23 @@
+import { FC} from "react"
+import { Pressable, Text} from "react-native"
+import React from "react"
+/*
+  Importing the corresponding stylesheet
+*/
+import styles from "./style/ButtonGameTypeChoice.style"
+
+export const ButtonGameTypeChoice:
+/* Parameters:
+  * onPress : function that must be called when the button has been clicked
+  * title : optional text that would be in the button
+*/
+FC<{ onPress: any; title?: any | undefined; }>
+=
+({onPress,title}) =>
+     {
+    return (
+      <Pressable style={styles.button} onPress={onPress}>
+        <Text style={styles.text}>{title}</Text>
+      </Pressable>
+    );
+  }

bob_party/src/components/ConversationComponent.tsx

@@ -0,0 +1,42 @@
+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 { Conversation } from "../core/conversation"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from "./style/ConverstationComponent.style"
+import { SkinComponent } from "./Skin"
+
+export const ConversationComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+    * state : Indicates from wich screen the component has been called
+*/ 
+FC<{conv: Conversation, state: String}> = 
+({conv, state}) => 
+{
+    /* The display of this component depends of the screen from where it has been called:
+        * From the TopBar (icon) : Small image in a circle
+        * From the shop (shop) : Image + Name + Price, Pressable => Buy the skin
+        * From the profile (profile) : Name + Image, Pressable => Change the skin
+    */
+    switch (state) {
+        case 'Preview':
+            return(
+                <View style={{flexDirection: 'row', height: 70, borderBottomWidth: 2,borderBottomColor: '#2D2C33', paddingLeft: '5%',}}>
+                    <View style={{alignSelf: 'center'}}>
+                        <SkinComponent skin={conv.getTabUser()[1].getCurrentSkin()} state='icon'/>
+                    </View>
+                    <View style={{marginLeft: '5%', justifyContent: 'space-evenly'}}>
+                        <Text style={styles.textNom}>{conv.getTabUser()[1].getUsername()}</Text>
+                        <Text style={styles.textMess}>{conv.getLastMessage()}</Text>
+                    </View>
+                </View>
+            )
+        default:
+            break;
+    }
+}

bob_party/src/components/GameComponent.tsx

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import React from "react"
+import { trace } from "console"
+import { Game } from "../core/Game"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from './style/Game.style';
+
+export const GameComponent : 
+/*
+    * game : Game that must be displayed
+    * nav : tool needed to allow the navigation between the screens
+*/
+FC<{game: Game, nav: any}> = 
+({game, nav}) => 
+{      
+    return (
+        <View>
+            <Pressable onPress={() => Alert.alert("Lancement du jeu")}>
+                <Image
+                    style={styles.image}
+                    source={game.getImageSource()}
+                />
+                <Text style={styles.name}>{game.getName()}</Text>
+            </Pressable>
+        </View> 
+    )       
+}

bob_party/src/components/ScreenIndicator.tsx

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import React from "react"
+import styles from './style/ScreenIndicator.style'
+
+export const ScreenIndicator: FC<{title: String}> = ({title}) => 
+{
+    return(
+        <View style={styles.textTopView}>
+            <Text style={styles.textTop}>{title}</Text>
+        </View>
+    )
+}

bob_party/src/components/Skin.tsx

@@ -0,0 +1,66 @@
+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"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from "./style/Skin.style"
+
+export const SkinComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+    * state : Indicates from wich screen the component has been called
+*/ 
+FC<{skin: Skin, state: String}> = 
+({skin, state}) => 
+{
+    /* The display of this component depends of the screen from where it has been called:
+        * From the TopBar (icon) : Small image in a circle
+        * From the shop (shop) : Image + Name + Price, Pressable => Buy the skin
+        * From the profile (profile) : Name + Image, Pressable => Change the skin
+    */
+    switch (state) {
+        case 'icon':
+            return (
+                <View>
+                    <Image source={ skin.getSkinSource()} style={styles.icon}/>
+                </View>
+            )
+        
+        case 'shop':
+            return(
+                <Pressable onPress={() => Alert.alert("Achat du skin")} style={styles.imageWrapper}>
+                    <Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
+                    <Image
+                        style={styles.imageSkin}
+                        source={skin.getSkinSource()}
+                    />
+                    <Text style={styles.nomSkin}>100€</Text>
+                </Pressable>
+            )
+        case 'liste':
+            return(
+                <Pressable onPress={() => Alert.alert("Changement du skin")} style={styles.imageWrapper}>
+                    <Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
+                    <Image
+                        style={styles.imageSkin}
+                        source={skin.getSkinSource()}
+                    />
+                </Pressable>
+            )
+        case 'profile':
+            return(
+                <Pressable onPress={() => Alert.alert("Achat du skin")} style={styles.imageWrapperProfil}>
+                    <Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
+                    <Image
+                        style={styles.imageSkin}
+                        source={skin.getSkinSource()}
+                    />
+                </Pressable>
+            )
+        default:
+            break;
+    }
+}

bob_party/src/components/TopBar.tsx

@@ -1,23 +1,59 @@
 import { FC, ReactNode } from "react"
-import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import { Pressable, Image, Text, View} from "react-native"
 import { Skin } from "../core/Skin"
 import React from "react"
-import { SkinComponent } from "./skinAvatar"
-import MainTabNavigator from "../navigation/AppNavigator"
-import { BottomTabNavigationProp } from "@react-navigation/bottom-tabs"
+import { SkinComponent } from "./Skin"
 
+/*
+    Import the correct stylesheet
+*/
+import styles from './style/TopBar.style';
 
-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}) => 
+/* 
+    Images required
+*/
+const engrenage = require('../../assets/Icons/UnSelected/Cogs.png');
+const cross = require('../../assets/Icons/UnSelected/Cross.png');
+const msc = require('../../assets/Icons/FondGris.png');
+
+export const TopBar : 
+/* Parameters: 
+    * skin : optional skin to display
+    * nav : tool needed to allow the navigation between the screens
+    * state :  optional parameter that indicates from which screen the component has been called
+        (the string must be the name of the screen)
+*/
+FC<{skin?: Skin, nav: any, state?: string}> = 
+({skin, nav, state}) => 
 {
-    return (
-    <View style={styleHeader}>
-        <Pressable onPress={() => nav.navigate('ProfileTab')}>
-                <SkinComponent skin={skin} children={styleAvatar} />
-            </Pressable>
-            <Text style={styleTitle}>{title}</Text>
-            <Pressable onPress={() => nav.navigate('Settings')}>
-                <Image source={rightIcon} style={styleIcon}/>
-            </Pressable>
-    </View>
-    )
+    /* The display of this component depends of the screen from where it has been called:
+        * From the Settings (icon) : Name of the page + cross button
+        * From other : skin + Title + parameters icon
+    */
+    switch (state) {
+        case 'settings':
+            return (
+                <View style={styles.header}>
+                    <Pressable>
+                        <Image source={msc} style={styles.icon}/>
+                    </Pressable>
+                    <Text style={styles.titre}>BOB PARTY</Text>
+                    <Pressable onPress={() => nav.goBack()}>
+                        <Image source={cross} style={styles.icon}/>
+                    </Pressable>
+                </View>
+            )
+        default:
+            return (
+                <View style={styles.header}>
+                    <Pressable onPress={() => nav.navigate('ProfileTab', {screen: 'Profile'})}>
+                            <SkinComponent skin={skin} state='icon' />
+                        </Pressable>
+                        <Text style={styles.titre}>BOB PARTY</Text>
+                        <Pressable onPress={() => nav.navigate('Settings')}>
+                            <Image source={engrenage} style={styles.icon}/>
+                        </Pressable>
+                </View>
+            )
+    }
 }

bob_party/src/components/skinAvatar.tsx

@@ -1,12 +0,0 @@
-import { FC, ReactNode } from "react"
-import { Button, Image, ImageStyle, Text, View } from "react-native"
-import { Skin } from "../core/Skin"
-import React from "react"
-
-export const SkinComponent : FC<{skin: Skin, children: ImageStyle}> = ({skin, children}) => {
-    return (
-    <View>
-        <Image source={ skin.getSkinSource()} style={children}/>
-    </View>
-    )
-}

bob_party/src/components/style/BotBar.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+/*
+    Stylesheet for the BotBar component
+*/
+
+export default StyleSheet.create({
+    footer: {
+        flex: 0.15,
+        flexDirection: 'row',
+        backgroundColor: '#2D2C33',
+        width: '100%',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+    },
+    icon: {
+        width: 65,
+        height: 65,
+      },
+});

bob_party/src/components/style/ButtonChangeSkin.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 3,
+        marginTop: 5,
+        marginHorizontal: 10,
+        borderRadius: 10,
+        backgroundColor: '#2D2C33',
+      },
+      text: {
+        fontSize: 16,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+      },
+});

bob_party/src/components/style/ButtonGameTypeChoice.style.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+/*
+    Stylesheet for the ButtonGameTypeChoice component
+*/
+
+export default StyleSheet.create({
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '30%',
+        width: '70%',
+        margin: '5%',
+        borderRadius: 10,
+        elevation: 3,
+        backgroundColor: '#0085FF',
+      },
+      text: {
+        fontSize: 16,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+      },
+});

bob_party/src/components/style/ConverstationComponent.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+    textNom: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    textMess: {
+        fontSize: 15,
+        letterSpacing: 0.25,
+        color: '#D9D9D9',
+    }
+});

bob_party/src/components/style/Game.style.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+
+/*
+    Stylesheet for the GameComponent component
+*/
+
+export default StyleSheet.create(
+{
+    image : {
+        borderRadius: 15,
+        marginTop: 15,
+        marginRight: 15,
+        width: 100,
+        height: 100,
+      },
+      name :{
+        textAlign: 'center',
+        fontSize: 15,
+        fontFamily: 'Helvetica',
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+      },
+})

bob_party/src/components/style/ScreenIndicator.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+    textTop: {
+        textAlign: "center",
+        fontSize: 16,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    textTopView: {
+        backgroundColor: '#0085FF',
+        width: '30%',
+        padding: 5,
+        paddingBottom: 10,
+        alignSelf: 'center',
+        borderBottomRightRadius: 50,
+        borderBottomLeftRadius: 50,
+    }
+});

bob_party/src/components/style/Skin.style.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from "react-native";
+
+/*
+    Stylesheet for the Skin component
+*/
+
+export default StyleSheet.create({
+  icon: {
+      width: 50,
+      height: 50,
+      borderRadius: 50,
+  },
+  imageWrapper: {
+      height: 135,
+      width: '40%',
+      flexDirection: "column",
+      margin: 10,
+  },
+  imageWrapperProfil: {
+    height: 135,
+    flexDirection: "column",
+    margin: 10,
+  },
+  imageSkin : {
+    borderRadius: 15,
+    width: '100%',
+    flex:1
+  },
+  nomSkin :{
+    textAlign: 'center',
+    fontSize: 25,
+    fontFamily: 'Helvetica',
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});

bob_party/src/components/style/TopBar.style.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+
+/*
+    Stylesheet for the TopBar component
+*/
+
+export default StyleSheet.create({
+    header: {
+        flex: 0.15,
+        flexDirection: 'row',
+        backgroundColor: '#2D2C33',
+        width: '100%',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+    },
+    avatar: {
+        borderRadius: 50,
+        width: 50,
+        height: 50,
+    },
+    icon: {
+        width: 50,
+        height: 50,
+    },
+    titre: {
+      flex: 0.7,
+      flexDirection: 'column',
+      textAlign: 'center',
+      fontSize: 30,
+      fontFamily: 'Helvetica',
+      fontWeight: 'bold',
+      letterSpacing: 0.25,
+      color: 'white',
+    },
+});

bob_party/src/constCov.ts

@@ -0,0 +1,25 @@
+import { Message } from "./core/message"
+import { Conversation } from "./core/conversation"
+import tabSkinApp from './constSkin'
+import { User } from "./core/user";
+
+
+let UserActu:User=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[0], tabSkinApp, undefined);
+let UserTest:User=new User("48", "Wesh Wesh", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[1], tabSkinApp, undefined);
+
+let tabMessageTest:Message[]=[
+    new Message("Salut", UserActu, new Date(2022,12,12)),
+    new Message("Wesh", UserTest, new Date(2022,12,13)),
+    new Message("Ca va", UserActu, new Date(2022,12,14)),
+    new Message("Ouais et toi?", UserTest, new Date(2022,12,15)),
+]
+
+let tabUS:User[]=[UserActu, UserTest];
+
+let conv = new Conversation(tabUS, tabMessageTest, "le super nom");
+
+let tabConv:Conversation[]=[conv];
+
+export default tabConv;
+
+

bob_party/src/constSkin.ts

@@ -0,0 +1,14 @@
+import { Skin } from "./core/skin";
+
+let tabSkinApp:Skin[]=[
+    new Skin("S0001", "Bob",require('bob_party/assets/BobsSkins/BobClassic.png'), 0),
+    new Skin("S0002", "Bob Blue",require('bob_party/assets/BobsSkins/BobBlue.png'), 100),
+    new Skin("S0003", "Bob BW",require('bob_party/assets/BobsSkins/BobBW.png'), 100),
+    new Skin("S0004", "Bob Green",require('bob_party/assets/BobsSkins/BobGreen.png'), 100),
+    new Skin("S0005", "Bob P&T",require('bob_party/assets/BobsSkins/BobPinkTurquoise.png'), 100),
+    new Skin("S0006", "Bob Red",require('bob_party/assets/BobsSkins/BobRed.png'), 100),
+    new Skin("S0007", "Bob Cute",require('bob_party/assets/BobsSkins/BobYellowGreenBlueHeart.png'), 100),
+]
+
+
+export default tabSkinApp;

bob_party/src/core/Game.ts

@@ -1,35 +1,45 @@
-export interface Game{
-    private Name:String;
-    private ImageSource:String;
-    private GameSource:String;
+import { randomBytes } from "crypto";
+import { ImageSourcePropType } from "react-native";
 
-    constructor(name:String, imageSource:String, gameSource:String){
+export class Game{
+    private Name:string;
+    private ImageSource:ImageSourcePropType;
+    private GameSource:string ;
+
+    /* Constructor of the class */
+    constructor (name:string, imageSource:ImageSourcePropType, gameSource:string){
         this.Name=name;
-        this.ImageSource=imageSource
+        this.ImageSource=imageSource;
         this.GameSource=gameSource;
     }
 
+    /* Brief : Function getting the name of a game */
     getName(){
         return this.Name;
     }
 
-    setName(name:String){
+    /* Brief : Function setting the name of a game */
+    setName(name:string){
         this.Name=name;
     }
 
-    getImageSource(imageSource:String){
+    /* Brief : Function getting the image of a game */
+    getImageSource(){
         return this.ImageSource;
     }
 
-    setImageSource(imageSource:String){
+    /* Brief : Function setting the image of a game */
+    setImageSource(imageSource:ImageSourcePropType){
         this.ImageSource=imageSource;
     }
 
+    /* Brief : Function getting the source of a game */
     getGameSource(){
         return this.GameSource;
     }
 
-    setGameSource(gameSource:String){
+    /* Brief : Function getting the source of a game */
+    setGameSource(gameSource:string){
         this.GameSource=gameSource;
     }
 }

bob_party/src/core/conversation.ts

@@ -3,29 +3,62 @@ import { User } from "./user";
 
 
 export class Conversation{
-    private TabUser?: User[];
-    private TabMessage?: Message[];
+    private TabUser: User[];
+    private TabMessage: Message[];
+    private Name?: string;
     
-    constructor(tabUser: User[], tabMessage:Message[]){
+    /* Constructor of the class */
+    constructor(tabUser: User[], tabMessage:Message[], name?:string){
         this.TabUser=[...tabUser];
         this.TabMessage=[...tabMessage];
+        this.Name=name;
     }
 
+    /* Brief : function returning the messages of a conversation */
     getTabMessage(){
+        this.sortMessageDesc();
         return this.TabMessage;
     }
 
+    /* Brief : function returning the users of a conversation */
     getTabUser(){
         return this.TabUser;
     }
 
+    /* Brief : function adding an user to a conversation */
     ajouterUser(us:User){
         this.TabUser?.push(us);
     }
 
+    /* Brief : function adding a message to a conversation */
     ajouterMessage(mess:Message){
         this.TabMessage?.push(mess);
+        this.sortMessageDesc();
+    }
+
+    /* Brief : function returning the name to a conversation */
+    getName(){
+        return this.Name;
+    }
+
+    /* Brief : function setting the name to a conversation */
+    setName(name:string){
+        this.Name=name;
+    }
+
+    /* Brief : function returning the last message of a conversation */
+    getLastMessage(){
+        this.sortMessageDesc();
+        return this.TabMessage[0].getMessageContent();
+    }
+
+    /* Brief : function sorting the messages of a conversation to be in the discussion order */
+    sortMessageDesc(){
+        this.TabMessage.sort(
+            (objA, objB) => objB.getMessageDate().getTime() - objA.getMessageDate().getTime(),
+        );
     }
 
 }
 
+

bob_party/src/core/gameSolo.ts

@@ -0,0 +1,27 @@
+import { ImageSourcePropType } from 'react-native';
+import { Game } from './game'
+
+export class GameSolo extends Game{
+    readonly PtsToCoins:Map<number,number>
+
+    constructor(name:string, imageSource:ImageSourcePropType, gameSource:string, ptsToCoins:Map<number,number>){
+        super(name, imageSource, gameSource);
+        this.PtsToCoins=ptsToCoins;
+    }
+
+
+    getSoloMap(){
+        return this.PtsToCoins;
+    }
+
+    CoinsWithPoints(nbPoints:number){
+        let coins;
+        for (let key of this.PtsToCoins.keys()){
+            coins = this.PtsToCoins.get(key);
+            if (nbPoints<key ){
+                return coins;
+            }
+        }
+        return coins;
+    }
+}

bob_party/src/core/message.ts

@@ -6,32 +6,39 @@ export class Message{
     private Sender: User;
     private DateEnvoie: Date;
 
+    /* Constructor of the class */
     constructor(content: string, sender:User, dateEnvoie:Date){
         this.Content=content;
         this.Sender=sender;
         this.DateEnvoie=dateEnvoie;
     }
     
+    /* Brief : Function setting the content of a message */
     setMessageContent(content: string){
         this.Content=content;
     }
 
-    setSMessageSender(sender: User){
+    /* Brief : Function setting the sender of a message */
+    setMessageSender(sender: User){
         this.Sender=sender;
     }
 
-    setSMessageDate(dateEnvoie: Date){
+    /* Brief : Function setting the date of a message */
+    setMessageDate(dateEnvoie: Date){
         this.DateEnvoie=dateEnvoie;
     }
 
+    /* Brief : Function getting the content of a message */
     getMessageContent(){
         return this.Content;
     }
 
+    /* Brief : Function getting the sender of a message */
     getMessageSender(){
         return this.Sender;
     }
 
+    /* Brief : Function getting the date of a message */
     getMessageDate(){
         return this.DateEnvoie;
     }

bob_party/src/core/skin.test.ts

@@ -1,6 +1,9 @@
 import { Skin } from './Skin';
 
+/*
 // Instance
+
+
 let classique = new Skin('Classique', 'wouhou');
 
 
@@ -28,4 +31,4 @@ describe('Skin set tests', () => {
     it('should return The wouhou', () => {
         expect(classique.getSkinSource()).toBe('The wouhou');
     })
-})
+})*/

bob_party/src/core/skin.ts

@@ -1,25 +1,51 @@
+import { ImageSourcePropType } from "react-native";
+
 export class Skin{
+    readonly Id: string;
     private Name: string;
-    private Source: any;
+    private Source: ImageSourcePropType;
+    private Cost:number;
 
-    constructor(name: string, source:any){
+    /* Constructor of the class */
+    constructor(id:string, name: string, source:ImageSourcePropType, Cost:number){
+        this.Id=id;
         this.Name=name;
         this.Source=source;
+        this.Cost=Cost;
     }
     
+    /* Brief : Fuction setting the name of a skin */
     setSkinName(name: string){
         this.Name=name;
     }
 
-    setSkinSource(source: any){
+    /* Brief : Fuction setting the source of the image of a skin */
+    setSkinSource(source: ImageSourcePropType){
         this.Source=source;
     }
 
+    /* Brief : Fuction getting the source of the image of a skin */
     getSkinSource(){
         return this.Source;
     }
 
+    /* Brief : Fuction getting the name of a skin */
     getSkinName(){
         return this.Name;
     }
+
+    /* Brief : Fuction getting the id of a skin */
+    getSkinId(){
+        return this.Id;
+    }
+
+    /* Brief : Fuction getting the cost of a skin */
+    getSkinCost(){
+        return this.Cost;
+    }
+
+    /* Brief : Fuction getting the cost of a skin */
+    setSkinCost(cost:number){
+        this.Cost=cost;
+    }
 }

bob_party/src/core/user.ts

@@ -1,109 +1,161 @@
 import { Skin } from './Skin'
 import { Conversation } from './conversation';
+import { sign } from 'crypto';
 
 export class User{
-    private Id: string;
+    readonly Id: string;
     private Username: string;
     private Nationality: string;
     private Sexe: string;
     private DateOfBirth: Date;
     private CurrentCoins: number;
     private TotalCoins: number;
+    private NbGamePlayed: number;
     private CurrentSkin: Skin;
     private TabSkin: Skin[];
-    private TabConv: Conversation[];
+    private TabConv?: Conversation[];
 
+    /* Consturctor of the class */
     constructor(id: string, username: string, nationality: string, sexe: string, dateOfBirth: Date, currentCoins: number, totalCoins: number,
-                currentSkin: Skin, tabSkin: Skin[], tabConv: Conversation[] ){
+                nbGamePlayed:number, currentSkin: Skin, tabSkin: Skin[], tabConv?: Conversation[] ){
                     this.Id=id;
                     this.Username=username;
                     this.Nationality=nationality;
                     this.Sexe=sexe;
                     this.DateOfBirth=dateOfBirth;
+                    this.NbGamePlayed=nbGamePlayed;
                     this.CurrentCoins=currentCoins;
                     this.TotalCoins=totalCoins;
                     this.CurrentSkin=currentSkin;
                     this.TabSkin=[...tabSkin];
-                    this.TabConv=[...tabConv];
+                    tabConv?.forEach(conv => {
+                        this.TabConv?.push(conv);
+                    });
                 }
 
+    /* Brief : Function getting the name of an user */
     getUsername(){
         return this.Username;
     }
 
+    /* Brief : Function setting the name of an user */
     setUsername(username: string){
         this.Username=username;
     }
 
+    /* Brief : Function getting the id of an user */
     getId(){
         return this.Id;
     }
 
-    setId(id: string){
-        this.Id=id;
-    }
-
+    /* Brief : Function getting the current number of coins of an user */
     getCurrentCoins(){
         return this.CurrentCoins;
     }
     
+    /* Brief : Function setting the current number of coins of an user */
     setCurrentCoins(currentCoins: number){
         this.CurrentCoins=currentCoins;
     }
     
+    /* Brief : Function getting the sex of an user */
     getSexe(){
         return this.Sexe;
     }
     
+    /* Brief : Function getting the sex of an user */
     setSexe(sexe: string){
         this.Sexe=sexe;
     }
 
+    /* Brief : Function getting the date of birth of an user */
     getDateOfBirth(){
         return this.DateOfBirth;
     }
     
+    /* Brief : Function setting the date of birth of an user */
     setDateOfBirth(dateOfBirth: Date){
         this.DateOfBirth=dateOfBirth;
     }
 
+    /* Brief : Function getting the nationality of an user */
     getNationality(){
         return this.Nationality;
     }
     
+    /* Brief : Function setting the nationality of an user */
     setNationality(nationality: string){
         this.Nationality=nationality;
     }
     
+    /* Brief : Function getting the total number of coins of an user */
     getTotalCoins(){
         return this.TotalCoins;
     }
     
+    /* Brief : Function setting the total number of coins of an user */
     setTotalCoins(totalCoins: number){
         this.TotalCoins=totalCoins;
     }
 
+    /* Brief : Function getting the current number of game played by an user */
+
+    getGamePlayed(){
+        return this.NbGamePlayed;
+    }
+    
+    /* Brief : Function setting the current number of game played by an user */
+
+    setGamePlayed(nb: number){
+        this.NbGamePlayed=nb;
+    }
+
+     /* Brief : Function getting the current skin of an user */
+
     getCurrentSkin(){
         return this.CurrentSkin;
     }
     
+    /* Brief : Function setting the current skin of an user */
     setCurrentSkin(newSkin: Skin){
         this.CurrentSkin=newSkin;
     }
     
+    /* Brief : Function getting the skins of an user */
     getTabSkin(){
         return this.TabSkin;
     }
     
+    /* Brief : Function setting the skins of an user */
     setTabSkin(tabSkin: Skin[]){
         this.TabSkin=[...tabSkin];
     }
 
+    /* Brief : Function getting the conversations of an user */
     getTabConv(){
         return this.TabConv;
     }
     
-    setTabConv(tabConv: Conversation[]){
-        this.TabConv=[...tabConv];
+    /* Brief : Function setting the conversations of an user */
+    setTabConv(tabConv?: Conversation[]){
+        tabConv?.forEach(conv => {
+            this.TabConv?.push(conv);
+        });
+    }
+
+
+    changeUserCoins(coin:number){
+        this.CurrentCoins+=coin;
+        if (coin>0){
+            this.TotalCoins+=coin;
+        }
+    }
+
+    changerCurrentSkin(skin:Skin){
+        this.CurrentSkin=skin;
+    }
+
+    ajouterSkin(skin:Skin){
+        this.TabSkin.push(skin);
     }
 }

bob_party/src/navigation/AppNavigator.tsx

@@ -8,6 +8,8 @@ import Store from '../screens/Store'
 import Chat from '../screens/Chat'
 import Settings from '../screens/Settings'
 import Profile from '../screens/Profile'
+import SkinList from '../screens/SkinList'
+import GameChoice from '../screens/GameChoice'
 
 
 import Test from '../screens/Test'
@@ -15,17 +17,23 @@ import Test from '../screens/Test'
 
 const HomeStack = createStackNavigator();
 
+/*
+  Stack of screens for home and game choice
+*/
 function HomeStackScreen() {
   return (
-    <HomeStack.Navigator screenOptions={{headerShown: false}}>
-      <HomeStack.Screen name="Home" component={Home} />
+    <HomeStack.Navigator screenOptions={{ headerShown: false}}>
+      <HomeStack.Screen name="Home" component={Home} options={{animationEnabled: false,}}/>
       <HomeStack.Screen name="Settings" component={Settings} />
+      <HomeStack.Screen name='GameChoice' component={GameChoice} options={{animationEnabled: false,}}/>
     </HomeStack.Navigator>
   );
 }
 
 const StoreStack = createStackNavigator();
-
+/*
+  Stack of screens for the store and the purshase of new skins
+*/
 function StoreStackScreen() {
   return (
     <StoreStack.Navigator screenOptions={{headerShown: false}}>
@@ -36,7 +44,9 @@ function StoreStackScreen() {
 }
 
 const ChatStack = createStackNavigator();
-
+/*
+  Stack of screens for conversations 
+*/
 function ChatStackScreen() {
   return (
     <ChatStack.Navigator screenOptions={{headerShown: false}}>
@@ -47,23 +57,27 @@ function ChatStackScreen() {
 }
 
 const ProfileStack = createStackNavigator();
-
+/*
+  Stack of screens for the profile and the changement of informations
+*/
 function ProfileStackScreen() {
   return (
     <ProfileStack.Navigator screenOptions={{headerShown: false}}>
-      <ProfileStack.Screen name="Profile" component={Profile} />
+      <ProfileStack.Screen name="Profile" component={Profile} options={{animationEnabled: false,}}/>
       <ProfileStack.Screen name="Settings" component={Settings} />
+      <ProfileStack.Screen name="SkinList" component={SkinList} options={{animationEnabled: false,}}/>
     </ProfileStack.Navigator>
   );
 }
 
 const Tab = createBottomTabNavigator()
-
+/*
+  Tab navigator to navigate between the stacks
+*/
 function MainTabNavigator() {
   return (
     <NavigationContainer>
       <Tab.Navigator
-        initialRouteName='Home'
         backBehavior='none'
         screenOptions={{headerShown: false, tabBarStyle: { display: 'none' },}}
         >

bob_party/src/screens/Chat.tsx

@@ -1,142 +1,41 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import { StyleSheet, View, Text} from 'react-native'
 import React from 'react';
+import stylesScreen from './style/screens.style'
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
+import { ScreenIndicator } from '../components/ScreenIndicator';
+import { User } from '../core/user';
+import { FlatList } from 'react-native-gesture-handler';
+import { ConversationComponent } from '../components/ConversationComponent';
 
-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/UnSelected/Gamepad.png');
-const message = require('../../assets/Icons/Selected/SChat.png');
-const store = require('../../assets/Icons/UnSelected/Store.png');
+import tabSkinApp from '../constSkin';
+import tabConv from '../constCov';
+
+
+const UserActu=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12,  tabSkinApp[0], tabSkinApp, tabConv);
 
 function Chat(props: { navigation: any; }) {
     const { navigation } = props
     return (
-    <View style={styles.container}>
+    <View style={stylesScreen.container}>
       <TopBar
-          skin={skinTest} 
-          styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
-          rightIcon={engrenage} 
-          styleIcon={styles.engrenage} 
-          nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}
+          skin={UserActu.getCurrentSkin()}
+          nav={navigation}
           />
-      <View style={styles.body}>
-        <Text style={styles.text}>couille</Text>
+      <View style={stylesScreen.bodyStart}>
+        <FlatList 
+          data={tabConv}
+          renderItem={({item}) => <ConversationComponent conv={item} state='Preview'/>} 
+        />
       </View>
       <BotBar 
-          messages={message}
-          games={gamepad}
-          shop={store}
-          style={styles.iconFooter}
-          styleStore={styles.iconStore}
           nav={navigation}
-          styleBar={styles.footer}
+          state='Chat'
       />
     </View>
   );
 }
 
-
-function Button(props: { onPress: any; title?: "Save" | 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: {
-    marginBot: 25,
-    marginTop: 10,
-    width: 65,
-    height: 50,
-  },
-  iconStore: {
-    marginBot: 25,
-    marginTop: 10,
-    marginLeft: 7,
-    marginRight: 8,
-    width: 50,
-    height: 50,
-  },
-
-});
-
 export default Chat

bob_party/src/screens/GameChoice.tsx

@@ -0,0 +1,155 @@
+import { StatusBar } from 'expo-status-bar'
+import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import React from 'react';
+import { Game } from '../core/Game';
+import { Skin } from '../core/skin';
+import { TopBar } from '../components/TopBar';
+import { BotBar } from '../components/BotBar';
+import { GameComponent } from '../components/GameComponent';
+import { User } from '../core/user';
+import tabSkinApp from '../constSkin';
+import { Conversation } from '../core/conversation';
+let tabConv:Conversation[]=[];
+
+
+const msc = require('../../assets/Icons/FondGris.png');
+
+const UserActu=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[0], tabSkinApp, tabConv);
+const jeuTest= new Game("SNAKE", require('../../assets/Icons/UnSelected/Gamepad.png'),"ouin");
+function GameChoice(props: { navigation: any; }) {
+    const { navigation } = props
+    return (
+    <View style={styles.container}>
+      <TopBar
+        skin={UserActu.getCurrentSkin()}
+        nav={navigation}
+      />
+      <View style={styles.body}>
+        <GameComponent
+          game={jeuTest}
+          nav={navigation}
+        />
+      </View>
+      <BotBar 
+          nav={navigation}
+          state='Home'
+      />
+    </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

@@ -1,161 +1,47 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
-import React, { Children } from 'react';
-import { SkinComponent } from '../components/skinAvatar';
+import { StyleSheet, View, ImageSourcePropType} from 'react-native'
+import React from 'react';
+import stylesScreen from './style/screens.style'
 import { User } from '../core/user';
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { Conversation } from '../core/conversation';
+import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice';
+import tabSkinApp from '../constSkin';
+import { GameSolo } from '../core/gameSolo';
 
 
 
-const avatar = require('../../assets/Icons/BobClassic.png');
-let tabSkin:Skin[];
-const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
-const skinTest2= new Skin("wesh",require('../../assets/BobsSkins/BobBlue.png'));
-tabSkin=[skinTest];
-tabSkin.push(skinTest2);
+//const test= new GameSolo("test", require('bob_party/assets/ImagesJeux/BatailleNavale.jpeg'), "test", );
 let tabConv:Conversation[]=[];
-const UserActu=new User("14", "leBg", "ouioui", "grand", "la", 12222, 123324, skinTest, tabSkin, tabConv);
-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');
-
+const UserActu=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12,  tabSkinApp[0], tabSkinApp, tabConv);
 
 function Home(props: { navigation: any; }) {
     const { navigation } = props
     return (
-    <View style={styles.container}>
-        <TopBar
-          skin={skinTest} 
-          styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
-          rightIcon={engrenage} 
-          styleIcon={styles.engrenage} 
-          nav={navigation} 
-          styleTitle={styles.titre} 
-          styleHeader={styles.header}
-        />
-      <View style={styles.body}>
-        <Button 
+    <View style={stylesScreen.container}>
+      <TopBar
+        skin={UserActu.getCurrentSkin()} 
+        nav={navigation}
+        state= 'Home'
+      />
+      <View style={stylesScreen.bodyCenter}>
+        <ButtonGameTypeChoice
         title='Jouer Seul'
-        onPress={() => Alert.alert('On Joue seul')}
+        onPress={() => navigation.navigate('GameChoice')}
         />
-        <Button 
+        <ButtonGameTypeChoice
         title='Défier mes amis'
-        onPress={() => Alert.alert('On Joue avec les potos')}
+        onPress={() => navigation.navigate('GameChoice')}
         />
       </View>
       <BotBar 
-          messages={message}
-          games={gamepad}
-          shop={store}
-          style={styles.iconFooter}
-          styleStore={styles.iconStore}
-          nav={navigation}
-          styleBar={styles.footer}
+        nav={navigation}
+        state='Home'
       />
     </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({
-  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,
-  },
-  body: {
-    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

bob_party/src/screens/Profile.tsx

@@ -1,144 +1,54 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
-import React, { Children } from 'react';
-import { SkinComponent } from '../components/skinAvatar';
-import { User } from '../core/user';
-import { Skin } from '../core/skin';
+import { StyleSheet, View, Text, Image} from 'react-native'
+import React from 'react';
+import stylesScreen from './style/screens.style'
+import styles from './style/Profile.style'
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
+import { SkinComponent } from '../components/Skin';
+import { User } from '../core/user';
+import tabSkinApp from '../constSkin';
+import tabConv from '../constCov'
+import { ButtonChangeSkin } from '../components/ButtonChangeSkin';
+import { ScreenIndicator } from '../components/ScreenIndicator';
+
+const coin = require('../../assets/Icons/Coin.png')
 
-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/UnSelected/Gamepad.png');
-const message = require('../../assets/Icons/UnSelected/Chat.png');
-const store = require('../../assets/Icons/UnSelected/Store.png');
+const UserActu=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[0], tabSkinApp, tabConv);
 
 function Profile(props: { navigation: any; }) {
     const { navigation } = props
     return (
-    <View style={styles.container}>
+    <View style={stylesScreen.container}>
         <TopBar
-          skin={skinTest} 
-          styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
-          rightIcon={engrenage} 
-          styleIcon={styles.engrenage} 
-          nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}
+          skin={UserActu.getCurrentSkin()} 
+          nav={navigation}
           />
-      <View style={styles.body}>
-        <Text style={styles.text}>couille</Text>
+      <View style={stylesScreen.bodyStart}>
+        <ScreenIndicator title='Profil'/>
+        <View style={styles.coinSkinView}>
+            <View style={styles.coinView}>
+                <Image 
+                    style={styles.coin}
+                    source={coin}
+                />
+                <Text style={styles.coinText}>{UserActu.getCurrentCoins()}</Text>
+            </View>
+            <View style={styles.skinView}>
+                <SkinComponent skin={UserActu.getCurrentSkin()} state='profile'/>
+                <ButtonChangeSkin onPress={() => navigation.navigate('SkinList')}/>
+            </View>
+        </View>
+        <View style={styles.infoView}>
+            <Text style={styles.infoText}>Total de BobCoin gagnés: {UserActu.getTotalCoins()}</Text>
+        </View>
       </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,
-  },
-
-});
-
 export default Profile

bob_party/src/screens/Settings.tsx

@@ -1,131 +1,24 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import { StyleSheet, View, Text} from 'react-native'
 import React from 'react';
+import stylesScreen from './style/screens.style'
+import { TopBar } from '../components/TopBar';
 
-const msc = require('../../assets/Icons/FondGris.png');
-const engrenage = require('../../assets/Icons/UnSelected/Cross.png');
 
 function Store(props: { navigation: any; }) {
     const { navigation } = props
     return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Image
-          style={styles.engrenage}
-          source={msc}
+    <View style={stylesScreen.container}>
+      <TopBar
+          nav={navigation}
+          state='settings'
         />
-        <Text style={styles.titre}>Paramètres</Text>
-        <Pressable onPress={() => props.navigation.goBack()}>
-          <Image
-          style={styles.engrenage}
-          source={engrenage}
-          />
-        </Pressable>
-      </View>
-      <View style={styles.body}>
-        <Text style={styles.text}>couille</Text>
+      <View style={stylesScreen.bodyStart}>
+        <Text>couille</Text>
       </View>
     </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: 10,
-    width: 50,
-    height: 50,
-  },
-  avatar: {
-    borderRadius: 10,
-    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,
-  },
-
-});
-
 export default Store

bob_party/src/screens/SkinList.tsx

@@ -0,0 +1,38 @@
+import { StatusBar } from 'expo-status-bar'
+import { StyleSheet, View, Text} from 'react-native'
+import React from 'react';
+import stylesScreen from './style/screens.style'
+import { Skin } from '../core/skin';
+import { TopBar } from '../components/TopBar';
+import { BotBar } from '../components/BotBar';
+import { FlatList } from 'react-native-gesture-handler';
+import { SkinComponent } from '../components/Skin';
+import tabSkinApp from '../constSkin';
+import { ScreenIndicator } from '../components/ScreenIndicator';
+
+
+function SkinList(props: { navigation: any; }) {
+    const { navigation } = props
+    return (
+    <View style={stylesScreen.container}>
+        <TopBar
+          skin={tabSkinApp[0]} 
+          nav={navigation}
+          />
+      <View style={stylesScreen.bodyStart}>
+        <ScreenIndicator title='Mes Skins'/>
+        <FlatList 
+          data={tabSkinApp}
+          numColumns={2}
+          columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
+          keyExtractor={item =>item.getSkinName()}
+          renderItem={({item}) => <SkinComponent skin={item} state='liste'/>} />
+      </View>
+      <BotBar
+          nav={navigation}
+      />
+    </View>
+  );
+}
+
+export default SkinList

bob_party/src/screens/Store.tsx

@@ -1,145 +1,39 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
-import React, { Children } from 'react';
-import { SkinComponent } from '../components/skinAvatar';
-import { User } from '../core/user';
+import { StyleSheet, View} from 'react-native'
+import React from 'react';
+import stylesScreen from './style/screens.style'
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
+import { FlatList } from 'react-native-gesture-handler';
+import { SkinComponent } from '../components/Skin';
+import { ScreenIndicator } from '../components/ScreenIndicator';
 
-
-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/UnSelected/Gamepad.png');
-const message = require('../../assets/Icons/UnSelected/Chat.png');
-const store = require('../../assets/Icons/Selected/SStore.png');
+import tabSkinApp from '../constSkin';
 
 function Store(props: { navigation: any; }) {
     const { navigation } = props
     return (
-    <View style={styles.container}>
-        <TopBar
-          skin={skinTest} 
-          styleAvatar={styles.avatar} 
-          title="BOB PARTY" 
-          rightIcon={engrenage} 
-          styleIcon={styles.engrenage} 
-          nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}
-        />
-      <View style={styles.body}>
-        <Text style={styles.text}>couille</Text>
+    <View style={stylesScreen.container}>
+      <TopBar
+        skin={tabSkinApp[0]}
+        nav={navigation}
+      />
+      <View style={stylesScreen.bodyStart}>
+        <ScreenIndicator title='Store'/>
+        <FlatList 
+          data={tabSkinApp}
+          numColumns={2}
+          columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
+          keyExtractor={item =>item.getSkinName()}
+          renderItem={({item}) => <SkinComponent skin={item} state='shop'/>} />
       </View>
       <BotBar 
-          messages={message}
-          games={gamepad}
-          shop={store}
-          style={styles.iconFooter}
-          styleStore={styles.iconStore}
           nav={navigation}
-          styleBar={styles.footer}
+          state='Store'
       />
     </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,
-  },
-
-});
-
 export default Store

bob_party/src/screens/Test.tsx

@@ -3,24 +3,20 @@ import { useState } from 'react';
 import { StyleSheet, View, Text, Alert, Pressable, Image, ImageBackground} from 'react-native'
 import React from 'react';
 import { FlatList } from 'react-native-gesture-handler';
+import { SkinComponent } from '../components/Skin';
+import { Skin } from '../core/skin';
 
-const BobClassic = require('../../assets/BobsSkins/BobClassic.png');
-const BobBW = require('../../assets/BobsSkins/BobBW.png');
-const BobBlue = require('../../assets/BobsSkins/BobBlue.png');
-const BobGreen = require('../../assets/BobsSkins/BobGreen.png');
-
+const skinTest = new Skin("S0001","Bob",require('../../assets/BobsSkins/BobClassic.png'));
+const skinBleu = new Skin("S0001","Bob Bleu", require('../../assets/BobsSkins/BobBlue.png'))
+const skinBW = new Skin("S0001","Bob BW", require('../../assets/BobsSkins/BobBW.png'))
+const skinGreen = new Skin("S0001","Bob Vert", require('../../assets/BobsSkins/BobGreen.png'))
+const skinPT = new Skin("S0001","Bob R&T", require('../../assets/BobsSkins/BobPinkTurquoise.png'))
 
+let listSkin: Array<Skin> = [skinTest, skinBleu, skinBW, skinGreen, skinPT]
 
 function Test(props: { navigation: any; }) {
     const { navigation } = props
 
-    const [skin, setSkin] = useState([
-        { name : 'BobClassic', image: BobClassic, price: 0, id: 's0001'},
-        { name : 'BobBW', image: BobBW, price: 150, id: 's0002'},
-        { name : 'BobBlue', image: BobBlue, price: 200, id: 's0003'},
-        { name : 'BobGreen', image: BobGreen, price: 200, id: 's0004'},
-    ]);
-
     const ItemSeprator = () => <View style={{
         height: 2,
         width: "100%",
@@ -28,65 +24,15 @@ function Test(props: { navigation: any; }) {
     }}/>
 
     return (
-        <View style={styles.imageWrapper}>
+        <View style={{backgroundColor: 'blue', flex: 0.7, alignSelf: 'center'}}>
             <FlatList 
+                data={listSkin}
                 numColumns={2}
-                keyExtractor={( item ) => item.id }
-                data={skin}
-                ItemSeparatorComponent={ItemSeprator}
-                renderItem={({ item }) => (
-                    <ImageBackground
-                        style={styles.theImage}
-                        source={item.image}
-                    >
-                        <Text>{item.price}</Text>
-                        <Text>{item.name}</Text>
-                    </ImageBackground>
-                )}
-            />
+                columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
+                keyExtractor={item =>item.getSkinName()}
+                renderItem={({item}) => <SkinComponent skin={item} state='shop'/>} />
         </View>
     );
 }
 
-const styles = StyleSheet.create({
-    imageWrapper: {
-        height: 200,
-        width: 200,
-        overflow : "hidden"
-    },
-    theImage: {
-        flex: 1,
-        alignItems: "flex-end",
-        margin: 10,
-        width: "100%",
-        height: "100%",
-    },
-    container: {
-        backgroundColor: '#45444E',
-        flex: 1,
-        paddingTop: "50%",
-        paddingBottom: "50%",
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    Text: {
-        margin: 15,
-        paddingVertical: 12,
-        width: '40%',
-        borderRadius: 10,
-        backgroundColor: '#0085FF',
-      },
-    item: {
-        marginTop: 24,
-        backgroundColor: 'pink',
-        fontSize: 24,
-    },
-    debug:{
-        flex: 0.2,
-        backgroundColor: "red",
-        padding: 50,
-    },
-});
-
 export default Test

bob_party/src/screens/style/Profile.style.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+
+const coinSkinGap = 10;
+const infoGap = 20;
+
+export default StyleSheet.create({
+    coinSkinView: {
+        flexDirection:'row',
+    },
+    coinView: {
+        width: '50%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    skinView: {
+        width: '50%',
+    },
+    coin: {
+      width: 75,
+      height: 75,
+      marginVertical: (coinSkinGap/2),
+    },
+    coinText: {
+      fontSize: 16,
+      lineHeight: 21,
+      fontWeight: 'bold',
+      letterSpacing: 0.25,
+      color: 'white',
+      marginVertical: (coinSkinGap/2),
+    },
+    infoView: {
+        marginLeft: '5%',
+        marginTop: '5%',
+    },
+    infoText: {
+      fontSize: 16,
+      lineHeight: 21,
+      fontWeight: 'bold',
+      letterSpacing: 0.25,
+      color: 'white',
+      marginVertical: (infoGap/2),
+    }
+});

bob_party/src/screens/style/screens.style.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#45444E',
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "center",
+    },
+    bodyStart: {
+        flex: 1,
+        flexDirection: 'column',
+        width: '100%',
+      },
+    bodyCenter: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+      },
+  });

bob_party/src/testGameSolo.ts

@@ -0,0 +1,12 @@
+import { GameSolo } from "./core/gameSolo";
+
+let myMap = new Map<number, number>([
+    [50, 3],
+    [75, 4],
+    [100, 5],
+    [150, 6]
+]);
+
+let game=new GameSolo("bo jeu", require('bob_party/assets/ImagesJeux/blackjack.jpg'), "super jeu", myMap);
+
+export default game;