Creation du component user preview et debut du Lobby multi

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"

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"

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 '../screens/style/screens.style'
-import stylesScreen from './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; }) {
+FC<{nav: any}> = 
-
+({nav}) => 
-    const { navigation } = props
+{
 
     const match = useMatchStore().match;
-
+    if(MANAGER_MATCH.getCurrentMatch()?.getGame().getNbPlayerMax()==1){
-    return ( 
+        return ( 
-        <View style={stylesScreen.container}>
-            <TopBar
-            nav={navigation}
-            state='matchmacking'
-            />
             <View style={stylesScreen.bodyStartCenter}>
                 <ScreenIndicator title="Solo"/>
                 <View style={stylesScreen.bodyCenter}>
                     <BigBlueButton
                         title='Lancer la partie'
-                        onPress={() => navigation.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))}
+                        onPress={() => nav.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))}
                     />
                     <Image
                             style={{height: '30%', width: '70%', alignSelf:'center', borderRadius: 25, marginTop: "15%"}}
@@ -36,8 +39,13 @@ function LobbySolo(props: { navigation: any; }) {
                     />
                 </View>
             </View>
-        </View>
+        );
-    );
+    }
+    else{
+        return(
+            <View style={stylesScreen.bodyStartCenter}>
+                <UserPreview user={MANAGER_MATCH.getCurrentMatch()?.getTabUsers()[0]}></UserPreview>
+            </View>
+        );
+    }
 }
-
-export default LobbySolo

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"

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"
 
 /*

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 styles from './style/UserPreview.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"
@@ -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 (
+    if(user != undefined){
-        <View>
+        return (
-                <Image
+            <View style= {styles.view}>
-                    style={styles.image}
+                    <Image
-                    source={{uri: user.getCurrentSkin().getSkinSource()}}
+                        style={styles.image}
-                />
+                        source={{uri: user.getCurrentSkin().getSkinSource()}}
-                <Text style={styles.name}>{user.getUsername()}</Text>
+                    />
-        </View> 
+                    <Text style={styles.text}>{user.getUsername()}</Text>
-    )    
+            </View> 
-    
+        )    
+    }
+    else{
+        return (
+            <View style={styles.undefinedView}>
+                <Text style={styles.text}>•••</Text>
+            </View>
+        )
+    }
 
 }

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',
+
+    }
+})

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 (
     <GameSoloStack.Navigator screenOptions={{headerShown: false}}>
-      <GameSoloStack.Screen name='LobbySolo' component={LobbySolo} options={{animationEnabled: false,}}/>
+      <GameSoloStack.Screen name='LobbySolo' component={Lobby} options={{animationEnabled: false,}}/>
       <GameSoloStack.Screen name='CookieClicker' component={CookieClicker} />
       <GameSoloStack.Screen name='TicTacToe' component={TicTacToe} />
       <GameSoloStack.Screen name='TicTacToeOnline' component={TicTacToeOnline} />

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 ( 
+        <View style={stylesScreen.container}>
+            <TopBar
+            nav={navigation}
+            state='matchmacking'
+            />
+            <View style={stylesScreen.bodyStartCenter}>
+                <LobbyComponent nav={navigation}></LobbyComponent>
+            </View>
+        </View>
+    );
+}
+
+export default Lobby

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';

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';
 

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';
 

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';