From b330ae89fe2f39dc8b3fb0f451da2632cdd4c5f0 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 8 Nov 2023 10:25:02 +0100
Subject: [PATCH] =?UTF-8?q?modification=20du=20component=20ajout=C3=A9=20p?=
 =?UTF-8?q?r=C3=A9c=C3=A9dement,=20suppression=20des=20fichiers=20obsol?=
 =?UTF-8?q?=C3=A8te=20'jouer'=20:zap:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/src/App.tsx                    |  4 +---
 .../src/Components/ButtonImgNav.css             | 17 +++++++++++++++--
 .../src/Components/ButtonImgNav.tsx             |  7 ++++---
 cryptide_project/src/Pages/Home.tsx             |  4 ++--
 cryptide_project/src/Pages/Jouer.css            | 10 ----------
 cryptide_project/src/Pages/Jouer.tsx            | 14 --------------
 cryptide_project/src/Pages/Play.tsx             | 17 ++++++++++++++---
 7 files changed, 36 insertions(+), 37 deletions(-)
 delete mode 100644 cryptide_project/src/Pages/Jouer.css
 delete mode 100644 cryptide_project/src/Pages/Jouer.tsx

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index 4acdaa8..eb3c48e 100644
--- a/cryptide_project/src/App.tsx
+++ b/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/>} />
diff --git a/cryptide_project/src/Components/ButtonImgNav.css b/cryptide_project/src/Components/ButtonImgNav.css
index b2b4a04..b0ece90 100644
--- a/cryptide_project/src/Components/ButtonImgNav.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/cryptide_project/src/Components/ButtonImgNav.tsx b/cryptide_project/src/Components/ButtonImgNav.tsx
index 033d103..85c48d0 100644
--- a/cryptide_project/src/Components/ButtonImgNav.tsx
+++ b/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>
     );
diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx
index f353013..dfb54b8 100644
--- a/cryptide_project/src/Pages/Home.tsx
+++ b/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>
     );
diff --git a/cryptide_project/src/Pages/Jouer.css b/cryptide_project/src/Pages/Jouer.css
deleted file mode 100644
index 4a8879c..0000000
--- a/cryptide_project/src/Pages/Jouer.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Jouer.tsx b/cryptide_project/src/Pages/Jouer.tsx
deleted file mode 100644
index 5022f7a..0000000
--- a/cryptide_project/src/Pages/Jouer.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index ee26f68..f9e3e47 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/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"