modification du component ajouté précédement, suppression des fichiers obsolète 'jouer' ⚡

cryptide_project/src/App.tsx

@@ -5,9 +5,9 @@ import { IntlProvider } from 'react-intl';
 
 /* Page */
 import Home from './Pages/Home'; 
-import Jouer from './Pages/Jouer'; 
 import Login from './Pages/LoginForm';
 import SignUp from './Pages/SignUpForm';
+import Play from './Pages/Play';
 
 /* Component */
 import AppNavbar from './Components/NavBar';
@@ -24,7 +24,6 @@ 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,
@@ -58,7 +57,6 @@ function App() {
       <AppNavbar changeLocale={changeLocale} />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/jouer" element={<Jouer />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/play" element={<Play/>} />

cryptide_project/src/Components/ButtonImgNav.css

@@ -1,12 +1,25 @@
 .buttonNabImg{
     margin: 15px 0;
     width: auto;
-    height: 8vh;
+    height: 65px;
 
     background-color: #85C9C2;
     color: #2A4541;
     border-radius: 15px;
     border-width: 0;
 
-    font-size:larger;
+    font-size:large;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.buttonNabImg p {
+    color:white;
+    margin-top: 15px;
+}
+
+.link-without-underline {
+    text-decoration: none;
 }

cryptide_project/src/Components/ButtonImgNav.tsx

@@ -4,11 +4,12 @@ import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';
 
 //@ts-ignore
-function ButtonImgNav({ dest, img }) {
+function ButtonImgNav({ dest, img, text = "" }) {
     return (
-    <Link to={dest}>
+    <Link to={dest} className="link-without-underline">
         <button className='buttonNabImg'>
-            <img src={img} alt="Button Image" />
+            <img src={img} alt="Button Image" height="50" width="50"/>
+            <p>{text}</p>
         </button>
     </Link>
     );

cryptide_project/src/Pages/Home.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Home.css'; // Créez un fichier CSS pour styliser votre composant
+import './Home.css';
 import '../App.css';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
@@ -45,7 +45,7 @@ function Home() {
             <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
             {/* <button>Jouer au jeu</button> */}
             <br/>
-            <Link to="/jouer" className='button'> <FormattedMessage id="play"/> </Link>
+            <Link to="/play" className='button'> <FormattedMessage id="play"/> </Link>
         </div>
     </div>
     );

cryptide_project/src/Pages/Jouer.css

@@ -1,10 +0,0 @@
-.all{
-    background-color: #D7D4C6; 
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: #2A4541;
-}

cryptide_project/src/Pages/Jouer.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import './Jouer.css';
-import '../App.css';
-
-function Jouer() {
-    return (
-    <div className='all'>
-        <h1>Bienvenue</h1>
-        <h6>en page 2</h6>
-    </div>
-    );
-}
-
-export default Jouer;

cryptide_project/src/Pages/Play.tsx

@@ -1,12 +1,23 @@
 import React from 'react';
+
+/* Page */
 import './Play.css';
 
-import Person from '../res/img/Person.png';
+/* Nav */
 import { Link } from 'react-router-dom';
+
+/* Component */
 import ButtonImgNav from "../Components/ButtonImgNav"
+
+/* Img */
+import Person from '../res/img/Person.png';
+
+/* Icon */
+import trophy from '../res/icon/trophy.png';
 import param from '../res/icon/param.png';
 import share from '../res/icon/share.png';
 
+
 function Play() {
     return (
 
@@ -15,7 +26,7 @@ function Play() {
                 {/* <button className='ButtonNav'>
                     Param
                 </button> */}
-                <ButtonImgNav dest='/' img={param}/>
+                <ButtonImgNav dest='/signup' img={Person} text="Gestion du compte"/>
             </div>
             <div className="MidContainer">
                 <div>
@@ -42,7 +53,7 @@ function Play() {
             </div>
             <div className='rightContainer'>
                 <div className='LeaderBoardiv'>
-                    <img src={Person}
+                    <img src={trophy}
                                 height='100'
                                 width='100'
                                 alt="Person2"