From 2d31c1ddd274d57f0374f9354d6be573629d4bab Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 29 Nov 2023 15:30:49 +0100
Subject: [PATCH] =?UTF-8?q?ajout=20du=20modal=20et=20de=20la=20navigation?=
 =?UTF-8?q?=20refus=C3=A9=20si=20jamais=20la=20salle=20est=20pleinne=20:za?=
 =?UTF-8?q?p:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/LobbyContainer.tsx         | 62 ++++++++++++++++---
 cryptide_project/src/Pages/Lobbies.css        |  7 +++
 2 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx
index 8b5b96a..9bb30fc 100644
--- a/cryptide_project/src/Components/LobbyContainer.tsx
+++ b/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);
-        } else {
-            alert('La salle est pleine. Impossible de rejoindre.');
+        
+        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}>
+        <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>
     );
 }
diff --git a/cryptide_project/src/Pages/Lobbies.css b/cryptide_project/src/Pages/Lobbies.css
index b32dfe0..2a69478 100644
--- a/cryptide_project/src/Pages/Lobbies.css
+++ b/cryptide_project/src/Pages/Lobbies.css
@@ -15,6 +15,7 @@
 
     padding: 20px;
     margin: 20px;
+    cursor: pointer;
 }
 
 .lobbyList{
@@ -32,4 +33,10 @@
     padding: 15px;
 
     width: 50%;
+}
+
+
+h1{
+    margin: 50px !important;
+    font-family: "Raleway", sans-serif;
 }
\ No newline at end of file