From 6cc16a1448568e9d3eedd8559b4b5606ac575f8f Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 1 Dec 2023 12:54:15 +0100
Subject: [PATCH] ajout du swiper pour trier les lobby (pour linstant sur les
 membre odd/even :zap:

---
 .../src/Components/LobbyContainer.tsx         |  82 ++++++++++++------
 cryptide_project/src/Pages/Lobbies.css        |   4 +
 cryptide_project/src/Pages/Lobbies.tsx        |  32 ++++++-
 cryptide_project/src/Pages/Lobby.css          |   9 +-
 cryptide_project/src/Pages/Lobby.tsx          |  72 ++++-----------
 cryptide_project/src/server/db/socialgraph.db | Bin 28672 -> 28672 bytes
 6 files changed, 116 insertions(+), 83 deletions(-)

diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx
index 4c4fe51..fb551e5 100644
--- a/cryptide_project/src/Components/LobbyContainer.tsx
+++ b/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}}>
-                <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>
+    <OverlayTrigger
+        placement="top"
+        delay={{ show: 250, hide: 400 }}
+        overlay={actualRender}>
 
+        <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>
     );
 }
 
diff --git a/cryptide_project/src/Pages/Lobbies.css b/cryptide_project/src/Pages/Lobbies.css
index 2a69478..1da3c0f 100644
--- a/cryptide_project/src/Pages/Lobbies.css
+++ b/cryptide_project/src/Pages/Lobbies.css
@@ -18,6 +18,10 @@
     cursor: pointer;
 }
 
+.lobbyMainContainer:hover{
+    background-color: whitesmoke;
+}
+
 .lobbyList{
     display: flex;
     /* justify-content: space-around; */
diff --git a/cryptide_project/src/Pages/Lobbies.tsx b/cryptide_project/src/Pages/Lobbies.tsx
index 58895a6..d074e6f 100644
--- a/cryptide_project/src/Pages/Lobbies.tsx
+++ b/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.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
-);
+        lobby.roomNum.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}
diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 5fbe13c..869e661 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/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;
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index 75ac642..43555c0 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/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)}>
-                        {
-                            codeShowed ? (
-                                <p>Room : {room}</p>
-                            ) : (
-                                <p>Room : ******</p>
-                            )
-                        }
+                    <div>
+                        <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
+                            {
+                                codeShowed ? (
+                                    <p>Room : {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>
     );
diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db
index 70e1a19316f1006fcc912a40a120deb001f82396..481c484971a3af38df41d95316268e98ee892556 100644
GIT binary patch
delta 95
zcmZp8z}WDBae_2s_Cy(H#_Wv=3*+Var!esHS2FN_=YPlll>ZL@W&TtA2l;pKujgOJ
wKbOC9vqC~7zmk9e8v`RJJ0p|*0|qb<VHad$;Nak36a{iQIXO5c&yG(80EZM90{{R3

delta 80
zcmV-W0I&am-~oW(0gxL3YLOg60cx>ep<f>W000dSivSPz5AF};58Mya56Tb054aDn
m52g>D50tYYU|A25kP;9F5e5JV2nYcc2M`7T2?z+2n_p!rbQe<q