From f5d935768ef0d1fdfc1b522b210a4c7b8cecdc32 Mon Sep 17 00:00:00 2001 From: Lucie Bedouret Date: Sun, 16 Oct 2022 16:10:12 +0200 Subject: [PATCH] ADD: documentation en retard --- bob_party/src/components/BotBar.tsx | 74 +++++++++++++------ .../src/components/ButtonGameTypeChoice.tsx | 7 ++ bob_party/src/components/Element.tsx | 47 ------------ bob_party/src/components/GameComponent.tsx | 31 ++++++++ bob_party/src/components/Skin.tsx | 17 ++++- bob_party/src/components/TopBar.tsx | 22 +++++- .../src/components/style/BotBar.style.js | 4 + .../style/ButtonGameTypeChoice.style.js | 4 + bob_party/src/components/style/Game.style.js | 24 ++++++ bob_party/src/components/style/Skin.style.js | 4 + .../src/components/style/TopBar.style.js | 4 + bob_party/src/core/Game.ts | 7 ++ bob_party/src/core/conversation.ts | 9 +++ bob_party/src/core/message.ts | 7 ++ bob_party/src/core/skin.ts | 8 ++ bob_party/src/core/user.ts | 49 ++++++++---- bob_party/src/navigation/AppNavigator.tsx | 19 ++++- bob_party/src/screens/GameChoice.tsx | 10 +-- bob_party/src/screens/Store.tsx | 1 - 19 files changed, 250 insertions(+), 98 deletions(-) delete mode 100644 bob_party/src/components/Element.tsx create mode 100644 bob_party/src/components/GameComponent.tsx create mode 100644 bob_party/src/components/style/Game.style.js diff --git a/bob_party/src/components/BotBar.tsx b/bob_party/src/components/BotBar.tsx index 2224396..8d9a910 100644 --- a/bob_party/src/components/BotBar.tsx +++ b/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; @@ -35,25 +61,29 @@ FC<{nav: any, state?: String }> = } return ( - - nav.navigate('ChatTab')}> - - - {return (nav.navigate('Home'))}}> - - - nav.navigate('StoreTab')}> - - - + /* + Once the icons are correctly attributed, + the function can display the component + */ + + nav.navigate('ChatTab')}> + + + {return (nav.navigate('Home'))}}> + + + nav.navigate('StoreTab')}> + + + ) } \ No newline at end of file diff --git a/bob_party/src/components/ButtonGameTypeChoice.tsx b/bob_party/src/components/ButtonGameTypeChoice.tsx index aa218d3..2cf0e5e 100644 --- a/bob_party/src/components/ButtonGameTypeChoice.tsx +++ b/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}) => diff --git a/bob_party/src/components/Element.tsx b/bob_party/src/components/Element.tsx deleted file mode 100644 index 106614f..0000000 --- a/bob_party/src/components/Element.tsx +++ /dev/null @@ -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( - - Alert.alert("Achat du skin")}> - - {element.getSkinName()} - - - ) - } - if(element instanceof Game) - { - return ( - - Alert.alert("Lancement du jeu")}> - - {element.getName()} - - - ) - } - console.log('Type invalide pour ce composant') - return( - - Type invalide pour ce composant - - ) - -} \ No newline at end of file diff --git a/bob_party/src/components/GameComponent.tsx b/bob_party/src/components/GameComponent.tsx new file mode 100644 index 0000000..53a7d5c --- /dev/null +++ b/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 ( + + Alert.alert("Lancement du jeu")}> + + {game.getName()} + + + ) +} \ No newline at end of file diff --git a/bob_party/src/components/Skin.tsx b/bob_party/src/components/Skin.tsx index 8762a9c..607a3b5 100644 --- a/bob_party/src/components/Skin.tsx +++ b/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 'profile': return( - Alert.alert("Achat du skin")} style={styles.imageWrapper}> + Alert.alert("Changement du skin")} style={styles.imageWrapper}> {skin.getSkinName()} = ({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 ( diff --git a/bob_party/src/components/style/BotBar.style.js b/bob_party/src/components/style/BotBar.style.js index 45af064..6ef9a13 100644 --- a/bob_party/src/components/style/BotBar.style.js +++ b/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, diff --git a/bob_party/src/components/style/ButtonGameTypeChoice.style.js b/bob_party/src/components/style/ButtonGameTypeChoice.style.js index 6a4bba4..6b24cf8 100644 --- a/bob_party/src/components/style/ButtonGameTypeChoice.style.js +++ b/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', diff --git a/bob_party/src/components/style/Game.style.js b/bob_party/src/components/style/Game.style.js new file mode 100644 index 0000000..110df78 --- /dev/null +++ b/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', + }, +}) \ No newline at end of file diff --git a/bob_party/src/components/style/Skin.style.js b/bob_party/src/components/style/Skin.style.js index 360f5c2..9db27fc 100644 --- a/bob_party/src/components/style/Skin.style.js +++ b/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, diff --git a/bob_party/src/components/style/TopBar.style.js b/bob_party/src/components/style/TopBar.style.js index 6d4f8ba..e7e427a 100644 --- a/bob_party/src/components/style/TopBar.style.js +++ b/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, diff --git a/bob_party/src/core/Game.ts b/bob_party/src/core/Game.ts index 2b6ea66..7abbad5 100644 --- a/bob_party/src/core/Game.ts +++ b/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; } diff --git a/bob_party/src/core/conversation.ts b/bob_party/src/core/conversation.ts index abbe1c2..dcc0db0 100644 --- a/bob_party/src/core/conversation.ts +++ b/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(), diff --git a/bob_party/src/core/message.ts b/bob_party/src/core/message.ts index e4058c2..fe30ac7 100644 --- a/bob_party/src/core/message.ts +++ b/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; } diff --git a/bob_party/src/core/skin.ts b/bob_party/src/core/skin.ts index bec0af9..57d6b60 100644 --- a/bob_party/src/core/skin.ts +++ b/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; } diff --git a/bob_party/src/core/user.ts b/bob_party/src/core/user.ts index 5cba515..75ac126 100644 --- a/bob_party/src/core/user.ts +++ b/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[] ){ - this.Id=id; - this.Username=username; - this.Nationality=nationality; - this.Sexe=sexe; - this.DateOfBirth=dateOfBirth; - this.CurrentCoins=currentCoins; - this.TotalCoins=totalCoins; - this.CurrentSkin=currentSkin; - this.TabSkin=[...tabSkin]; - tabConv?.forEach(conv => { - this.TabConv?.push(conv); - }); - } + currentSkin: Skin, tabSkin: Skin[], tabConv?: Conversation[] ){ + this.Id=id; + this.Username=username; + this.Nationality=nationality; + this.Sexe=sexe; + this.DateOfBirth=dateOfBirth; + this.CurrentCoins=currentCoins; + this.TotalCoins=totalCoins; + this.CurrentSkin=currentSkin; + this.TabSkin=[...tabSkin]; + 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; } + /* 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); diff --git a/bob_party/src/navigation/AppNavigator.tsx b/bob_party/src/navigation/AppNavigator.tsx index 1d144c1..051603d 100644 --- a/bob_party/src/navigation/AppNavigator.tsx +++ b/bob_party/src/navigation/AppNavigator.tsx @@ -16,6 +16,9 @@ import Test from '../screens/Test' const HomeStack = createStackNavigator(); +/* + Stack of screens for home and game choice +*/ function HomeStackScreen() { return ( @@ -27,7 +30,9 @@ function HomeStackScreen() { } const StoreStack = createStackNavigator(); - +/* + Stack of screens for the store and the purshase of new skins +*/ function StoreStackScreen() { return ( @@ -38,7 +43,9 @@ function StoreStackScreen() { } const ChatStack = createStackNavigator(); - +/* + Stack of screens for conversations +*/ function ChatStackScreen() { return ( @@ -49,7 +56,9 @@ function ChatStackScreen() { } const ProfileStack = createStackNavigator(); - +/* + Stack of screens for the profile and the changement of informations +*/ function ProfileStackScreen() { return ( @@ -60,7 +69,9 @@ function ProfileStackScreen() { } const Tab = createBottomTabNavigator() - +/* + Tab navigator to navigate between the stacks +*/ function MainTabNavigator() { return ( diff --git a/bob_party/src/screens/GameChoice.tsx b/bob_party/src/screens/GameChoice.tsx index fee1a49..d5e1d26 100644 --- a/bob_party/src/screens/GameChoice.tsx +++ b/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} /> - diff --git a/bob_party/src/screens/Store.tsx b/bob_party/src/screens/Store.tsx index fcee016..b489bda 100644 --- a/bob_party/src/screens/Store.tsx +++ b/bob_party/src/screens/Store.tsx @@ -7,7 +7,6 @@ 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 tabSkinApp from '../constSkin';