ajout de la page Play ⚡

cryptide_project/src/App.tsx

@@ -24,6 +24,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 /* Internationnalisation */
 import messagesFr from './Translations/fr.json';
 import messagesEn from './Translations/en.json';
+import Play from './Pages/Play';
 
 const messages = {
   fr: messagesFr,
@@ -60,6 +61,7 @@ function App() {
         <Route path="/jouer" element={<Jouer />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
+        <Route path="/play" element={<Play/>} />
       </Routes>
     </BrowserRouter>
   </IntlProvider>

cryptide_project/src/Components/NavBar.tsx

@@ -15,7 +15,7 @@ import { HiLanguage } from 'react-icons/hi2';
 import './NavBar.css';
 
 // @ts-ignore
-function AppNavbar({ changeLocale}) {
+function AppNavbar({changeLocale}) {
     return (
         <Navbar expand="lg" className="custom-navbar">
         <Container>
@@ -29,10 +29,10 @@ function AppNavbar({ changeLocale}) {
             <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
                 <NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
-                    <NavDropdown.Item href="jouer"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
+                    <NavDropdown.Item href="play"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
                     <NavDropdown.Divider />
-                    <NavDropdown.Item href="jouer"><FormattedMessage id="create_room"/> </NavDropdown.Item>
+                    <NavDropdown.Item href="play"><FormattedMessage id="create_room"/> </NavDropdown.Item>
-                    <NavDropdown.Item href="jouer"><FormattedMessage id="join"/> </NavDropdown.Item>
+                    <NavDropdown.Item href="play"><FormattedMessage id="join"/> </NavDropdown.Item>
                 </NavDropdown>
             </Nav>
             <div className='leftdiv'>

cryptide_project/src/Pages/Play.css

@@ -0,0 +1,89 @@
+
+.MainContainer{
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around
+}
+
+.MidContainer{
+    display: flex;
+    /* justify-content:center; */
+    align-items:center;
+    flex-direction: column;
+
+    margin-top: 15px;
+    width: 30%;
+}
+
+.MidContainer div h2 {
+    display: flex;
+    justify-content: center;
+}
+/* 
+.MidContainer div {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+} */
+
+.leftContainer{
+    width: 30%;
+}
+
+.rightContainer{
+    width: 30%;
+}
+
+.LeaderBoardiv{
+    background-color: #D7D4C6;
+    opacity: 80%;
+    border-radius: 25px;
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    margin: 15px;
+}
+
+
+.textBoard{
+    display: flex;
+    flex-wrap: column;
+    justify-content: space-between;
+    width: 300px;
+}
+
+/* .textBoard div{
+    display: flex;
+    flex-direction:column-reverse;
+    justify-content:space-between
+} */
+
+/* .textBoard div:nth-child(2){
+    display: flex;
+    justify-content: end;
+} */
+
+/**Button**/
+.buttonGroupVertical{
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    flex-direction: column;
+}
+
+.ButtonNav{
+    margin: 15px 0;
+    width:200px;
+    height: 8vh;
+    
+
+    background-color: #85C9C2;
+    color: #2A4541;
+    border-radius: 15px;
+    border-width: 0;
+
+    font-size:larger;
+}

cryptide_project/src/Pages/Play.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import './Play.css';
+
+import Person from '../res/img/Person.png';
+import { Link } from 'react-router-dom';
+
+function Play() {
+    return (
+
+        <div className="MainContainer">
+            <div className="leftContainer">
+                <button className='ButtonNav'>
+                    Param
+                </button>
+            </div>
+            <div className="MidContainer">
+                <div>
+                    <h2>
+                        Guest 177013
+                    </h2>
+                    <img src={Person}
+                            height='300'
+                            width='300'
+                            alt="Person"
+                            />
+                </div>
+                <div className='buttonGroupVertical'>
+                    <Link to="/">
+                        <button className="ButtonNav"> Jouer seul </button>
+                    </Link>
+                    <Link to="/">
+                        <button className="ButtonNav"> Créer une partie </button>
+                    </Link>
+                    <Link to="/">
+                        <button className="ButtonNav"> Rejoindre </button>
+                    </Link>
+                </div>
+            </div>
+            <div className='rightContainer'>
+                <div className='LeaderBoardiv'>
+                    <img src={Person}
+                                height='100'
+                                width='100'
+                                alt="Person2"
+                                />
+                    <div className='textBoard'>
+                        <div>
+                            <h4>
+                                Partie Jouées : <br/>
+                                Partie gagnées : <br/>
+                                Pions posés : <br/>
+                            </h4>
+                        </div>
+                        <div>
+                            <h4>
+                                10 <br/>
+                                2 <br/>
+                                45 <br/>
+                            </h4>
+                        </div>
+                    </div>
+                    <button className='ButtonNav'>
+                        Share
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Play;

cryptide_project/src/react-app-env.d.tsx

@@ -0,0 +1,4 @@
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";