Merge pull request 'Scoreboard 🚀' (#74) from Scoreboard into master

Reviewed-on: #74

cryptide_project/src/Components/ButtonImgNav.css

@@ -1,5 +1,6 @@
 .buttonNabImg{
     margin: 15px 0;
+    padding: 10px;
     width: auto;
     height: 65px;
 

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;

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;

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() {
@@ -99,33 +100,7 @@ function Play() {
                 </div>
             </div>
             <div className='rightContainer'>
-                <div className='LeaderBoardiv'>
+                <ScoreBoard/>
-                    <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>
             </div>
         </div>
     );

cryptide_project/src/Style/Global.css

@@ -53,3 +53,30 @@ 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;
+}

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",