ajout du modal et de la navigation refusé si jamais la salle est pleinne ⚡

cryptide_project/src/Components/LobbyContainer.tsx

@@ -3,6 +3,11 @@ 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
@@ -13,28 +18,71 @@ interface LobbyContainerProps {
 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 (nbPlayer < 6) {
+        
-            navigate(dest);
+        if (show){
-        } else {
+            handleClose()
-            alert('La salle est pleine. Impossible de rejoindre.');
+        }
+        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}>
+        <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><u>{HeadPlayer.pseudo}</u></h3>
+                    <h3><b>{HeadPlayer.pseudo}</b></h3>
                 <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
-                    <h2>{nbPlayer}/6</h2>
+                    <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>
     );
 }

cryptide_project/src/Pages/Lobbies.css

@@ -15,6 +15,7 @@
 
     padding: 20px;
     margin: 20px;
+    cursor: pointer;
 }
 
 .lobbyList{
@@ -33,3 +34,9 @@
 
     width: 50%;
 }
+
+
+h1{
+    margin: 50px !important;
+    font-family: "Raleway", sans-serif;
+}