ajout de la page du lobby (pas totalement complète) ✨

cryptide_project/src/App.tsx

@@ -8,6 +8,7 @@ import Home from './Pages/Home';
 import Login from './Pages/LoginForm';
 import SignUp from './Pages/SignUpForm';
 import Play from './Pages/Play';
+import Lobby from './Pages/Lobby';
 
 /* Component */
 import AppNavbar from './Components/NavBar';
@@ -60,6 +61,7 @@ function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/play" element={<Play/>} />
+        <Route path="/lobby" element={<Lobby/>} />
       </Routes>
     </BrowserRouter>
   </IntlProvider>

cryptide_project/src/Components/PlayerItemList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import '../Style/Global.css';
+
+//@ts-ignore
+function PlayerItemList({ pdp, name}) {
+    return (
+        <div className='item-horizontal-div'>
+            <img src={pdp} alt='player-image' height="100" width="100"/>
+            <h4>{name}</h4>
+        </div>
+    )
+}
+
+export default PlayerItemList;

cryptide_project/src/Pages/Lobby.css

@@ -0,0 +1,44 @@
+
+
+.lobby-container {
+    display: flex;
+    background-color: #fff;
+    min-height: 100vh;
+    font-size: calc(10px + 2vmin);
+    color: #2A4541;
+}
+
+.left-section {
+    padding: 20px;
+    margin-right: 10px; 
+    margin-left: 30px; 
+}
+
+.lobby-vertical-divider{
+    width: 5px;
+    background-color: #2A4541;
+}
+
+.right-section {
+    padding: 20px;
+    margin: 10px;
+}
+
+
+.player-board{
+    height: 100%;
+    width: max-content;
+    background-color: rgb(243, 241, 235);
+    border-radius: 20px;
+
+    padding: 20px 0px;
+    margin: 10px 15px;
+}
+
+.title-param-div{
+    display: flex;
+    flex-direction: row;
+    margin: 20px;
+}
+
+

cryptide_project/src/Pages/Lobby.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import './Lobby.css';
+import PlayerItemList from '../Components/PlayerItemList'
+import Person from '../res/img/Person.png';
+import Bot from '../res/img/bot.png';
+import param from '../res/icon/param.png';
+import cible from '../res/icon/cible.png';
+import ButtonImgNav from '../Components/ButtonImgNav';
+
+function Lobby() {
+    return (
+        <div className='lobby-container'>
+            <div className='left-part'>
+                <div className='player-board'>
+                    {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
+                    <PlayerItemList pdp={Person} name="Dummy"/>
+                    <PlayerItemList pdp={Bot} name="Boat"/>
+                    <PlayerItemList pdp={Bot} name="Bot-tom"/>
+                </div>
+            </div>
+
+            <div className="lobby-vertical-divider"></div>
+
+            <div className='right-part'>
+                <div className='title-param-div'>
+                    <img src={param} alt="param"/>
+                    <h2>Paramètre de la partie</h2>
+                </div>
+                <ul>
+                    <li><h4>paramètre surper important pour la partieparamètre surper important pour la partieparamètre surper important pour la partieparamètre surper important pour la partieparamètre surper important pour la partie</h4></li>
+                    <li><h4>paramètre surper important pour la partie</h4></li>
+                    <li><h4>paramètre surper important pour la partie</h4></li>
+                    <li><h4>paramètre surper important pour la partie</h4></li>
+                    <li><h4>paramètre surper important pour la partie</h4></li>
+                    <li><h4>paramètre surper important pour la partie</h4></li>
+                </ul>
+                <center>
+                    <ButtonImgNav dest='/' img={cible} text=' À la chasse !'/> {/* page de baptiste ici */}
+                </center>
+            </div>
+        </div>
+    );
+}
+
+export default Lobby;

cryptide_project/src/Pages/Play.tsx

@@ -40,7 +40,7 @@ function Play() {
                             />
                 </div>
                 <div className='buttonGroupVertical'>
-                    <Link to="/">
+                    <Link to="/lobby">
                         <button className="ButtonNav"> Jouer seul </button>
                     </Link>
                     <Link to="/">

cryptide_project/src/Style/Global.css

@@ -1,6 +1,13 @@
 
-
+.item-horizontal-div{
-
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color:#fff;
+    border-radius: 15px;
+    width: 500px;
+    margin: 10px 20px;
+}
 
 /**Form**/
 .form-container {
@@ -11,4 +18,4 @@
 
 form{
     margin : auto 150px;
-}
+}