Merge pull request 'lobbyfix 🎨' (#93) from lobbyfix into master

Reviewed-on: #93

cryptide_project/src/Components/LobbyContainer.tsx

@@ -8,83 +8,149 @@ 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
         HeadPlayer : Player
         nbPlayer : number
         setFirst: (first: boolean) => void
+        started : boolean
     //? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
 }
 
-const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst}) => {
+const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst, started}) => {
     const theme=useTheme();
 
     const navigate = useNavigate();
     const dest = '/lobby?room=' + roomNum;
 
     //* Modal
-    const [show, setShow] = useState(false);
+    const [showFull, setShowFull] = useState(false);
+    const [showStart, setShowStart] = useState(false);
 
-    const handleClose = () => setShow(false);
+    const handleClose = () => {
-    const handleShow = () => setShow(true);
+        setShowFull(false) 
+        setShowStart(false)
+    };
+    
+    const handleShowFull = () => setShowFull(true);
+    const handleShowStart = () => setShowStart(true);
 
     const handleContainerClick = () => {
         
-        if (show){
+        if (showFull || showStart){
             handleClose()
         }
         else{
-            if (nbPlayer < 6) {
+            if (nbPlayer < 6 && !started) {
                 socket.off("request lobbies")
                 setFirst(true)
                 navigate(dest);
-            } else {
+            }
-                handleShow()
+            else if(started){
-                //alert('La salle est pleine. Impossible de rejoindre.');
+                handleShowStart()
+            }
+            else {
+                handleShowFull()
             }
         }
     };
 
+
+    //* 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>
+    );
+
+    //* autre
+    //@ts-ignore
+    const renderTooltip = (props) => (
+        <Tooltip id="button-tooltip" {...props}>
+            Rejoindre le lobby !
+        </Tooltip>
+    );
+
+    //let IsInGame = true;
+
     let stylefull;
     let colorfull;
+    let actualRender = renderTooltip;
+    let bgcol = 'white';
+
     if (nbPlayer >= 6) {
         stylefull = "darkred"
         colorfull = "darkred"
+        actualRender = renderTooltipFull
+
     }
     else {
         stylefull = "whitesmoke"
         colorfull = "black"
     }
     
+    if(started){
+        bgcol = 'lightgrey' //! le hover ne marche plus
+        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 className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull, backgroundColor:bgcol}}>
-                <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
+            <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
-                    <h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
+                <h6><i>Room : {roomNum}</i></h6>
-                </div>
+            </header>
-{/* 
+            <hr/>
-                <Button onClick={handleContainerClick} variant='danger'>
+                <h3><b>{HeadPlayer.pseudo}</b></h3>
-                    click
+            <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
-                </Button> */}
+                <h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
-
+            </div>
-                <Modal show={show} onHide={handleClose}>
+
-                    <Modal.Header closeButton>
+            {/* Modals */}
+            <Modal show={showFull} onHide={handleClose}>
+                <Modal.Header closeButton>
                     <Modal.Title>Salle pleine</Modal.Title> 
-                    </Modal.Header>
+                </Modal.Header>
-                    <Modal.Body>La salle est pleine, il est impossible d'y aller pour le moment !</Modal.Body>
+                <Modal.Body>La salle est pleine, il est impossible d'y aller pour le moment !</Modal.Body>
-                    <Modal.Footer>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Ok
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
+            <Modal show={showStart} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>La partie a déjà commencée</Modal.Title> 
+                </Modal.Header>
+                <Modal.Body>La partie a déjà commencée, il est impossible d'y aller pour le moment !</Modal.Body>
+                <Modal.Footer>
                     <Button variant="secondary" onClick={handleClose}>
                         Ok
                     </Button>
-                    </Modal.Footer>
+                </Modal.Footer>
-                </Modal>
+            </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

@@ -39,10 +39,26 @@ function Lobbies() {
 
     const [searchTerm, setSearchTerm] = useState('');
 
+    const [showAvailable, setShowAvailable] = useState(true);
+
+    const handleShowAllClick = () => {
+        setShowAvailable(false);
+    };
+    
+    const handleShowAvailableClick = () => {
+        setShowAvailable(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.started == false)
+    : filteredLobbies;
+
 
 
     const setFirstData = (first: boolean) => {
@@ -86,14 +102,52 @@ function Lobbies() {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
             />
+
+            {/* <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 style={{border:'solid 3px', borderColor:'lightgray', borderRadius:'20px', margin:'10px'}}>
+            <button
+                style={{
+                    border:'solid',
+                    borderStyle:'none',
+                    borderRadius: '15px 0px 0px 15px',
+                    borderWidth: '2px',
+                    padding: '10px 15px',
+                    backgroundColor: !showAvailable ? 'white' : 'lightgray',
+                }}
+                onClick={handleShowAllClick}
+            >
+                Tous
+            </button>
+            <button
+                style={{
+                    border:'solid',
+                    borderStyle:'none',
+                    borderRadius: '0px 15px 15px 0px',
+                    padding: '10px 15px',
+                    backgroundColor: showAvailable ? 'white' : 'lightgray',
+                }}
+                onClick={handleShowAvailableClick}
+            >
+                Disponible
+            </button>
+        </div>
+
+
             <div className="lobbyList">
-                {filteredLobbies.map((lobby, index) => (
+                {filteredLobbiesToShow.map((lobby, index) => (
                 <LobbyContainer
                     key={index}
                     roomNum={lobby.roomNum}
                     HeadPlayer={lobby.headPlayer}
                     nbPlayer={lobby.nbPlayer}
                     setFirst={setFirstData}
+                    started={lobby.started}
                 />
                 ))}
             </div>

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

@@ -254,15 +254,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}/>
@@ -283,28 +294,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'}}>
@@ -368,29 +357,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>
     );