diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx index 4c4fe51..fb551e5 100644 --- a/cryptide_project/src/Components/LobbyContainer.tsx +++ b/cryptide_project/src/Components/LobbyContainer.tsx @@ -8,6 +8,8 @@ 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 @@ -46,45 +48,75 @@ const LobbyContainer: React.FC = ({roomNum, HeadPlayer, nbP } }; + + //* popup pour salle pleine + //@ts-ignore + const renderTooltipFull = (props) => ( + + Salle Pleine ! + + ); + + //* popup pour partie déjà lancé + //@ts-ignore + const renderTooltipInGame = (props) => ( + + En Jeu ! + + ); + + + //let IsInGame = true; + let stylefull; let colorfull; + let actualRender; + if (nbPlayer >= 6) { stylefull = "darkred" colorfull = "darkred" + actualRender = renderTooltipFull } + // else if (IsInGame){ + // stylefull = "darkgreen" + // colorfull = "darkgreen" + // } else { stylefull = "whitesmoke" colorfull = "black" + actualRender = renderTooltipInGame } + + return( -
-
-
Room : {roomNum}
-
-
-

{HeadPlayer.pseudo}

-
-

{nbPlayer}/6

-
-{/* - */} - - - - Salle pleine - - La salle est pleine, il est impossible d'y aller pour le moment ! - - - - + +
+
+
Room : {roomNum}
+
+
+

{HeadPlayer.pseudo}

+
+

{nbPlayer}/6

+
+ + + Salle pleine + + La salle est pleine, il est impossible d'y aller pour le moment ! + + + +
+
); } diff --git a/cryptide_project/src/Pages/Lobbies.css b/cryptide_project/src/Pages/Lobbies.css index 2a69478..1da3c0f 100644 --- a/cryptide_project/src/Pages/Lobbies.css +++ b/cryptide_project/src/Pages/Lobbies.css @@ -18,6 +18,10 @@ cursor: pointer; } +.lobbyMainContainer:hover{ + background-color: whitesmoke; +} + .lobbyList{ display: flex; /* justify-content: space-around; */ diff --git a/cryptide_project/src/Pages/Lobbies.tsx b/cryptide_project/src/Pages/Lobbies.tsx index 58895a6..d074e6f 100644 --- a/cryptide_project/src/Pages/Lobbies.tsx +++ b/cryptide_project/src/Pages/Lobbies.tsx @@ -36,10 +36,16 @@ function Lobbies() { const [searchTerm, setSearchTerm] = useState(''); + const [showAvailable, setShowAvailable] = useState(true); + const filteredLobbies = lobbyData.filter((lobby) => - lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) || - lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase()) -); + lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) || + lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase()) + ); + const filteredLobbiesToShow = showAvailable + ? filteredLobbies.filter((lobby) => lobby.nbPlayer%2 == 0) + : filteredLobbies; + const setFirstData = (first: boolean) => { @@ -75,8 +81,26 @@ function Lobbies() { value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> + + +
+ + +
+ + +
- {filteredLobbies.map((lobby, index) => ( + {filteredLobbiesToShow.map((lobby, index) => (
-
setCodeShowed(!codeShowed)}> - { - codeShowed ? ( -

Room : {room}

- ) : ( -

Room : ******

- ) - } +
+
setCodeShowed(!codeShowed)}> + { + codeShowed ? ( +

Room : {room}

+ ) : ( +

Room : ******

+ ) + } +
+
+ {players.length == 6 ? ( +

6/6 Players

+ ) : ( +

{players.length}/6 Players

+ ) + } +
+ {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/} {players.map((player, index) => ( // @@ -230,28 +241,6 @@ function Lobby() {
- {/*
- param -

Paramètre de la partie

-
-
    -
  • 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

  • -
  • paramètre super important pour la partie

  • -
  • paramètre super important pour la partie

  • -
  • paramètre super important pour la partie

  • -
  • Niveau des bots : Facile

  • -
  • Thèmes : basique

  • */} - { - //? mettre un timer pour chaques personne ? - //? indice avancé ? ==> négation, voisin du 2e degré etc. - } - {/*
*/} - {/*
- -
*/}
@@ -315,29 +304,6 @@ function Lobby() { Démarrer la partie !
- {/*
-
- - -

La valeur saisie : {enteredNumber}

-
- - -
- -
*/}
); diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db index 70e1a19..481c484 100644 Binary files a/cryptide_project/src/server/db/socialgraph.db and b/cryptide_project/src/server/db/socialgraph.db differ