From 688871089b6086477a8beb360c4c20132ecd3c12 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Mon, 20 Nov 2023 15:48:11 +0100
Subject: [PATCH 1/2] =?UTF-8?q?ajout=20de=20la=20nouvelle=20interface=20du?=
 =?UTF-8?q?=20scoreboard=20avec=20des=20tabs,=20mais=20les=20donn=C3=A9es?=
 =?UTF-8?q?=20sont=20en=20dure=20:rocket:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/ButtonImgNav.css           |  1 +
 .../src/Components/ScoreBoard.tsx             | 82 +++++++++++++++++++
 cryptide_project/src/Pages/Play.css           | 18 ----
 cryptide_project/src/Pages/Play.tsx           | 41 ++--------
 cryptide_project/src/Style/Global.css         | 27 ++++++
 5 files changed, 118 insertions(+), 51 deletions(-)
 create mode 100644 cryptide_project/src/Components/ScoreBoard.tsx

diff --git a/cryptide_project/src/Components/ButtonImgNav.css b/cryptide_project/src/Components/ButtonImgNav.css
index e625ce2..7ac29c0 100644
--- a/cryptide_project/src/Components/ButtonImgNav.css
+++ b/cryptide_project/src/Components/ButtonImgNav.css
@@ -1,5 +1,6 @@
 .buttonNabImg{
     margin: 15px 0;
+    padding: 10px;
     width: auto;
     height: 65px;
 
diff --git a/cryptide_project/src/Components/ScoreBoard.tsx b/cryptide_project/src/Components/ScoreBoard.tsx
new file mode 100644
index 0000000..b756e4a
--- /dev/null
+++ b/cryptide_project/src/Components/ScoreBoard.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+
+/* Style */
+import '../Pages/Play.css';
+import '../Style/Global.css'
+import { useTheme } from '../Style/ThemeContext';
+
+/* Ressources */
+import Person from '../res/img/Person.png'
+import leave from '../res/img/bot.png'
+import trophy from '../res/icon/trophy.png'
+import share from '../res/icon/share.png';
+
+/* Boostrap */
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+/* Component */
+import ButtonImgNav from './ButtonImgNav';
+
+//@ts-ignore
+function ScoreBoard({Player = null}) {
+    const theme=useTheme();
+    return (
+        // <div className='LeaderBoardiv'>
+        <div className='LeaderBoardiv'>
+            <Tabs style={{width:"100%"}}
+                defaultActiveKey="profile"
+                id="ScoreBoard"
+                className="mb-3">
+                
+                <Tab eventKey="perso" title="Vos Stats" disabled>
+                    Tab content for Contact
+                </Tab>
+                <Tab eventKey="daily" title="Daily"
+                    style={{display:"flex", flexDirection:'column', alignItems:'center'}}>
+                    <img src={trophy}
+                            height='100'
+                            width='100'
+                            alt="Person2"/>
+                    <Container fluid>
+                        <Row>
+                            <Col sm={8}>Partie Jouées :</Col>
+                            <Col className='leftRow'>10</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={8}>Partie gagnées :</Col>
+                            <Col className='leftRow'>2</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={8}>Pions posés :</Col>
+                            <Col className='leftRow'>2</Col>
+                        </Row>
+                        <hr/>
+                        <Row>
+                            <Col sm={8}>Partie solo :</Col>
+                            <Col className='leftRow'>21</Col>
+                        </Row>
+                        <Row>
+                            <Col sm={8}>Nombre de coups moyen :</Col>
+                            <Col className='leftRow'>19</Col>
+                        </Row>
+                    </Container>
+                </Tab>
+                <Tab eventKey="weekly" title="Weekly">
+                    <img src={trophy}
+                                height='100'
+                                width='100'
+                                alt="Person2"/>
+                </Tab>
+            </Tabs>
+            
+                <ButtonImgNav dest='/' img={share}/>
+                </div>
+        //</div>
+    );
+}
+
+export default ScoreBoard;
diff --git a/cryptide_project/src/Pages/Play.css b/cryptide_project/src/Pages/Play.css
index f688821..07e51aa 100644
--- a/cryptide_project/src/Pages/Play.css
+++ b/cryptide_project/src/Pages/Play.css
@@ -35,25 +35,7 @@
     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;
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index 13d3f62..d0f4234 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -21,6 +21,7 @@ import { socket } from '../SocketConfig';
 import { useNavigate } from 'react-router-dom';
 import GameCreator from '../model/GameCreator';
 import { useGame } from '../Contexts/GameContext';
+import ScoreBoard from '../Components/ScoreBoard';
 
 
 function Play() {
@@ -62,12 +63,12 @@ function Play() {
         
       }, []);  // Aucune dépendance ici
 
-      useEffect(() => {
-        if (room !== null) {
-          const nouvelleURL = `/lobby?room=${room}`;
-          navigate(nouvelleURL);
-        }
-      }, [room, navigate]);
+    useEffect(() => {
+    if (room !== null) {
+        const nouvelleURL = `/lobby?room=${room}`;
+        navigate(nouvelleURL);
+    }
+    }, [room, navigate]);
 
 
 
@@ -99,33 +100,7 @@ function Play() {
                 </div>
             </div>
             <div className='rightContainer'>
-                <div className='LeaderBoardiv'>
-                    <img src={trophy}
-                                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> */}
-                    <ButtonImgNav dest='/' img={share}/>
-                </div>
+                <ScoreBoard/>
             </div>
         </div>
     );
diff --git a/cryptide_project/src/Style/Global.css b/cryptide_project/src/Style/Global.css
index 0e22e38..2ab26a6 100644
--- a/cryptide_project/src/Style/Global.css
+++ b/cryptide_project/src/Style/Global.css
@@ -52,4 +52,31 @@ form{
 
 .listContainer{
     columns: 2 auto;
+}
+
+/* LeaderBoard */
+.LeaderBoardiv{  
+    border: solid;
+    border-width: 0px 1px 1px 1px;
+    border-color: lightgray;
+    border-radius: 0px 0px 20px 20px;
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    margin: 15px;
+}
+
+
+.textBoard{
+    display: flex;
+    flex-wrap: column;
+    justify-content: space-between;
+    width: 300px;
+}
+
+.leftRow{
+    display: flex;
+    justify-content: end;
 }
\ No newline at end of file

From 01b74d783e2972b897acc791a09dbf3312565a50 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Mon, 20 Nov 2023 16:10:54 +0100
Subject: [PATCH 2/2] fix typos :pencil2:

---
 cryptide_project/src/Translations/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json
index e287818..b462ccd 100644
--- a/cryptide_project/src/Translations/en.json
+++ b/cryptide_project/src/Translations/en.json
@@ -104,7 +104,7 @@
     "info.composant.hair_col.title":"Hair's colors",
     "info.composant.hair_col":"The characters also have a hair colour, which can be found in the following colours :",
 
-    "hair.blanc":"Blanc",
+    "hair.blanc":"White",
     "hair.blond":"Blond",
     "hair.roux":"Red head",
     "hair.chatain":"Brown",