ajout de la page lobby de lobby pour rejoindre un jeu 🚀

cryptide_project/src/App.tsx

@@ -13,9 +13,10 @@ import Play from './Pages/Play';
 import Profile from './Pages/Profile';
 import Lobby from './Pages/Lobby';
 import InGame from './Pages/InGame';
-
 import EndGame from './Pages/EndGame';
 import InfoPage from './Pages/InfoPage';
+import SoloGame from './Pages/SoloGame';
+import Lobbies from './Pages/Lobbies';
 
 /* Component */
 import AppNavbar from './Components/NavBar';
@@ -38,7 +39,6 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 /* Internationnalisation */
 import messagesFr from './Translations/fr.json';
 import messagesEn from './Translations/en.json';
-import SoloGame from './Pages/SoloGame';
 
 const messages = {
   fr: messagesFr,
@@ -86,6 +86,7 @@ function App() {
                 <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
                 <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
                 <Route path="/profile" element={<Profile/>} />
+                <Route path="/join" element={<Lobbies/>}/>
                 {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
               </Routes>
             </BrowserRouter>

cryptide_project/src/Components/LobbyContainer.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../Style/ThemeContext';
+import Player from '../model/Player';
+
+
+interface LobbyContainerProps {
+        roomNum : string
+        HeadPlayer : Player
+        nbPlayer : number
+    //? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
+}
+
+const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer}) => {
+    const theme=useTheme();
+
+    return(
+        <div className='lobbyMainContainer'>
+            <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
+                <h6><i>Room : {roomNum}</i></h6>
+            </header>
+            <hr/>
+                <h3><u>{HeadPlayer.pseudo}</u></h3>
+            <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
+                <h2>{nbPlayer}/6</h2>
+            </div>
+        </div>
+    );
+}
+
+export default LobbyContainer;

cryptide_project/src/Pages/Lobbies.css

@@ -0,0 +1,35 @@
+.lobbyMainContainer{
+    display: flex;
+    flex-direction: column;
+    
+    background-color: white;
+    
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    box-shadow: 5px 5px 5px rgb(246, 246, 246);    
+
+    width: 300px;
+    /* max-width: 300px; */
+    /* max-width: 20%; */
+    max-height: 200px;
+
+    padding: 20px;
+    margin: 20px;
+}
+
+.lobbyList{
+    display: flex;
+    /* justify-content: space-around; */
+    /* columns: 4; */
+    flex-wrap: wrap;
+
+    justify-content: center;
+}
+
+.searchLobby{
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    padding: 15px;
+
+    width: 50%;
+}

cryptide_project/src/Pages/Lobbies.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+
+/* Style */
+import './Lobbies.css';
+import "../Style/Global.css"
+import { useTheme } from '../Style/ThemeContext';
+import LobbyContainer from '../Components/LobbyContainer';
+import Player from '../model/Player';
+import User from '../model/User';
+
+
+function Lobbies() {
+    const theme=useTheme();
+
+
+    const lobbyData = [
+        { roomNum: '63194', headPlayer: new User('1', 'Emma', '', null, null), nbPlayer: 6 },
+        { roomNum: '81194', headPlayer: new User('2', 'Ray', '', null, null), nbPlayer: 1 },
+        { roomNum: '22194', headPlayer: new User('3', 'Norman', '', null, null), nbPlayer: 4 },
+        { roomNum: 'null', headPlayer: new User('null', 'tnull', '', null, null), nbPlayer: 1 },
+        { roomNum: '111111', headPlayer: new User('11', '1111111', '', null, null), nbPlayer: 1 },
+        { roomNum: '741852963', headPlayer: new User('3', 'Guest_741852963', '', null, null), nbPlayer: 6 },
+    ];
+
+
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const filteredLobbies = lobbyData.filter((lobby) =>
+    lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
+);
+
+    
+
+    return(
+        <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
+            <h1>Bienvenue dans le lobby des lobbies</h1>
+            <input
+                type="text"
+                className='searchLobby'
+                placeholder="Rechercher un lobby..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <div className="lobbyList">
+                {filteredLobbies.map((lobby, index) => (
+                <LobbyContainer
+                    key={index}
+                    roomNum={lobby.roomNum}
+                    HeadPlayer={lobby.headPlayer}
+                    nbPlayer={lobby.nbPlayer}
+                />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default Lobbies;

cryptide_project/src/Pages/Play.tsx

@@ -253,7 +253,7 @@ function Play() {
 
 
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
-                    <button  className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
+                    <button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                     
                 </div>
             </div>