From 781904f63b49e691d5aee73dc6d9893ef18b4adf Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 29 Nov 2023 14:01:23 +0100 Subject: [PATCH 1/3] ajout de la page lobby de lobby pour rejoindre un jeu :rocket: --- cryptide_project/src/App.tsx | 5 +- .../src/Components/LobbyContainer.tsx | 30 ++++++++++ cryptide_project/src/Pages/Lobbies.css | 35 +++++++++++ cryptide_project/src/Pages/Lobbies.tsx | 59 +++++++++++++++++++ cryptide_project/src/Pages/Play.tsx | 2 +- 5 files changed, 128 insertions(+), 3 deletions(-) create mode 100644 cryptide_project/src/Components/LobbyContainer.tsx create mode 100644 cryptide_project/src/Pages/Lobbies.css create mode 100644 cryptide_project/src/Pages/Lobbies.tsx diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index f6a601f..408b5eb 100644 --- a/cryptide_project/src/App.tsx +++ b/cryptide_project/src/App.tsx @@ -13,9 +13,10 @@ import Play from './Pages/Play'; import Profile from './Pages/Profile'; import Lobby from './Pages/Lobby'; import InGame from './Pages/InGame'; - import EndGame from './Pages/EndGame'; import InfoPage from './Pages/InfoPage'; +import SoloGame from './Pages/SoloGame'; +import Lobbies from './Pages/Lobbies'; /* Component */ import AppNavbar from './Components/NavBar'; @@ -38,7 +39,6 @@ import 'bootstrap/dist/css/bootstrap.min.css'; /* Internationnalisation */ import messagesFr from './Translations/fr.json'; import messagesEn from './Translations/en.json'; -import SoloGame from './Pages/SoloGame'; const messages = { fr: messagesFr, @@ -86,6 +86,7 @@ function App() { }/> } /> } /> + }/> {/* }/> */} diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx new file mode 100644 index 0000000..e38d1d5 --- /dev/null +++ b/cryptide_project/src/Components/LobbyContainer.tsx @@ -0,0 +1,30 @@ +import React, { useEffect, useState } from 'react'; +import { useTheme } from '../Style/ThemeContext'; +import Player from '../model/Player'; + + +interface LobbyContainerProps { + roomNum : string + HeadPlayer : Player + nbPlayer : number + //? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ? +} + +const LobbyContainer: React.FC = ({roomNum, HeadPlayer, nbPlayer}) => { + const theme=useTheme(); + + return( +
+
+
Room : {roomNum}
+
+
+

{HeadPlayer.pseudo}

+
+

{nbPlayer}/6

+
+
+ ); +} + +export default LobbyContainer; diff --git a/cryptide_project/src/Pages/Lobbies.css b/cryptide_project/src/Pages/Lobbies.css new file mode 100644 index 0000000..b32dfe0 --- /dev/null +++ b/cryptide_project/src/Pages/Lobbies.css @@ -0,0 +1,35 @@ +.lobbyMainContainer{ + display: flex; + flex-direction: column; + + background-color: white; + + border: solid 1px whitesmoke; + border-radius: 15px; + box-shadow: 5px 5px 5px rgb(246, 246, 246); + + width: 300px; + /* max-width: 300px; */ + /* max-width: 20%; */ + max-height: 200px; + + padding: 20px; + margin: 20px; +} + +.lobbyList{ + display: flex; + /* justify-content: space-around; */ + /* columns: 4; */ + flex-wrap: wrap; + + justify-content: center; +} + +.searchLobby{ + border: solid 1px whitesmoke; + border-radius: 15px; + padding: 15px; + + width: 50%; +} \ No newline at end of file diff --git a/cryptide_project/src/Pages/Lobbies.tsx b/cryptide_project/src/Pages/Lobbies.tsx new file mode 100644 index 0000000..a73ad56 --- /dev/null +++ b/cryptide_project/src/Pages/Lobbies.tsx @@ -0,0 +1,59 @@ +import React, { useEffect, useState } from 'react'; + +/* Style */ +import './Lobbies.css'; +import "../Style/Global.css" +import { useTheme } from '../Style/ThemeContext'; +import LobbyContainer from '../Components/LobbyContainer'; +import Player from '../model/Player'; +import User from '../model/User'; + + +function Lobbies() { + const theme=useTheme(); + + + const lobbyData = [ + { roomNum: '63194', headPlayer: new User('1', 'Emma', '', null, null), nbPlayer: 6 }, + { roomNum: '81194', headPlayer: new User('2', 'Ray', '', null, null), nbPlayer: 1 }, + { roomNum: '22194', headPlayer: new User('3', 'Norman', '', null, null), nbPlayer: 4 }, + { roomNum: 'null', headPlayer: new User('null', 'tnull', '', null, null), nbPlayer: 1 }, + { roomNum: '111111', headPlayer: new User('11', '1111111', '', null, null), nbPlayer: 1 }, + { roomNum: '741852963', headPlayer: new User('3', 'Guest_741852963', '', null, null), nbPlayer: 6 }, + ]; + + + const [searchTerm, setSearchTerm] = useState(''); + + const filteredLobbies = lobbyData.filter((lobby) => + lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) || + lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase()) +); + + + + return( +
+

Bienvenue dans le lobby des lobbies

+ setSearchTerm(e.target.value)} + /> +
+ {filteredLobbies.map((lobby, index) => ( + + ))} +
+
+ ); +} + +export default Lobbies; diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index 4b2cc93..f9442f7 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -253,7 +253,7 @@ function Play() { - + From dddbaffe471ded7d512d09136aca4acb75b11ce7 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 29 Nov 2023 14:32:19 +0100 Subject: [PATCH 2/3] ajout de la navigation vers les lobby :sparkles: --- .../src/Components/LobbyContainer.tsx | 34 +++++++++++++------ cryptide_project/src/Pages/Lobby.tsx | 8 +---- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/cryptide_project/src/Components/LobbyContainer.tsx b/cryptide_project/src/Components/LobbyContainer.tsx index e38d1d5..8b5b96a 100644 --- a/cryptide_project/src/Components/LobbyContainer.tsx +++ b/cryptide_project/src/Components/LobbyContainer.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; import { useTheme } from '../Style/ThemeContext'; import Player from '../model/Player'; - - +import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; interface LobbyContainerProps { roomNum : string HeadPlayer : Player @@ -13,16 +13,28 @@ interface LobbyContainerProps { const LobbyContainer: React.FC = ({roomNum, HeadPlayer, nbPlayer}) => { const theme=useTheme(); + const navigate = useNavigate(); + const dest = '/lobby?room=' + roomNum; + + const handleContainerClick = () => { + if (nbPlayer < 6) { + navigate(dest); + } else { + alert('La salle est pleine. Impossible de rejoindre.'); + } + }; + + return( -
-
-
Room : {roomNum}
-
-
-

{HeadPlayer.pseudo}

-
-

{nbPlayer}/6

-
+
+
+
Room : {roomNum}
+
+
+

{HeadPlayer.pseudo}

+
+

{nbPlayer}/6

+
); } diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 0d27296..233f3b0 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -52,13 +52,7 @@ let gameStarted = false function Lobby() { const theme=useTheme(); const navigate = useNavigate(); - - //@ts-ignore - const handleNumberChange = (event) => { - const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10))); - setEnteredNumber(newNumber); - }; - + const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame(); const {user, setUserData, manager, login} = useAuth() From 2d31c1ddd274d57f0374f9354d6be573629d4bab Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 29 Nov 2023 15:30:49 +0100 Subject: [PATCH 3/3] =?UTF-8?q?ajout=20du=20modal=20et=20de=20la=20navigat?= =?UTF-8?q?ion=20refus=C3=A9=20si=20jamais=20la=20salle=20est=20pleinne=20?= =?UTF-8?q?:zap:?= 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 = ({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( -
+
Room : {roomNum}
-

{HeadPlayer.pseudo}

+

{HeadPlayer.pseudo}

-

{nbPlayer}/6

+

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