truc

cryptide_project/src/Components/ButtonImgNav.css

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

cryptide_project/src/Components/GraphContainer.tsx

@@ -75,7 +75,7 @@ let cptTour: number = 0
     for(const n of lastNodes.reverse()){
       if (!tab.find((node) => node.id == n.id)){
         tab.push(n)
-        if (tab.length > players.length * 1.5) break
+        if (tab.length > players.length * 2) break
       }
     }
     lastNodes = tab

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/InGame.tsx

@@ -20,6 +20,8 @@ import Info from "../res/icon/infoGreen.png";
 import Check from "../res/icon/checkboxGreen.png";
 import Alpha from "../res/GreekLetters/alphaW.png";
 import MGlass from "../res/icon/magnifying-glass.png";
+import Oeye from "../res/icon/eye.png";
+import Ceye from "../res/icon/hidden.png";
 
 /* nav */
 import { Link } from 'react-router-dom';
@@ -37,6 +39,7 @@ import Color from '../model/Color';
 import { useGame } from '../Contexts/GameContext';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavLink } from 'react-router-dom';
+import { last } from 'lodash';
 import { socket } from '../SocketConfig';
 
 //@ts-ignore
@@ -122,6 +125,9 @@ const InGame = ({locale, changeLocale}) => {
 
   const [cptTour, setcptTour] = useState(0);
 
+  const [LastVisible, setLastVisible] = useState(false);
+  
+
   //@ts-ignore
   const changecptTour = (newcptTour) => {
     setcptTour(newcptTour);
@@ -154,6 +160,11 @@ const InGame = ({locale, changeLocale}) => {
       }
     };
 
+    const changeVisibility = () => {
+      setLastVisible(!LastVisible);
+    }
+    const eye = LastVisible ? Oeye : Ceye; //icon que l'on affiche pour l'oeil : fermé ou ouvert.
+
     /* Windows open */
     //@ts-ignore
     const openInNewTab = (url) => { //! avec url ==> dangereux
@@ -208,17 +219,6 @@ const InGame = ({locale, changeLocale}) => {
           </button>
         </div>
 
-        <div className='opacityDiv'>
-          <button className='button'
-            style={{ 
-                backgroundColor: theme.colors.tertiary,
-                borderColor: theme.colors.secondary
-            }}
-            onClick={setShowLastData}>
-            <img src={Param} alt="paramètres" height='40'/>
-          </button>
-        </div>
-
 
         <div className='resetDiv'>
           <button className='button'
@@ -265,6 +265,14 @@ const InGame = ({locale, changeLocale}) => {
             }}>
             <img src={MGlass} alt="indice" height="40"/>
           </button>
+
+          <button className='button' onClick={setShowLastData}
+            style={{ 
+              backgroundColor: theme.colors.tertiary,
+              borderColor: theme.colors.secondary
+            }}>
+            <img src={ eye } alt="indice" height="40"/>
+          </button>
         </div>
 
 {/*
@@ -279,10 +287,12 @@ const InGame = ({locale, changeLocale}) => {
           </Offcanvas.Body>
         </Offcanvas>
           */}
-          <div className='playerlistDiv'>
-            <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} />
-          </div>
 
+          { !IsSolo &&
+            <div className='playerlistDiv'>
+              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} />
+            </div>
+          }
 
         <Offcanvas show={show} 
                   onHide={handleClose} 

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() {
@@ -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>
     );

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;
 }

cryptide_project/src/Style/Theme.tsx

@@ -1,7 +1,7 @@
 // theme.js
 const theme = {
     colors: {
-        primary: '#7AA3F4',
+        primary: '#0064E0',
         secondary: '#0052B8',
         tertiary: '#7aa3f4', //* Pour les boutons de l'interface.
         text: '#fff'

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