Fin lobby multi

bob_party/src/components/LobbyComponent.tsx

@@ -1,13 +1,14 @@
 import { FC, useState} from "react"
-import { Button, FlatList } from "react-native"
+import { Button, FlatList, Pressable } 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 { View, Image, Text} from 'react-native'
 import stylesScreen from '../screens/style/screens.style'
+import style from './style/LobbyComponent.style'
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { Conversation } from '../core/conversation';
@@ -54,7 +55,7 @@ FC<{nav: any}> =
                         onPress={() => nav.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))}
                     />
                     <Image
-                            style={{height: '30%', width: '70%', alignSelf:'center', borderRadius: 25, marginTop: "15%"}}
+                            style={style.imageGameSolo}
                             source={{uri: MANAGER_MATCH.getCurrentMatch()?.getGame().getImageSource()}}
                     />
                 </View>
@@ -65,20 +66,21 @@ FC<{nav: any}> =
         getUsers();
         return(
             <View style={stylesScreen.bodyStartCenter}>
+                <Text style={style.text}>Match ID : {MANAGER_MATCH.getCurrentMatch()?.getCode()}</Text>
                 <FlatList 
                 data={useMatchStore().tabUser} 
                 keyExtractor={usr =>usr?.getUsername() || usr}
                 renderItem={({item}) => <UserPreview user={item}/>}
+                style = {{width: '100%',}}
                 />
-                <View style={stylesScreen.bodyCenter}>
+                <Pressable
-                <Button
+                    style={style.pressable}
-                    title='Lancer la partie'
+                    onPress={() => nav.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))}  
-                    onPress={() => nav.navigate(MANAGER_MATCH.getCurrentMatch()?.getGame().getName().replace(/\s/g, ''))}
+                >
-                />
+                    <Text style={style.text}>Lancer la partie</Text>
-                </View>
+                </Pressable>
-
                 <Image
-                    style={{width:100, height:100}}
+                    style={style.imageGameMulti}
                     source={{uri: MANAGER_MATCH.getCurrentMatch()?.getGame().getImageSource()}}
                 />
             </View>

bob_party/src/components/style/LobbyComponent.style.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+
+/*
+    Stylesheet for the GameComponent component
+*/
+
+export default StyleSheet.create(
+{
+    text :{
+        padding: 10,
+        textAlign: 'center',
+        fontSize: 23,
+        fontFamily: 'Helvetica',
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+        alignSelf: 'center',
+    },
+    imageGameSolo :{
+        height: '30%',
+        width: '70%',
+        alignSelf:'center',
+        borderRadius: 25,
+        marginTop: "15%"
+    },
+    imageGameMulti :{
+        height: 150,
+        width: 150,
+        alignSelf:'center',
+        borderRadius: 25,
+        marginVertical: "7%",
+    },
+    pressable : {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '10%',
+        width: '50%',
+        marginVertical: '1%',
+        borderRadius: 10,
+        elevation: 3,
+        backgroundColor: '#0085FF',
+    }
+})

bob_party/src/components/style/UserPreview.style.js

@@ -26,7 +26,8 @@ export default StyleSheet.create(
         width:"80%",
         backgroundColor: "#2C2C34",
         marginVertical: 10,
-        borderRadius: 15
+        borderRadius: 15,
+        alignSelf: 'center',
     },
     undefinedView: {
         flexDirection: 'column',
@@ -37,6 +38,7 @@ export default StyleSheet.create(
         borderRadius: 15,
         justifyContent: 'center',
         alignItems:'center',
+        alignSelf: 'center',
 
     }
 })

bob_party/src/screens/GameChoice.tsx

@@ -1,33 +1,63 @@
 import { StatusBar } from 'expo-status-bar'
-import {View, FlatList} from 'react-native'
+import {View, FlatList, Text} from 'react-native'
-import React from 'react';
+import React, { useState } from 'react';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { GameComponent } from '../components/GameComponent';
 import { ScreenIndicator } from '../components/ScreenIndicator';
+import { TextInput } from 'react-native-gesture-handler';
 import stylesScreen from './style/screens.style'
+import styles from './style/GameChoice.style'
 import { MANAGER_GAME } from '../../appManagers';
 import { GameList } from '../components/GameList';
 
 function GameChoice(props: { navigation: any}) {
     const { navigation} = props
+
+    const [matchId, setMatchId] = useState('');
     
-    return (
+    if(MANAGER_GAME.currentGameType === "solo" ){
-      <View style={stylesScreen.container}>
+      return (
-      <TopBar
+        <View style={stylesScreen.container}>
-        nav={navigation}
+        <TopBar
-      />
-      <View style={stylesScreen.bodyStart}>
-        <ScreenIndicator title='Game Choice'/>
-        <GameList
           nav={navigation}
         />
+        <View style={stylesScreen.bodyStart}>
+          <ScreenIndicator title='Game Choice'/>
+          <GameList
+            nav={navigation}
+          />
+        </View>
+        <BotBar 
+            nav={navigation}
+            state='Home'
+        />
       </View>
-      <BotBar 
+    );
-          nav={navigation}
+    }
-          state='Home'
+    else if(MANAGER_GAME.currentGameType === "multi"){
-      />
+        return (
-    </View>
+          <View style={stylesScreen.container}>
-  );
+          <TopBar
+            nav={navigation}
+          />
+          <View style={stylesScreen.bodyStart}>
+            <ScreenIndicator title='Game Choice'/>
+            <GameList
+              nav={navigation}
+            />
+            <View style={{backgroundColor: '#2D2C33', flexDirection: 'row', alignContent: 'flex-start', margin: '2%', borderRadius: 15}}>
+              <Text style={styles.text}>Rejoindre un match</Text>
+              <TextInput style={styles.textInput} placeholder='Id' onChangeText={(val) => setMatchId(val)} autoCapitalize='none' />
+            </View>
+          </View>
+          <BotBar 
+              nav={navigation}
+              state='Home'
+          />
+        </View>
+      );
+    }
+    
 }
 export default GameChoice

bob_party/src/screens/MatchMaking.tsx

@@ -1,49 +0,0 @@
-import { StatusBar } from 'expo-status-bar'
-import { View, Image, Text, Button} from 'react-native'
-import React from 'react';
-import stylesScreen from './style/screens.style';
-import styles from './style/Settings.style';
-import { TopBar } from '../components/TopBar';
-import { BotBar } from '../components/BotBar';
-import { Conversation } from '../core/conversation';
-import { BigBlueButton } from '../components/BigBlueButton';
-import { useMatchStore } from '../context/matchContext';
-import { FlatList, TextInput } from 'react-native-gesture-handler';
-import { PlayerBox } from '../components/PlayerBox';
-import { MANAGER_MATCH } from '../../appManagers';
-import { User } from '../core/User/user';
-
-
-function MatchMaking(props: { navigation: any; }) {
-
-    const { navigation } = props
-
-    const match = useMatchStore().match;
-
-    return ( 
-        <View style={stylesScreen.container}>
-            <TopBar
-            nav={navigation}
-            state='matchmacking'
-            />
-            <FlatList 
-                data={match?.getTabUsers()} 
-                keyExtractor={usr =>usr.getUsername()}
-                renderItem={({item}) => <PlayerBox user={item}/>}
-            />
-            <View style={stylesScreen.bodyCenter}>
-            <Button
-                title='Lancer la partie'
-                onPress={() => navigation.navigate(match?.getGame().getName().replace(/\s/g, ''))}
-            />
-            </View>
-
-            <Image
-                    style={{width:100, height:100}}
-                    source={{uri: match?.getGame().getImageSource()}}
-                />
-        </View>
-    );
-}
-
-export default MatchMaking

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

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+    text :{
+        padding: 10,
+        fontSize: 23,
+        fontFamily: 'Helvetica',
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    textInput: {
+        backgroundColor: 'white',
+        flex: 1,
+        margin: '2%',
+        paddingLeft: 5,
+        borderRadius: 15,
+      }
+  });

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

@@ -33,5 +33,5 @@ export default StyleSheet.create({
     RNPView: {
         alignSelf: 'center',
         padding: 20,
-    }
+    },
   });