From d6bc06bcba93702a1236e9505ffe7b895e01edef Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Mon, 18 Dec 2023 11:02:51 +0100
Subject: [PATCH] fix de tout le scoreboard :sparkles:

---
 .../src/Components/ScoreBoard.css             | 15 +++++++-
 .../src/Components/ScoreBoard.tsx             | 35 +++++++++++++++----
 cryptide_project/src/Pages/NewPlay.tsx        |  2 +-
 cryptide_project/src/Translations/en.json     |  2 ++
 cryptide_project/src/Translations/fr.json     |  2 ++
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/cryptide_project/src/Components/ScoreBoard.css b/cryptide_project/src/Components/ScoreBoard.css
index 2272e63..0946e44 100644
--- a/cryptide_project/src/Components/ScoreBoard.css
+++ b/cryptide_project/src/Components/ScoreBoard.css
@@ -12,4 +12,17 @@
   }
   
   /* Personnalisez davantage selon vos préférences */
-  
\ No newline at end of file
+
+  .carousselButton{
+    border:none;
+    background-color:darkgray;
+    color:white;
+    opacity: 60%;
+    width: 50px;
+    height: 70px;
+    font-size: 40px;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/cryptide_project/src/Components/ScoreBoard.tsx b/cryptide_project/src/Components/ScoreBoard.tsx
index a6115f6..817f88f 100644
--- a/cryptide_project/src/Components/ScoreBoard.tsx
+++ b/cryptide_project/src/Components/ScoreBoard.tsx
@@ -94,6 +94,19 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
 
     const intl = useIntl();
 
+
+    //@ts-ignore
+    const CustomPrevButton = ({ previousSlide }) => (
+        <button className='carousselButton' onClick={previousSlide}>&lt;</button>
+    );
+    
+    //@ts-ignore
+    const CustomNextButton = ({ nextSlide }) => (
+    <button className='carousselButton' onClick={nextSlide}>&gt;</button>
+    );
+
+
+
     return (
         <Tabs
             activeKey={activeTab}
@@ -108,7 +121,15 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
             title={intl.formatMessage({ id: 'score.tab.stat' })}
             disabled={!Player.pseudo.startsWith("Guest_") ? false : true}>
                 <Tab.Content className={`tabsStats ${activeTab !== 'perso' ? 'hidden' : ''}`}>
-                    <Carousel adaptiveHeight wrapAround slidesToShow={1} cellSpacing={10} key={carouselKey}>
+                    <Carousel
+                        renderCenterLeftControls={({ previousSlide }) => <CustomPrevButton previousSlide={previousSlide} />}
+                        renderCenterRightControls={({ nextSlide }) => <CustomNextButton nextSlide={nextSlide} />}
+                        adaptiveHeight
+                        wrapAround
+                        slidesToShow={1}
+                        cellSpacing={10}
+                        key={carouselKey}
+                        >
                         <div className="stats">
                             <h5><FormattedMessage id='info.mdj.mastermind'/></h5>
                             <hr />
@@ -117,7 +138,7 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                             <p><FormattedMessage id='score.moy'/>: {Player.mastermindStats.avgNbTry.toFixed(2)}</p>
                         </div>
                         <div className="stats">
-                            <h5>Enigme facile</h5>
+                            <h5><FormattedMessage id='score.titre.easy'/></h5>
                             <hr />
                             <p><FormattedMessage id='score.nbPlayed'/>: {Player.easyEnigmaStats.nbGames}</p>
                             <p><FormattedMessage id='score.NbWin'/>: {Player.easyEnigmaStats.nbWins}</p>
@@ -126,14 +147,14 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                             <p><FormattedMessage id='score.moyTmp'/>: {Player.easyEnigmaStats.avgTime.toFixed(2) + "s"}</p>
                         </div>
                         <div className="stats">
-                            <h5>Enigme moyenne</h5>
+                            <h5><FormattedMessage id='score.titre.int'/></h5>
                             <hr />
                             <p><FormattedMessage id='score.nbPlayed'/>: {Player.mediumEnigmaStats.nbGames}</p>
                             <p><FormattedMessage id='score.best'/>: {Player.mediumEnigmaStats.bestScore}</p>
                             <p><FormattedMessage id='score.moy'/>: {Player.mediumEnigmaStats.avgNbTry.toFixed(2)}</p>
                         </div>
                         <div className="stats">
-                            <h5>Enigme difficile</h5>
+                            <h5><FormattedMessage id='score.titre.hard'/></h5>
                             <hr />
                             <p><FormattedMessage id='score.nbPlayed'/>: {Player.hardEnigmaStats.nbGames}</p>
                             <p><FormattedMessage id='score.NbWin'/>: {Player.hardEnigmaStats.nbWins}</p>
@@ -142,7 +163,7 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                             <p><FormattedMessage id='score.moyTmp'/>: {Player.hardEnigmaStats.avgTime.toFixed(2) + "s"}</p>
                         </div>
                         <div className="stats">
-                            <h5>En ligne</h5>
+                            <h5><FormattedMessage id='score.online'/></h5>
                             <hr />
                             <p><FormattedMessage id='score.nbPlayed'/>: {Player.onlineStats.nbGames}</p>
                             <p><FormattedMessage id='score.NbWin'/>: {Player.onlineStats.nbWins}</p>
@@ -151,7 +172,7 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                     </Carousel>
                 </Tab.Content>
             </Tab>
-            <Tab eventKey="daily" title="Daily">
+            <Tab eventKey="daily" title={intl.formatMessage({ id: 'score.tab.quoti' })}>
                 <Tab.Content className={`tabsStats ${activeTab !== 'daily' ? 'hidden' : ''}`}>
                     <Carousel adaptiveHeight wrapAround slidesToShow={1} cellSpacing={10} key={carouselKey}>
                         <div className="stats">
@@ -257,7 +278,7 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                     </Carousel>
                 </Tab.Content>
             </Tab>
-            <Tab eventKey="weekly" title="Weekly">
+            <Tab eventKey="weekly" title={intl.formatMessage({ id: 'score.tab.hebdo' })}>
                 <Tab.Content className={`tabsStats ${activeTab !== 'weekly' ? 'hidden' : ''}`}>
                     <Carousel adaptiveHeight wrapAround slidesToShow={1} cellSpacing={10} key={carouselKey}>
                         <div className="stats">
diff --git a/cryptide_project/src/Pages/NewPlay.tsx b/cryptide_project/src/Pages/NewPlay.tsx
index c300498..2ab6633 100644
--- a/cryptide_project/src/Pages/NewPlay.tsx
+++ b/cryptide_project/src/Pages/NewPlay.tsx
@@ -255,7 +255,7 @@ function NewPlay() {
                 </div>
             
                 {/* Lobbies */}
-                <div style={{border:'solid 1px lightgray', borderRadius:'15px', marginTop:'20px'}}>
+                <div style={{border:'solid 1px lightgray', borderRadius:'15px', marginTop:'20px', minHeight:'400px'}}>
                     <Lobbies/>
                 </div>
             </div>
diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json
index 33ca057..6845448 100644
--- a/cryptide_project/src/Translations/en.json
+++ b/cryptide_project/src/Translations/en.json
@@ -140,6 +140,8 @@
     "score.online": "Online",
 
     "score.tab.stat" : "Your Stats",
+    "score.tab.quoti" : "Daily",
+    "score.tab.hebdo" : "Weekly",
 
     "lobby.players" : "Players",
     "lobby.bienvenue": "Welcome to your lobby!",
diff --git a/cryptide_project/src/Translations/fr.json b/cryptide_project/src/Translations/fr.json
index 68670aa..1b796ff 100644
--- a/cryptide_project/src/Translations/fr.json
+++ b/cryptide_project/src/Translations/fr.json
@@ -138,6 +138,8 @@
     "score.online" : "En ligne",
 
     "score.tab.stat" : "Vos Stats",
+    "score.tab.quoti" : "Quotidien",
+    "score.tab.hebdo" : "Hebdomadaire",
 
     "lobby.players" : "Joueurs",
     "lobby.bienvenue" : "Bienvenue dans votre lobby !",