gestion des salles déjà lancée ⚡

cryptide_project/src/Components/LobbyContainer.tsx

@@ -16,34 +16,44 @@ interface LobbyContainerProps {
         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()
             }
         }
     };
@@ -65,25 +75,34 @@ const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbP
         </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;
+    let actualRender = renderTooltip;
+    let bgcol = 'white';
 
     if (nbPlayer >= 6) {
         stylefull = "darkred"
         colorfull = "darkred"
         actualRender = renderTooltipFull
+
     }
-    // else if (IsInGame){
-    //     stylefull = "darkgreen"
-    //     colorfull = "darkgreen"
-    // }
     else {
         stylefull = "whitesmoke"
         colorfull = "black"
+    }
+    
+    if(started){
+        bgcol = 'lightgrey' //! le hover ne marche plus
         actualRender = renderTooltipInGame
     }
 
@@ -95,7 +114,7 @@ const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbP
         delay={{ show: 250, hide: 400 }}
         overlay={actualRender}>
 
-        <div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull}}>
+        <div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull, backgroundColor:bgcol}}>
             <header style={{height:'20%', display:'flex', justifyContent:'end'}}>
                 <h6><i>Room : {roomNum}</i></h6>
             </header>
@@ -104,17 +123,32 @@ const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbP
             <div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
                 <h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
             </div>
-            <Modal show={show} onHide={handleClose}>
+
+            {/* Modals */}
+            <Modal show={showFull} onHide={handleClose}>
                 <Modal.Header closeButton>
-                <Modal.Title>Salle pleine</Modal.Title>
+                    <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}>
+                    <Button variant="secondary" onClick={handleClose}>
-                    Ok
+                        Ok
-                </Button>
+                    </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>
+
         </div>
     </OverlayTrigger>
     );

cryptide_project/src/Pages/Lobbies.tsx

@@ -36,14 +36,15 @@ function Lobbies() {
 
     const [searchTerm, setSearchTerm] = useState('');
 
-    const [showAvailable, setShowAvailable] = useState(true);
+    const [showAvailable, setShowAvailable] = useState(false);
 
     const filteredLobbies = lobbyData.filter((lobby) =>
         lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
         lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
     );
+
     const filteredLobbiesToShow = showAvailable
-    ? filteredLobbies.filter((lobby) => lobby.nbPlayer%2 == 0)
+    ? filteredLobbies.filter((lobby) => lobby.started == false)
     : filteredLobbies;
 
 
@@ -81,14 +82,6 @@ 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'}}
@@ -107,6 +100,7 @@ function Lobbies() {
                     HeadPlayer={lobby.headPlayer}
                     nbPlayer={lobby.nbPlayer}
                     setFirst={setFirstData}
+                    started={lobby.started}
                 />
                 ))}
             </div>