Merge branch 'typescript' of https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY into typescript

bob_party/src/components/BotBar.tsx

@@ -1,26 +1,52 @@
 import { FC, ReactNode } from "react"
 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<{nav: any, state?: String }> = 
+/* 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':
         case 'Game':
             imgMid = sgamepad
             break;
@@ -34,6 +60,10 @@ FC<{nav: any, state?: String }> =
             break;
     }
 
+        /*
+        Once the icons are correctly attributed,
+        the function can display the component
+        */
     return (
     <View style={styles.footer}>
             <Pressable onPress={() => nav.navigate('ChatTab')}>

bob_party/src/components/ButtonGameTypeChoice.tsx

@@ -1,9 +1,16 @@
 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}) =>

bob_party/src/components/Element.tsx

@@ -1,47 +0,0 @@
-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"
-import { Game } from "../core/game"
-
-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>
-            )
-        }
-        if(element instanceof Game)
-        {
-            return (
-                <View>
-                    <Pressable onPress={() => Alert.alert("Lancement du jeu")}>
-                        <Image
-                            style={styleImage}
-                            source={element.getImageSource()}
-                        />
-                        <Text style={styleTitle}>{element.getName()}</Text>
-                    </Pressable>
-                </View> 
-            )
-        }
-        console.log('Type invalide pour ce composant')
-        return(
-            <View>
-                <Text>Type invalide pour ce composant</Text>
-            </View>
-        )
-        
-}

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/Skin.tsx

@@ -2,12 +2,25 @@ 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 : 
+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 (
@@ -29,7 +42,7 @@ FC<{skin: Skin, state: String}> =
             )
         case 'liste':
             return(
-                <Pressable onPress={() => Alert.alert("Achat du skin")} style={styles.imageWrapper}>
+                <Pressable onPress={() => Alert.alert("Changement du skin")} style={styles.imageWrapper}>
                     <Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
                     <Image
                         style={styles.imageSkin}

bob_party/src/components/TopBar.tsx

@@ -3,15 +3,33 @@ import { Pressable, Image, Text, View} from "react-native"
 import { Skin } from "../core/Skin"
 import React from "react"
 import { SkinComponent } from "./Skin"
-import styles from './style/TopBar.style';
 
+/*
+    Import the correct stylesheet
+*/
+import styles from './style/TopBar.style';
 
+/* 
+    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 : FC<{skin?: skin, nav: any, state?: string}> = ({skin, nav, state}) => 
+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}) => 
 {
+    /* 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 (

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

@@ -1,5 +1,9 @@
 import { StyleSheet } from 'react-native';
 
+/*
+    Stylesheet for the BotBar component
+*/
+
 export default StyleSheet.create({
     footer: {
         flex: 0.15,

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

@@ -1,5 +1,9 @@
 import { StyleSheet } from 'react-native';
 
+/*
+    Stylesheet for the ButtonGameTypeChoice component
+*/
+
 export default StyleSheet.create({
     button: {
         alignItems: 'center',

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/Skin.style.js

@@ -1,5 +1,9 @@
 import { StyleSheet } from "react-native";
 
+/*
+    Stylesheet for the Skin component
+*/
+
 export default StyleSheet.create({
   icon: {
       width: 50,

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

@@ -1,5 +1,9 @@
 import { StyleSheet } from 'react-native';
 
+/*
+    Stylesheet for the TopBar component
+*/
+
 export default StyleSheet.create({
     header: {
         flex: 0.15,

bob_party/src/core/Game.ts

@@ -6,32 +6,39 @@ export class Game{
     private ImageSource:ImageSourcePropType;
     private GameSource:string ;
 
+    /* Constructor of the class */
     constructor (name:string, imageSource:ImageSourcePropType, gameSource:string){
         this.Name=name;
         this.ImageSource=imageSource;
         this.GameSource=gameSource;
     }
 
+    /* Brief : Function getting the name of a game */
     getName(){
         return this.Name;
     }
 
+    /* Brief : Function setting the name of a game */
     setName(name:string){
         this.Name=name;
     }
 
+    /* Brief : Function getting the image of a game */
     getImageSource(){
         return this.ImageSource;
     }
 
+    /* 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;
     }
 
+    /* Brief : Function getting the source of a game */
     setGameSource(gameSource:string){
         this.GameSource=gameSource;
     }

bob_party/src/core/conversation.ts

@@ -7,43 +7,52 @@ export class Conversation{
     private TabMessage: Message[];
     private Name?: string;
     
+    /* 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/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;
     }
 
+    /* Brief : Function setting the sender of a message */
     setMessageSender(sender: User){
         this.Sender=sender;
     }
 
+    /* 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.ts

@@ -6,6 +6,7 @@ export class Skin{
     private Source: ImageSourcePropType;
     private Cost:number;
 
+    /* Constructor of the class */
     constructor(id:string, name: string, source:ImageSourcePropType, Cost:number){
         this.Id=id;
         this.Name=name;
@@ -13,30 +14,37 @@ export class Skin{
         this.Cost=Cost;
     }
     
+    /* Brief : Fuction setting the name of a skin */
     setSkinName(name: string){
         this.Name=name;
     }
 
+    /* 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

@@ -13,98 +13,119 @@ export class User{
     private TabSkin: Skin[];
     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[] ){
+    currentSkin: Skin, tabSkin: Skin[], tabConv?: Conversation[] ){
-                    this.Id=id;
+        this.Id=id;
-                    this.Username=username;
+        this.Username=username;
-                    this.Nationality=nationality;
+        this.Nationality=nationality;
-                    this.Sexe=sexe;
+        this.Sexe=sexe;
-                    this.DateOfBirth=dateOfBirth;
+        this.DateOfBirth=dateOfBirth;
-                    this.CurrentCoins=currentCoins;
+        this.CurrentCoins=currentCoins;
-                    this.TotalCoins=totalCoins;
+        this.TotalCoins=totalCoins;
-                    this.CurrentSkin=currentSkin;
+        this.CurrentSkin=currentSkin;
-                    this.TabSkin=[...tabSkin];
+        this.TabSkin=[...tabSkin];
-                    tabConv?.forEach(conv => {
+        tabConv?.forEach(conv => {
-                        this.TabConv?.push(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;
     }
     
+    /* Brief : Function setting the id of an user */
     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 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;
     }
     
+    /* Brief : Function setting the conversations of an user */
     setTabConv(tabConv?: Conversation[]){
         tabConv?.forEach(conv => {
             this.TabConv?.push(conv);

bob_party/src/navigation/AppNavigator.tsx

@@ -17,6 +17,9 @@ import Test from '../screens/Test'
 
 const HomeStack = createStackNavigator();
 
+/*
+  Stack of screens for home and game choice
+*/
 function HomeStackScreen() {
   return (
     <HomeStack.Navigator screenOptions={{ headerShown: false}}>
@@ -28,7 +31,9 @@ function HomeStackScreen() {
 }
 
 const StoreStack = createStackNavigator();
-
+/*
+  Stack of screens for the store and the purshase of new skins
+*/
 function StoreStackScreen() {
   return (
     <StoreStack.Navigator screenOptions={{headerShown: false}}>
@@ -39,7 +44,9 @@ function StoreStackScreen() {
 }
 
 const ChatStack = createStackNavigator();
-
+/*
+  Stack of screens for conversations 
+*/
 function ChatStackScreen() {
   return (
     <ChatStack.Navigator screenOptions={{headerShown: false}}>
@@ -50,7 +57,9 @@ function ChatStackScreen() {
 }
 
 const ProfileStack = createStackNavigator();
-
+/*
+  Stack of screens for the profile and the changement of informations
+*/
 function ProfileStackScreen() {
   return (
     <ProfileStack.Navigator screenOptions={{headerShown: false}}>
@@ -62,7 +71,9 @@ function ProfileStackScreen() {
 }
 
 const Tab = createBottomTabNavigator()
-
+/*
+  Tab navigator to navigate between the stacks
+*/
 function MainTabNavigator() {
   return (
     <NavigationContainer>

bob_party/src/screens/GameChoice.tsx

@@ -1,11 +1,11 @@
 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 { Game } from '../core/Game';
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
-import { ElementAffichage } from '../components/Element';
+import { GameComponent } from '../components/GameComponent';
 import { User } from '../core/user';
 import tabSkinApp from '../constSkin';
 import { Conversation } from '../core/conversation';
@@ -25,10 +25,8 @@ function GameChoice(props: { navigation: any; }) {
         nav={navigation}
       />
       <View style={styles.body}>
-        <ElementAffichage
+        <GameComponent
-          element={jeuTest}
+          game={jeuTest}
-          styleImage={styles.imageSkin}
-          styleTitle={styles.nomSkin}
           nav={navigation}
         />
       </View>

bob_party/src/screens/Store.tsx

@@ -7,8 +7,8 @@ import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { FlatList } from 'react-native-gesture-handler';
 import { SkinComponent } from '../components/Skin';
-import { ElementAffichage } from '../components/Element';
 import { ScreenIndicator } from '../components/ScreenIndicator';
+
 import tabSkinApp from '../constSkin';
 
 function Store(props: { navigation: any; }) {