ajout de la gestion quand il n'y a aucun lobby

cryptide_project/src/Pages/Lobbies.tsx

@@ -90,7 +90,9 @@ function Lobbies() {
         })
     }, [])
 
-    
+    function createLobby(){
+        socket.emit("lobby created")
+    }
 
     return(
         <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
@@ -134,18 +136,25 @@ function Lobbies() {
             </div>
 
 
-            <div className="lobbyList">
+                {filteredLobbiesToShow.length === 0 ? (
-                {filteredLobbiesToShow.map((lobby, index) => (
+                    <div style={{border:'solid 2px blue', borderRadius:'15px', boxShadow:'5px 5px 5px rgb(246, 246, 246)', padding:'20px', margin:'20px'}}>
-                <LobbyContainer
+                        <h3><b>Il n'y a aucun lobby disponible</b></h3>
-                    key={index}
+                        <button onClick={createLobby}  className='ButtonNav' style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Créé en un !</button>
-                    roomNum={lobby.roomNum}
+                    </div>
-                    HeadPlayer={lobby.headPlayer}
+                ) : (
-                    nbPlayer={lobby.nbPlayer}
+                    <div className="lobbyList">
-                    setFirst={setFirstData}
+                        {filteredLobbiesToShow.map((lobby, index) => (
-                    started={lobby.started}
+                            <LobbyContainer
-                />
+                                key={index}
-                ))}
+                                roomNum={lobby.roomNum}
-            </div>
+                                HeadPlayer={lobby.headPlayer}
+                                nbPlayer={lobby.nbPlayer}
+                                setFirst={setFirstData}
+                                started={lobby.started}
+                            />
+                        ))}
+                    </div>
+                )}
         </div>
     );
 }

cryptide_project/src/Pages/NewPlay.tsx

@@ -287,6 +287,16 @@ function NewPlay() {
             
             </div>
             <div className='NewrightContainer'>
+                <div style={{ border:'solid 2px lightgray', borderRadius:'15px', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column', padding:'20px', margin:'20px 0px'}}>
+                    <h2>
+                        {user && user.pseudo}
+                    </h2>
+                    <img src={user?.profilePicture}
+                            height='150'
+                            width='150'
+                            alt="Person"
+                            />
+                </div>
                 {user && (<ScoreBoard Player={user}/>)}
             </div>
         </div>