Merge pull request 'lobbyFornite' (#88) from lobbyFornite into master

Reviewed-on: #88

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,90 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../Style/ThemeContext';
+import Player from '../model/Player';
+import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+
+import Modal from 'react-bootstrap/Modal';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+import Button from 'react-bootstrap/Button';
+
+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();
+
+
+    
+
+    const navigate = useNavigate();
+    const dest = '/lobby?room=' + roomNum;
+
+    //* Modal
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    const handleContainerClick = () => {
+        
+        if (show){
+            handleClose()
+        }
+        else{
+            if (nbPlayer < 6) {
+                navigate(dest);
+            } else {
+                handleShow()
+                //alert('La salle est pleine. Impossible de rejoindre.');
+            }
+        }
+    };
+
+    let stylefull;
+    let colorfull;
+    if (nbPlayer >= 6) {
+        stylefull = "darkred"
+        colorfull = "darkred"
+    }
+    else {
+        stylefull = "whitesmoke"
+        colorfull = "black"
+    }
+
+    return(
+        <div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull}}>
+                <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
+                    <h6><i>Room : {roomNum}</i></h6>
+                </header>
+                <hr/>
+                    <h3><b>{HeadPlayer.pseudo}</b></h3>
+                <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
+                    <h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
+                </div>
+{/* 
+                <Button onClick={handleContainerClick} variant='danger'>
+                    click
+                </Button> */}
+
+                <Modal show={show} onHide={handleClose}>
+                    <Modal.Header closeButton>
+                    <Modal.Title>Salle pleine</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>La salle est pleine, il est impossible d'y aller pour le moment !</Modal.Body>
+                    <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Ok
+                    </Button>
+                    </Modal.Footer>
+                </Modal>
+
+        </div>
+    );
+}
+
+export default LobbyContainer;

cryptide_project/src/Pages/Lobbies.css

@@ -0,0 +1,42 @@
+.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;
+    cursor: pointer;
+}
+
+.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%;
+}
+
+
+h1{
+    margin: 50px !important;
+    font-family: "Raleway", sans-serif;
+}

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

@@ -249,7 +249,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>