création de la page 'newplay' avec la fusion de la page play et des lobby comme demandé par le prof.. 🍱

cryptide_project/src/App.tsx

@@ -44,6 +44,7 @@ import messagesEn from './Translations/en.json';
 /* Gestion d' erreur */
 import ErrorBoundary from './Error/ErrorBoundary';
 import ErrorPage from './Error/ErrorPage';
+import NewPlay from './Pages/NewPlay';
 
 const messages = {
   fr: messagesFr,
@@ -79,7 +80,7 @@ function App() {
                   <Route path="/" element={<Home />} />
                   <Route path="/login" element={<Login />} />
                   <Route path="/signup" element={<SignUp />} />
-                  <Route path="/play" element={<Play/>} />
+                  <Route path="/play" element={<NewPlay/>} />
                   <Route path="/lobby" element={<Lobby/>} />
                   <Route path="/endgame" element={<EndGame/>} />
                   <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>

cryptide_project/src/Pages/Lobbies.tsx

@@ -56,7 +56,7 @@ function Lobbies() {
     );
 
     const filteredLobbiesToShow = showAvailable
-    ? filteredLobbies.filter((lobby) => lobby.started == false)
+    ? filteredLobbies.filter((lobby) => lobby.started == false && lobby.nbPlayer < 6)
     : filteredLobbies;
 
 
@@ -94,25 +94,19 @@ function Lobbies() {
 
     return(
         <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
-            <h1>Bienvenue dans le lobby des lobbies</h1>
             <input
                 type="text"
                 className='searchLobby'
                 placeholder="Rechercher un lobby..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
+                style={{width:'80%', margin:'10px'}}
             />
             
-            {/* <div>
-                <button style={{borderColor:'whitesmoke', borderRadius:'15px 0px 0px 15px', padding:'5px'}}
-                        onClick={() => setShowAvailable(false)}>Tous</button>
-                <button style={{borderColor:'whitesmoke', borderRadius:'0px 15px 15px 0px', padding:'5px'}}
-                        onClick={() => setShowAvailable(true)}>Dispo</button>
-            </div> */}
-
             <div style={{border:'solid 3px', borderColor:'lightgray', borderRadius:'20px', margin:'10px'}}>
                 <button
                     style={{
+                        width:'120px',
                         border:'solid',
                         borderStyle:'none',
                         borderRadius: '15px 0px 0px 15px',
@@ -126,6 +120,7 @@ function Lobbies() {
                 </button>
                 <button
                     style={{
+                        width:'120px',
                         border:'solid',
                         borderStyle:'none',
                         borderRadius: '0px 15px 15px 0px',

cryptide_project/src/Pages/NewPlay.tsx

@@ -29,6 +29,7 @@ import { loadImageAsync } from '../ImageHelper';
 import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Lobbies from './Lobbies';
 
 
 let cptNavigation = 0
@@ -231,24 +232,10 @@ function NewPlay() {
     return (
 
         <div className="MainContainer">
-            <div className="leftContainer">
-                {/* <button className='ButtonNav'>
-                    Param
-                </button> */}
-                {/* <ButtonImgNav dest='/signup' img={defaultImg} text="Gestion du compte"/> */}
-            </div>
-            <div className="MidContainer">
-                <div>
-                    <h2>
-                        {user && user.pseudo}
-                    </h2>
-                    <img src={user?.profilePicture}
-                            height='300'
-                            width='300'
-                            alt="Person"
-                            />
-                </div>
-                <div className='buttonGroupVertical'>
+            <div className="NewleftContainer">
+
+                {/* Menu de boutons */}
+                <div className='NewbuttonGroupVertical'>
                     <button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
                     
                     
@@ -277,8 +264,17 @@ function NewPlay() {
                     <button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                     {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>}
                 </div>
+            
+                {/* Lobbies */}
+                <div style={{border:'solid 1px lightgray', borderRadius:'15px', marginTop:'20px'}}>
+                    <Lobbies/>
                 </div>
-            <div className='rightContainer'>
+            
+            </div>
+            
+            {/* <div className="MidContainer">
+            </div> */}
+            <div className='NewrightContainer'>
                 {user && (<ScoreBoard Player={user}/>)}
             </div>
         </div>

cryptide_project/src/Pages/Play.css

@@ -35,7 +35,18 @@
     width: 30%;
 }
 
+.NewleftContainer{    
+    margin: 20px 30px;
+    width: 70%;
+}
 
+.NewrightContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 30%;
+}
 
 /* .textBoard div{
     display: flex;
@@ -56,6 +67,13 @@
     flex-direction: column;
 }
 
+.NewbuttonGroupVertical{
+    display: flex;
+    justify-content:space-around;
+    align-items:start;
+}
+
+
 .ButtonNav{
     margin: 15px 0;
     width:200px;