diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx index fb551e5..313bde6 100644 --- a/cryptide_project/src/Components/LobbyContainer.tsx +++ b/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 = ({roomNum, HeadPlayer, nbPlayer, setFirst}) => { +const LobbyContainer: React.FC = ({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 handleShow = () => setShow(true); + const handleClose = () => { + 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() - //alert('La salle est pleine. Impossible de rejoindre.'); + } + else if(started){ + handleShowStart() + } + else { + handleShowFull() } } }; @@ -65,25 +75,34 @@ const LobbyContainer: React.FC = ({roomNum, HeadPlayer, nbP ); + //* autre + //@ts-ignore + const renderTooltip = (props) => ( + + Rejoindre le lobby ! + + ); //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 = ({roomNum, HeadPlayer, nbP delay={{ show: 250, hide: 400 }} overlay={actualRender}> -
+
Room : {roomNum}
@@ -104,17 +123,32 @@ const LobbyContainer: React.FC = ({roomNum, HeadPlayer, nbP

{nbPlayer}/6

- + + {/* Modals */} + - Salle pleine + Salle pleine La salle est pleine, il est impossible d'y aller pour le moment ! - + + + + + La partie a déjà commencée + + La partie a déjà commencée, il est impossible d'y aller pour le moment ! + + + + +
); diff --git a/cryptide_project/src/Pages/Lobbies.tsx b/cryptide_project/src/Pages/Lobbies.tsx index d074e6f..6ab90c2 100644 --- a/cryptide_project/src/Pages/Lobbies.tsx +++ b/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)} /> -