ajout du swiper pour trier les lobby (pour linstant sur les membre odd/even ⚡

cryptide_project/src/Components/LobbyContainer.tsx

@@ -8,6 +8,8 @@ import Modal from 'react-bootstrap/Modal';
 import Offcanvas from 'react-bootstrap/Offcanvas';
 import Button from 'react-bootstrap/Button';
 import { socket } from '../SocketConfig';
+import Tooltip from 'react-bootstrap/esm/Tooltip';
+import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
 
 interface LobbyContainerProps {
         roomNum : string
@@ -46,45 +48,75 @@ const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbP
         }
     };
 
+
+    //* popup pour salle pleine
+    //@ts-ignore
+    const renderTooltipFull = (props) => (
+        <Tooltip id="button-tooltip" {...props}>
+            Salle Pleine !
+        </Tooltip>
+    );
+    
+    //* popup pour partie déjà lancé
+    //@ts-ignore
+    const renderTooltipInGame = (props) => (
+        <Tooltip id="button-tooltip" {...props}>
+            En Jeu !
+        </Tooltip>
+    );
+
+
+    //let IsInGame = true;
+
     let stylefull;
     let colorfull;
+    let actualRender;
+
     if (nbPlayer >= 6) {
         stylefull = "darkred"
         colorfull = "darkred"
+        actualRender = renderTooltipFull
     }
+    // else if (IsInGame){
+    //     stylefull = "darkgreen"
+    //     colorfull = "darkgreen"
+    // }
     else {
         stylefull = "whitesmoke"
         colorfull = "black"
+        actualRender = renderTooltipInGame
     }
 
+
+
     return(
-        <div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull}}>
+    <OverlayTrigger
-                <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
+        placement="top"
-                    <h6><i>Room : {roomNum}</i></h6>
+        delay={{ show: 250, hide: 400 }}
-                </header>
+        overlay={actualRender}>
-                <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 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>
+            <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>
+    </OverlayTrigger>
     );
 }
 

cryptide_project/src/Pages/Lobbies.css

@@ -18,6 +18,10 @@
     cursor: pointer;
 }
 
+.lobbyMainContainer:hover{
+    background-color: whitesmoke;
+}
+
 .lobbyList{
     display: flex;
     /* justify-content: space-around; */

cryptide_project/src/Pages/Lobbies.tsx

@@ -36,10 +36,16 @@ function Lobbies() {
 
     const [searchTerm, setSearchTerm] = useState('');
 
+    const [showAvailable, setShowAvailable] = useState(true);
+
     const filteredLobbies = lobbyData.filter((lobby) =>
-    lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
+        lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
-);
+    );
+    const filteredLobbiesToShow = showAvailable
+    ? filteredLobbies.filter((lobby) => lobby.nbPlayer%2 == 0)
+    : filteredLobbies;
+
 
 
     const setFirstData = (first: boolean) => {
@@ -75,8 +81,26 @@ function Lobbies() {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
             />
+            <label style={{ marginLeft: '10px' }}>
+                Afficher disponibles
+                <input
+                    type="checkbox"
+                    checked={showAvailable}
+                    onChange={() => setShowAvailable(!showAvailable)}
+                />
+            </label>
+
+            <div>
+                <button style={{borderColor:'whitesmoke', borderRadius:'15px 0px 0px 15px', padding:'5px'}}
+                        onClick={() => setShowAvailable(false)}>Tous</button>
+                <button style={{borderColor:'whitesmoke', borderRadius:'0px 15px 15px 0px', padding:'5px'}}
+                        onClick={() => setShowAvailable(true)}>Dispo</button>
+            </div>
+
+
+
             <div className="lobbyList">
-                {filteredLobbies.map((lobby, index) => (
+                {filteredLobbiesToShow.map((lobby, index) => (
                 <LobbyContainer
                     key={index}
                     roomNum={lobby.roomNum}

cryptide_project/src/Pages/Lobby.css

@@ -41,6 +41,13 @@
     margin: 20px;
 }
 
+
+.NumbDiv{
+    display: flex;
+    align-items: start;
+    justify-content: start;
+    margin: auto 20px;
+}
 .codeDiv{
     display: flex;
     align-items: end;
@@ -48,7 +55,7 @@
     margin: auto 20px;
 }
 
-.codeDiv p{
+.codeDiv p, .NumbDiv p{
     font-style: italic;
     font-weight: bold;
     color: gray;

cryptide_project/src/Pages/Lobby.tsx

@@ -201,15 +201,26 @@ function Lobby() {
         <div className='lobby-container'>
             <div className='left-part'>
                 <div className='player-board'>
-                    <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
+                    <div>
-                        {
+                        <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
-                            codeShowed ? (
+                            {
-                                <p>Room : {room}</p>
+                                codeShowed ? (
-                            ) : (
+                                    <p>Room : {room}</p>
-                                <p>Room : ******</p>
+                                ) : (
-                            )
+                                    <p>Room : ******</p>
-                        }
+                                )
+                            }
+                        </div>
+                        <div className='NumbDiv'>
+                            {players.length == 6 ? (
+                                    <p style={{color:'darkred'}}>6/6 Players</p>
+                                ) : (
+                                    <p>{players.length}/6 Players</p>
+                                )
+                            }
+                        </div>
                     </div>
+
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
                     {players.map((player, index) => (
                         // <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
@@ -230,28 +241,6 @@ function Lobby() {
             <div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
 
             <div className='right-part'>
-                {/* <div className='title-param-div'>
-                    <img src={param} alt="param"/>
-                    <h2>Paramètre de la partie</h2>
-                </div>
-                <ul>
-                    <li><h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim</h4></li>
-                    <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>Niveau des bots : Facile </h4></li>
-                    <li><h4>Thèmes : basique </h4></li> */}
-                    {
-                        //? mettre un timer pour chaques personne ?
-                        //? indice avancé ? ==> négation, voisin du 2e degré etc.
-                    }
-                {/* </ul> */}
-                {/* <center >
-                    <button className='buttonNabImg' onClick={StartGame}>
-                        <img src={cible} alt="Button Image" height="50" width="50" />
-                        <p>{"la chasse !"}</p>
-                    </button>
-                </center> */}
                 <div className='lobbyR' 
                     style={{flexDirection:'column',
                             alignItems:'space-around'}}>
@@ -315,29 +304,6 @@ function Lobby() {
                         Démarrer la partie !
                     </button>
                 </div>
-                {/* <div className='centerDivH'>
-                <div>
-                    <label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
-                    <input
-                        type="number"
-                        id="numberInput"
-                        value={enteredNumber}
-                        onChange={handleNumberChange}
-                        min={20}
-                        max={60}/>
-                    <p>La valeur saisie : {enteredNumber}</p>
-                </div>
-
-
-                <div className='centerDivH'>
-                    <button className='button' onClick={StartGame}
-                        style={{ 
-                            backgroundColor: theme.colors.tertiary,
-                            borderColor: theme.colors.secondary
-                        }}>
-                        <img src={cible} alt="cible" height="40"/>
-                    </button>
-                </div> */}
             </div>
         </div>
     );