vue matchmaking pas finie

bob_party/src/components/JoinButtonComponent.tsx

@@ -0,0 +1,54 @@
+import { FC, ReactNode, useCallback } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle, TextInput } from "react-native"
+import React from "react"
+import { trace } from "console"
+import { Game } from "../core/game"
+
+/*
+    Importing the correct stylesheet
+*/
+import stylesGame from './style/Game.style';
+import styles from "./style/ButtonGameTypeChoice.style"
+import LobbySolo from "../screens/LobbySolo"
+import ManagerMatch from "../services/matchServices/managerMatch"
+import MatchCreator from "../core/Match/matchCreator"
+import { useMatchStore } from "../context/matchContext"
+import { MANAGER_MATCH, MANAGER_USER } from "../../appManagers"
+
+export const JoinButtonComponent : 
+
+/*
+    * game : Game that must be displayed
+    * nav : tool needed to allow the navigation between the screens
+*/
+FC<{game: Game | undefined, nav: any}> = 
+({game, nav}) => 
+{      
+
+    const setMatch = useMatchStore((state) => state.setMatch);
+
+
+    const createNewMatchSolo = useCallback(async (game : Game | undefined, nav: any) => {
+
+        const m=new MatchCreator();
+        const tmp=MANAGER_USER.getCurrentUser();
+        if (tmp!==null){
+            let match=await m.createMatch(tmp, game);
+            MANAGER_MATCH.setCurrentMatch(match);
+            setMatch(match);
+            nav.navigate("GameSolo");
+        }
+    }, []);
+
+    
+    return (
+      <View style={styles.button}>
+          <TextInput/>
+          <Pressable onPress={() => createNewMatchSolo(game, nav)}>
+              <Text style={styles.text}>Launch</Text>
+          </Pressable>
+      </View>
+  );
+    
+
+}

bob_party/src/components/PlayerBox.tsx

@@ -7,7 +7,7 @@ import { Game } from "../core/game"
 /*
     Importing the correct stylesheet
 */
-import styles from './style/Game.style';
+import styles from './style/PlayerBox.style';
 import LobbySolo from "../screens/LobbySolo"
 import ManagerMatch from "../services/matchServices/managerMatch"
 import MatchCreator from "../core/Match/matchCreator"
@@ -26,12 +26,12 @@ FC<{user: User}> =
 ({user}) => 
 {      
     return (
-        <View>
+        <View style={styles.container}>
                 <Image
-                    style={styles.image}
+                    style={styles.icon}
                     source={{uri: user.getCurrentSkin().getSkinSource()}}
                 />
-                <Text style={styles.name}>{user.getUsername()}</Text>
+                <Text style={styles.nomJoueur}>{user.getUsername()}</Text>
         </View> 
     )    
     

bob_party/src/components/style/PlayerBox.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+
+/*
+    Stylesheet for the Skin component
+*/
+
+export default StyleSheet.create({
+  container: {
+    flex:1,
+    backgroundColor: '#45445E',
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    margin: 10,
+},
+  icon: {
+      width: 70,
+      height: 70,
+      borderRadius: 70,
+      marginRight: 10,
+  },
+  nomJoueur :{
+    fontSize: 25,
+    fontFamily: 'Helvetica',
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});

bob_party/src/core/Match/matchCreator.ts

@@ -5,7 +5,7 @@ import { Match } from "./match";
 
 export default class MatchCreator{
 
-    async createMatch(u:User, g:Game): Promise<Match>{
+    async createMatch(u:User, g:Game | undefined): Promise<Match>{
         return await MANAGER_MATCH.getsaverMatch().saveMatch(u, g);
     }
 }

bob_party/src/screens/MatchMaking.tsx

@@ -3,6 +3,7 @@ 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 stylesList from './style/MatchMaking.style';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { Conversation } from '../core/conversation';
@@ -28,6 +29,7 @@ function MatchMaking(props: { navigation: any; }) {
                 data={match?.getTabUsers()} 
                 keyExtractor={usr =>usr.getUsername()}
                 renderItem={({item}) => <PlayerBox user={item}/>}
+                style={stylesList.list}
             />
             <View style={stylesScreen.bodyCenter}>
             <Button
@@ -37,9 +39,9 @@ function MatchMaking(props: { navigation: any; }) {
             </View>
 
             <Image
-                    style={{width:100, height:100}}
-                    source={{uri: match?.getGame().getImageSource()}}
-                />
+                style={{width:100, height:100}}
+                source={{uri: match?.getGame().getImageSource()}}
+            />
         </View>
     );
 }

bob_party/src/screens/RejoindreOuLancer.tsx

@@ -0,0 +1,45 @@
+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 { BotBar } from '../components/BotBar';
+import { Conversation } from '../core/conversation';
+import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice';
+import { JoinButtonComponent } from '../components/JoinButtonComponent';
+import { useMatchStore } from '../context/matchContext';
+
+
+function RejoindreOuLancer(props: { navigation: any; }) {
+
+    const { navigation } = props
+
+    const match = useMatchStore().match;
+
+    return ( 
+        <View style={stylesScreen.container}>
+            <TopBar
+            nav={navigation}
+            state='matchmacking'
+            />
+            <View style={stylesScreen.bodyCenter}>
+            <ButtonGameTypeChoice
+                title='Créer une partie'
+                onPress={() => navigation.navigate(match?.getGame().getName().replace(/\s/g, ''))}
+            />
+            <ButtonGameTypeChoice
+                title='Rejoindre une partie'
+                onPress={() => navigation.navigate(match?.getGame().getName().replace(/\s/g, ''))}
+            />
+            <JoinButtonComponent game={match?.getGame()} nav={navigation}/>
+            </View>
+
+            <Image
+                    style={{width:100, height:100}}
+                    source={{uri: match?.getGame().getImageSource()}}
+                />
+        </View>
+    );
+}
+
+export default RejoindreOuLancer

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

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+
+const coinSkinGap = 10;
+const infoGap = 20;
+
+export default StyleSheet.create({
+    list: {
+        flex: 1,
+        flexDirection: 'column',
+    },
+
+});

bob_party/src/services/matchServices/ISaverMatch.ts

@@ -9,7 +9,7 @@ export default interface ISaverMatch{
      * m the Match we want to save
      */
 
-    saveMatch(u:User, g:Game): Promise<Match>;
+    saveMatch(u:User, g:Game | undefined): Promise<Match>;
 
     /**
      * deleteMatch methode that delete a Match in the data management system