From 2ea5eb151349ac4c333aed2d12138da592cb9de1 Mon Sep 17 00:00:00 2001 From: aguilhot Date: Sat, 7 Jan 2023 08:33:15 +0100 Subject: [PATCH] Creation du component user preview et debut du Lobby multi --- .../ConversationPreviewComponent.tsx | 2 +- bob_party/src/components/GameComponent.tsx | 2 +- .../LobbyComponent.tsx} | 44 +++++++++++-------- bob_party/src/components/MessageComponent.tsx | 2 +- .../{Skin.tsx => SkinComponent.tsx} | 0 bob_party/src/components/TopBar.tsx | 2 +- .../{PlayerBox.tsx => UserPreview.tsx} | 36 +++++++++------ .../src/components/style/UserPreview.style.js | 42 ++++++++++++++++++ bob_party/src/navigation/AppNavigator.tsx | 4 +- bob_party/src/screens/Lobby.tsx | 26 +++++++++++ bob_party/src/screens/Profile.tsx | 2 +- bob_party/src/screens/SkinList.tsx | 2 +- bob_party/src/screens/Store.tsx | 2 +- bob_party/src/screens/Test.tsx | 2 +- 14 files changed, 126 insertions(+), 42 deletions(-) rename bob_party/src/{screens/LobbySolo.tsx => components/LobbyComponent.tsx} (55%) rename bob_party/src/components/{Skin.tsx => SkinComponent.tsx} (100%) rename bob_party/src/components/{PlayerBox.tsx => UserPreview.tsx} (52%) create mode 100644 bob_party/src/components/style/UserPreview.style.js create mode 100644 bob_party/src/screens/Lobby.tsx diff --git a/bob_party/src/components/ConversationPreviewComponent.tsx b/bob_party/src/components/ConversationPreviewComponent.tsx index 8f5ec9d..45e2c7d 100644 --- a/bob_party/src/components/ConversationPreviewComponent.tsx +++ b/bob_party/src/components/ConversationPreviewComponent.tsx @@ -8,7 +8,7 @@ import { Conversation } from "../core/conversation" Importing the correct stylesheet */ import styles from "./style/ConverstationPreviewComponent.style" -import { SkinComponent } from "./Skin" +import { SkinComponent } from "./SkinComponent" import { MANAGER_CONVERSATION, MANAGER_USER } from "../../appManagers" import { User } from "../core/User/user" import { useConversationStore } from "../context/conversationContext" diff --git a/bob_party/src/components/GameComponent.tsx b/bob_party/src/components/GameComponent.tsx index a3543e5..0d6a4e8 100644 --- a/bob_party/src/components/GameComponent.tsx +++ b/bob_party/src/components/GameComponent.tsx @@ -8,7 +8,7 @@ import { Game } from "../core/game" Importing the correct stylesheet */ import styles from './style/Game.style'; -import LobbySolo from "../screens/LobbySolo" +import Lobby from "../screens/Lobby" import ManagerMatch from "../services/matchServices/managerMatch" import MatchCreator from "../core/Match/matchCreator" import { useMatchStore } from "../context/matchContext" diff --git a/bob_party/src/screens/LobbySolo.tsx b/bob_party/src/components/LobbyComponent.tsx similarity index 55% rename from bob_party/src/screens/LobbySolo.tsx rename to bob_party/src/components/LobbyComponent.tsx index dd368aa..e94474e 100644 --- a/bob_party/src/screens/LobbySolo.tsx +++ b/bob_party/src/components/LobbyComponent.tsx @@ -1,7 +1,13 @@ -import { StatusBar } from 'expo-status-bar' +import { FC} from "react" +import { FlatList } from "react-native" +import React from "react" +import { Game } from "../core/game" + +/* + Importing the correct stylesheet +*/import { StatusBar } from 'expo-status-bar' import { View, Image} from 'react-native' -import React from 'react'; -import stylesScreen from './style/screens.style' +import stylesScreen from '../screens/style/screens.style' import { TopBar } from '../components/TopBar'; import { BotBar } from '../components/BotBar'; import { Conversation } from '../core/conversation'; @@ -9,26 +15,23 @@ import { BigBlueButton } from '../components/BigBlueButton'; import { useMatchStore } from '../context/matchContext'; import { MANAGER_MATCH } from '../../appManagers'; import { ScreenIndicator } from '../components/ScreenIndicator'; +import { UserPreview } from "./UserPreview" +export const LobbyComponent : -function LobbySolo(props: { navigation: any; }) { - - const { navigation } = props +FC<{nav: any}> = +({nav}) => +{ const match = useMatchStore().match; - - return ( - - + if(MANAGER_MATCH.getCurrentMatch()?.getGame().getNbPlayerMax()==1){ + return ( navigation.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))} + onPress={() => nav.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))} /> - - ); + ); + } + else{ + return( + + + + ); + } } - -export default LobbySolo \ No newline at end of file diff --git a/bob_party/src/components/MessageComponent.tsx b/bob_party/src/components/MessageComponent.tsx index 27240b8..2daaae0 100644 --- a/bob_party/src/components/MessageComponent.tsx +++ b/bob_party/src/components/MessageComponent.tsx @@ -8,7 +8,7 @@ import { Conversation } from "../core/conversation" Importing the correct stylesheet */ import styles from "./style/MessageComponent.style.js" -import { SkinComponent } from "./Skin" +import { SkinComponent } from "./SkinComponent" import { MANAGER_USER } from "../../appManagers" import { User } from "../core/User/user" import { Message } from "../core/message" diff --git a/bob_party/src/components/Skin.tsx b/bob_party/src/components/SkinComponent.tsx similarity index 100% rename from bob_party/src/components/Skin.tsx rename to bob_party/src/components/SkinComponent.tsx diff --git a/bob_party/src/components/TopBar.tsx b/bob_party/src/components/TopBar.tsx index ed4b70a..98e7381 100644 --- a/bob_party/src/components/TopBar.tsx +++ b/bob_party/src/components/TopBar.tsx @@ -2,7 +2,7 @@ import { FC, ReactNode } from "react" import { Pressable, Image, Text, View} from "react-native" import { Skin } from "../core/Skin" import React from "react" -import { SkinComponent } from "./Skin" +import { SkinComponent } from "./SkinComponent" import { User } from "../core/User/user" /* diff --git a/bob_party/src/components/PlayerBox.tsx b/bob_party/src/components/UserPreview.tsx similarity index 52% rename from bob_party/src/components/PlayerBox.tsx rename to bob_party/src/components/UserPreview.tsx index 7948eca..529d9ff 100644 --- a/bob_party/src/components/PlayerBox.tsx +++ b/bob_party/src/components/UserPreview.tsx @@ -7,8 +7,8 @@ import { Game } from "../core/game" /* Importing the correct stylesheet */ -import styles from './style/Game.style'; -import LobbySolo from "../screens/LobbySolo" +import styles from './style/UserPreview.style'; +import Lobby from "../screens/Lobby" import ManagerMatch from "../services/matchServices/managerMatch" import MatchCreator from "../core/Match/matchCreator" import { useMatchStore } from "../context/matchContext" @@ -16,24 +16,32 @@ import { MANAGER_MATCH, MANAGER_USER } from "../../appManagers" import { Match } from "../core/Match/match" import { User } from "../core/User/user" -export const PlayerBox : +export const UserPreview : /* * match : match that must be displayed * nav : tool needed to allow the navigation between the screens */ -FC<{user: User}> = +FC<{user: User | undefined}> = ({user}) => { - return ( - - - {user.getUsername()} - - ) - + if(user != undefined){ + return ( + + + {user.getUsername()} + + ) + } + else{ + return ( + + ••• + + ) + } } \ No newline at end of file diff --git a/bob_party/src/components/style/UserPreview.style.js b/bob_party/src/components/style/UserPreview.style.js new file mode 100644 index 0000000..7883509 --- /dev/null +++ b/bob_party/src/components/style/UserPreview.style.js @@ -0,0 +1,42 @@ +import { StyleSheet } from "react-native"; + +/* + Stylesheet for the GameComponent component +*/ + +export default StyleSheet.create( +{ + image : { + borderRadius: 15, + margin: 10, + width: 70, + height: 70, + }, + text :{ + textAlign: 'center', + fontSize: 23, + fontFamily: 'Helvetica', + fontWeight: 'bold', + letterSpacing: 0.25, + color: 'white', + alignSelf: 'center', + }, + view : { + flexDirection:'row', + width:"80%", + backgroundColor: "#2C2C34", + marginVertical: 10, + borderRadius: 15 + }, + undefinedView: { + flexDirection: 'column', + height: 90, + width:"80%", + backgroundColor: "#9191AC", + marginVertical: 10, + borderRadius: 15, + justifyContent: 'center', + alignItems:'center', + + } +}) \ No newline at end of file diff --git a/bob_party/src/navigation/AppNavigator.tsx b/bob_party/src/navigation/AppNavigator.tsx index 8726749..4b2087a 100644 --- a/bob_party/src/navigation/AppNavigator.tsx +++ b/bob_party/src/navigation/AppNavigator.tsx @@ -12,7 +12,7 @@ import SkinList from '../screens/SkinList' import GameChoice from '../screens/GameChoice' import SignIn from '../screens/SignIn' import SignUp from '../screens/SignUp' -import LobbySolo from '../screens/LobbySolo' +import Lobby from '../screens/Lobby' import CookieClicker from '../Games/CookieClicker/cookieClicker' import Conversation from '../screens/ConversationScreen' import AddConversation from '../screens/AddConversation' @@ -102,7 +102,7 @@ const GameSoloStack = createStackNavigator(); function GameSoloStackScreen() { return ( - + diff --git a/bob_party/src/screens/Lobby.tsx b/bob_party/src/screens/Lobby.tsx new file mode 100644 index 0000000..6253bc5 --- /dev/null +++ b/bob_party/src/screens/Lobby.tsx @@ -0,0 +1,26 @@ +import { StatusBar } from 'expo-status-bar' +import { View, Image} from 'react-native' +import React from 'react'; +import stylesScreen from './style/screens.style' +import { TopBar } from '../components/TopBar'; +import { LobbyComponent } from '../components/LobbyComponent'; + + +function Lobby(props: { navigation: any; }) { + + const { navigation } = props + + return ( + + + + + + + ); +} + +export default Lobby \ No newline at end of file diff --git a/bob_party/src/screens/Profile.tsx b/bob_party/src/screens/Profile.tsx index fc71bea..68be165 100644 --- a/bob_party/src/screens/Profile.tsx +++ b/bob_party/src/screens/Profile.tsx @@ -5,7 +5,7 @@ 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 { SkinComponent } from '../components/SkinComponent'; import { ButtonGreySmall } from '../components/ButtonGreySmall'; import { ScreenIndicator } from '../components/ScreenIndicator'; import { useUserStore } from '../context/userContext'; diff --git a/bob_party/src/screens/SkinList.tsx b/bob_party/src/screens/SkinList.tsx index 7778fd4..f793d5f 100644 --- a/bob_party/src/screens/SkinList.tsx +++ b/bob_party/src/screens/SkinList.tsx @@ -5,7 +5,7 @@ import stylesScreen from './style/screens.style' import { TopBar } from '../components/TopBar'; import { BotBar } from '../components/BotBar'; import { FlatList } from 'react-native-gesture-handler'; -import { SkinComponent } from '../components/Skin'; +import { SkinComponent } from '../components/SkinComponent'; import { ScreenIndicator } from '../components/ScreenIndicator'; import { MANAGER_USER } from '../../appManagers'; diff --git a/bob_party/src/screens/Store.tsx b/bob_party/src/screens/Store.tsx index 799b20b..7cc6c9b 100644 --- a/bob_party/src/screens/Store.tsx +++ b/bob_party/src/screens/Store.tsx @@ -5,7 +5,7 @@ import stylesScreen from './style/screens.style'; import { TopBar } from '../components/TopBar'; import { BotBar } from '../components/BotBar'; import { FlatList } from 'react-native-gesture-handler'; -import { SkinComponent } from '../components/Skin'; +import { SkinComponent } from '../components/SkinComponent'; import { ScreenIndicator } from '../components/ScreenIndicator'; import { useSkinStore } from '../context/storeContext'; diff --git a/bob_party/src/screens/Test.tsx b/bob_party/src/screens/Test.tsx index 1f2618c..8abf1b7 100644 --- a/bob_party/src/screens/Test.tsx +++ b/bob_party/src/screens/Test.tsx @@ -3,7 +3,7 @@ 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 { SkinComponent } from '../components/SkinComponent'; import { Skin } from '../core/skin'; import { MessageComponent } from '../components/MessageComponent'; import { MANAGER_CONVERSATION, MANAGER_USER } from '../../appManagers';