Image qui fonctionne

revert fix /

cryptide_project/Scripts/social_graph.sh

@@ -1,5 +1,6 @@
 #!/bin/sh 
 
+npm install --force
 
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 

cryptide_project/server/api/controllers/AuthController.js

@@ -67,6 +67,9 @@ class AuthController {
 
         // Stocker l'utilisateur dans la session)
         req.session.user = user;
+        req.session.user.nbNodes = 25
+        req.session.user.nbIndices = 3
+
 
         // Envoyer une réponse réussie
         console.log("[" + hour + ":" + minutes + "] " + user.pseudo + " have been connected.");
@@ -82,6 +85,20 @@ class AuthController {
     }
   }
 
+  static async UpdateNbNodesIndices(req, res){
+    try{
+        if (req.session.user){
+            req.session.user.nbNodes = req.body.nbNodes;
+            req.session.user.nbIndices = req.body.nbIndices;
+            res.status(200).json({ message: 'Nombre de noeuds mis à jour.' });
+        }
+    }
+    catch(error){
+        console.error(error);
+        res.status(500).json({ error: 'Erreur lors de la mise à jour du nombre de noeuds.' });
+    }
+}
+
   static async logout(req, res) {
     const pseudo = req.session.user.pseudo;
     const date = new Date();

cryptide_project/server/api/controllers/SessionController.js

@@ -87,7 +87,7 @@ class SessionController {
             req.session.user.onlineStats = {nbGames: nbGamesOL, 
                                             nbWins: nbWinsOL, 
                                             ratio: ratioOL};
-            
+
             res.status(200).json({ user: req.session.user });
         }
         catch(error){

cryptide_project/server/api/routes/AuthRoutes.js

@@ -11,6 +11,7 @@ router.delete('/auth/logout', AuthController.logout)
 router.delete('/auth/delAccount', AuthController.delAccount)
 router.post('/auth/validatePassword', AuthController.validatePassword);
 router.put('/auth/updatePassword', AuthController.updatePassword);
+router.put('/session/updateNbNodes', AuthController.UpdateNbNodesIndices);
 
 // Routes pour les sessions
 router.get('/session', SessionController.getUserInformation);
@@ -21,6 +22,7 @@ router.post('/session/addHardEnigmaStats', SessionController.addHardEnigmaStats)
 router.post('/session/addOnlineStats', SessionController.addOnlineStats);
 router.put('/session/updatePseudo', SessionController.UpdatePseudo);
 
+
 // Routes pour le daily scoreboard
 router.get('/scoreboard/getDailyMastermind', ScoreboardController.getDailyMastermind);
 router.get('/scoreboard/getDailyEasyEnigma', ScoreboardController.getDailyEasyEnigma);

cryptide_project/src/Components/GraphContainer.tsx

@@ -75,7 +75,6 @@ let cptHistory = 0
 let lastNodes: NodePerson[] = []
 let cptEndgame = 0
 let endgame= false
-let firstHistory = true
 let cptSquare = 0
 let cptOnAskedWrong = 0
 let cptPlayerLeft = 0
@@ -86,6 +85,7 @@ let testTemps = 0
 let testFirst = false
 let gameStartTmp = true
 let index = 0
+let firstHistory = true
 
 const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, difficulty, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey, handleTurn, setChangeGraph, lang}) => {
   let cptTour: number = 1
@@ -109,6 +109,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   const [netEnigme, setNetEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
   const [downloaded, setDownloaded] = useState(false)
 
+  const [updateHistory, setUpdateHistory] = useState<() => void>(() => {})
+
   useEffect(() => {
     if (testFirst){
       testTemps = 0
@@ -190,7 +192,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     gameStartTmp=gameStart
     if (gameStartTmp){
       setGameStartData(false)
-      console.log(gameStart)
       setLastIndex(turnPlayerIndex)
       setPlayerIndex(playerIndex)
     }
@@ -416,6 +417,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     link.click();
     URL.revokeObjectURL(url);
   }
+  
 
 
   useEffect(() => {
@@ -434,11 +436,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     setIndicesData(choosenIndices)
     const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
     setDailyEnigmeData(map)
-    addToHistory("<----- [Tour " + 1  +"/"+networkPerson.getPersons().length + "] ----->");
+
     changecptTour(1)
     testTemps=0
-    
-
   }
 
   useEffect(() => {
@@ -494,6 +494,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             }
         }
     };
+    
 
     const networkData = { nodes: nodes, edges: graph.edges };
     const network = new Network(container, networkData, initialOptions);
@@ -501,6 +502,17 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     setNetwork(network)
     setSeedData(network.getSeed())
 
+    if (solo){
+      if (solo && (difficulty === "intermediate" || !isDaily)){
+        addToHistory("<----- ["+ intl.formatMessage({ id: 'turn' }) +" " + 1  +"/"+networkData.nodes.length + "] ----->");
+      }
+      else{
+        indices.forEach((indice, index) => {
+          addToHistory(intl.formatMessage({ id: 'indice' }) + positionToEmoji(index, true) + " : " + indice.ToString(lang))
+        })
+      }
+    }
+
     if (isDaily){
       setNetworkEnigme(dailyEnigme)
       setNetEnigme(dailyEnigme)
@@ -519,15 +531,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           })
         });
       }
-      else if (difficulty === "easy"){
-        if (firstHistory){
-          firstHistory=false
-          indices.forEach((indice, index) => {
-            addToHistory(intl.formatMessage({ id: 'indice' }) + positionToEmoji(index, true) + " : " + indice.ToString(lang))
-          })
-        }
-        
-      }
     }
 
     socket.on("give network", (playerId) => {
@@ -618,7 +621,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         setPlayerIndex(index)
         setLastIndex(index)
         if (actualPlayerIndex==index){
-          handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
           handleShowTurnBar(true)
         }
       })
@@ -807,14 +809,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         
       })
     }
-    else {
-      if (firstLap){
-        firstLap=false
-        if (solo && (difficulty === "intermediate" || !isDaily)){
-          addToHistory("<----- ["+ intl.formatMessage({ id: 'turn' }) +" " + 1  +"/"+networkData.nodes.length + "] ----->");
-        }
-      }
-    }
 
 
     const putCorrectBackground = () => {
@@ -899,6 +893,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         setLastIndex(-1)
         setPlayerTouched(-1)
         setWinnerData(winner)
+        firstHistory=true
         
 
         first = true
@@ -907,7 +902,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         setAskedWrong(false)
         askedWrongBot=false
         endgame = true
-        firstHistory=true
         cptBug=0
         try{
           if(isLoggedIn){
@@ -933,6 +927,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         }
         finally{
           setElapsedTime(0)
+          putCorrectBackground()
           socket.off("end game")
           socket.off("asked all")
           socket.off("opacity activated")
@@ -949,24 +944,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       }
     })
 
-
-
-      personNetwork.getPersons().forEach(p => {
-        let a = 0
-        for (let i of indices){
-          let tester = IndiceTesterFactory.Create(i)
-          if (tester.Works(p)){
-            a++
-          }
-        }
-        if (a==indices.length){
-          //networkData.nodes.update({id: p.getId(), label: p.getName() + "\n🔵"})
-          //console.log(p)
-        }
-        
-      });
-      
-
       // Gérer le changement entre la physique et le déplacement manuel
       network.on("dragging", (params) => {
           if (params.nodes.length > 0) {
@@ -1104,15 +1081,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           const personTest = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
           const node = nodes.get().find((n: any) => params.nodes[0] == n.id)
           if(node == undefined)return;
-          if (personTest != undefined && !node.label.includes(positionToEmoji(index, true)) && !node.label.includes(positionToEmoji(index, false))){ //si la personne existe et que le noeud n'a pas déjà été cliqué
+          if (node.label.includes(colorToEmoji(positionToColor(0), true)) || node.label.includes(colorToEmoji(positionToColor(0), false))) return
+          if (personTest != undefined){ //si la personne existe et que le noeud n'a pas déjà été cliqué
             let index =0
-            let works = true
-            const statsTime = elapsedTime;
             for (const i of indices){
               const tester = IndiceTesterFactory.Create(i)
               const test = tester.Works(personTest)
                 //@ts-ignore
-              if (node!=undefined){
+              if (node!=undefined && !node.label.includes(positionToEmoji(index, true)) && !node.label.includes(positionToEmoji(index, false))){
                 const nodeNode = nodes.get().find((n: any) => params.nodes[0] == n.id)
                 if(nodeNode == undefined)return;
                 networkData.nodes.update({id: params.nodes[0], label: nodeNode.label + positionToEmoji(index, test)})
@@ -1173,7 +1149,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 if (difficulty==="intermediate"){
                   addToHistory(personTest.getName() + intl.formatMessage({ id: 'history.NotCoupable' }));
                   cptTour ++; // On Incrémente le nombre de tour du joueur
-                  addToHistory("<----- ["+ intl.formatMessage({ id: 'turn' }) + " " + cptTour  +"/"+networkData.nodes.length + "] ----->");
+                  addToHistory("<----- ["+ intl.formatMessage({ id: 'turn' }) + " " + cptTour  +"/"+networkData.nodes.length);
                   changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
                 }
                 else if (difficulty==="easy"){

cryptide_project/src/Components/PlayerList.tsx

@@ -8,6 +8,7 @@ import Person from '../res/img/Person.png'
 import BotImg from '../res/img/bot.png'
 
 import { socket } from '../SocketConfig';
+import { FormattedMessage } from 'react-intl';
 
 
 //@ts-ignore
@@ -69,7 +70,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                             textAlign: "center",
                             color: "white",
                             padding: "10px"}}
-                            onClick={() => askEveryone()}>Ask everyone</button>
+                            onClick={() => askEveryone()}><FormattedMessage id='askeveryone'/></button>
                         ):
                         (
                             <button style={{ 
@@ -80,7 +81,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                                 textAlign: "center",
                                 color: "white",
                                 padding: "10px"}}
-                            onClick={() => askEveryone()}>Ask everyone</button>
+                            onClick={() => askEveryone()}><FormattedMessage id='askeveryone'/></button>
                         )
                     }
             </div>

cryptide_project/src/Components/ScoreBoard.css

@@ -12,4 +12,17 @@
   }
   
   /* Personnalisez davantage selon vos préférences */
-  
+
+  .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;
+  }

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

cryptide_project/src/Error/ErrorPage.tsx

@@ -28,7 +28,7 @@ function ErrorPage({ code = "", msg = "Something is wrong"}) {
             </div>
 
             <div className='centerDivH' style={{margin: "20px"}}>
-                <Button href={`${basePath}/`} variant='danger'>Retour à l'accueil</Button>
+                <Button href={`${basePath}/`} variant='danger'><FormattedMessage id='BackHome'/></Button>
             </div>
         </div>
     );

cryptide_project/src/Pages/EndGame.css

@@ -1,124 +1,90 @@
-
-.head{
+/* Styles for the Winner and Indice section */
+.head {
     display: flex;
     justify-content: center;
-    flex-direction: column;
-    align-items: center;
-}
-
-.leaderboard-header{
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
     align-items: center;
-
-    width: fit-content;
-
-    border-radius: 0px 0px 30px 30px;
-    border: solid;
-    border-width: 0 5px;
-
+  }
+  
+  .leaderboard-header {
+    border: 2px solid;
+    border-color: #0064E0;
     padding: 20px;
-}
-
-.bottomEnd{
+    text-align: center;
+    border-radius: 0px 0px 10px 10px;
+  }
+  
+  /* Styles for the Winner's details */
+  .winner-details {
     display: flex;
-    justify-content: space-around;
-}
-
-.winner{
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
     align-items: center;
-}
-
-.playersContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    /* padding-left: "5px"; */
-
-    width: 100px;
-    background-color: red;
-}
-
-.playerContainer{
-    /* display: flex;
-    align-items: center; */
-    /* flex-direction: column; */
-
-    /* width: 300px; */
-    width: 30%;
-    margin-bottom: 20px;
-    /* margin-bottom: 10px; */
-
-    border: solid 1px whitesmoke;
-    border-radius: 15px;
-    
-    background-color: white;
-}
-
-.losingPlayersContainer{
+    justify-content: center;
+  }
+  
+  .winner-details img {
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  
+  /* Styles for the Indice Display */
+  .indiceDisplay {
+    border: 2px solid whitesmoke;
+    border-radius: 10px;
+    margin: 5px; /* Réduire la marge */
+    padding: 8px; /* Réduire le rembourrage */
+    box-shadow: 3px 3px 3px rgb(246, 246, 246); /* Réduire l'ombre */
+  }
+  
+  /* Styles for the Losing Players Container */
+  .losingPlayersContainer {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-    
-    margin: 10px 0; 
-    
-    max-width: 50%;
-    
-    overflow-y: scroll;
-    max-height: 200px;
-    /* background-color: yellow; */
-}
-
-.indiceDisplay{
-    border: solid 2px whitesmoke;
-    border-radius: 10px;
-    margin: 0 15px 0 15px;
-    padding: 10px;  
-    box-shadow: 5px 5px 5px rgb(246, 246, 246);    
-}
-
-.SoloContainer{
+    margin: 5px;
+  }
+  
+  /* Styles for individual Player Containers */
+  .playerContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    border: solid 1px whitesmoke;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    border: 1px solid whitesmoke;
     border-radius: 15px;
     background-color: white;
+  }
 
-    max-width: 50%;
-}
-
-.indicesolo{
+  .soloContainer {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    
-    /* margin: 10px 0;  */
-    /* max-height: 200px; */
-}
-
-.solostat{
-    display: flex;
-    justify-content: space-between;
-    width: 70%;
-}
-
-.solostat p {
+    justify-content: center;
+    align-items: center;
+    width: 100%; /* Ajoutez cette ligne pour occuper toute la largeur */
+  }
+  
+  .solostat{
     border: solid 1px whitesmoke;
     border-radius: 15px;
     background-color: white;
-
     padding: 10px;
-}
+    margin: 5px;
+    width: fit-content; /* Ajoutez cette ligne pour ajuster la largeur au contenu */
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+    
 
-#vis-graph {
+  /* Styles for the Graph Container */
+  #vis-graph {
     height: 500px;
-    margin: 50px; 
+    margin: 5px;
     border: 2px solid #ccc;
-    overflow: hidden; 
-}
+    overflow: hidden;
+  }
+  

cryptide_project/src/Pages/EndGame.tsx

@@ -35,7 +35,7 @@ import Player from '../model/Player';
 import { useGame } from '../Contexts/GameContext';
 
 /* Boostrap */
-import { Button } from 'react-bootstrap';
+import { Button, Col, Container, Row } from 'react-bootstrap';
 import Bot from '../model/Bot';
 import {basePath} from "../AdressSetup"
 
@@ -147,77 +147,191 @@ function EndGame({lang}: {lang: string}) {
         }, 2000);
     };
     return (
-        <div>
+        <div style={{overflow:"hidden"}}>
             {playTurnSound && <audio src={WinSound} autoPlay />}
             {!IsSolo ? (
-                <div>
-                    <div className="head">
-                        <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
-                            <h1>{winner?.pseudo} a gagné !</h1>
-                            <h3>Le coupable était <u>{person?.getName()}</u></h3>
-                        </header>
-                    </div>
-                    <div className='winner'>
-                        <img src={Person} width='250' height='250'/>
-
-                        {!indicenull && (<h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString(lang)}</h3>)}
-                    </div>
-                    <div className='bottomEnd'>
-                        {/* <div className='centerDivH' onClick={resetAll}>
-                            <BigButtonNav dest="/play" img={Leave}/>
-                        </div> */}
-                        <div className="losingPlayersContainer">
-                            {players.map((player, index) => (
-                                player.id !== winner?.id && (
-                                    <div className="playerContainer" key={index}>
-                                        <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false} askedWrong={false}/>
-                                        {!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString(lang)}</h6>)}
-                                    </div>
-                                )
-                            ))}
-                        </div>
-                    </div>
-                </div>
+                <Container>
+                    {/* Winner et son indice */}
+                    <Row>
+                        <Col>
+                            <div className="losingPlayersContainer">
+                                {/* Indices pairs */}
+                                {players.map((player, index) => (
+                                    index % 2 == 0 && (
+                                        <div className="playerContainer" key={index}>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false} askedWrong={false}/>
+                                            {!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString(lang)}</h6>)}
+                                        </div>
+                                    )
+                                ))}
+                            </div>
+                        </Col>
+
+                        <Col xs={6}>
+                            <Row>
+                                <div className="head">
+                                    <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
+                                        <h4>{winner?.pseudo} a gagné !</h4>
+                                        <h5>Le coupable était <u>{person?.getName()}</u></h5>
+                                    </header>
+                                </div>
+                            </Row>
+                            <Row>
+                                <div id="vis-graph"></div>
+                            </Row>
+
+                            <Row className="justify-content-md-center">
+                                <Button href={`${basePath}/`} style={{
+                                    width:"50%",
+                                    margin:"10px"
+                                }}>Retour à l'accueil</Button>
+                            </Row>
+                        </Col>
+
+                        <Col>
+                            <div className="losingPlayersContainer">
+                                {players.map((player, index) => (
+                                    index % 2 == 1 && (
+                                        <div className="playerContainer" key={index}>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false} askedWrong={false}/>
+                                            {!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString(lang)}</h6>)}
+                                        </div>
+                                    )
+                                ))}
+                            </div>
+                        </Col>
+                    </Row>
+                </Container>
             ): (
-            <div>
-                <div className="head">
-                            <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
-                                <h1>Vous avez gagné !</h1>
-                                <h3>Le coupable était <u>{person?.getName()}</u></h3>
-                            </header>
-                </div>
-                <div className='winner'>
-                    <img src={Person} width='250' height='250'/>
-                    <h1>{winner?.pseudo}</h1>
-                </div>
-
-                <div className='bottomEnd'>
-                    <div className="SoloContainer">
-                        <div className='solostat'>
-                            {!IsDaily && <p>Nombre de coups : {nbCoup}</p> }
-                            <p>Temps : {temps}s</p>
-                        </div>
-                        <div className='indicesolo'>
-                            {indices.map((indice, index) => (
-                                        // <div className="playerContainer" key={index}>
-                                            <div>
-                                                <h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString(lang)}</h6>
-                                            </div>
-                                        //</div>
-                                    ))
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-            )}
-
-            <div id="vis-graph"/>
+                <Container fluid>
+                    {/* Perd une énigme */}
+                    {!winner && (
+                        <Row>
+                            <Col>
+                                <Row>
+                                    <div className="head">
+                                        <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
+                                            <h4>Vous avez perdu !</h4>
+                                            <h5>Le coupable était <u>{person?.getName()}</u></h5>
+                                        </header>
+                                    </div>
 
-            <div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
-                <Button href={`${basePath}/`}>Retour à l'accueil</Button>
-            </div>
+                                    <Row>
+                                        {!IsDaily && 
+                                            <Col className='center'>
+                                                <p className='solostat'>Nombre de coups : {nbCoup}</p>
+                                            </Col>
+                                        }
+
+                                        <Col className='center'>
+                                            <p className='solostat'>Temps : {temps}s</p>
+                                        </Col>
+                                    </Row>
+                                </Row>
+
+                                <Row>
+                                    <Col>
+                                        {indices.map((indice, index) => (
+                                            index % 2 == 0 && (
+                                                <div className='playerContainer'>
+                                                    <h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
+                                                </div>
+                                            )
+                                        ))}
+                                    </Col>
+
+                                    <Col xs={6}>
+                                        <div id="vis-graph"></div>
+                                    </Col>
+
+                                    <Col>
+                                        <div className="losingPlayersContainer">
+                                            {indices.map((indice, index) => (
+                                                index % 2 == 1 && (
+                                                    <div className='playerContainer'>
+                                                        <h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
+                                                    </div>  
+                                                )
+                                            ))}
+                                        </div>
+                                    </Col>
+                                </Row>
+
+                                <Row className="justify-content-md-center">
+
+                                    <Button href={`${basePath}/`} style={{
+                                        width:"50%",
+                                        margin:"10px"
+                                    }}>Retour à l'accueil</Button>
+                                </Row>
+                            </Col>
+                        </Row>
+                    )}        
+
+                    {/* Gagne une énigme */}
+                    {winner && (
+                        <Row>
+                            <Col>
+                                <Row>
+                                    <div className="head">
+                                        <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
+                                            <h4>Vous avez gagné !</h4>
+                                            <h5>Le coupable était <u>{person?.getName()}</u></h5>
+                                        </header>
+                                    </div>
 
+                                    <Row>
+                                        {!IsDaily && 
+                                            <Col className='center'>
+                                                <p className='solostat'>Nombre de coups : {nbCoup}</p>
+                                            </Col>
+                                        }
+
+                                        <Col className='center'>
+                                            <p className='solostat'>Temps : {temps}s</p>
+                                        </Col>
+                                    </Row>
+                                </Row>
+
+                                <Row>
+                                    <Col>
+                                        {indices.map((indice, index) => (
+                                            index % 2 == 0 && (
+                                                <div className='playerContainer'>
+                                                    <h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
+                                                </div>
+                                            )
+                                        ))}
+                                    </Col>
+
+                                    <Col xs={6}>
+                                        <div id="vis-graph"></div>
+                                    </Col>
+
+                                    <Col>
+                                        <div className="losingPlayersContainer">
+                                            {indices.map((indice, index) => (
+                                                index % 2 == 1 && (
+                                                    <div className='playerContainer'>
+                                                        <h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
+                                                    </div>  
+                                                )
+                                            ))}
+                                        </div>
+                                    </Col>
+                                </Row>
+
+                                <Row className='justify-content-center'>
+                                    <Button href={`${basePath}/`} style={{
+                                        width:"50%",
+                                        margin:"10px"
+                                    }}>Retour à l'accueil</Button>   
+                                </Row>
+                            </Col>
+                        </Row>    
+                    )}        
+                </Container>
+            )}
         </div>
     );
 }

cryptide_project/src/Pages/Home.css

@@ -3,7 +3,6 @@
     justify-content: space-between;
     /* background-color: #D7D4C6; */
     background-color: #fff;
-    min-height: 100vh;
     font-size: calc(10px + 2vmin);
     /* color: #2A4541; */
 }

cryptide_project/src/Pages/Home.tsx

@@ -40,77 +40,91 @@ function Home() {
         }
     }, [isLoggedIn]);
 
-    return (
-        
-    <div className="home-container">
-
-        <div className="left-section">
-
-            <div>
-                {/* <h2><FormattedMessage id="home.histoire.title"/></h2> */}
-                <h2>Introduction</h2>
-                <p>
-                    {/* <FormattedMessage id="home.histoire" /> */}
-                    Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux coupable. Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère. Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! Êtes-vous prêt à relever le défi et à démasquer le coupable caché dans le graphe ? Que l'enquête commence !
-                </p>
-            </div>
-            <div>
-                <h2><FormattedMessage id="home.jeu.title"/></h2>
-                <p>
-                    {/* <FormattedMessage id="home.jeu" /> */}
-                    Dans l'univers captivant de notre jeu de déduction, la tromperie et la ruse sont les maîtres mots de la réussite. Explorez le mystère qui se dissimule derrière chaque interaction de notre graphique complexe, dévoilant les liens entre les individus.
+    return (        
+        <div className="home-container" style={{overflow:"hidden"}}>
+            <div className="left-section">
+                <div>
+                    {/* <h2><FormattedMessage id="home.histoire.title"/></h2> */}
+                    <h2>Introduction</h2>
+                    <p style={{fontSize:"14px"}}>
+                        {/* <FormattedMessage id="home.histoire" /> */}
+                        Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! 
+                        Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.
+                        Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. 
+                        Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux coupable. 
+                        Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère. 
+                        Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. 
+                        Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! 
+                        Êtes-vous prêt à relever le défi et à démasquer le coupable caché dans le graphe ? Que l'enquête commence !
+                    </p>
+                </div>
 
-                    Votre mission ultime ? Découvrir qui parmi les individus est le coupable, mais n'attendez pas une collaboration ouverte. Utilisez plutôt la manipulation subtile pour embrouiller les pistes, détourner l'attention de vos adversaires. Posez des questions stratégiques, répondez avec malice et plantez des indices trompeurs pour vous rapprocher du dénouement.
+                <hr/>
 
-                    Chaque occasion offre la possibilité de semer le doute parmi vos adversaires. Lorsqu'un joueur vous interroge, répondez en plaçant adroitement un jeton carré pour suggérer que "selon votre indice, cette personne ne peut être le coupable", ou un jeton rond pour indiquer qu'elle reste dans la liste des suspects. Soyez vigilant, chaque geste peut être interprété, et la vérité se dissimule souvent derrière une façade d'indices trompeurs.
+                <div>
+                    <h2><FormattedMessage id="home.jeu.title"/></h2>
+                    <p style={{fontSize:"14px"}}>
+                        {/* <FormattedMessage id="home.jeu" /> */}
+                        Dans l'univers captivant de notre jeu de déduction, la tromperie et la ruse sont les maîtres mots de la réussite. Explorez le mystère qui se dissimule derrière chaque interaction de notre graphique complexe, dévoilant les liens entre les individus. 
+                    </p>
 
-                    Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en plaçant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient ainsi une arme redoutable pour détourner l'accusation et semer la confusion. Pour en savoir plus, plongez-vous dans les détails de ce passionnant récit sur une autre page.
-                </p>
-                <br/>
-                <p>Pour des informations plus détaillées, consulter les <Link to={`${basePath}/info`}>règles</Link>.</p>
-                <br/>
+                    <p style={{fontSize:"14px"}}>
+                        {/* <FormattedMessage id="home.jeu" /> */}
+                        Votre mission ultime ? Découvrir qui parmi les individus est le coupable, mais n'attendez pas une collaboration ouverte. Utilisez plutôt la manipulation subtile pour embrouiller les pistes, détourner l'attention de vos adversaires. Posez des questions stratégiques, répondez avec malice et plantez des indices trompeurs pour vous rapprocher du dénouement.
+                    </p>
+
+                    <p style={{fontSize:"14px"}}>
+                        {/* <FormattedMessage id="home.jeu" /> */}
+                        Chaque occasion offre la possibilité de semer le doute parmi vos adversaires. Lorsqu'un joueur vous interroge, répondez en plaçant adroitement un jeton carré pour suggérer que "selon votre indice, cette personne ne peut être le coupable", ou un jeton rond pour indiquer qu'elle reste dans la liste des suspects. Soyez vigilant, chaque geste peut être interprété, et la vérité se dissimule souvent derrière une façade d'indices trompeurs.
+                    </p>
+
+                    <p style={{fontSize:"14px"}}>
+                        {/* <FormattedMessage id="home.jeu" /> */}
+                        Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en plaçant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient ainsi une arme redoutable pour détourner l'accusation et semer la confusion. Pour en savoir plus, plongez-vous dans les détails de ce passionnant récit sur une autre page.
+                    </p>
+
+                    <h5>Pour des informations plus détaillées, consulter les <Link to={`${basePath}/info`}>règles</Link>.</h5>
+                    <hr/>
+                </div>
+                
+                <div>
+                    <h6>Jeu inspiré par le jeu de société "Cryptide"</h6>
+                </div>
             </div>
-            <div>
-                {/* <h2><FormattedMessage id="home.plus.title"/></h2>
-                <ul>
-                    <li><FormattedMessage id="home.plus.1"/></li>
-                    <li><FormattedMessage id="home.plus.2"/></li>
-                    <li><FormattedMessage id="home.plus.3"/></li>
-                </ul> */}
-                <h2>Présentation Video :</h2>
-                (ici il y aura la vidéo)
+                
+            <div className="vertical-divider"></div>
+
+            <div className="right-section">
+                {/* <h3><FormattedMessage id="game.time"/></h3>
+                <h3><FormattedMessage id="game.players"/></h3>
+                <h3><FormattedMessage id="game.age"/></h3> */}
+                <h3>
+                    Temps : 20 minutes<br/>
+                    Joueurs : 1 à 6<br/>
+                    Âge : 8ans et +<br/>
+                </h3>
+
+                <hr/>
+                
+                <h3> 
+                    <u><FormattedMessage id="game.createdBy"/></u><br/>
+                    Chazot Thomas<br/>
+                    Ferreira Pierre<br/>
+                    Marcel Baptiste<br/>
+                </h3>
+                {/* <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3> */}
+                {/* <button>Jouer au jeu</button> */}
+                <br/>
+
+                <Link to={`${basePath}/`} className='button'
+                    style={{ 
+                        backgroundColor: theme.colors.primary,
+                        borderColor: theme.colors.secondary
+                    }}>
+                    <FormattedMessage id="play"/> 
+                </Link>
             </div>
         </div>
-            
-        <div className="vertical-divider"></div>
-
-        <div className="right-section">
-            {/* <h3><FormattedMessage id="game.time"/></h3>
-            <h3><FormattedMessage id="game.players"/></h3>
-            <h3><FormattedMessage id="game.age"/></h3> */}
-            <h3>
-                Temps : 20 minutes<br/>
-                Joueurs : 1 à 6<br/>
-                Âge : 8ans et +<br/>
-            </h3>
-            <hr/>
-            <h3> <u><FormattedMessage id="game.createdBy"/></u><br/>
-            Chazot Thomas<br/>
-            Ferreira Pierre<br/>
-            Marcel Baptiste<br/>
-            </h3>
-            {/* <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3> */}
-            {/* <button>Jouer au jeu</button> */}
-            <br/>
-            <Link to={`${basePath}/`} className='button' 
-                style={{ 
-                    backgroundColor: theme.colors.primary,
-                    borderColor: theme.colors.secondary
-                }}>
-                <FormattedMessage id="play"/> 
-            </Link>
-        </div>
-    </div>
     );
 }
 

cryptide_project/src/Pages/InGame.tsx

@@ -14,14 +14,12 @@ import PlayerList from '../Components/PlayerList';
 import TurnBar from '../Components/TurnBar';
 
 /* Icon */
-import Leave from "../res/icon/leave.png";
 import Param from "../res/icon/param.png";
-import Replay from "../res/icon/replay.png";
 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 Download from "../res/icon/download.png"
+import Pdf from "../res/icon/pdf.png"
+import Tex from "../res/icon/tex.png"
 import Reset from "../res/icon/reset.png";
 import Oeye from "../res/icon/eye.png";
 import Ceye from "../res/icon/hidden.png";
@@ -55,6 +53,13 @@ import {generateLatexCode, generateLatexCodeEnigme} from '../Script/LatexScript'
 import Pair from '../model/Pair';
 import Indice from '../model/Indices/Indice';
 import {basePath} from "../AdressSetup"
+import { useAuth } from '../Contexts/AuthContext';
+
+import ballonDeBasket from '../Script/ballon-de-basket.png';
+import ballonDeFoot from '../Script/ballon-de-foot.png';
+import baseball from '../Script/baseball.png';
+import bowling from '../Script/bowling.png';
+import tennis from '../Script/tennis.png';
 
 
 let cptNavigation = 0
@@ -65,6 +70,7 @@ const InGame = ({locale, changeLocale}) => {
   const theme = useTheme();
   
   const navigate = useNavigate()
+  const {user, manager} = useAuth()
   
   const params = new URLSearchParams(window.location.search);
 
@@ -104,6 +110,7 @@ const InGame = ({locale, changeLocale}) => {
   const [askedWrong, setAskedWrong] = useState(false)
   const [importToPdf, setImportToPdf] = useState(false)
   const [importToJSON, setImportToJSON] = useState(false)
+  const [firstHistory, setFirstHistory] = useState(true)
 
   const [putCorrectBackground, setPutCorrectBackground] = useState<() => void>(() => {});
   const [putGreyBackgroud, setPutGreyBackground] = useState<() => void>(() => {});
@@ -204,7 +211,7 @@ const InGame = ({locale, changeLocale}) => {
 
       const zip = new JSZip();
       
-      if (isDaily && networkEnigme != null){
+      if (isDaily && (difficulty === "hard" || difficulty === "intermediate") && networkEnigme != null){
         const tex = generateLatexCodeEnigme(personNetwork, person, indices, network, networkEnigme)
         const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' });
         zip.file('socialGraph.tex', tex);
@@ -216,17 +223,25 @@ const InGame = ({locale, changeLocale}) => {
       }
 
       const imageNames = ['ballon-de-basket.png', 'ballon-de-foot.png', "baseball.png", "bowling.png", "tennis.png"]; // Liste des noms de fichiers d'images
-      const imagesFolder = 'Script';
+      
+      const imageNames2 = [ballonDeBasket, ballonDeFoot, baseball, bowling, tennis];
 
-      for (const imageName of imageNames) {
-        const imageUrl = process.env.PUBLIC_URL + `/${imagesFolder}/${imageName}`;
+      const imagesFolder = 'Script';
+      let test = 0
+      for (const image of imageNames2) {
+        /*
+        const imageUrl = `localhost/${imagesFolder}/${imageName}`;
+        console.log(imageUrl)
         const response = await fetch(imageUrl);
+        */
+        const response = await fetch(image);
         
         if (response.ok) {
           const imageBlob = await response.blob();
-          zip.file(`${imageName}`, imageBlob);
+          zip.file(imageNames[test], imageBlob);
+          test++
         } else {
-          console.error(`Erreur de chargement de l'image ${imageName}`);
+          //  console.error(`Erreur de chargement de l'image ${imageName}`);
         }
       }
 
@@ -324,20 +339,76 @@ const InGame = ({locale, changeLocale}) => {
   const [playTurnSound, setPlayTurnSound] = useState(false);
   const [soundPreference, setSoundPreference] = useState(true); // utilisateur
 
-  const [enteredNumber, setEnteredNumber] = useState(25);
-  const [enteredNumberIndices, setEnteredNumberIndices] = useState(3);
+  const [enteredNumber, setEnteredNumber] = useState(user?.nbNodes || 25);
+  const [enteredNumberIndices, setEnteredNumberIndices] = useState(user?.nbIndices || 3);
 
 
   //@ts-ignore
   const handleNumberChange = (event) => {
+    if (parseInt(event.target.value)){
+      setEnteredNumber(parseInt(event.target.value));
+    }
+  };
+
+  //@ts-ignore
+  const handleKeyDown = (event) => {
+    // Vérifier si la touche appuyée est "Entrée"
+    if (event.key === 'Enter' && user!==null && parseInt(event.target.value)) {
       const newNumber = Math.max(20, Math.min(50, parseInt(event.target.value, 10)));
+      user.nbNodes = newNumber;
       setEnteredNumber(newNumber);
+    }
   };
+  
+  const handleBlur = () => {
+    if (user!==null){
+      const newNumber = Math.max(20, Math.min(50, enteredNumber));
+      user.nbNodes = newNumber;
+      setEnteredNumber(newNumber);
+    }
+  };
+  
 
   //@ts-ignore
   const handleNumberIndicesChange = (event) => {
+    if (parseInt(event.target.value)){
+      setEnteredNumberIndices(parseInt(event.target.value));
+    }
+};
+
+useEffect(() => {
+  if (changeGraph){
+    if (enteredNumber>=20 && enteredNumber<=50 && enteredNumberIndices>=3 && enteredNumberIndices<=6){
+      console.log(enteredNumber)
+      console.log(enteredNumberIndices)
+      manager?.userService.changeNodesIndices(enteredNumber, enteredNumberIndices)
+      setHistory([]);
+      setFirstHistory(true)
+      changeGraph(enteredNumber, enteredNumberIndices)
+    }
+  }
+  else{
+    setEnteredNumber(user?.nbNodes || 25)
+    setEnteredNumberIndices(user?.nbIndices || 3)
+  }
+}, [enteredNumber, enteredNumberIndices])
+
+//@ts-ignore
+const handleKeyDownIndice = (event) => {
+  // Vérifier si la touche appuyée est "Entrée"
+  if (event.key === 'Enter' && user!=null && parseInt(event.target.value)) {
     const newNumber = Math.max(3, Math.min(6, parseInt(event.target.value, 10)));
+    user.nbIndices = newNumber;
+    setEnteredNumberIndices(newNumber);
+  }
+};
+
+const handleBlurIndice = () => {
+  if (user!==null){
+    const newNumber = Math.max(3, Math.min(6, enteredNumberIndices));
     setEnteredNumberIndices(newNumber);
+    user.nbIndices = newNumber;
+  }
 };
 
   const handleSoundPreferenceChange = () => {
@@ -500,7 +571,7 @@ const InGame = ({locale, changeLocale}) => {
                 backgroundColor: theme.colors.tertiary,
                 borderColor: theme.colors.secondary
               }}>
-              <img src={Download} alt="indice" height="40"/>
+              <img src={Tex} alt="indice" height="40"/>
             </button>
           }
 
@@ -510,7 +581,7 @@ const InGame = ({locale, changeLocale}) => {
                 backgroundColor: theme.colors.tertiary,
                 borderColor: theme.colors.secondary
               }}>
-              <img src={Download} alt="indice" height="40"/>
+              <img src={Pdf} alt="indice" height="40"/>
             </button>
           }
         </div>
@@ -541,7 +612,7 @@ const InGame = ({locale, changeLocale}) => {
         <Offcanvas show={showS} 
                   onHide={handleCloseS} 
                   placement='top'
-                  style={{height: '60%', width: '30%', left: '70%' }}>
+                  style={{height: '80%', width: '30%', left: '70%' }}>
           <Offcanvas.Header closeButton>
             <Offcanvas.Title><img src={Param} alt='param'/> <FormattedMessage id='param'/></Offcanvas.Title>
           </Offcanvas.Header>
@@ -553,54 +624,47 @@ const InGame = ({locale, changeLocale}) => {
               </label>
 
               {IsSolo && 
-              <div className='nbNodeDiv'>
+              <div className='nbNodeDiv' style={{ padding:'20px'}}>
                   <label htmlFor="numberInput"><FormattedMessage id='param.node'/> :</label>
                   <div>
-                      <button className='valuebutton' onClick={() => { if (enteredNumber>20) setEnteredNumber(enteredNumber-1)}}
+                      <button className='valuebutton' onClick={() => { if (enteredNumber>20 && user !== null){ setEnteredNumber(enteredNumber-1); user.nbNodes = user.nbNodes-1; setHistory([]); }}}
                           style={{borderColor:theme.colors.secondary}}> - </button>
                       <input
                           // type="number"
-                          style={{textAlign:'center'}}
+                          style={{textAlign:'center', border: 'none', width: '100px'}}
                           id="numberInput"
-                          disabled
                           value={enteredNumber}
                           onChange={handleNumberChange}
-                          min={20}
-                          max={60}/>
-                      <button className='valuebutton' onClick={() => { if (enteredNumber<50) setEnteredNumber(enteredNumber+1)}}
+                          onKeyDown={handleKeyDown} // Ajout de l'événement onKeyDown
+                          onBlur={handleBlur} // Ajout de l'événement onBlur
+                          />
+                      <button className='valuebutton' onClick={() => { if (enteredNumber<50 && user!==null){ setEnteredNumber(enteredNumber+1); user.nbNodes = user.nbNodes+1 ;setHistory([]); }}}
                           style={{borderColor:theme.colors.secondary}}> + </button>
                   </div>
-                  <button onClick={() => {setHistory([]); changeGraph(enteredNumber, enteredNumberIndices)}}
-                                              style={{ 
-                                                backgroundColor: theme.colors.tertiary,
-                                                borderColor: theme.colors.secondary,
-                                              }}><FormattedMessage id='param.valid'/></button>
               </div>}
 
               {IsSolo && 
-              <div className='nbNodeDiv'>
+              <div className='nbNodeDiv' style={{ padding:'20px'}}>
                   <label htmlFor="numberInput"><FormattedMessage id='param.clue'/> :</label>
                   <div>
-                      <button className='valuebutton' onClick={() => { if (enteredNumberIndices>3) setEnteredNumberIndices(enteredNumberIndices-1)}}
+                      <button className='valuebutton' onClick={() => { if (enteredNumberIndices>3 && user!==null){ setEnteredNumberIndices(enteredNumberIndices - 1); user.nbIndices = user.nbIndices-1; setHistory([]); }}}
                           style={{borderColor:theme.colors.secondary}}> - </button>
                       <input
                           // type="number"
-                          style={{textAlign:'center'}}
+                          style={{textAlign:'center', border: 'none', width: '100px'}}
                           id="numberInput"
-                          disabled
                           value={enteredNumberIndices}
                           onChange={handleNumberIndicesChange}
-                          min={3}
-                          max={6}/>
-                      <button className='valuebutton' onClick={() => { if (enteredNumberIndices<6) setEnteredNumberIndices(enteredNumberIndices+1)}}
+                          onKeyDown={handleKeyDownIndice} // Ajout de l'événement onKeyDown
+                          onBlur={handleBlurIndice}/>
+                      <button className='valuebutton' onClick={() => { if (enteredNumberIndices<6 && user!==null){ setEnteredNumberIndices(enteredNumberIndices + 1); user.nbIndices = user.nbIndices+1; setHistory([]); }}}
                           style={{borderColor:theme.colors.secondary}}> + </button>
                   </div>
-                  <button onClick={() => {setHistory([]); changeGraph(enteredNumber, enteredNumberIndices)}}
-                                              style={{ 
-                                                backgroundColor: theme.colors.tertiary,
-                                                borderColor: theme.colors.secondary,
-                                              }}><FormattedMessage id='param.valid'/></button>
               </div>}
+              <div className='centerDivH' style={{margin: "20px"}}>
+                <Button variant="outline-warning" onClick={() => {setHistory([]); changeGraph(enteredNumber, enteredNumberIndices)}}><FormattedMessage id='regenerate'/></Button>
+              </div>
+                <Button variant="outline-danger" href={`${basePath}/`}><FormattedMessage id='BackHome'/></Button>
             </div>
           </Offcanvas.Body>
         </Offcanvas>

cryptide_project/src/Pages/Lobbies.tsx

@@ -28,7 +28,7 @@ class LobbyDataProps {
     }
 }
 
-// let cptNavigation = 0
+let cptNavigation = 0
 
 function Lobbies() {
     const theme=useTheme();
@@ -42,7 +42,6 @@ function Lobbies() {
 
     const [showAvailable, setShowAvailable] = useState(true);
 
-    const [cptNavigation, setCptNavigation] = useState(0);  
 
     const handleShowAllClick = () => {
         setShowAvailable(false);
@@ -58,9 +57,9 @@ function Lobbies() {
     };
     
     const handleSetCptNavigation = () => {
-        setCptNavigation((prevCpt) => prevCpt + 1);
+        cptNavigation++
 
-        if (cptNavigation % 2 === 0 && navigationType.toString() === "POP") {
+        if (cptNavigation % 2 >= 0 && navigationType.toString() === "POP") {
             socket.emit("player quit");
         }
     };

cryptide_project/src/Pages/Lobby.tsx

@@ -309,9 +309,9 @@ function Lobby() {
                         <h3><FormattedMessage id='lobby.bienvenue'/></h3>
                         <p><FormattedMessage id='lobby.wait'/></p>
                         {/* Bouton pour copier le lien */}
-                        <Button variant="primary" ref={target} onClick={copyGameLink}>
+                        {/* <Button variant="primary" ref={target} onClick={copyGameLink}>
                             <FormattedMessage id='lobby.invite'/>
-                        </Button>
+                        </Button> */}
                         <Overlay target={target.current} show={show} placement="top">
                             {({
                             placement: _placement,

cryptide_project/src/Pages/NewPlay.tsx

@@ -96,7 +96,7 @@ function NewPlay() {
     }
 
     function launchMastermind(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(user?.nbIndices || 3, user?.nbNodes || 25)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
@@ -159,7 +159,7 @@ function NewPlay() {
 
         //* Mode facile 
         //todo différencier les deux
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(user?.nbIndices || 3, user?.nbNodes || 25)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
@@ -173,7 +173,7 @@ function NewPlay() {
 
         //* Mode facile 
         //todo différencier les deux
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(user?.nbIndices || 3, user?.nbNodes || 25)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
@@ -193,7 +193,7 @@ function NewPlay() {
         //* Mode difficile
 
         //todo différencier les deux
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(user?.nbIndices || 3, user?.nbNodes || 25)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
@@ -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>

cryptide_project/src/Script/LatexScript.tsx

@@ -86,7 +86,7 @@ function generateLatexCode(personsNet : PersonNetwork, choosenPerson : Person, c
     latexCode += "\\end{compactitem}\n"
 
     //* Solution
-    latexCode += "% Solution : " + choosenPerson.getName() + "\n";
+    latexCode += "Solution : " + choosenPerson.getName() + "\n";
     
     latexCode += "\\end{document}\n"
 
@@ -192,8 +192,14 @@ function generateLatexCodeEnigme(personsNet : PersonNetwork, choosenPerson : Per
     latexCode += "\\end{compactitem}\n"
 
     //* Solution
-    latexCode += "% Solution : " + choosenPerson.getName() + "\n";
+    latexCode += "Solution : " + choosenPerson.getName() + "\n";
     
+    latexCode += "\\begin{compactitem}\n"
+    choosenIndices.forEach((indices, index) => {
+        latexCode += `\\item Indice ${index + 1}: ${indices.ToString("fr")}\n`
+    })
+
+    latexCode += "\\end{compactitem}\n"
     latexCode += "\\end{document}\n"
 
    return latexCode

cryptide_project/src/Translations/en.json

@@ -28,7 +28,7 @@
 
     "indice":"Hint",
     "param":"Settings",
-    "sfx":"Activate SFX",
+    "sfx":"Activate sounds",
     "aide":"Help",
 
     "majUn":"A",
@@ -101,6 +101,10 @@
     "compris": "Understood!",
     "close": "Close",
 
+    "regenerate":"Regenarte graph",
+    "BackHome" : "Back to home",
+    "askeveryone" : "Ask everyone",
+
     "color.green":"Green",
     "color.blue":"Blue",
     "color.red":"Red",
@@ -136,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!",

cryptide_project/src/Translations/fr.json

@@ -28,7 +28,7 @@
 
     "indice":"Indice",
     "param":"Paramètres",
-    "sfx":"Activer les SFX",
+    "sfx":"Activer les sons",
     "aide":"Aide",
 
     "majUn":"Un",
@@ -98,13 +98,17 @@
     "compris":"Compris !",
     "close" : "Fermer",
 
+    "askeveryone" : "Demandez à tous",
+
+    "regenerate":"Regénérer le graph",
+    "BackHome" : "Retour à l'accueil",
 
     "color.green":"Vert",
     "color.blue":"Bleu",
     "color.red":"Rouge",
     "color.yellow":"Jaune",
 
-    "play.jouerseul": "Jouer seul",
+    "play.jouerseul": "Mastermind",
     "play.enigme": "Résoudre une énigme",
     "play.enigme.easy": "Facile",
     "play.enigme.medium": "Intermédiaire",
@@ -134,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 !",
@@ -345,7 +351,7 @@
     "tuto.txt.14.6.5":" pour deviner, bonne chance !",
 
 
-    "history.mis":" à mis un ",
+    "history.mis":" a mis un ",
     "à":"à",
     "history.cantPose":" ne peut plus poser de carré",
     "history.NotCoupable":" n'est pas le coupable !"

cryptide_project/src/model/DataManagers/DbUserService.ts

@@ -41,6 +41,8 @@ class DbUserService implements IUserService{
                     nbWins: sessionData.user.onlineStats.nbWins,
                     ratio: sessionData.user.onlineStats.ratio,
                 });
+                currentUser.nbNodes = sessionData.user.nbNodes || 25
+                currentUser.nbIndices = sessionData.user.nbIndices || 3
 
                 return [currentUser, true];
             } 
@@ -76,6 +78,9 @@ class DbUserService implements IUserService{
                     ratio: 0,
                 });
 
+                guestUser.nbNodes = 25
+                guestUser.nbIndices = 3
+
                 return [guestUser, false];
             }
         } catch (error) {
@@ -148,6 +153,19 @@ class DbUserService implements IUserService{
             console.error(error);
         }
     }
+
+    async changeNodesIndices(nbNodes: number, nbIndices: number): Promise<void> {
+        try {
+            const result = await SessionService.changeNodesIndices(nbNodes, nbIndices);
+            if (result) {
+                console.log("Nodes updated");
+            } else {
+                console.log("Nodes not updated");
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
 }
 
 export default DbUserService

cryptide_project/src/model/DataManagers/IUserService.ts

@@ -2,6 +2,7 @@ import User from "../User";
 
 interface IUserService{
     fetchUserInformation(): Promise<[User | null, boolean]>
+    changeNodesIndices(nbNodes: number, nbIndices: number): Promise<void>
     addMastermindStats(pseudo: string, score: number, time: number): Promise<void>
     addEasyEnigmaStats(pseudo: string, win: number, time: number): Promise<void>
     // addMediumEnigmaStats(pseudo: string, win: number, time: number): Promise<void>

cryptide_project/src/model/User.tsx

@@ -7,6 +7,8 @@ class User extends Player{
     public mediumEnigmaStats: any
     public hardEnigmaStats: any
     public onlineStats: any
+    public nbNodes: number = 25
+    public nbIndices: number = 3
 
     constructor(id: string, pseudo: string, profilePicture: string, soloStats: any, easyEnigmaStats: any, mediumEnigmaStats: any, hardEnigmaStats: any, onlineStats: any){
         super(id, pseudo, profilePicture || defaultImg)

cryptide_project/src/services/SessionService.tsx

@@ -24,6 +24,34 @@ class SessionService {
         }
     }
 
+    static async changeNodesIndices(nbNodes: number, nbIndices: number) {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/session/updateNbNodes', {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    nbNodes,
+                    nbIndices
+                }),
+                credentials: 'include',
+            });
+    
+            if (response.ok) {
+                const result = await response.json();
+                return result;
+            } else {
+                const errorResponse = await response.json();
+                throw new Error(errorResponse.error);
+            }
+        } catch (error) {
+            console.error(error);
+            throw error;
+        }
+
+    }
+
     static async addMastermindStats(pseudo: string, score: number, time: number){
         try {
             const response = await fetch(ADRESSE_DBSERVER + '/session/addMastermindStats', {