Image qui fonctionne

revert 53ac430987
revert fix /
102 changed files with 13851 additions and 10443 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -33,6 +33,29 @@ steps:
      sonar_token:
        from_secret: SECRET_SONAR_LOGIN_CRYPTIDE

+#
+  - name: deploy-container-mysql
+    image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest
+    build:
+      context: .
+    environment:
+        IMAGENAME: mysql:latest
+        CONTAINERNAME: mysql
+        COMMAND: create
+        #OVERWRITE: true
+        PRIVATE: false
+        CODEFIRST_CLIENTDRONE_ENV_MYSQL_ROOT_PASSWORD:    
+          from_secret: MYSQL_ROOT_PASSWORD
+        CODEFIRST_CLIENTDRONE_ENV_MYSQL_DATABASE:
+          from_secret: MYSQL_DATABASE
+        CODEFIRST_CLIENTDRONE_ENV_MYSQL_USER:
+          from_secret: MYSQL_USER
+        CODEFIRST_CLIENTDRONE_ENV_MYSQL_PASSWORD:
+          from_secret: MYSQL_PASSWORD
+        ADMINS: thomaschazot2,pierreferreira,baptistemarcel
+    when:
+      branch:
+      - CI/CD

  - name: container-web
    image: plugins/docker
@ -50,7 +73,7 @@ steps:
    #depends_on: [ build ]
    when:
      branch:
-      - master
+      - CI/CD


 #container deployment
--- a/.gitignore
+++ b/.gitignore
@ -51,4 +51,4 @@ package-lock.json
 socialgraph.db

 # build
-cryptide_project/build/
+cryptide_project/build/*
--- a/cryptide_project/DB/socialgraph.db
+++ b/cryptide_project/DB/socialgraph.db
--- a/cryptide_project/Scripts/social_graph.sh
+++ b/cryptide_project/Scripts/social_graph.sh
@ -1,5 +1,6 @@
 #!/bin/sh 

+npm install --force

 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

--- a/cryptide_project/build/asset-manifest.json
+++ b/cryptide_project/build/asset-manifest.json
@ -1,19 +0,0 @@
-{
-  "files": {
-    "main.css": "/static/css/main.6888e917.css",
-    "main.js": "/static/js/main.b6842da5.js",
-    "static/js/787.a1c84483.chunk.js": "/static/js/787.a1c84483.chunk.js",
-    "static/media/Person.png": "/static/media/Person.f7ba6be9e4afca5ca897.png",
-    "static/media/bot.png": "/static/media/bot.057c187a23ead0769e7f.png",
-    "static/media/eye.png": "/static/media/eye.cd074d043a80f09623ac.png",
-    "static/media/reset.png": "/static/media/reset.82632189f4cbd1644b7a.png",
-    "index.html": "/index.html",
-    "main.6888e917.css.map": "/static/css/main.6888e917.css.map",
-    "main.b6842da5.js.map": "/static/js/main.b6842da5.js.map",
-    "787.a1c84483.chunk.js.map": "/static/js/787.a1c84483.chunk.js.map"
-  },
-  "entrypoints": [
-    "static/css/main.6888e917.css",
-    "static/js/main.b6842da5.js"
-  ]
-}
--- a/cryptide_project/build/favicon.ico
+++ b/cryptide_project/build/favicon.ico
--- a/cryptide_project/build/index.html
+++ b/cryptide_project/build/index.html
@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.b6842da5.js"></script><link href="/static/css/main.6888e917.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/cryptide_project/build/logo192.png
+++ b/cryptide_project/build/logo192.png
--- a/cryptide_project/build/logo512.png
+++ b/cryptide_project/build/logo512.png
--- a/cryptide_project/build/manifest.json
+++ b/cryptide_project/build/manifest.json
@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
--- a/cryptide_project/build/robots.txt
+++ b/cryptide_project/build/robots.txt
@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/cryptide_project/build/static/css/main.6888e917.css
+++ b/cryptide_project/build/static/css/main.6888e917.css
--- a/cryptide_project/build/static/css/main.6888e917.css.map
+++ b/cryptide_project/build/static/css/main.6888e917.css.map
--- a/cryptide_project/build/static/js/787.a1c84483.chunk.js
+++ b/cryptide_project/build/static/js/787.a1c84483.chunk.js
@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkcryptide=self.webpackChunkcryptide||[]).push([[787],{787:(e,t,n)=>{n.r(t),n.d(t,{getCLS:()=>y,getFCP:()=>g,getFID:()=>C,getLCP:()=>P,getTTFB:()=>D});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(n=m(e,r,t),o&&a(o),s((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},h=!1,T=-1,y=function(e,t){h||(g((function(e){T=e.value})),h=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},d=c("first-input",p);n=m(e,v,t),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
-//# sourceMappingURL=787.a1c84483.chunk.js.map
--- a/cryptide_project/build/static/js/787.a1c84483.chunk.js.map
+++ b/cryptide_project/build/static/js/787.a1c84483.chunk.js.map
--- a/cryptide_project/build/static/js/main.b6842da5.js
+++ b/cryptide_project/build/static/js/main.b6842da5.js
--- a/cryptide_project/build/static/js/main.b6842da5.js.LICENSE.txt
+++ b/cryptide_project/build/static/js/main.b6842da5.js.LICENSE.txt
@ -1,123 +0,0 @@
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-/*!
-
-JSZip v3.10.1 - A JavaScript class for generating and reading zip files
-<http://stuartk.com/jszip>
-
-(c) 2009-2016 Stuart Knightley <stuart [at] stuartk.com>
-Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.
-
-JSZip uses the library pako released under the MIT license :
-https://github.com/nodeca/pako/blob/main/LICENSE
-*/
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-/*! Hammer.JS - v2.0.17-rc - 2019-12-16
- * http://naver.github.io/egjs
- *
- * Forked By Naver egjs
- * Copyright (c) hammerjs
- * Licensed under the MIT license */
-
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @remix-run/router v1.11.0
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * React Router DOM v6.18.0
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * React Router v6.18.0
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-//! Il faudra possiblement faire une gestion des mode de jeu, pour modifier les regles en fonction de ce dernier.
--- a/cryptide_project/build/static/js/main.b6842da5.js.map
+++ b/cryptide_project/build/static/js/main.b6842da5.js.map
--- a/cryptide_project/build/static/media/Person.f7ba6be9e4afca5ca897.png
+++ b/cryptide_project/build/static/media/Person.f7ba6be9e4afca5ca897.png
--- a/cryptide_project/build/static/media/bot.057c187a23ead0769e7f.png
+++ b/cryptide_project/build/static/media/bot.057c187a23ead0769e7f.png
--- a/cryptide_project/build/static/media/eye.cd074d043a80f09623ac.png
+++ b/cryptide_project/build/static/media/eye.cd074d043a80f09623ac.png
--- a/cryptide_project/build/static/media/reset.82632189f4cbd1644b7a.png
+++ b/cryptide_project/build/static/media/reset.82632189f4cbd1644b7a.png
--- a/cryptide_project/package-lock.json
+++ b/cryptide_project/package-lock.json
@ -26,6 +26,7 @@
        "jspdf": "^2.5.1",
        "jszip": "^3.10.1",
        "lodash": "^4.17.21",
+        "nuka-carousel": "^7.0.0",
        "react": "^18.2.0",
        "react-bootstrap": "^2.9.1",
        "react-country-flag": "^3.1.0",
@ -14203,6 +14204,18 @@
        "url": "https://github.com/fb55/nth-check?sponsor=1"
      }
    },
+    "node_modules/nuka-carousel": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/nuka-carousel/-/nuka-carousel-7.0.0.tgz",
+      "integrity": "sha512-KE0WV1MuE4Gq6ynL8P3qJH2rGq/DkJ0ej+ezo0IuZp4oklV8WNqu6P6O1utJqihHLGoEuFppq5wlHSHfhdCHXA==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
    "node_modules/nwsapi": {
      "version": "2.2.7",
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
--- a/cryptide_project/package.json
+++ b/cryptide_project/package.json
@ -1,7 +1,6 @@
 {
  "name": "cryptide",
  "version": "1.0.0",
-  "homepage": "/containers/Crypteam-website/",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
@ -21,6 +20,7 @@
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
    "lodash": "^4.17.21",
+    "nuka-carousel": "^7.0.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.1",
    "react-country-flag": "^3.1.0",
--- a/cryptide_project/server/api/controllers/AuthController.js
+++ b/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();
--- a/cryptide_project/server/api/controllers/ScoreboardController.js
+++ b/cryptide_project/server/api/controllers/ScoreboardController.js
@ -0,0 +1,209 @@
+const path = require('path');
+const DatabaseService = require(path.resolve(__dirname, '../services/DatabaseService'));
+
+const ENIGME_FACILE = "enigme_facile";
+const ENIGME_MOYEN = "enigme_moyenne";
+const ENIGME_DIFFICILE = "enigme_difficile";
+
+class SessionController {
+    // ---------------------------------------------------
+    // ----------------- GET DAILY STATS -----------------
+    // ---------------------------------------------------
+
+    static async getDailyMastermind(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const dailyMastermindStats = await db.getDailyMastermindStats();
+
+            res.status(200).json({ tab : dailyMastermindStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats dailyMastermind.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getDailyEasyEnigma(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const dailyEasyEnigmaStats = await db.getDailyEnigmaStats(ENIGME_FACILE);
+
+            res.status(200).json({ tab : dailyEasyEnigmaStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats dailyEasyEnigma.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getDailyMediumEnigma(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const dailyMediumEnigmaStats = await db.getDailyEnigmaStats(ENIGME_MOYEN);
+
+            res.status(200).json({ tab : dailyMediumEnigmaStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats dailyMediumEnigma.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getDailyHardEnigma(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const dailyHardEnigmaStats = await db.getDailyEnigmaStats(ENIGME_DIFFICILE);
+
+            res.status(200).json({ tab : dailyHardEnigmaStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats dailyHardEnigma.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getDailyOnline(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const dailyOnlineStats = await db.getDailyOnlineStats();
+
+            res.status(200).json({ tab : dailyOnlineStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats dailyOnline' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    // ---------------------------------------------------
+    // ---------------- GET WEEKLY STATS -----------------
+    // ---------------------------------------------------
+
+    static async getWeeklyMastermind(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const weeklyMastermindStats = await db.getWeeklyMastermindStats();
+
+            res.status(200).json({ tab : weeklyMastermindStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats weeklyMastermind.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getWeeklyEasyEnigma(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const weeklyEasyEnigmaStats = await db.getWeeklyEnigmaStats(ENIGME_FACILE);
+
+            res.status(200).json({ tab : weeklyEasyEnigmaStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats weeklyEasyEnigma.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getWeeklyMediumEnigma(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const weeklyMediumEnigmaStats = await db.getWeeklyEnigmaStats(ENIGME_MOYEN);
+
+            res.status(200).json({ tab : weeklyMediumEnigmaStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats weeklyMediumEnigma.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getWeeklyHardEnigma(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const weeklyHardEnigmaStats = await db.getWeeklyEnigmaStats(ENIGME_DIFFICILE);
+
+            res.status(200).json({ tab : weeklyHardEnigmaStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats weeklyHardEnigma.' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+
+    static async getWeeklyOnline(req, res){
+        const db = new DatabaseService();
+
+        try{
+            await db.connect();
+
+            const weeklyOnlineStats = await db.getWeeklyOnlineStats();
+
+            res.status(200).json({ tab : weeklyOnlineStats });
+        }
+        catch(error){
+            console.error(error);
+            res.status(500).json({ error: 'Erreur lors de la récupération des stats weeklyOnline' });
+        }
+        finally{
+            await db.disconnect();
+        }
+    }
+    
+}
+
+module.exports = SessionController;
--- a/cryptide_project/server/api/controllers/SessionController.js
+++ b/cryptide_project/server/api/controllers/SessionController.js
@ -87,9 +87,7 @@ class SessionController {
            req.session.user.onlineStats = {nbGames: nbGamesOL, 
                                            nbWins: nbWinsOL, 
                                            ratio: ratioOL};
-            

-            console.log("[" + hour + ":" + minutes + "] " + req.session.user.pseudo + " have a session.");
            res.status(200).json({ user: req.session.user });
        }
        catch(error){
--- a/cryptide_project/server/api/routes/AuthRoutes.js
+++ b/cryptide_project/server/api/routes/AuthRoutes.js
@ -2,6 +2,7 @@ const express = require('express');
 const router = express.Router();
 const AuthController = require('../controllers/AuthController');
 const SessionController = require('../controllers/SessionController');
+const ScoreboardController = require('../controllers/ScoreboardController');

 // Routes pour l'authentification
 router.post('/auth/signup', AuthController.signUp);
@ -10,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);
@ -20,4 +22,20 @@ 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);
+router.get('/scoreboard/getDailyMediumEnigma', ScoreboardController.getDailyMediumEnigma);
+router.get('/scoreboard/getDailyHardEnigma', ScoreboardController.getDailyHardEnigma);
+router.get('/scoreboard/getDailyOnline', ScoreboardController.getDailyOnline);
+
+// Routes pour le weekly scoreboard
+router.get('/scoreboard/getWeeklyMastermind', ScoreboardController.getWeeklyMastermind);
+router.get('/scoreboard/getWeeklyEasyEnigma', ScoreboardController.getWeeklyEasyEnigma);
+router.get('/scoreboard/getWeeklyMediumEnigma', ScoreboardController.getWeeklyMediumEnigma);
+router.get('/scoreboard/getWeeklyHardEnigma', ScoreboardController.getWeeklyHardEnigma);
+router.get('/scoreboard/getWeeklyOnline', ScoreboardController.getWeeklyOnline);
+
+
 module.exports = router;
--- a/cryptide_project/server/api/server.js
+++ b/cryptide_project/server/api/server.js
@ -14,7 +14,7 @@ const port = 3003;
 // Middleware
 app.use(cors(
  {
-    origin: ["http://172.20.10.4:3000", "http://172.20.10.4:3000"],
+    origin: ["http://172.20.10.4:3000", "http://localhost:3000"],
    credentials: true
  }
 ));                            // Autoriser les requêtes cross-origin
--- a/cryptide_project/server/api/services/DatabaseService.js
+++ b/cryptide_project/server/api/services/DatabaseService.js
@ -127,6 +127,140 @@ class DatabaseService {
        });
    }

+    // ---------------------------------------------------------------
+    // ------------------- STATS JOURNALIERE -------------------------
+    // ---------------------------------------------------------------
+
+    async getDailyMastermindStats() {
+        return new Promise((resolve, reject) => {
+            // Obtenez la date actuelle au format AAAA-MM-JJ
+            const currentDate = new Date().toISOString().slice(0, 10);
+
+            // Récupérer les 5 meilleurs scores de la journée
+            this.client.all(
+                'SELECT pseudo, score FROM users INNER JOIN games ON users.idUser = games.idUser WHERE gameType = ? AND SUBSTR(playedDate, 1, 10) = ? ORDER BY score ASC LIMIT 10',
+                "mastermind",
+                currentDate,
+                (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            );
+        });
+    }
+
+    async getDailyEnigmaStats(enigmaLevel) {
+        return new Promise((resolve, reject) => {
+            const currentDate = new Date().toISOString().slice(0, 10);
+
+            this.client.all(
+                'SELECT pseudo, time FROM users INNER JOIN games ON users.idUser = games.idUser WHERE gameType = ? AND SUBSTR(playedDate, 1, 10) = ? ORDER BY time ASC LIMIT 10',
+                enigmaLevel,
+                currentDate,
+                (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            );
+        });
+    }
+
+    async getDailyOnlineStats() {
+        return new Promise((resolve, reject) => {
+            const currentDate = new Date().toISOString().slice(0, 10);
+    
+            this.client.all(
+                'SELECT pseudo, COUNT(*) AS wins FROM users INNER JOIN games ON users.idUser = games.idUser WHERE gameType = ? AND SUBSTR(playedDate, 1, 10) = ? AND win = ? GROUP BY users.idUser ORDER BY wins ASC LIMIT 10',
+                "multijoueur", currentDate, 1,
+                (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            );
+        });
+    }
+    
+    
+    // ---------------------------------------------------------------
+    // ------------------- STATS HEBDOMADAIRE ------------------------
+    // ---------------------------------------------------------------
+
+    async getWeeklyMastermindStats() {
+        return new Promise((resolve, reject) => {
+            const currentDate = new Date().toISOString().slice(0, 10);
+            const currentDay = new Date().getDay();
+            const firstDayOfWeek = new Date(new Date().setDate(new Date().getDate() - currentDay)).toISOString().slice(0, 10);
+
+            this.client.all(
+                'SELECT pseudo, score FROM users INNER JOIN games ON users.idUser = games.idUser WHERE gameType = ? AND SUBSTR(playedDate, 1, 10) BETWEEN ? AND ? ORDER BY score ASC LIMIT 10',
+                "mastermind",
+                firstDayOfWeek,
+                currentDate,
+                (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            );
+        });
+    }
+
+    async getWeeklyEnigmaStats(enigmaLevel) {
+        return new Promise((resolve, reject) => {
+            const currentDate = new Date().toISOString().slice(0, 10);
+            const currentDay = new Date().getDay();
+            const firstDayOfWeek = new Date(new Date().setDate(new Date().getDate() - currentDay)).toISOString().slice(0, 10);
+
+            this.client.all(
+                'SELECT pseudo, time FROM users INNER JOIN games ON users.idUser = games.idUser WHERE gameType = ? AND SUBSTR(playedDate, 1, 10) BETWEEN ? AND ? ORDER BY time ASC LIMIT 10',
+                enigmaLevel,
+                firstDayOfWeek,
+                currentDate,
+                (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            );
+        });
+    }
+
+    async getWeeklyOnlineStats() {
+        return new Promise((resolve, reject) => {
+            const currentDate = new Date().toISOString().slice(0, 10);
+            const currentDay = new Date().getDay();
+            const firstDayOfWeek = new Date(new Date().setDate(new Date().getDate() - currentDay)).toISOString().slice(0, 10);
+
+            this.client.all(
+                'SELECT pseudo, COUNT(*) as wins FROM users INNER JOIN games ON users.idUser = games.idUser WHERE gameType = ? AND SUBSTR(playedDate, 1, 10) BETWEEN ? AND ? AND win = ? ORDER BY wins ASC LIMIT 10',
+                "multijoueur",
+                firstDayOfWeek,
+                currentDate,
+                1,
+                (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            );
+        });
+    }
+
    // -------------------------------------------------------------
    // ------------------- STATS MASTERMIND ------------------------
    // -------------------------------------------------------------
--- a/cryptide_project/server/socket_io/server.js
+++ b/cryptide_project/server/socket_io/server.js
@ -7,7 +7,7 @@ const app = express();
 const server = http.createServer(app);
 const io = socketIO(server, {
  cors: {
-    origin: ["http://172.20.10.4:3000", "http://172.20.10.4:3000"], // Remplacez par l'URL de votre application React
+    origin: "*", // Remplacez par l'URL de votre application React
    methods: ["GET", "POST"],
    credentials: true
  }
@ -25,12 +25,18 @@ io.on('connection', (socket) => {
  console.log(socket.id);  

  socket.on('network created', (network, person, indices, room, start) =>{
-    io.to(room).emit("game created", network, person, indices, start)
-    map.get(room).started = true
-    map.get(room).actualPlayer=start
-    const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
-    const playerJson = JSON.stringify(playerArray);
-    io.emit("request lobbies", playerJson)
+    try{
+      io.to(room).emit("game created", network, person, indices, start)
+      map.get(room).started = true
+      map.get(room).actualPlayer=start
+      const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
+      const playerJson = JSON.stringify(playerArray);
+      io.emit("request lobbies", playerJson)
+    }
+    catch{
+      console.log("error")
+    }
+    
  });

  socket.on("give network", (networkPerson, person, indices, start, room, nodes, playerId) => {
@ -145,17 +151,23 @@ io.on('connection', (socket) => {
  })

  socket.on("who plays", (room) => {
-    if (map.get(room) !== undefined){
-      let player = map.get(room).actualPlayer
-      if (map.get(room).tab[player].type != "User"){
-        player = player + 1
-        if (player == map.get(room).tab.length){
-          player=0
+    try{
+      if (map.get(room) !== undefined){
+        let player = map.get(room).actualPlayer
+        if (map.get(room).tab[player].type != "User"){
+          player = player + 1
+          if (player == map.get(room).tab.length){
+            player=0
+          }
        }
+        // console.log(player)
+        io.to(room).emit("who plays", player, map.get(room).lastWorks)
      }
-      // console.log(player)
-      io.to(room).emit("who plays", player, map.get(room).lastWorks)
    }
+    catch{
+
+    }
+    
  })

  socket.on("disconnect", () =>{
@ -216,9 +228,14 @@ io.on('connection', (socket) => {
  })

  socket.on("node checked", (id, works, color, room, playerIndex) =>{
-    map.get(room).actualPlayer=playerIndex
-    map.get(room).lastWorks=works
-    io.to(room).emit("node checked", id, works, color, playerIndex, socket.id)
+    try{
+      map.get(room).actualPlayer=playerIndex
+      map.get(room).lastWorks=works
+      io.to(room).emit("node checked", id, works, color, playerIndex, socket.id)
+    }
+    catch{
+      console.log("error")
+    }
  })
  
  socket.on("put correct background", (id) =>{
--- a/cryptide_project/src/AdressSetup.ts
+++ b/cryptide_project/src/AdressSetup.ts
@ -1,13 +1,15 @@
-const ADRESSE_WEBSERVER = "http://172.20.10.4:3002"
+// const ADRESSE_WEBSERVER = "http://172.20.10.4:3002"
+const ADRESSE_WEBSERVER = "http://localhost:3002"

-const ADRESSE_DBSERVER = "http://172.20.10.4:3003"
+// const ADRESSE_DBSERVER = "http://172.20.10.4:3003"
+const ADRESSE_DBSERVER = "http://localhost:3003"

 const tmp = ADRESSE_DBSERVER
 const tmp2 = ADRESSE_WEBSERVER

 const ADRESSE_WEBSITE = ""

-const basePath = process.env.REACT_APP_BASE_PATH || '/containers/Crypteam-website';
+const basePath = process.env.REACT_APP_BASE_PATH || '';

 const tmp3 = basePath

--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@ -37,18 +37,26 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 /* Internationnalisation */
 import messagesFr from './Translations/fr.json';
 import messagesEn from './Translations/en.json';
+import messagesEs from './Translations/es.json';
+import messagesPt from './Translations/pt.json';
+import messagesRu from './Translations/ru.json';
+

 /* Gestion d' erreur */
 import ErrorBoundary from './Error/ErrorBoundary';
 import ErrorPage from './Error/ErrorPage';
 import DeducCheck from './Pages/DeducCheck';
 import {basePath} from "./AdressSetup"
+import Tutorial from './Pages/Tutorial';



 const messages = {
  fr: messagesFr,
  en: messagesEn,
+  es: messagesEs,
+  pt: messagesPt,
+  ru: messagesRu,
 };

 function App() {
@ -68,6 +76,7 @@ function App() {
  //const location = useLocation();
  const hasNavbarVisible = [basePath + "/", basePath + "/login", basePath + "/signup", basePath + "/lobby", basePath + "/endgame", basePath + "/deduc"]//.includes(window.location.pathname);

+  document.title = "Social Graph"; 

  return (
    <ErrorBoundary fallback={(error, errorInfo) => <ErrorPage />}>
@ -77,7 +86,7 @@ function App() {
          <IntlProvider locale={locale} messages={messages[locale]}>
            <ThemeProvider>
              <BrowserRouter>  
-                {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
+                {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} locale={locale} />}
                <Routes>
                
                  <Route path={`${basePath}/`} element={<NewPlay/>} />
@ -85,10 +94,11 @@ function App() {
                  <Route path={`${basePath}/signup`} element={<SignUp />} />
                  <Route path={`${basePath}/presentation`} element={<Home />} />
                  <Route path={`${basePath}/lobby`} element={<Lobby/>} />
-                  <Route path={`${basePath}/endgame`} element={<EndGame/>} />
+                  <Route path={`${basePath}/endgame`} element={<EndGame lang={locale}/>} />
                  <Route path={`${basePath}/game`} element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
                  <Route path={`${basePath}/info`} element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
-                  <Route path={`${basePath}/deduc`} element={<DeducCheck/>} />
+                  <Route path={`${basePath}/tutorial`} element={<Tutorial locale={locale} changeLocale={changeLocale}/>} />
+                  <Route path={`${basePath}/deduc`} element={<DeducCheck lang={locale}/>} />
                  <Route path={`${basePath}/TheRealDeduc`} element={<DeducGrid/>} />
                  <Route path={`${basePath}/profile`} element={<Profile/>} />
                  <Route path={`${basePath}/join`} element={<Lobbies/>}/>
--- a/cryptide_project/src/Components/ChoiceBar.tsx
+++ b/cryptide_project/src/Components/ChoiceBar.tsx
@ -19,6 +19,7 @@ const ChoiceBar = () => {

  async function askEveryone(){
    if (nodeId !== null){
+      //@ts-ignore
      const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId)
      if (person != undefined){
        const indiceTester = IndiceTesterFactory.Create(indices[actualPlayerIndex])
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/cryptide_project/src/Components/GraphContainer.tsx
@ -21,6 +21,10 @@ import { json } from "body-parser";
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
 import {basePath} from "../AdressSetup"
+import GameCreator from "../model/GameCreator";
+import Stub from "../model/Stub";
+import EnigmeDuJourCreator from "../model/EnigmeDuJourCreator";
+import { useIntl } from "react-intl";

 interface MyGraphComponentProps {
  onNodeClick: (shouldShowChoiceBar: boolean) => void;
@ -32,7 +36,7 @@ interface MyGraphComponentProps {
  addToHistory: (message : string) => void
  solo : boolean
  isDaily : boolean
-  isEasy: boolean
+  difficulty: string
  setNetwork: (network: Network) => void
  showLast: boolean
  setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
@ -41,8 +45,24 @@ interface MyGraphComponentProps {
  setPlayerIndex: (playerIndex: number) => void
  importToPdf: boolean
  setImportToPdf: (imp: boolean) => void
+  importToJSON: boolean
+  setImportToJSON: (imp: boolean) => void
+
+  setPutCorrectBackground : (func: () => void) => void
+  setPutGreyBackground : (func: () => void) => void
+  setPutImposssibleGrey : (func: () => void) => void
+  putGreyBackground : () => void
+  putCorrectBackground : () => void
+  putImposssibleGrey : () => void
+  setChangeGraph : (func: (nbNodes: number, nbIndices: number) => void) => void
+
+  handleTurn :() => void
+
+  lang: string
 }

+let askedWrongBot = false
+let lastSocketId= ""
 let lastAskingPlayer = 0
 let lastNodeId = -1
 let first = true
@ -50,86 +70,99 @@ let askedWrongLocal = false
 let mapIndexPersons: Map<number, Person[]> = new Map<number, Person[]>()
 let touchedPlayer = -1
 let botIndex = -1
-let askedWrongBot = false
-let lastSocketId= ""
 let firstLap = true
 let cptHistory = 0
 let lastNodes: NodePerson[] = []
 let cptEndgame = 0
-let firstEnigme = true
-let firstIndex = true
 let endgame= false
-let firstHistory = true
 let cptSquare = 0
 let cptOnAskedWrong = 0
 let cptPlayerLeft = 0
 let firstPlayer = 0
 let cptBug = 0
-let cptUseEffect = 0
 let testPlayers: Player[] = []
+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, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf}) => {
-  let cptTour: number = 0
+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

  //* Gestion du temps :
  let initMtn = 0

+  
+  //* traduction
+  const intl = useIntl();
+
+
  const {isLoggedIn, user, manager} = useAuth();
-  const { indices, indice, person, personNetwork, setNodeIdData, players, setPlayersData, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData, nodesC} = useGame();
+  const { indices, indice, person, personNetwork, setNodeIdData, players, setPlayersData, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setIndicesData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData, nodesC, temps, setPersonData, setPersonNetworkData, setDailyEnigmeData, gameStart, setGameStartData} = useGame();
  const params = new URLSearchParams(window.location.search);

  const navigate = useNavigate();
  const [lastIndex, setLastIndex] = useState(-1)

  const [elapsedTime, setElapsedTime] = useState(0);
+  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
+      endgame = false
+      testFirst = false
+    }
    // Démarrez le timer au montage du composant
    const intervalId = setInterval(() => {
      setElapsedTime((prevElapsedTime) => prevElapsedTime + 0.5);
-      settempsData(elapsedTime)
+      settempsData(testTemps)
+      testTemps += 0.5

-      cptBug ++
-      if (cptBug > 10){
-        cptBug = 0
-        socket.emit("who plays", room)
+      if (!solo){
+        cptBug ++
+        if (cptBug > 10){
+          cptBug = 0
+          socket.emit("who plays", room)
+        }
      }


      // Vérifiez si la durée est écoulée, puis arrêtez le timer
      if (endgame) {
        clearInterval(intervalId);
+        testTemps = 0
      }
    }, 500);

    // Nettoyez l'intervalle lorsque le composant est démonté
    return () => clearInterval(intervalId);
-  }, [elapsedTime, endgame]);
+  }, []);


  useEffect(() => {
    testPlayers = players
-    console.log(testPlayers)
  }, [players])

  useEffect(() =>{
    touchedPlayer=playerTouched
-    console.log(playerTouched)
    if (touchedPlayer == -1){
      if (!askedWrongLocal){
-        socket.emit("put correct background", socket.id)
+        putCorrectBackground()
      }
    }
    else if (touchedPlayer < players.length && touchedPlayer>=0){
      if(!askedWrongLocal){
-        socket.emit("put correct background", socket.id)
-        socket.emit("put grey background", socket.id, touchedPlayer)
+        putCorrectBackground()
+        putGreyBackground()
      }
    }
    else if(touchedPlayer == players.length){
-      socket.emit("put imossible grey", socket.id)
+      putImposssibleGrey()
    }
  }, [playerTouched])

@ -155,19 +188,50 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS

  let playerIndex: number = turnPlayerIndex

-  if (firstIndex){
-    firstIndex=false
-    setPlayerIndex(playerIndex)
-  }
-  let index = 0
-  for (let i=0; i<players.length; i++){
-    if(players[i].id == socket.id){
-        index=i
-        break
+  useEffect(() => {
+    gameStartTmp=gameStart
+    if (gameStartTmp){
+      setGameStartData(false)
+      setLastIndex(turnPlayerIndex)
+      setPlayerIndex(playerIndex)
    }
-  }
+    for (let i=0; i<players.length; i++){
+      if(players[i].id == socket.id){
+          index=i
+          break
+      }
+    }
+    first = false
+    endgame= false
+    if (!solo){
+      for(let i = 0; i<indices.length; i++){
+        mapIndexPersons.set(i, [])
+      }
+      if (actualPlayerIndex==0){
+        players.forEach((p, index) =>{
+          if (p instanceof Bot && personNetwork!=null){
+            p.index=index
+            p.initiateMap(personNetwork)
+          }
+        })
+      }
+      setActualPlayerIndexData(index)
+      if (playerIndex == actualPlayerIndex){
+        handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
+        handleShowTurnBar(true)
+      }
+    }
+  }, [gameStart])
+
+
+  
+

  useEffect(() =>{
+    //* Gestion du sound des tours :
+    if (actualPlayerIndex == lastIndex){
+      handleTurn();
+    }
    cptBug=0
    if (actualPlayerIndex==firstPlayer){
      const bot = testPlayers[lastIndex]
@ -188,6 +252,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
            let i = 0
            socket.emit("node checked", personIndex, true, lastIndex, room, lastIndex)
            while(playerIndex != lastIndex){
+              // //! Play sound ?
+              // handleTurn();
              i++
              if (playerIndex == players.length){
                playerIndex = 0
@ -276,31 +342,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
    }
  }, [lastIndex])

-
-  
-  if (first){
-    first = false
-    endgame= false
-    if (!solo){
-      for(let i = 0; i<indices.length; i++){
-        mapIndexPersons.set(i, [])
-      }
-      if (actualPlayerIndex==0){
-        players.forEach((p, index) =>{
-          if (p instanceof Bot && personNetwork!=null){
-            p.index=index
-            p.initiateMap(personNetwork)
-          }
-        })
-      }
-      setActualPlayerIndexData(index)
-      if (playerIndex == actualPlayerIndex){
-        handleTurnBarTextChange("À vous de jouer")
-        handleShowTurnBar(true)
-      }
-    }
-  }
-
  useEffect(() => {
    if (importToPdf){
      setImportToPdf(false)
@ -315,15 +356,99 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          format: 'a4', // Format du papier (par exemple, a4)
        });
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
+        
+        if (isDaily){
+          pdf.addPage();
+          let text = ""
+
+          if (difficulty === "easy"){
+            indices.forEach((indice, index) => {
+              text += `Indice ${index + 1} : ${indice.ToString('fr')}.\n`
+            })
+          }
+          else{
+            const personIndice = new Map<number, string[]>()
+            indices.forEach((i, index) => {
+                personIndice.set(index, [])
+            })
+        
+            netEnigme?.forEach((pairs, index) => {
+                pairs.forEach((pair) => {
+                  const person = personNetwork?.getPersons().find((n) => index == n.getId())
+                  const indice = indices.findIndex((i) => pair.first.getId() == i.getId())
+                  if (person != undefined && indice != -1){
+                    let string = "L'indice numéro " + (indice + 1) + " répond "
+                    if (pair.second){
+                        string += "vrai "
+                    }
+                    else{
+                        string += "faux "
+                    }
+                    string += "pour " + person.getName()
+                    personIndice.get(indice)?.push(string)
+                  }
+                })
+              });
+        
+            personIndice.forEach((indices, index) => {
+                text += `Indice ${index + 1}:\n`
+                indices.forEach((string) => {
+                    text += `${string}.\n`
+                })
+            })
+          }
+          pdf.text(text, 10, 10);
+        }
+        setDownloaded(true)
        pdf.save('graph.pdf');
+
+        
+
      });
    }
  }, [importToPdf])

+  function downloadToJSON(jsonData: any, filename: string) {
+    const jsonBlob = new Blob([JSON.stringify(jsonData)], {type: 'application/json'});
+    const url = URL.createObjectURL(jsonBlob);
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+  
+
+
+  useEffect(() => {
+    if (importToJSON){
+      setImportToJSON(false)
+      downloadToJSON(personNetwork, "graph.json")
+      downloadToJSON(JSON.stringify(indices), "indices.json")
+    }
+  }, [importToJSON])
+
+  const changeGraph = (nbNodes: number, nbIndices: number) => {
+    //todo différencier les deux
+    const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(nbIndices, nbNodes)
+    setPersonData(choosenPerson)
+    setPersonNetworkData(networkPerson)
+    setIndicesData(choosenIndices)
+    const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
+    setDailyEnigmeData(map)
+
+    changecptTour(1)
+    testTemps=0
+  }
+
  useEffect(() => {
    if (personNetwork == null){
      return
    }
+
+    if (solo){
+      setChangeGraph(() => changeGraph)
+    }
    const graph = GraphCreator.CreateGraph(personNetwork)

    let n = graph.nodesPerson;
@ -369,6 +494,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
            }
        }
    };
+    

    const networkData = { nodes: nodes, edges: graph.edges };
    const network = new Network(container, networkData, initialOptions);
@ -376,9 +502,23 @@ 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)
-      if (!isEasy){
+      setNetEnigme(dailyEnigme)
+      console.log(difficulty)
+      if (difficulty === "hard" || difficulty=== "intermediate"){
+        console.log(dailyEnigme)
        dailyEnigme.forEach((pairs, index) => {
          pairs.forEach((pair) => {
            //@ts-ignore
@ -391,15 +531,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          })
        });
      }
-      else{
-        if (firstHistory){
-          firstHistory=false
-          indices.forEach((indice, index) => {
-            addToHistory("Indice " + positionToEmoji(index, true) + " : " + indice.ToString("fr"))
-          })
-        }
-        
-      }
    }

    socket.on("give network", (playerId) => {
@ -449,7 +580,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                p.indice=indices[index]
                p.index=index
                p.initiateMap(personNetwork)
-                console.log(p.indice.ToString("fr"))
              }
            })
          }
@ -460,7 +590,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
            bot.indice=indices[i]
            bot.index=index
            bot.initiateMap(personNetwork)
-            console.log(bot.indice.ToString("fr"))
          }
        }
        if (i==playerIndex){
@ -471,7 +600,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          setPlayerIndex(playerIndex)
          setLastIndex(playerIndex)
          if (playerIndex===actualPlayerIndex){
-            handleTurnBarTextChange("À vous de jouer")
+            handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
            handleShowTurnBar(true)
          }
        }
@ -530,7 +659,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          playerIndex = newPlayerIndex
          setPlayerIndex(playerIndex)
          setLastIndex(newPlayerIndex)
-          console.log(newPlayerIndex)
          //@ts-ignore
          if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
            //@ts-ignore
@ -551,14 +679,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          if (!node.label.includes(colorToEmoji(positionToColor(askedIndex), works))){
            networkData.nodes.update({id: id, label: node.label + positionToEmoji(askedIndex, works)})
            cptHistory++
-            if (cptHistory % 2 == 0){
+            if (cptHistory % 2 >= 0){
              lastNodes.push(node)
-              addToHistory(testPlayers[askedIndex].pseudo + " à mis un " + positionToEmoji(askedIndex, works) + " à " + personNetwork.getPersons()[id].getName())
+              addToHistory(testPlayers[askedIndex].pseudo + intl.formatMessage({ id: 'history.mis' }) + positionToEmoji(askedIndex, works) + intl.formatMessage({ id: 'à' }) + personNetwork.getPersons()[id].getName())
            }
          }

          if (playerIndex === actualPlayerIndex){
-            handleTurnBarTextChange("À vous de jouer")
+            handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
            handleShowTurnBar(true)
          }
          else{
@ -577,7 +705,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
  
      socket.on("asked wrong", () =>{
        cptSquare++
-        if (cptSquare % 2 == 0){
+        if (cptSquare % 2 >= 0){
          if (indice==null){
            return
          }
@ -603,8 +731,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
            setAskedWrong(true)
            askedWrongBot=true
            handleShowTurnBar(true)
-            handleTurnBarTextChange("Mauvais choix, posez un carré !")
-            socket.emit("put grey background", socket.id, actualPlayerIndex)
+            handleTurnBarTextChange(intl.formatMessage({ id: 'game.wrong' }))
+            touchedPlayer = actualPlayerIndex
+            putGreyBackgroud()
          }
          else{
            socket.emit("can't put square", actualPlayerIndex, room)
@ -615,8 +744,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
      socket.on("can't put square", (askingPlayer) => {
        cptBug=0
        cptOnAskedWrong ++
-        if (cptOnAskedWrong % 2 == 0){
-          addToHistory(testPlayers[askingPlayer].pseudo + " ne peut plus poser de carré")
+        if (cptOnAskedWrong % 2 >= 0){
+          addToHistory(testPlayers[askingPlayer].pseudo + intl.formatMessage({ id: 'history.cantPose' }))
          playerIndex = askingPlayer + 1
          if(playerIndex == players.length){
            playerIndex = 0
@ -624,12 +753,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          setPlayerIndex(playerIndex)
          setLastIndex(playerIndex)
          if (playerIndex === actualPlayerIndex){
-            handleTurnBarTextChange("À vous de jouer")
+            handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
            handleShowTurnBar(true)
          }
          else{
            handleShowTurnBar(false)
-            socket.emit("put correct background", socket.id)
+            putCorrectBackground()
          }
        }
      })
@ -680,26 +809,22 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
        
      })
    }
-    else {
-      if (firstLap){
-        firstLap=false
-        if (!isDaily){
-          addToHistory("<----- [Tour " + 1  +"/"+networkData.nodes.length + "] ----->");
-        }
-      }
-    }
-    

-    socket.on("put correct background", () =>{
+
+    const putCorrectBackground = () => {
      if (personNetwork != null){
        for(const person of personNetwork.getPersons()){
          networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
        }
      }
-    })
+    };
+

-    socket.on("put grey background", (player) =>{
+    setPutCorrectBackground(() => putCorrectBackground)
+
+    const putGreyBackgroud = () => {
      if (personNetwork != null){
+        const player = touchedPlayer
        const tab = mapIndexPersons.get(player)
        if (tab != undefined){
          if (player != actualPlayerIndex){
@ -727,9 +852,11 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          }
        }
      }
-    })
+    };

-    socket.on("put imossible grey", ()=>{
+    setPutGreyBackground(() => putGreyBackgroud)
+
+    const putGreyImpossible = () => {
      if (personNetwork != null && indice!=null){
        const tabNodes: any = []
        const tester = IndiceTesterFactory.Create(indice)
@ -750,7 +877,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          networkData.nodes.update({id: n.id, color: "#808080"})
        }
      }
-    })
+    }
+
+    setPutImposssibleGrey(() => putGreyImpossible)

    socket.on("end game", (winnerIndex) =>{
      if (cptEndgame % 2 == 0){
@ -764,7 +893,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
        setLastIndex(-1)
        setPlayerTouched(-1)
        setWinnerData(winner)
-        setElapsedTime(0)
+        firstHistory=true
+        

        first = true
        cptHistory = 0
@ -772,7 +902,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
        setAskedWrong(false)
        askedWrongBot=false
        endgame = true
-        firstHistory=true
        cptBug=0
        try{
          if(isLoggedIn){
@ -781,10 +910,10 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                // console.log("nbGames: " + user.onlineStats.nbGames + " nbWins: " + user.onlineStats.nbWins);
                if(winner.id === currentPlayer.id){
                  // Ajouter une victoire
-                  manager.userService.addOnlineStats(user.pseudo, 1, elapsedTime);
+                  manager.userService.addOnlineStats(user.pseudo, 1, testTemps - 0.5);
                }
                else{
-                  manager.userService.addOnlineStats(user.pseudo, 0, elapsedTime);
+                  manager.userService.addOnlineStats(user.pseudo, 0, testTemps - 0.5);
                }
              }
              else{
@ -797,6 +926,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          console.log(e);
        }
        finally{
+          setElapsedTime(0)
+          putCorrectBackground()
          socket.off("end game")
          socket.off("asked all")
          socket.off("opacity activated")
@ -806,9 +937,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
          socket.off("already asked")
          socket.off("asked wrong")
          socket.off("asked")
-          socket.off("put correct background")
-          socket.off("put grey background")
-          socket.off("put imossible grey")
          socket.off("who plays")
    
          navigate(`${basePath}/endgame`)
@ -816,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) {
@ -870,7 +980,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                  playerIndex = 0
                }
                socket.emit("node checked", params.nodes[0], false, actualPlayerIndex, room, playerIndex)
-                socket.emit("put correct background", socket.id)
+                putCorrectBackground()
                touchedPlayer=-1
                askedPersons.push(person)
                askedWrongLocal=false
@ -908,7 +1018,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                console.log("CE N'EST PAS UN BOT")
                //@ts-ignore
                socket.emit("ask player", params.nodes[0], players[touchedPlayer].id, players.find((p) => p.id === socket.id, actualPlayerIndex))
-                socket.emit("put correct background", socket.id)
+                putCorrectBackground()
                touchedPlayer=-1
                setPlayerTouched(-1)
              }
@ -942,14 +1052,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                  }
                  if(!works){
                    socket.emit("node checked", params.nodes[0], works, playerIndex, room, actualPlayerIndex)
-                    socket.emit("put correct background", socket.id)
+                    putCorrectBackground()
                    socket.emit("asked wrong", players[actualPlayerIndex])
                    touchedPlayer=-1
                    setPlayerTouched(-1)
                    return
                  }
                  if (i == players.length - 1){
-                    socket.emit("put correct background", socket.id)
+                    putCorrectBackground()
                    await delay(1000)
                    socket.emit("end game", actualPlayerIndex, room)
                    return
@ -959,7 +1069,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                }
                touchedPlayer=-1
                setPlayerTouched(-1)
-                socket.emit("put correct background", socket.id)
+                putCorrectBackground()
                await delay(1000)
                socket.emit("end game", actualPlayerIndex, room)
              }
@ -968,71 +1078,97 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
        } 
        else{
          //@ts-ignore
-          const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
-          if (person != undefined){
+          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 (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
            for (const i of indices){
              const tester = IndiceTesterFactory.Create(i)
-              const test = tester.Works(person)
-              //@ts-ignore
-              const node = nodes.get().find((n) => params.nodes[0] == n.id)
-              if (node!=undefined){
-                if (!node.label.includes(positionToEmoji(index, test))){
-                  networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(index, test)})
-                  await delay(500)
-                  if(!test){
-                    works = false
-                  }
-                  if (index == indices.length - 1 && works){
+              const test = tester.Works(personTest)
+                //@ts-ignore
+              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)})
+                await delay(500);
+              }
+              index++
+            }
+            if (person !== null && person.getId() === params.nodes[0]){
+              if (user!=null){
+                setWinnerData(user)
+                setNetworkDataData(networkData)
+              }
+              cptTour ++;
+              setNbCoupData(cptTour)

-                    if (user!=null){
-                      setWinnerData(user)
-                      setNetworkDataData(networkData)
-                    }
-                    cptTour ++;
-                    setNbCoupData(cptTour)
-                    setElapsedTime(0)
-                    endgame = true
-
-                    try{
-                      if(user && isLoggedIn){
-                        if(solo){
-                          if(isDaily){
-                            // TODO: verif difficulté et add les stats
-                            // TODO: verif pour facile et difficile, si réussi en one shot ou non
-                            if(isEasy){
-                              manager.userService.addEasyEnigmaStats(user.pseudo, 1, elapsedTime);
-                            }
-                            else{
-                              manager.userService.addHardEnigmaStats(user.pseudo, 1, elapsedTime);
-                            }
-                          }
-                          else{
-                            // add stats mastermind
-                            if(user && user.mastermindStats){
-                              manager.userService.addMastermindStats(user.pseudo, cptTour, elapsedTime);
-                            }
-                          }
-                        }
+              try{
+                console.log("time: " + testTemps)
+                if(user && isLoggedIn && !downloaded){
+                  if(solo){
+                    if(isDaily){
+                      // TODO: verif difficulté et add les stats
+                      // TODO: verif pour facile et difficile, si réussi en one shot ou non
+                      if(difficulty==="easy"){
+                        manager.userService.addEasyEnigmaStats(user.pseudo, 1, testTemps - 0.5);
+                      }
+                      else if (difficulty === "intermediate"){
+                      }
+                      else{
+                        manager.userService.addHardEnigmaStats(user.pseudo, 1, testTemps - 0.5);
                      }
                    }
-                    catch(error){
-                      console.log(error);
+                    else{
+                      // add stats mastermind
+                      if(user && user.mastermindStats){
+                        manager.userService.addMastermindStats(user.pseudo, cptTour, testTemps - 0.5);
+                      }
                    }
-                    navigate(`${basePath}/endgame?solo=true&daily=${isDaily}`)
                  }
-                  
+                }       
+                else{
+                  // add stats mastermind
+                  if(user && user.mastermindStats && !downloaded){
+                    manager.userService.addMastermindStats(user.pseudo, cptTour, elapsedTime);
+                  }
                }
+                testFirst = true
+                setElapsedTime(0)
+                endgame = true                    
+                navigate(`${basePath}/endgame?solo=true&daily=${isDaily}`)
+              }      
+              catch(error){
+                console.log(error);
+              }
+              navigate(`${basePath}/endgame?solo=true&daily=${isDaily}`)
+            }
+            else{
+              if (isDaily){
+                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);
+                  changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
+                }
+                else if (difficulty==="easy"){
+                  cptTour ++; // On Incrémente le nombre de tour du joueur
+                  changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
+                }
+                else{
+                  navigate(`${basePath}/endgame?solo=true&daily=true`)
+                  setNetworkDataData(networkData)
+                  setWinnerData(null)
+                }
+              }
+              else{
+                  addToHistory(personTest.getName() + intl.formatMessage({ id: 'history.NotCoupable' })); //TODO préciser le nombre d'indice qu'il a de juste
+                  cptTour ++; // On Incrémente le nombre de tour du joueur
+                  addToHistory("<----- [Tour " + cptTour  +"/"+networkData.nodes.length + "] ----->");
+                  changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
              }
-              index++
            }
-            addToHistory(person.getName() + " n'est pas le tueur !"); //TODO préciser le nombre d'indice qu'il a de juste
-
-            cptTour ++; // On Incrémente le nombre de tour du joueur
-            const tour = cptTour+1;
-            addToHistory("<----- [Tour " + tour  +"/"+networkData.nodes.length + "] ----->");
-            changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
          }
        }
      }
@ -1043,7 +1179,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
        setPlayerTouched(-1)
      }
    });
-  }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
+  }, [personNetwork]); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu

  return (
    <>
@ -1054,12 +1190,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
  function delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
-
-  function putGreyBackgroud(index: number){
-    /*
-    
-    */
-  }
 }


--- a/cryptide_project/src/Components/LangDropDown.tsx
+++ b/cryptide_project/src/Components/LangDropDown.tsx
@ -3,11 +3,39 @@ import React from 'react';
 import { NavDropdown } from 'react-bootstrap';
 import LanguageNavItem from './LangNavItem';
 import { HiLanguage } from 'react-icons/hi2';
+import ReactCountryFlag from 'react-country-flag';
+
+//@ts-ignore
+const localToCountryCode = (locale) => {
+  switch (locale) {
+    case 'fr':
+      return 'FR';
+    case 'en':
+      return 'GB';
+    case 'es':
+      return 'ES';
+    case 'pt':
+      return 'PT';
+    case 'ru':
+      return 'RU';
+    default:
+      return 'FR';
+  }
+};
+

 // @ts-ignore
-const LangDropdown = ({ changeLocale }) => {
+const LangDropdown = ({ changeLocale, locale}) => {
+  const selectedcountryCode = localToCountryCode(locale);
  return (
-    <NavDropdown title={<HiLanguage/>} id="language-dropdown" align='end' drop='down-centered'>
+    <NavDropdown title={
+      <ReactCountryFlag
+        className="custom-flag"
+        countryCode={selectedcountryCode === null ? 'FR' : selectedcountryCode}
+        svg
+        style={{ margin: 'auto 10px 3px auto' }}
+      />
+    } id="language-dropdown" align='end' drop='down-centered'>
      <LanguageNavItem
        countryCode="FR"
        languageKey="languageSelector.french"
@ -18,7 +46,21 @@ const LangDropdown = ({ changeLocale }) => {
        languageKey="languageSelector.english"
        onClick={() => changeLocale('en')}
      />
-      {/* Ajoutez d'autres langues selon vos besoins */}
+      <LanguageNavItem
+        countryCode="ES"
+        languageKey="languageSelector.espagnol"
+        onClick={() => changeLocale('es')}
+      />
+      <LanguageNavItem
+        countryCode="PT"
+        languageKey="languageSelector.portuguese"
+        onClick={() => changeLocale('pt')}
+      />
+      <LanguageNavItem
+        countryCode="RU"
+        languageKey="languageSelector.russian"
+        onClick={() => changeLocale('ru')}
+      />
    </NavDropdown>
  );
 };
--- a/cryptide_project/src/Components/LobbyContainer.tsx
+++ b/cryptide_project/src/Components/LobbyContainer.tsx
@ -12,7 +12,6 @@ import Tooltip from 'react-bootstrap/esm/Tooltip';
 import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
 import {basePath} from "../AdressSetup"

-
 interface LobbyContainerProps {
        roomNum : string
        HeadPlayer : Player
@ -27,7 +26,7 @@ const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbP
    const theme=useTheme();

    const navigate = useNavigate();
-    const dest = '/lobby?room=' + roomNum;
+    const dest = 'lobby?room=' + roomNum;

    //* Modal
    const [showFull, setShowFull] = useState(false);
--- a/cryptide_project/src/Components/NavBar.tsx
+++ b/cryptide_project/src/Components/NavBar.tsx
@ -12,6 +12,7 @@ import { BsFillPersonPlusFill } from 'react-icons/bs';

 /* Images */
 import logo from '../res/img/logo2_preview_rev_1.png';
+import defaultImg from '../res/img/Person.png';

 /* Components */
 import LanguageNavItem from './LangNavItem';
@ -26,19 +27,23 @@ import { useAuth } from '../Contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';

 import {basePath} from "../AdressSetup"
+import Player from '../model/Player';
+import { set } from 'lodash';

 // @ts-ignore
-function AppNavbar({changeLocale}) {
+function AppNavbar({changeLocale, locale}) {
    const theme = useTheme();
-    const {user, isLoggedIn, logout} = useAuth();
-
    const navigate = useNavigate();
-
+    const {isLoggedIn, login, user, setUserData, manager } = useAuth();

    function navigateToProfile(){
        navigate(`${basePath}/profile`)
    }

+    function navigateToLogin(){
+        navigate(`${basePath}/login`)
+    }
+    
    function navigateToHome(){
        navigate(`${basePath}/`)
    }
@ -53,54 +58,42 @@ function AppNavbar({changeLocale}) {
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href={`${basePath}/`} style={{ color: theme.colors.text }}>
-                            Jouer
+                            <FormattedMessage id="navbar.play" />
                        </Nav.Link>
                        <Nav.Link href={`${basePath}/presentation`} style={{ color: theme.colors.text }}>
-                            Présentation
+                            <FormattedMessage id="navbar.presentation" />
                        </Nav.Link>
                        <Nav.Link href={`${basePath}/info`} style={{ color: theme.colors.text }}>
-                            Info
+                            <FormattedMessage id="navbar.info" />
                        </Nav.Link>
                    </Nav>
                    <div className='leftdiv'>
                        <Nav className="ml-auto navbar-title-dd">
-                        {isLoggedIn ? (
-                            <NavDropdown
-                                title={<span style={{ color: theme.colors.text }}>Menu <BiDoorOpen /></span>}
-                                id="basic-nav-dropdown"
-                                align="end"
-                                drop='down-centered'
-                            >
-                            <NavDropdown.Item onClick={navigateToProfile}>Profil</NavDropdown.Item>
-                            <LanguageNavItem
-                                countryCode="FR"
-                                languageKey="languageSelector.french"
-                                onClick={() => changeLocale('fr')}
-                            />
-                            <LanguageNavItem
-                                countryCode="GB"
-                                languageKey="languageSelector.english"
-                                onClick={() => changeLocale('en')}
-                            />
-                            <NavDropdown.Divider />
-                            <NavDropdown.Item onClick={logout}>Déconnexion</NavDropdown.Item>
-                            </NavDropdown>
-                        ) : (
-                            <>
-                            <Nav.Link href={`${basePath}/login`} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
-                                <BiLogInCircle />
-                                <FormattedMessage id="log_in" />
-                            </Nav.Link>
-                            <Nav.Link href={`${basePath}/signup`} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
-                                <BsFillPersonPlusFill />
-                                <FormattedMessage id="sign_up" />
-                            </Nav.Link>
-                            <LangDropDown changeLocale={changeLocale}/>
-                            </>
-                        )}
+                            {isLoggedIn ? (
+                                <>
+                                    {/* Boutou qui lors du clique nous redirige vers le profile */}
+                                    <Nav.Link onClick={navigateToProfile} style={{ color: theme.colors.text }}>
+                                        <span>
+                                            <img src={user? user.profilePicture : defaultImg} height="50" width="50" alt="profile"/>
+                                            {user && user.pseudo}
+                                        </span>
+                                    </Nav.Link>
+                                </>
+                            ):(
+                                <>
+                                    {/* Bouton qui lors du clique nous redirige vers la connexion */}
+                                    <Nav.Link onClick={navigateToLogin} style={{ color: theme.colors.text }}>
+                                        <span>
+                                            <img src={user?.profilePicture} height="50" width="50" alt="profile"/>
+                                            {user && user.pseudo}
+                                        </span>
+                                    </Nav.Link>
+                                </>
+                            )}
                        </Nav>
                    </div>
                </Navbar.Collapse>
+                <LangDropDown changeLocale={changeLocale} locale={locale}/>
            </Container>
        </Navbar>
    );
--- a/cryptide_project/src/Components/PersonStatus.tsx
+++ b/cryptide_project/src/Components/PersonStatus.tsx
@ -37,7 +37,7 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
        img = BotImg
    }

-    const [buffer, setBuffer] = useState("")
+    const [buffer, setBuffer] = useState('50%')

    const [touchedPlayer, setTouchedPlayer] = useState(-2)
    useEffect(() =>{
@ -48,10 +48,10 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,

    useEffect(() => {
        if (playerIndex===index){
-            setBuffer('solid 3px green')
+            setBuffer('5px')
        }
        else{
-            setBuffer('')
+            setBuffer('50%')
        }
    }, [playerIndex])
    
@ -70,8 +70,8 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
        onTouch();
    };
    const circleStyle: React.CSSProperties = {
-        backgroundColor: touchedPlayer == index && showCircle ? 'gold' : positionToColor(index), // Changement de la couleur en fonction de la condition
-        borderRadius: '50%',
+        backgroundColor: positionToColor(index), // Changement de la couleur en fonction de la condition
+        borderRadius: buffer,
        width: '80px',
        height: '80px',
        display: 'flex',
@ -83,8 +83,8 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,

    const circleStyleInt: React.CSSProperties = {

-        backgroundColor:'white',
-        borderRadius: '50%',
+        backgroundColor: touchedPlayer == index && showCircle ? 'lightblue' : 'white',
+        borderRadius: buffer,
        width: '70px',
        height: '70px',
        display: 'flex',
@ -111,8 +111,8 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
                    </div>
            {/* </div> */}
            </div>
-            <div className='playerNameDisplay' style={{border:buffer}}>
-                <h5>{actualPlayerIndex !== index ? (name.substring(0, name.length - 2).length > 7 ? name.substring(0, name.length - 2).substring(0, 7) + '...' : name) : 'vous'}</h5>
+            <div className='playerNameDisplay'>
+                <h6>{actualPlayerIndex !== index ? (name.length > 18 ? name.substring(0, 15) + '...' : name) : 'vous'}</h6>
            </div>
        </div>
    );
--- a/cryptide_project/src/Components/PlayerItemList.tsx
+++ b/cryptide_project/src/Components/PlayerItemList.tsx
@ -20,6 +20,7 @@ import Bot from '../model/Bot';

 /* server */
 import { socket } from '../SocketConfig';
+import { Form } from 'react-router-dom';

 interface MyPlayerItemListProps {
    player : Player,
@ -58,13 +59,13 @@ const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player, room }) => {
            {isBot && (
                <ToggleButtonGroup type='radio' name={`options-${player.id}`} defaultValue={1}>
                    <ToggleButton id={`tbg-radio-1-${player.id}`} value={1}>
-                        Facile
+                        <FormattedMessage id='easy' />
                    </ToggleButton>
                    <ToggleButton id={`tbg-radio-2-${player.id}`} value={2}>
-                        Intermédiaire
+                        <FormattedMessage id='medium' />
                    </ToggleButton>
                    <ToggleButton id={`tbg-radio-3-${player.id}`} value={3}>
-                        Fort
+                        <FormattedMessage id='strong' />
                    </ToggleButton>
                </ToggleButtonGroup>
            )}
--- a/cryptide_project/src/Components/PlayerList.tsx
+++ b/cryptide_project/src/Components/PlayerList.tsx
@ -5,7 +5,10 @@ import Player from '../model/Player';
 import { useTheme } from '../Style/ThemeContext';
 import PersonStatus from './PersonStatus';
 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
@ -16,13 +19,15 @@ interface PlayerListProps {
    setPlayerTouched: (newPlayerTouch: number) => void;
    playerIndex: number
    askedWrong: boolean
+    greyForEveryone: () => void
 }

-const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex, askedWrong}) => {
+const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex, askedWrong, greyForEveryone}) => {
    const theme = useTheme();

    function askEveryone(){
        if (!askedWrong){
+            greyForEveryone()
            setPlayerTouched(players.length)    
        }
    }
@ -34,12 +39,10 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                    //@ts-ignore
                    players.map((player, index) => (
                        //player.id!=socket.id && 
-                        <PersonStatus img={player.profilePicture} 
+                        <PersonStatus img={player instanceof Player ? Person : BotImg} 
                                    state={Person} 
                                    key={index} 
-                                    name={player.pseudo 
-                                    + " " + 
-                                    positionToEmoji(index, true)} 
+                                    name={player.pseudo}
                                    playerTouched={playerTouched} 
                                    setPlayerTouched={setPlayerTouched} 
                                    index={index} 
@ -65,8 +68,9 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                            borderRadius: "10px",
                            border: "solid 1px",
                            textAlign: "center",
+                            color: "white",
                            padding: "10px"}}
-                            onClick={() => askEveryone()}>Guess !</button>
+                            onClick={() => askEveryone()}><FormattedMessage id='askeveryone'/></button>
                        ):
                        (
                            <button style={{ 
@ -75,8 +79,9 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                                borderRadius: "10px",
                                border: "solid 1px",
                                textAlign: "center",
+                                color: "white",
                                padding: "10px"}}
-                            onClick={() => askEveryone()}>Ask everyone</button>
+                            onClick={() => askEveryone()}><FormattedMessage id='askeveryone'/></button>
                        )
                    }
            </div>
--- a/cryptide_project/src/Components/ScoreBoard.css
+++ b/cryptide_project/src/Components/ScoreBoard.css
@ -0,0 +1,28 @@
+/* Ajoutez ces styles dans votre fichier CSS ou utilisez un préprocesseur comme SCSS */
+.tabsStats {
+    padding: 20px;
+  }
+  
+  .stats {
+    background-color: #f0f0f0;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+  
+  /* 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;
+  }
--- a/cryptide_project/src/Components/ScoreBoard.tsx
+++ b/cryptide_project/src/Components/ScoreBoard.tsx
@ -1,13 +1,13 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
+import Carousel from 'nuka-carousel';

 /* Style */
 import '../Pages/Play.css';
 import '../Style/Global.css'
+import './ScoreBoard.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';

@ -19,155 +19,373 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';

 /* Component */
-import ButtonImgNav from './ButtonImgNav';
 import User from '../model/User';

-/* Types */
+/* Services */
+import ScoreboardService from '../services/ScoreboardService';
+import { BiLineChart, BiLineChartDown } from 'react-icons/bi';
+import { CarouselCaption } from 'react-bootstrap';
+import { BsLine } from 'react-icons/bs';
+
+import { FormattedMessage, useIntl } from 'react-intl';

 //@ts-ignore
 const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
    const theme=useTheme();

-    console.log(Player);
+    const [carouselKey, setCarouselKey] = useState(0);
+    const [activeTab, setActiveTab] = useState("perso");
+
+    // DAILY STATS
+    const [dailyMastermindStats, setDailyMastermindStats] = useState<any>(null);
+    const [dailyEasyEnigmaStats, setDailyEasyEnigmaStats] = useState<any>(null);
+    const [dailyMediumEnigmaStats, setDailyMediumEnigmaStats] = useState<any>(null);
+    const [dailyHardEnigmaStats, setDailyHardEnigmaStats] = useState<any>(null);
+    const [dailyOnlineStats, setDailyOnlineStats] = useState<any>(null);
+
+    // WEEKLY STATS
+    const [weeklyMastermindStats, setWeeklyMastermindStats] = useState<any>(null);
+    const [weeklyEasyEnigmaStats, setWeeklyEasyEnigmaStats] = useState<any>(null);
+    const [weeklyMediumEnigmaStats, setWeeklyMediumEnigmaStats] = useState<any>(null);
+    const [weeklyHardEnigmaStats, setWeeklyHardEnigmaStats] = useState<any>(null);
+    const [weeklyOnlineStats, setWeeklyOnlineStats] = useState<any>(null);
+
+    // Récupérer les records daily
+    useEffect(() => {
+        async function fetchDailyStats() {
+            try {
+                const resultMM = await ScoreboardService.getDailyMastermindStats();
+                const resultEF = await ScoreboardService.getDailyEasyEnigmaStats();
+                const resultEM = await ScoreboardService.getDailyMediumEnigmaStats();
+                const resultED = await ScoreboardService.getDailyHardEnigmaStats();
+                const resultOL = await ScoreboardService.getDailyOnlineStats(); 
+                
+                setDailyMastermindStats(resultMM);
+                setDailyEasyEnigmaStats(resultEF);
+                setDailyMediumEnigmaStats(resultEM);
+                setDailyHardEnigmaStats(resultED);
+                setDailyOnlineStats(resultOL);
+            } catch (error) {
+                console.error(error);
+            }
+        }
+
+        async function fetchWeeklyStats() {
+            try{
+                const resultMM = await ScoreboardService.getWeeklyMastermindStats();
+                const resultEF = await ScoreboardService.getWeeklyEasyEnigmaStats();
+                const resultEM = await ScoreboardService.getWeeklyMediumEnigmaStats();
+                const resultED = await ScoreboardService.getWeeklyHardEnigmaStats();
+                const resultOL = await ScoreboardService.getWeeklyOnlineStats();
+
+                setWeeklyMastermindStats(resultMM);
+                setWeeklyEasyEnigmaStats(resultEF);
+                setWeeklyMediumEnigmaStats(resultEM);
+                setWeeklyHardEnigmaStats(resultED);
+                setWeeklyOnlineStats(resultOL);
+            } catch (error) {
+                console.error(error);
+            }
+        }
+
+        fetchDailyStats();
+        fetchWeeklyStats();
+    }, []);
+
+    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 (
-        // <div className='LeaderBoardiv'>
-        <div className='LeaderBoardiv'>
-            <Tabs style={{width:"100%"}}
-                defaultActiveKey="daily"
-                id="ScoreBoard"
-                className="mb-3">
-                <Tab eventKey="perso" title="Vos Stats" disabled = { !Player.pseudo.startsWith("Guest_") ? false : true}>
-                <Container fluid>
-                        <Row>Stats en MasterMind :</Row>
-                        <Row>
-                            <Col sm={10}>Partie Jouées :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.mastermindStats.nbGames : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Best-Score :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.mastermindStats.bestScore : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Moyenne d'essai :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.mastermindStats.avgNbTry : "0"}</Col>
-                        </Row>
-                        <hr/>
-                        <Row>Stats en Enigme facile :</Row>
-                        <Row>
-                            <Col sm={10}>Partie jouée :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.easyEnigmaStats.nbGames : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Nombre de victoire :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.easyEnigmaStats.nbWins : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Ratio V/D :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.easyEnigmaStats.ratio.toFixed(2) + "%" : "00.0%"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Meilleur temps :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.easyEnigmaStats.bestTime : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Moyenne de temps :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.easyEnigmaStats.avgTime.toFixed(2) : "0"}</Col>
-                        </Row>
-                        <hr/>
-                        <Row>Stats en Enigme moyenne :</Row>
-                        <Row>
-                            <Col sm={10}>Partie jouée :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.mediumEnigmaStats.nbGames : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Best-Score :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.mediumEnigmaStats.bestScore : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Moyenne d'essai :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.mediumEnigmaStats.avgNbTry.toFixed(2) : "0"}</Col>
-                        </Row>
-                        <hr/>
-                        <Row>Stats en Enigme difficile :</Row>
-                        <Row>
-                            <Col sm={10}>Partie jouée :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.hardEnigmaStats.nbGames : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Nombre de victoire :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.hardEnigmaStats.nbWins : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Ratio V/D :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.hardEnigmaStats.ratio.toFixed(2) + "%" : "00.0%"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Meilleur temps :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.hardEnigmaStats.bestTime : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Moyenne de temps :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.hardEnigmaStats.avgTime.toFixed(2) : "0"}</Col>
-                        </Row>
-                        <hr/>
-                        <Row>Stats en ligne :</Row>
-                        <Row>
-                            <Col sm={10}>Partie jouée :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.onlineStats.nbGames : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Nombre de victoire :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.onlineStats.nbWins : "0"}</Col>
-                        </Row>
-                        <Row>
-                            <Col sm={10}>Ratio V/D :</Col>
-                            <Col className='leftRow'>{Player !== null ? Player.onlineStats.ratio.toFixed(2) + "%" : "0"}</Col>
-                        </Row>
-                    </Container>
-                </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>
+        <Tabs
+            activeKey={activeTab}
+            onSelect={(key:any) => {
+            setActiveTab(key);
+            // Forcer une mise à jour du carousel
+            setCarouselKey((prevKey) => prevKey + 1);
+            }}
+            id="ScoreBoard"
+            className="tabsStats justify-content-around">
+            <Tab eventKey="perso"
+            title={intl.formatMessage({ id: 'score.tab.stat' })}
+            disabled={!Player.pseudo.startsWith("Guest_") ? false : true}>
+                <Tab.Content className={`tabsStats ${activeTab !== 'perso' ? 'hidden' : ''}`}>
+                    <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 />
+                            <p><FormattedMessage id='score.nbPlayed'/> : {Player.mastermindStats.nbGames}</p>
+                            <p><FormattedMessage id='score.best'/>: {Player.mastermindStats.bestScore}</p>
+                            <p><FormattedMessage id='score.moy'/>: {Player.mastermindStats.avgNbTry.toFixed(2)}</p>
+                        </div>
+                        <div className="stats">
+                            <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>
+                            <p><FormattedMessage id='score.ratio'/>: {Player.easyEnigmaStats.ratio.toFixed(2) + "%"}</p>
+                            <p><FormattedMessage id='score.bestTmp'/>: {Player.easyEnigmaStats.bestTime + "s"}</p>
+                            <p><FormattedMessage id='score.moyTmp'/>: {Player.easyEnigmaStats.avgTime.toFixed(2) + "s"}</p>
+                        </div>
+                        <div className="stats">
+                            <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><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>
+                            <p><FormattedMessage id='score.ratio'/>: {Player.hardEnigmaStats.ratio.toFixed(2) + "%"}</p>
+                            <p><FormattedMessage id='score.bestTmp'/>: {Player.hardEnigmaStats.bestTime + "s"}</p>
+                            <p><FormattedMessage id='score.moyTmp'/>: {Player.hardEnigmaStats.avgTime.toFixed(2) + "s"}</p>
+                        </div>
+                        <div className="stats">
+                            <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>
+                            <p><FormattedMessage id='score.ratio'/>: {Player.onlineStats.ratio.toFixed(2) + "s"}</p>
+                        </div>
+                    </Carousel>
+                </Tab.Content>
+            </Tab>
+            <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">
+                            <h5><FormattedMessage id='info.mdj.mastermind'/></h5>
+                            <hr />
+                            {dailyMastermindStats !== null ? (dailyMastermindStats.tab.length !== 0 ? dailyMastermindStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.score + " essai(s)"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.easy'/></h5>
+                            <hr />
+                            {dailyEasyEnigmaStats !== null ? (dailyEasyEnigmaStats.tab.length !== 0 ? dailyEasyEnigmaStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.time + "s"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.int'/></h5>
+                            <hr />
+                            {dailyMediumEnigmaStats !== null ? (dailyMediumEnigmaStats.tab.length !== 0 ? dailyMediumEnigmaStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.time + "s"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.hard'/></h5>
+                            <hr />
+                            {dailyHardEnigmaStats !== null ? (dailyHardEnigmaStats.tab.length !== 0 ? dailyHardEnigmaStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.time + "s"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.online'/></h5>
+                            <hr />
+                            {dailyOnlineStats !== null ? (dailyOnlineStats.tab.length !== 0 ? dailyOnlineStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.wins + " victoires"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                    </Carousel>
+                </Tab.Content>
+            </Tab>
+            <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">
+                            <h5><FormattedMessage id='info.mdj.mastermind'/></h5>
+                            <hr />
+                            {weeklyMastermindStats !== null ? (weeklyMastermindStats.tab.length !== 0 ? weeklyMastermindStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.score + " essai(s)"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.easy'/></h5>
+                            <hr />
+                            {weeklyEasyEnigmaStats !== null ? (weeklyEasyEnigmaStats.tab.length !== 0 ? weeklyEasyEnigmaStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.time + "s"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.int'/></h5>
+                            <hr />
+                            {weeklyMediumEnigmaStats !== null ? (weeklyMediumEnigmaStats.tab.length !== 0 ? weeklyMediumEnigmaStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.time + "s"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.hard'/></h5>
+                            <hr />
+                            {weeklyHardEnigmaStats !== null ? (weeklyHardEnigmaStats.tab.length !== 0 ? weeklyHardEnigmaStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.time + "s"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                        <div className="stats">
+                            <h5><FormattedMessage id='score.titre.online'/></h5>
+                            <hr />
+                            {weeklyOnlineStats !== null ? (weeklyOnlineStats.tab.length !== 0 ? weeklyOnlineStats.tab.map((stats: any, index: number) => (
+                                <>
+                                    <Row>
+                                        <Col>
+                                            <p>{index+1}.{stats.pseudo}</p>
+                                        </Col>
+                                        <Col>
+                                            <p>{stats.wins + " victoires"}</p>
+                                        </Col>
+                                    </Row>
+                                </>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )) : (
+                                <p className='text-warning'><FormattedMessage id='score.nothing'/></p>
+                            )}
+                        </div>
+                    </Carousel>
+                </Tab.Content>
+            </Tab>
+        </Tabs>
    );
 }

-export default ScoreBoard;
+export default ScoreBoard;
--- a/cryptide_project/src/Components/TurnBar.tsx
+++ b/cryptide_project/src/Components/TurnBar.tsx
@ -12,7 +12,6 @@ const TurnBar: React.FC<TurnBarProps> = ({text})=> {
            style={{ 
                borderColor: theme.colors.secondary
            }}>
-            {/* texte changeable et a traduire */}
            <p>{text}</p>
        </div>
    );
--- a/cryptide_project/src/Components/TutorialGraph.tsx
+++ b/cryptide_project/src/Components/TutorialGraph.tsx
@ -0,0 +1,335 @@
+import React, { useEffect, useState } from "react";
+import { DataSet, Network} from "vis-network/standalone/esm/vis-network";
+import GraphCreator from "../model/Graph/GraphCreator";
+import "./GraphContainer.css";
+import IndiceTesterFactory from "../model/Factory/IndiceTesterFactory";
+import Person from "../model/Person";
+import { useNavigate } from "react-router-dom";
+import { useGame } from "../Contexts/GameContext";
+import { socket } from "../SocketConfig"
+import { colorToEmoji, positionToColor, positionToEmoji } from "../ColorHelper";
+import { ColorToHexa } from "../model/EnumExtender";
+import Bot from "../model/Bot";
+import NodePerson from "../model/Graph/NodePerson";
+import { useAuth } from "../Contexts/AuthContext";
+import Indice from "../model/Indices/Indice";
+import Pair from "../model/Pair";
+import Player from "../model/Player";
+import JSONParser from "../JSONParser";
+import User from "../model/User";
+import { json } from "body-parser";
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+import {basePath} from "../AdressSetup"
+import PersonNetwork from "../model/PersonsNetwork";
+import { useIntl } from "react-intl";
+
+interface TutorialGraphProps {
+  setNetwork: (network: Network) => void
+  showLast: boolean
+  setPlayerIndex: (playerIndex: number) => void
+  handleShowTurnBar: (bool: boolean) => void
+  handleTurnBarTextChange: (text: string) => void
+  addToHistory: (text: string) => void
+  setPlayerTouched: (playerIndex: number) => void
+  playerTouched: number
+  tutoStep: number
+  setTutoStep: (step: number) => void
+  setGreyForEveryone: (func: () => void) => void
+  displayModalstep: (step: number) => void;
+}
+
+let lastNodes: NodePerson[] = []
+let firstIndex = true
+let first = true
+let touchedPlayer = -1
+let stepTuto = -1
+
+
+
+
+const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep, setGreyForEveryone, displayModalstep}) => {
+  let cptTour: number = 0
+
+  //* Gestion du temps :
+  let initMtn = 0
+
+    //* traduction
+    const intl = useIntl();
+
+  const {isLoggedIn, user, manager} = useAuth();
+  const {setIndiceData, setIndicesData, setActualPlayerIndexData, setWinnerData, setPlayersData, setNetworkDataData, setPersonData} = useGame();
+  const params = new URLSearchParams(window.location.search);
+
+  const navigate = useNavigate();
+  const [lastIndex, setLastIndex] = useState(-1)
+
+  if (first){
+    first = false
+    setActualPlayerIndexData(0)
+    handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
+    handleShowTurnBar(true)
+  }
+  
+
+  useEffect(() =>{
+    touchedPlayer=playerTouched
+  }, [playerTouched])
+
+  useEffect(() => {
+    stepTuto = tutoStep
+    if(stepTuto===1){
+      handleShowTurnBar(true)
+    }
+  }, [tutoStep])
+
+
+  useEffect(() => {
+    const tab: NodePerson[] = []
+    for(const n of lastNodes.reverse()){
+    
+    }
+    lastNodes = tab
+    if (showLast){
+      socket.emit("opacity activated", socket.id)
+    }
+    else{
+      socket.emit("opacity deactivated", socket.id)
+    }
+    
+  }, [showLast])
+
+  let playerIndex: number = 0
+
+  if (firstIndex){
+    firstIndex=false
+    setPlayerIndex(playerIndex)
+  }
+  let index = 0
+
+  useEffect(() => {
+
+
+    let jsonGraph = require("../tuto/graph.json")
+    let jsonIndice = require("../tuto/indices.json")
+
+    const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph))
+    const indices = JSONParser.JSONToIndices(jsonIndice)
+
+    setIndiceData(indices[0])
+    if (personNetwork == null){
+      return
+    }
+    const graph = GraphCreator.CreateGraph(personNetwork)
+
+    const nodes = new DataSet(graph.nodesPerson);
+
+    setIndicesData(indices)
+    setPersonData(personNetwork.getPersons()[4])
+
+    let n = graph.nodesPerson;
+    let e = graph.edges;
+    const graphState = { n, e };
+
+    // Sauvegarder l'état dans localStorage
+    localStorage.setItem('graphState', JSON.stringify(graphState));
+
+    const container = document.getElementById('graph-container');
+    if (!container) {
+      console.error("Container not found");
+      return;
+    }
+    // Charger les données dans le graph
+
+    // Configuration des options du Graphe
+    const initialOptions = {
+
+        layout: {
+            improvedLayout: true,
+            hierarchical: {
+                enabled: false,
+                direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
+                sortMethod: 'hubsize'
+            },
+            randomSeed: 3
+        },
+        physics: {
+            enabled: true,
+            barnesHut: {
+                gravitationalConstant: -1000,
+                springConstant: 0.001,
+                springLength: 100
+            },
+            solver: "repulsion",
+            repulsion: {
+              nodeDistance: 100 // Put more distance between the nodes.
+            }
+        }
+    };
+
+    const networkData = { nodes: nodes, edges: graph.edges };
+    const network = new Network(container, networkData, initialOptions);
+    network.stabilize();
+    setNetwork(network)
+
+    const myFunctionInsideEffect = () => {
+      if (stepTuto === 3){
+        const tabGrey = [0, 1, 2, 3, 5, 6, 7, 8, 9]
+        for (const i of tabGrey){
+          nodes.update({id: i, color: "#808080"})
+        }
+      }
+    };
+
+    setGreyForEveryone(() => myFunctionInsideEffect);
+
+
+    network.on("click", async (params) => {
+      
+      if(params.nodes.length > 0){
+      }
+    });
+
+    network.on("dragging", (params) => {
+      if (params.nodes.length > 0) {
+          // Un nœud a été cliqué
+          initialOptions.physics.enabled = false;
+          network.setOptions(initialOptions);
+          setNetwork(network)
+      }
+    });
+
+    network.on("click", async (params) => {
+      if(params.nodes.length > 0){
+        if (stepTuto === 0 && touchedPlayer === 1){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          
+          if (node === undefined)return;
+          if (node.id === 7){
+            nodes.update({id: node.id, label: node.label + positionToEmoji(1, true)})
+            handleShowTurnBar(false)
+            setPlayerIndex(1)
+            setPlayerTouched(-1)
+            await delay(500)
+            const node2 = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+            if (node2 === undefined)return;
+            nodes.update({id: node.id, label: node2.label + positionToEmoji(2, false)})
+            await delay(500)
+            const node3 = nodes.get().find((n: NodePerson) => n.id === 8)
+            if (node3 === undefined)return;
+            nodes.update({id: node3.id, label: node3.label + positionToEmoji(1, false)})
+            setPlayerIndex(2)
+            await delay(500)
+            const node4 = nodes.get().find((n: NodePerson) => n.id === 0)
+            if (node4 === undefined)return;
+            nodes.update({id: node4.id, label: node4.label + positionToEmoji(1, true)})
+            setPlayerIndex(0)
+            setTutoStep(1)
+
+            displayModalstep(1);
+          }
+        }
+        else if(stepTuto === 1 && touchedPlayer === 2){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          if (node === undefined){
+            return;
+          }
+          if (node.id === 0){
+            nodes.update({id: node.id, label: node.label + positionToEmoji(2, false)})
+            setPlayerTouched(-1)
+            displayModalstep(2);
+            handleTurnBarTextChange(intl.formatMessage({ id: 'game.wrong' }))
+            const tabGrey = [7, 0, 4, 1, 8]
+            for (const id of tabGrey){
+              const node = nodes.get().find((n: NodePerson) => n.id === id)
+              if (node === undefined)return;
+              nodes.update({id: node.id, color: "#808080"})
+            }
+            setTutoStep(2)
+          }
+        }
+        else if(stepTuto === 2){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          if (node === undefined)return;
+          if (node.id === 9){
+            const tabColor = [7, 0, 4, 1, 8]
+            nodes.update({id: node.id, label: node.label + positionToEmoji(0, false)})
+            for(const id of tabColor){
+              const pers = personNetwork.getPersons().find((p: Person) => p.getId() === id)
+              if (pers !== undefined){
+                nodes.update({id: id, color: ColorToHexa(pers.getColor())})
+              }
+            }
+            handleShowTurnBar(false)
+            setPlayerIndex(1)
+            await delay(500)
+            const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
+            if (node2 === undefined)return;
+            nodes.update({id: node2.id, label: node2.label + positionToEmoji(2, true)})
+            setPlayerIndex(2)
+            await delay(500)
+            const node3 = nodes.get().find((n: NodePerson) => n.id === 3)
+            if (node3 === undefined)return;
+            nodes.update({id: node3.id, label: node3.label + positionToEmoji(0, false)})
+            await delay(500)
+            const node4 = nodes.get().find((n: NodePerson) => n.id === 1)
+            if (node4 === undefined)return;
+            nodes.update({id: node4.id, label: node4.label + positionToEmoji(2, false)})
+            setPlayerIndex(0)
+            handleTurnBarTextChange(intl.formatMessage({ id: 'game.yourTurn' }))
+            handleShowTurnBar(true)
+            setTutoStep(3)
+            displayModalstep(3);
+          }
+        }
+        else if(stepTuto === 3 && touchedPlayer === 3){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          if (node === undefined)return;
+          if (node.id === 4){
+            nodes.update({id: node.id, label: node.label + positionToEmoji(0, true)})
+            setPlayerTouched(-1)
+            await delay(500)
+            const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
+            if (node2 === undefined)return;
+            nodes.update({id: node2.id, label: node2.label + positionToEmoji(1, true)})
+            await delay(500)
+
+            for(const person of personNetwork.getPersons()){
+              nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
+            }
+            if (user != null){
+              const winner = user;
+              setNetworkDataData(networkData)
+              setActualPlayerIndexData(-1)
+              setLastIndex(-1)
+              setPlayerTouched(-1)
+              setWinnerData(winner)      
+              first = true
+              navigate(`${basePath}/endgame`)
+            }  
+          }
+        }
+      }
+      else{
+        setPlayerTouched(-1)
+      }
+    });
+  
+    
+  }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
+
+  return (
+    <>
+      <div id="graph-container"/>
+    </>
+  );
+
+  function delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+}
+
+
+
+export default TutorialGraph;
--- a/cryptide_project/src/Contexts/AuthContext.tsx
+++ b/cryptide_project/src/Contexts/AuthContext.tsx
@ -24,8 +24,6 @@ const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {

  const login = async () => {
    setIsLoggedIn(true);
-    const [u, bool] = await manager.userService.fetchUserInformation()
-    setUser(u)
  };

  const setUserData = (newPlayer: User) => {
--- a/cryptide_project/src/Contexts/GameContext.tsx
+++ b/cryptide_project/src/Contexts/GameContext.tsx
@ -26,6 +26,8 @@ interface GameContextProps {
  networkData: any
  seed: number | string;
  nodesC: NodePerson[]
+  gameStart: boolean
+  setGameStartData : (newStart: boolean) => void
  setIndicesData: (newIndices: Indice[]) => void;
  setIndiceData: (newIndice: Indice) => void;
  setPersonData: (newPerson: Person) => void;
@ -37,7 +39,7 @@ interface GameContextProps {
  setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void;
  setRoomData: (newRoom: string) => void;
  setOnlyFalseData: (newOnlyFalse: boolean) => void
-  setWinnerData: (winner: Player) => void
+  setWinnerData: (winner: Player | null) => void
  reset: () => void
  setDailyEnigmeData: (map: Map<number, Pair<Indice, boolean>[]>) => void
  setNbCoupData: (newNbCoup : number) => void
@ -72,8 +74,13 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
  const [networkData, setNetworkData] = useState<any>(null);
  const [seed, setSeed] = useState<number | string>(0);
  const [nodesC, setNodes] = useState<NodePerson[]>([]);
+  const [gameStart, setGameStart] = useState<boolean>(true)


+  const setGameStartData = (newStart: boolean) => {
+    setGameStart(newStart)
+  }
+
  const setNodesData = (nodes: NodePerson[]) => {
    setNodes(nodes)
  }
@ -131,7 +138,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
    setOnlyFalse(newOnlyFalse)
  }

-  const setWinnerData = (winner: Player) =>{
+  const setWinnerData = (winner: Player | null) =>{
    setWinner(winner)
  }

@ -165,7 +172,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
  }

  return (
-    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData, winner, setWinnerData, reset, dailyEnigme, setDailyEnigmeData, nbCoup, setNbCoupData, temps, settempsData, setNetworkDataData, networkData, seed, setSeedData, nodesC, setNodesData}}>
+    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData, winner, setWinnerData, reset, dailyEnigme, setDailyEnigmeData, nbCoup, setNbCoupData, temps, settempsData, setNetworkDataData, networkData, seed, setSeedData, nodesC, setNodesData, gameStart, setGameStartData}}>
      {children}
    </GameContext.Provider>
  );
--- a/cryptide_project/src/Error/ErrorPage.tsx
+++ b/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>
    );
--- a/cryptide_project/src/Pages/DeducCheck.tsx
+++ b/cryptide_project/src/Pages/DeducCheck.tsx
@ -19,7 +19,7 @@ import Stub from '../model/Stub';
 import { useGame } from '../Contexts/GameContext';
 import { positionToEmoji } from '../ColorHelper';

-function DeducCheck() {
+function DeducCheck({lang}: {lang: string}) {
    const theme = useTheme();
    //const indices = Stub.GenerateIndice();
    
@ -76,7 +76,7 @@ function DeducCheck() {
                    <tbody>
                        {firstHalfIndices.map((indice, rowIndex) => (
                            <tr key={rowIndex}>
-                                <td>{indice.ToString("fr")}</td>
+                                <td>{indice.ToString(lang)}</td>
                                {players.map((player, colIndex) => (
                                    <td key={colIndex}>
                                        {/* <input type="checkbox"/> */}
@ -101,7 +101,7 @@ function DeducCheck() {
                    <tbody>
                        {secondHalfIndices.map((indice, rowIndex) => (
                            <tr key={rowIndex}>
-                                <td>{indice.ToString("fr")}</td>
+                                <td>{indice.ToString(lang)}</td>
                                {players.map((player, colIndex) => (
                                    <td key={colIndex}>
                                        {/* <input type="checkbox"/> */}
--- a/cryptide_project/src/Pages/EndGame.css
+++ b/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;
+  }
+  
--- a/cryptide_project/src/Pages/EndGame.tsx
+++ b/cryptide_project/src/Pages/EndGame.tsx
@ -1,4 +1,4 @@
-import React,  {useEffect} from 'react';
+import React,  {useEffect, useState} from 'react';


 /* Style */
@ -11,6 +11,9 @@ import Person from '../res/img/Person.png';
 import Leave from '../res/icon/leave.png';
 import Replay from '../res/icon/replay.png';

+/* sound */
+import WinSound from '../res/Audio/win.wav';
+
 /* Component */
 import PersonStatus from '../Components/PersonStatus';
 import ButtonImgNav from '../Components/ButtonImgNav';
@ -32,13 +35,13 @@ 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"



-function EndGame() {
+function EndGame({lang}: {lang: string}) {
    const {networkData, seed} = useGame();
    const params = new URLSearchParams(window.location.search);
    
@ -64,6 +67,11 @@ function EndGame() {
        }
    };

+    useEffect(() => {
+        handleWinSound();
+    }, []);
+
+
    useEffect(() => {
        const container = document.getElementById("vis-graph");
        if (!container) {
@ -126,79 +134,204 @@ function EndGame() {
        indicenull = true;
    }

+    //* Sound
+    const [playTurnSound, setPlayTurnSound] = useState(false);
+
+    const handleWinSound = () => {
+        setTimeout(() => { // on attend 1s avant de jouer le son
+            setPlayTurnSound(true);
+        }, 300);
+
+        setTimeout(() => { // on attend 2s avant de remettre le son à false
+        setPlayTurnSound(false);
+        }, 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 tueur é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("fr")}</h3>)}
-                    </div>
-                    <div className='bottomEnd'>
-                        {/* <div className='centerDivH' onClick={resetAll}>
-                            <BigButtonNav dest="/play" img={Leave}/>
-                        </div> */}
-                        <div className="losingPlayersContainer">
-                            {losingPlayers.map((player, index) => (
-                                <div className="playerContainer" key={index}>
-                                    {player.id !== winner?.id && (
-                                        <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("fr")}</h6>)}
+                                            {!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>
-                            ))}
-                        </div>
-                    </div>
-                </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 tueur é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("fr")}</h6>
-                                            </div>
-                                        //</div>
-                                    ))
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-            )}
+                <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 id="vis-graph"/>
+                                    <Row>
+                                        {!IsDaily && 
+                                            <Col className='center'>
+                                                <p className='solostat'>Nombre de coups : {nbCoup}</p>
+                                            </Col>
+                                        }

-            <div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
-                <Button href={`${basePath}/`}>Retour à l'accueil</Button>
-            </div>
+                                        <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>
    );
 }
--- a/cryptide_project/src/Pages/Home.css
+++ b/cryptide_project/src/Pages/Home.css
@ -3,8 +3,6 @@
    justify-content: space-between;
    /* background-color: #D7D4C6; */
    background-color: #fff;
-    min-height: 100vh;
-    display: flex;
    font-size: calc(10px + 2vmin);
    /* color: #2A4541; */
 }
--- a/cryptide_project/src/Pages/Home.tsx
+++ b/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 tueur. 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 tueur 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>
    );
 }

--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@ -14,19 +14,22 @@ 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";
 import JSZip from 'jszip';

+/* Sound */
+import turnSound from "../res/Audio/turn.mp3";
+import winSound from "../res/Audio/win.wav";
+
+
 /* nav */
 import { Link, Navigate, useNavigate, useNavigationType } from 'react-router-dom';

@ -50,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
@ -60,6 +70,7 @@ const InGame = ({locale, changeLocale}) => {
  const theme = useTheme();
  
  const navigate = useNavigate()
+  const {user, manager} = useAuth()
  
  const params = new URLSearchParams(window.location.search);

@ -87,16 +98,46 @@ const InGame = ({locale, changeLocale}) => {
  }


-  let isEasy: boolean = true
-  const isEasytmp = params.get('easy');
-  if (isEasytmp == "false"){
-    isEasy=false
+  let difficulty: string = "";
+  let difficultyTmp = params.get('difficulty')
+  if (difficultyTmp !== null){
+    difficulty=difficultyTmp
  }
+
  //* Historique
  const [history, setHistory] = useState<string[]>([]);
  const [showLast, setShowLast] = useState(false)
  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>(() => {});
+  const [putImposssibleGrey, setPutImposssibleGrey] = useState<() => void>(() => {});
+  const [changeGraph, setChangeGraph] = useState<(nbNodes: number, nbIndices: number) => void>(() => {});
+
+
+
+  const setPutCorrectBackgroundData = (func: () => void) => {
+    setPutCorrectBackground(func)
+  }
+
+  const setPutGreyBackgroundData = (func: () => void) => {
+    setPutGreyBackground(func)
+  }
+
+  const setPutImposssibleGreyData = (func: () => void) => {
+    setPutImposssibleGrey(func)
+  }
+
+  const setChangeGraphData = (func: (nbNodes: number, nbIndices: number) => void) => {
+    setChangeGraph(func)
+  }
+
+  const setImportToJSONData = (imp: boolean) => {
+    setImportToJSON(imp)
+  }

  const setImportToPdfData = (imp: boolean) => {
    setImportToPdf(imp)
@ -170,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);
@ -182,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}`);
        }
      }

@ -228,7 +277,7 @@ const InGame = ({locale, changeLocale}) => {
  const handleCloseS = () => setShowS(false);
  const handleShowS = () => setShowS(true);

-  const [cptTour, setcptTour] = useState(0);
+  const [cptTour, setcptTour] = useState(1);

  const [LastVisible, setLastVisible] = useState(false);

@ -278,13 +327,108 @@ const InGame = ({locale, changeLocale}) => {
      window.open(url);
    };
  
-  const [SwitchEnabled, setSwitchEnabled] = useState(false)
+  // const [SwitchEnabled, setSwitchEnabled] = useState(false)
  const allIndices = Stub.GenerateIndice()
  const { indice, players, actualPlayerIndex} = useGame();

  const nbPlayer = players.length;
  const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;

+
+  //* Sound
+  const [playTurnSound, setPlayTurnSound] = useState(false);
+  const [soundPreference, setSoundPreference] = useState(true); // utilisateur
+
+  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 = () => {
+    setSoundPreference(!soundPreference);
+    console.log("changement des options du son : "+ soundPreference)
+  };
+
+  const handleTurn = () => {
+    
+    console.log("etat normal du sound : " + soundPreference)
+    if (soundPreference) {
+      setPlayTurnSound(true);
+      
+      setTimeout(() => {
+        setPlayTurnSound(false);
+      }, 2000);
+    }
+  };
+
+
    return (
      <div id="mainDiv">
        {showTurnBar && <TurnBar text={turnBarText}/>}
@ -296,7 +440,7 @@ const InGame = ({locale, changeLocale}) => {
                          addToHistory={addToHistory}
                          solo={IsSolo} 
                          isDaily={isDaily} 
-                          isEasy={isEasy}
+                          difficulty={difficulty}
                          setPlayerTouched={handleSetPlayerTouched} 
                          playerTouched={playerTouched}
                          setNetwork={setNetworkData}
@ -306,20 +450,32 @@ const InGame = ({locale, changeLocale}) => {
                          askedWrong={askedWrong}
                          setAskedWrong={setAskedWrongData}
                          importToPdf={importToPdf}
-                          setImportToPdf={setImportToPdfData}/>
+                          setImportToPdf={setImportToPdfData}
+                          importToJSON={importToJSON}
+                          setImportToJSON={setImportToJSONData}
+                          setPutCorrectBackground={setPutCorrectBackgroundData}
+                          setPutGreyBackground={setPutGreyBackgroundData}
+                          setPutImposssibleGrey={setPutImposssibleGreyData}
+                          putCorrectBackground={putCorrectBackground}
+                          putGreyBackground={putGreyBackgroud}
+                          putImposssibleGrey={putImposssibleGrey}
+                          handleTurn={handleTurn}
+                          lang={locale}
+                          setChangeGraph={setChangeGraphData}/>
        </div>
+        {playTurnSound && <audio src={turnSound} autoPlay />}


-        {IsSolo && !isDaily &&
+        {IsSolo && (!isDaily || difficulty !== "hard") &&
            <div className='nbLaps' style={{ 
                backgroundColor: theme.colors.primary,
                borderColor: theme.colors.secondary
            }}>
-              Tour : {cptTour}
+              <FormattedMessage id='turn'/> : {cptTour}
            </div>
        }
        
-        {(!isDaily || (isDaily && isEasy)) &&
+        {(!isDaily || (isDaily && (difficulty==="easy" || difficulty==="intermediate"))) &&
          <div className='historique' id="history-container">
              {history.map((item, index) => (
                  <div key={index}>{item}</div>
@ -341,6 +497,7 @@ const InGame = ({locale, changeLocale}) => {


        <div className='menuGame'>
+
          <div className='resetDiv'>
            <button className='button'
              style={{ 
@ -362,6 +519,8 @@ const InGame = ({locale, changeLocale}) => {
            </button>
          </div>

+          
+



@ -412,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>
          }

@ -422,27 +581,14 @@ 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>

-{/*
-        <Offcanvas show={showP} 
-                  onHide={handleCloseP}>
-          <Offcanvas.Header closeButton>
-            <Offcanvas.Title>Joueurs</Offcanvas.Title>
-            <h3>Il y a {players.length} joueurs</h3>
-          </Offcanvas.Header>
-          <Offcanvas.Body>
-
-          </Offcanvas.Body>
-        </Offcanvas>
-          */}
-
          { !IsSolo &&
            <div className='playerlistDiv'>
-              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
+              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong} greyForEveryone={() => {}}/>
            </div>
          }

@ -453,10 +599,9 @@ const InGame = ({locale, changeLocale}) => {
                  backdrop={false}
                  style={{ height: '20%', width: '25%', top: '60vh' }}>
          <Offcanvas.Header closeButton>
-            <Offcanvas.Title>Indice</Offcanvas.Title>
+            <Offcanvas.Title><FormattedMessage id='indice'/></Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
-            {/* Possède les cheveux noir <u>ou</u> joue au basket */}
            {indice?.ToString(locale)}
          </Offcanvas.Body>
        </Offcanvas>
@ -467,36 +612,62 @@ const InGame = ({locale, changeLocale}) => {
        <Offcanvas show={showS} 
                  onHide={handleCloseS} 
                  placement='top'
-                  style={{height: '30%', width: '30%', left: '70%' }}>
+                  style={{height: '80%', width: '30%', left: '70%' }}>
          <Offcanvas.Header closeButton>
-            <Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
+            <Offcanvas.Title><img src={Param} alt='param'/> <FormattedMessage id='param'/></Offcanvas.Title>
          </Offcanvas.Header>
-          <Offcanvas.Body>
-            <Nav className="me-auto">
-                <NavDropdown 
-                title={<span><HiLanguage/> Language </span>}
-                className="navbar-title" id="basic-nav-dropdown">
-                    <NavDropdown.Item onClick={() => changeLocale('fr')}> 
-                        <FormattedMessage id="languageSelector.french"/> 
-                    </NavDropdown.Item>
-                    <NavDropdown.Item onClick={() => changeLocale('en')}> 
-                        <FormattedMessage id="languageSelector.english"/> 
-                    </NavDropdown.Item>
-                </NavDropdown>
-            </Nav>
-
-            <label>
-              <Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
-              <p>Afficher les noeuds possibles</p>
-            </label>
-
+          <Offcanvas.Body >
+            <div style={{display: "flex", justifyContent: "center", flexDirection: "column", alignItems: "center"}}>
+              <label style={{ display:'flex'}}>
+                <Switch checked={soundPreference} onChange={handleSoundPreferenceChange}/>
+                <p style={{ marginLeft:'20px'}}><FormattedMessage id='sfx'/></p>
+              </label>
+
+              {IsSolo && 
+              <div className='nbNodeDiv' style={{ padding:'20px'}}>
+                  <label htmlFor="numberInput"><FormattedMessage id='param.node'/> :</label>
+                  <div>
+                      <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', border: 'none', width: '100px'}}
+                          id="numberInput"
+                          value={enteredNumber}
+                          onChange={handleNumberChange}
+                          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>
+              </div>}
+
+              {IsSolo && 
+              <div className='nbNodeDiv' style={{ padding:'20px'}}>
+                  <label htmlFor="numberInput"><FormattedMessage id='param.clue'/> :</label>
+                  <div>
+                      <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', border: 'none', width: '100px'}}
+                          id="numberInput"
+                          value={enteredNumberIndices}
+                          onChange={handleNumberIndicesChange}
+                          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>
+              </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>
-        {/*
-        <div id="endgamebutton" > {/*  tmp 
-          <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
-        </div>
-      */}
      </div>
    );
  };
--- a/cryptide_project/src/Pages/InfoPage.tsx
+++ b/cryptide_project/src/Pages/InfoPage.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';

 /* Style */
 import '../Style/Global.css';
@ -24,11 +24,34 @@ import Alert from 'react-bootstrap/Alert';
 import MGlass from "../res/icon/magnifying-glass.png";
 import Param from "../res/icon/param.png";
 import Info from "../res/icon/infoGreen.png"; //todo changer la couleur de l'icon
+import { useAuth } from '../Contexts/AuthContext';
+import { Spinner } from 'react-bootstrap';
+import Reset from '../res/icon/reset.png';
+import Ceye from '../res/icon/hidden.png';
+

 //@ts-ignore
 function InfoPage({locale, changeLocale}) {
-    
    const theme = useTheme();
+    const {isLoggedIn, login, user, setUserData, manager } = useAuth();
+
+    useEffect(() => {
+        if (user == null){
+            console.log(user)
+            manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
+                console.log(user);
+                if (user!=null){
+                    if (loggedIn){
+                        login()
+                        setUserData(user)
+                    }
+                    else{
+                        setUserData(user)
+                    }
+                }
+            })
+        }
+    }, [isLoggedIn]);

    const styles = {
        roux: { backgroundColor: ColorToHexa(Color.REDHEAD), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
@ -55,16 +78,15 @@ function InfoPage({locale, changeLocale}) {
                <li><Link to="#composants-du-jeu"><span><FormattedMessage id="info.title.composant"/></span></Link></li>
                <li><Link to="#objectif-du-jeu"><span><FormattedMessage id="info.title.objectif"/></span></Link></li>
                <li><Link to="#deroulement-du-jeu"><span><FormattedMessage id="info.title.deroulement"/></span></Link></li>
+                <li><Link to="#mode-de-jeu"><span><FormattedMessage id="info.mdj"/></span></Link></li>
                <li><Link to="#indice-possible"><span><FormattedMessage id="info.title.indice_possible"/></span></Link></li>
            </ul>
        </div>

        <section id="composants-du-jeu">
            <h2><FormattedMessage id="info.pions"/> :</h2>
-                <h4>
-                    <FormattedMessage id="info.sommaire"/> 
-                </h4>
-                <h6><FormattedMessage id="info.composant.text"/></h6>
+            <h4><FormattedMessage id="info.sommaire"/></h4>
+            <h6><FormattedMessage id="info.composant.text"/></h6>
            <ul>
                <p>
                    <li><h5 className='h5title'><FormattedMessage id="info.composant.carre.title"/> : 🟪🟦🟩🟨🟥🟫</h5></li>
@ -73,7 +95,6 @@ function InfoPage({locale, changeLocale}) {
                    <li><h5 className='h5title'><FormattedMessage id="info.composant.rond.title"/> : 🟣🔵🟢🟡🔴🟤</h5></li>
                    <FormattedMessage id="info.composant.rond"/>
                </p>
-            </ul>
                <hr/>
                <h4>
                    <FormattedMessage id="info.car_perso"/>
@ -122,6 +143,7 @@ function InfoPage({locale, changeLocale}) {
                        </ul>
                        <FormattedMessage id="info.composant.sport.bis"/>                    
                </p>
+            </ul>
        </section>
        <hr/>
        <section id="objectif-du-jeu">
@ -145,9 +167,9 @@ function InfoPage({locale, changeLocale}) {
            </p>

            <h4>
-                Interface :
+                <FormattedMessage id="info.interface"/>
            </h4>
-            <h6> Pour chacune des parties, vous aurez certains éléments d'interface à disposition :</h6>
+            <h6> <FormattedMessage id="info.interface.text"/> </h6>
            <ul>
                <li>
                    <div className='LiInterfaceDisplay'>
@ -160,12 +182,24 @@ function InfoPage({locale, changeLocale}) {
                            <img src={Param} alt="paramètres" height='40'/>
                        </button>
                        <p>
-                            Le bouton "<b>Paramètre</b>" permet l'affichage et la gestion de différent paramètres de la partie, comme par exemple le language, l'aide ... .
+                            <FormattedMessage id="info.interface.param"/>
                        </p>
                    </div>
-                    <Alert variant='danger'>
-                        Attention, cette partie ne peut pas être complétée tant que tout les paramètres n'ont pas été choisis !
-                    </Alert>
+                </li>
+                <li>
+                <div className='LiInterfaceDisplay'>
+                    <button className='button'
+                    style={{ 
+                        backgroundColor: theme.colors.tertiary,
+                        borderColor: theme.colors.secondary,
+                        margin:"0 20px"
+                    }}>
+                        <img src={Reset} alt="paramètres" height='40'/>                 
+                    </button>
+                    <p>
+                        <FormattedMessage id="info.interface.reset"/>
+                    </p>
+                </div>
                </li>
                <li>
                    <div className='LiInterfaceDisplay'>
@ -178,10 +212,7 @@ function InfoPage({locale, changeLocale}) {
                            <img src={Info} alt="info" height="40"/>
                        </button>
                        <p>
-                            Le bouton "<b>Information</b>" permet de rediriger vers la page de règle du jeu (celle ci). 
-                            {/*
-                                //! mais est ce que nous devons rediriger sur les indices possibles ?
-                            */} 
+                            <FormattedMessage id="info.interface.info"/>
                        </p>
                    </div>
                </li>
@ -197,12 +228,9 @@ function InfoPage({locale, changeLocale}) {
                        </button>
                    
                        <p>
-                            Le bouton "<b>Fiche de déduction d'indice</b>" permet l'affichage de tableau dynamic permettant, avec le déroulé de la partie, de déduire quels indices sont les plus probables.
+                            <FormattedMessage id="info.interface.fiche"/>
                        </p>
                    </div>
-                    <Alert variant='danger'>
-                        Attention, cette partie ne peut pas être complétée tant que la page et l'algorithme dédié ne sont pas fait !
-                    </Alert>
                </li>
                <li>
                    <div className='LiInterfaceDisplay'>
@ -216,10 +244,26 @@ function InfoPage({locale, changeLocale}) {
                    </button>
                    
                        <p>
-                            Le bouton "<b>Indice personnel</b>" est le plus important, en effet il permet d'afficher quel est votre indice secret. Vous seul le connaissais ! Il va falloir ruser pour tromper vos amis et le garder secret le plus longtemps possible !
+                            <FormattedMessage id="info.interface.indice"/>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <div className='LiInterfaceDisplay'>
+                        <button className='button'
+                            style={{ 
+                                backgroundColor: theme.colors.tertiary,
+                                borderColor: theme.colors.secondary,
+                                margin:"0 20px"
+                            }}>
+                            <img src={Ceye} alt="check" height="40"/>
+                        </button>
+                        <p>
+                            <FormattedMessage id="info.interface.vision"/>
                        </p>
                    </div>
                </li>
+                {/* ajouter les bouton de telechargement de graph ? */}
            </ul>
        </section>
        <hr/>
@ -245,6 +289,46 @@ function InfoPage({locale, changeLocale}) {
            </p>
        </section>
        <hr/>
+        <section id="mode-de-jeu">
+        <h2> <FormattedMessage id="info.mdj"/> </h2>
+        <br/>
+        <p>
+            <FormattedMessage id="info.mdj.text"/>
+        </p>
+        <h3>
+            <FormattedMessage id="info.mdj.mastermind"/>
+        </h3>
+        <br/>
+        <p>
+            <FormattedMessage id="info.mdj.mastermind.text"/>
+        </p>
+        
+        <h3>
+            <FormattedMessage id="info.mdj.enigme"/>
+        </h3>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.text"/>
+        </p>
+        <h4>
+            <u><FormattedMessage id="info.mdj.enigme.easy"/></u>
+        </h4>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.easy.txt"/>
+        </p>
+        <h4>
+            <u><FormattedMessage id="info.mdj.enigme.medium"/></u>
+        </h4>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.medium.txt"/>
+        </p>
+        <h4>
+            <u><FormattedMessage id="info.mdj.enigme.hard"/></u>
+        </h4>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.hard.txt"/>
+        </p>
+        </section>
+        <hr/>
        <section id="indice-possible">
            <h2><FormattedMessage id="info.title.indice_possible"/> :</h2>
            <br/>
@ -270,7 +354,6 @@ function InfoPage({locale, changeLocale}) {
                <FormattedMessage id="info.indice-possible.voisin"/>
            </h4>
            <IndiceList instance={EdgesIndice} lang={locale}/>
-            <IndiceList instance={NbEdgesIndice} lang={locale}/>
            <hr/>
        </section>
    </div>
--- a/cryptide_project/src/Pages/Lobbies.tsx
+++ b/cryptide_project/src/Pages/Lobbies.tsx
@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';

+
 /* Style */
 import './Lobbies.css';
 import "../Style/Global.css"
@ -11,7 +12,7 @@ import { socket } from '../SocketConfig';
 import JSONParser from '../JSONParser';
 import Person from '../model/Person';
 import { useNavigationType } from 'react-router-dom';
-
+import { FormattedMessage, useIntl } from 'react-intl';

 class LobbyDataProps {
    roomNum : string
@ -41,6 +42,7 @@ function Lobbies() {

    const [showAvailable, setShowAvailable] = useState(true);

+
    const handleShowAllClick = () => {
        setShowAvailable(false);
    };
@ -49,7 +51,18 @@ function Lobbies() {
        setShowAvailable(true);
    };

+    const handleSetFirst = () => {
+        setFirst(false);
+        socket.emit("request lobbies");
+    };
+    
+    const handleSetCptNavigation = () => {
+        cptNavigation++

+        if (cptNavigation % 2 >= 0 && navigationType.toString() === "POP") {
+            socket.emit("player quit");
+        }
+    };
    const filteredLobbies = lobbyData.filter((lobby) =>
        lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
        lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
@ -58,26 +71,25 @@ function Lobbies() {
    const filteredLobbiesToShow = showAvailable
    ? filteredLobbies.filter((lobby) => lobby.started == false && lobby.nbPlayer < 6) //* retire les lobbies pleins ou commencés
    : filteredLobbies;
-
-
-
+    
+    
+    
    const setFirstData = (first: boolean) => {
        setFirst(first)
    }

-    const navigationType = useNavigationType()
-    cptNavigation++
-    if (cptNavigation % 2 == 0){
-        if (navigationType.toString() == "POP"){
-            socket.emit("player quit")
-        }
-    }
+    const navigationType = useNavigationType();
+    
+    

+    handleSetCptNavigation();
+    
    if (first){
-        setFirst(false)
-        socket.emit("request lobbies")
+        handleSetFirst();
    }
-
+    
+    
+    
    useEffect(() => {
        socket.on("request lobbies", (map) => {
            const jsonMap = JSON.parse(map)
@ -95,12 +107,16 @@ function Lobbies() {
        socket.emit("lobby created")
    }

+
+    const intl = useIntl();
+
+
    return(
        <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
            <input
                type="text"
                className='searchLobby'
-                placeholder="Rechercher un lobby..."
+                placeholder={intl.formatMessage({ id: 'placeholder.searchLobby' })}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                style={{width:'80%', margin:'10px'}}
@ -119,7 +135,7 @@ function Lobbies() {
                    }}
                    onClick={handleShowAllClick}
                >
-                    Tous
+                    <FormattedMessage id='lobbies.all'/>
                </button>
                <button
                    style={{
@ -132,29 +148,25 @@ function Lobbies() {
                    }}
                    onClick={handleShowAvailableClick}
                >
-                    Disponible
+                    <FormattedMessage id='lobbies.dispo'/>
                </button>
            </div>

-
                {filteredLobbiesToShow.length === 0 ? (
-                    <div style={{border:'solid 2px blue', borderRadius:'15px', boxShadow:'5px 5px 5px rgb(246, 246, 246)', padding:'20px', margin:'20px'}}>
-                        <h3><b>Il n'y a aucun lobby disponible</b></h3>
-                        <button onClick={createLobby}  className='ButtonNav' style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Créez en un !</button>
-                    </div>
-                ) : (
-                    <div className="lobbyList">
-                        {filteredLobbiesToShow.map((lobby, index) => (
-                            <LobbyContainer
-                                key={index}
-                                roomNum={lobby.roomNum}
-                                HeadPlayer={lobby.headPlayer}
-                                nbPlayer={lobby.nbPlayer}
-                                setFirst={setFirstData}
-                                started={lobby.started}
-                            />
-                        ))}
-                    </div>
+                        <button onClick={createLobby}  className='ButtonNav' style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}><FormattedMessage id='play.create' /></button>
+                    ) : (
+                        <div className="lobbyList">
+                            {filteredLobbiesToShow.map((lobby, index) => (
+                                <LobbyContainer
+                                    key={index}
+                                    roomNum={lobby.roomNum}
+                                    HeadPlayer={lobby.headPlayer}
+                                    nbPlayer={lobby.nbPlayer}
+                                    setFirst={setFirstData}
+                                    started={lobby.started}
+                                />
+                            ))}
+                        </div>
                )}
        </div>
    );
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@ -48,6 +48,7 @@ import Overlay from 'react-bootstrap/Overlay';
 import { DataSet } from 'vis-network';
 import {basePath} from "../AdressSetup"

+import { FormattedMessage } from 'react-intl';


 let gameStarted = false
@ -57,7 +58,7 @@ function Lobby() {
    const theme=useTheme();
    const navigate = useNavigate();
    
-    const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData, setNodesData } = useGame();
+    const { indices, setIndicesData, setGameStartData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData, setNodesData } = useGame();
    
    const {user, setUserData, manager, login} = useAuth()
    let first = true
@ -66,11 +67,17 @@ function Lobby() {
    const room = params.get('room');

    function addBot(){
-        socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100), "").toJson())
+        let json = require("../res/botNames.json")
+        const tabNames = [...json.names]
+        let name = tabNames[Math.floor(Math.random() * tabNames.length)]
+        while (players.find((p) => p.pseudo === name) != undefined){
+            name = tabNames[Math.floor(Math.random() * tabNames.length)]
+        }
+        socket.emit("lobby joined", room, new EasyBot(name, name, "").toJson())
    }

    //* nb Node
-    const [enteredNumber, setEnteredNumber] = useState(20);
+    const [enteredNumber, setEnteredNumber] = useState(25);

    //@ts-ignore
    const handleNumberChange = (event) => {
@ -132,6 +139,7 @@ function Lobby() {
        setPersonData(choosenOne)
        setPersonNetworkData(network)
        setIndicesData(choosenIndices)
+        setGameStartData(true)
        first = true
        gameStarted = true
        //socket.off("player left")
@ -170,6 +178,7 @@ function Lobby() {
        setPersonData(choosenOne)
        setPersonNetworkData(networkPerson)
        setIndicesData(choosenIndices)
+        setGameStartData(true)
        first = true
        gameStarted = true
        navigate(`${basePath}/game?solo=false&daily=false`)
@ -180,23 +189,19 @@ function Lobby() {
        for (const p of tab.tab){
            tmpTab.push(JSONParser.JSONToPlayer(p))
        }
-        console.log(tmpTab);
        setPlayersData(tmpTab);

    });

    socket.on("room full", () => {
-        //TODO POP UP pour quand la room est pleine
        navigate(`${basePath}/`)
    })

    socket.on("game started", () => {
-        //TODO POP UP pour quand la room est pleine
        navigate(`${basePath}/`)
    })

    socket.on("game already started", () => {
-        //TODO POP UP pour quand la room est pleine
        navigate(`${basePath}/`)
    })

@ -205,7 +210,6 @@ function Lobby() {
        for (const p of tab.tab){
            tmpTab.push(JSONParser.JSONToPlayer(p))
        }
-        console.log(tmpTab)
        setPlayersData(tmpTab)
    })

@ -213,23 +217,25 @@ function Lobby() {


    function StartGame(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
-        setPersonData(choosenPerson)
-        setPersonNetworkData(networkPerson)
-        setIndicesData(choosenIndices)
-        let users = players.filter((p) => p instanceof User)
-        let u = users[Math.floor(Math.random() * users.length)]
-        let start = players.findIndex((p) => p.id == u.id)
-        if (start == -1){
-            start = 0
+        if (players.length > 2){
+            const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
+            setPersonData(choosenPerson)
+            setPersonNetworkData(networkPerson)
+            setIndicesData(choosenIndices)
+            let users = players.filter((p) => p instanceof User)
+            let u = users[Math.floor(Math.random() * users.length)]
+            let start = players.findIndex((p) => p.id == u.id)
+            if (start == -1){
+                start = 0
+            }
+            socket.emit('network created', JSON.stringify(networkPerson, null, 2), JSON.stringify(choosenPerson), JSON.stringify(choosenIndices), room, start);
        }
-        socket.emit('network created', JSON.stringify(networkPerson, null, 2), JSON.stringify(choosenPerson), JSON.stringify(choosenIndices), room, start);
    }

    const copyGameLink = () => {
        setShow(!show)
        
-        const gameLink = "http://172.20.10.4:3000/lobby?room="+ room;
+        const gameLink = basePath + "/lobby?room="+ room;
        navigator.clipboard.writeText(gameLink)
            .then(() => {
                console.log('Lien copié avec succès !');
@ -240,7 +246,7 @@ function Lobby() {
    };

    const textAreaRef = useRef<HTMLTextAreaElement>(null);
-    const linkToCopy = "http://172.20.10.4:3000/lobby?room="+ room
+    const linkToCopy = basePath + "/lobby?room="+ room
    const handleCopyClick = () => {
        setShow(!show)
        if(textAreaRef.current != null){
@ -269,9 +275,9 @@ function Lobby() {
                        </div>
                        <div className='NumbDiv'>
                            {players.length == 6 ? (
-                                    <p style={{color:'darkred'}}>6/6 Players</p>
+                                    <p style={{color:'darkred'}}>6/6 <FormattedMessage id='lobby.players'/></p>
                                ) : (
-                                    <p>{players.length}/6 Players</p>
+                                    <p>{players.length}/6 <FormattedMessage id='lobby.players'/></p>
                                )
                            }
                        </div>
@ -300,12 +306,12 @@ function Lobby() {
                <div className='lobbyR' 
                    style={{flexDirection:'column',
                            alignItems:'space-around'}}>
-                        <h3>Bienvenue dans votre lobby !</h3>
-                        <p>Attendez que tous vos amis rejoignent avant de lancer la partie.</p>
+                        <h3><FormattedMessage id='lobby.bienvenue'/></h3>
+                        <p><FormattedMessage id='lobby.wait'/></p>
                        {/* Bouton pour copier le lien */}
-                        <Button variant="primary" ref={target} onClick={copyGameLink}>
-                            Inviter des amis
-                        </Button>
+                        {/* <Button variant="primary" ref={target} onClick={copyGameLink}>
+                            <FormattedMessage id='lobby.invite'/>
+                        </Button> */}
                        <Overlay target={target.current} show={show} placement="top">
                            {({
                            placement: _placement,
@ -326,25 +332,26 @@ function Lobby() {
                                ...props.style,
                                }}
                            >
-                            Lien copié
+                            <FormattedMessage id='lobby.copyLink'/>
                        </div>
                        )}
                    </Overlay>

                <div className='nbNodeDiv'>
-                    <label htmlFor="numberInput">Sélectionner le nombre de noeud (entre 20 et 60) :</label>
+                    <label htmlFor="numberInput"> <FormattedMessage id='lobby.nbNode'/> :</label>
                    <div>
                        <button className='valuebutton' onClick={() => { if (enteredNumber>20) setEnteredNumber(enteredNumber-1)}}
                            style={{borderColor:theme.colors.secondary}}> - </button>
                        <input
                            // type="number"
+                            style={{textAlign:'center'}}
                            id="numberInput"
                            disabled
-                            value={ "Nombre de noeuds : " + enteredNumber}
+                            value={enteredNumber}
                            onChange={handleNumberChange}
                            min={20}
                            max={60}/>
-                        <button className='valuebutton' onClick={() => { if (enteredNumber<60) setEnteredNumber(enteredNumber+1)}}
+                        <button className='valuebutton' onClick={() => { if (enteredNumber<50) setEnteredNumber(enteredNumber+1)}}
                            style={{borderColor:theme.colors.secondary}}> + </button>
                    </div>
                </div>
@ -357,7 +364,7 @@ function Lobby() {
                            width: 'auto',
                            height: 'auto'
                        }}>
-                        Démarrer la partie !
+                        <FormattedMessage id='lobby.start'/>
                    </button>
                </div>
            </div>
--- a/cryptide_project/src/Pages/LoginForm.tsx
+++ b/cryptide_project/src/Pages/LoginForm.tsx
@ -4,16 +4,16 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../Contexts/AuthContext'; 
 import AuthService from '../services/AuthService';
 import '../Style/Global.css';
+import { Link } from 'react-router-dom';
 import {basePath} from "../AdressSetup"


 const SignIn = () => {
    const navigate = useNavigate();
-    const { login } = useAuth(); 
-
    const [error, setError] = useState<string | null>(null);
+    const {login} = useAuth();
    const [showConfirmation, setShowConfirmation] = useState(false);
-
+    
    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
    
@ -80,7 +80,7 @@ const SignIn = () => {
                    </button>
                </div>
                <p className="forgot-password text-right">
-                    <a href="#">Mot de passe</a> oublié ?
+                    <Link to={`${basePath}/signup`}>Pas encore inscrit ?</Link>
                </p>
            </form>

--- a/cryptide_project/src/Pages/NewPlay.tsx
+++ b/cryptide_project/src/Pages/NewPlay.tsx
@ -31,6 +31,7 @@ import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import Lobbies from './Lobbies';
 import {basePath} from "../AdressSetup"
+import { FormattedMessage } from 'react-intl';



@ -42,7 +43,7 @@ function NewPlay() {

    const theme=useTheme()
    const {isLoggedIn, login, user, setUserData, manager } = useAuth();
-    const {setDailyEnigmeData, setIndicesData, setPersonData, setPersonNetworkData } = useGame()
+    const {setDailyEnigmeData, setIndicesData, setPersonData, setPersonNetworkData, setGameStartData } = useGame()

    const target = useRef(null);

@ -50,6 +51,7 @@ function NewPlay() {
    cptNavigation++
    if (cptNavigation % 2 == 0){
        if (navigationType.toString() == "POP"){
+            first=true
            socket.emit("player quit")
        }
    }
@ -94,11 +96,12 @@ 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)
        setIndicesData(choosenIndices)
+        setGameStartData(true)
        navigate(`${basePath}/game?solo=true&daily=false`);
    }

@ -110,6 +113,10 @@ function NewPlay() {
        else setShowOverlay(true)

    }
+
+    function launchTuto(){
+        navigate(`${basePath}/tutorial`);
+    }
    

    useEffect(() => {
@ -152,13 +159,33 @@ 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)
        setIndicesData(choosenIndices)
+        setGameStartData(true)
+        navigate(`${basePath}/game?solo=true&daily=true&difficulty=easy`);
+        setShowOverlay(false);
+    };
+
+    const handleStartMediumGame = () => {
+
+        //* Mode facile 
+        //todo différencier les deux
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(user?.nbIndices || 3, user?.nbNodes || 25)
+        setPersonData(choosenPerson)
+        setPersonNetworkData(networkPerson)
+        setIndicesData(choosenIndices)
+        setGameStartData(true)
+

-        navigate(`${basePath}/game?solo=true&daily=true&easy=true`);
+        navigate(`${basePath}/game?solo=true&daily=true&difficulty=intermediate`);
+        if (first){
+            first = false
+            const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
+            setDailyEnigmeData(map)
+        }
        setShowOverlay(false);
    };

@ -166,17 +193,17 @@ 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)
-        setIndicesData(choosenIndices)
+        setGameStartData(true)
        if (first){
            first = false
            const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
            setDailyEnigmeData(map)
        }
-        navigate(`${basePath}/game?solo=true&daily=true&easy=false`);
+        navigate(`${basePath}/game?solo=true&daily=true&difficulty=hard`);
        setShowOverlay(false);
    };

@ -191,22 +218,17 @@ function NewPlay() {

    // const returnVisibility: Visibility = goBackRoom !== -1 ? "visible" : "hidden";

-    const returnVisibility: any= goBackRoom !== -1 ?  "visible" : "hidden" ;
-
+    const returnVisibility = goBackRoom !== -1 ?  "block" : "none" ;

    return (

        <div className="MainContainer">
-            <div className="NewleftContainer">
-
-                {/* Menu de boutons */}
-                
+            <div className="leftContainer">
+                {/* Boutons pour jouer */}
                <div className='NewbuttonGroupVertical'>
-                    <button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
-                    
-                    
-                    <button ref={target} onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Résoudre une énigme</button>
-                    <Overlay show={showOverlay} target={target.current} placement="bottom" rootClose={true} rootCloseEvent='click'>
+                    <button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> <FormattedMessage id="play.jouerseul"/> </button>
+                    <button ref={target} onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> <FormattedMessage id="play.enigme"/> </button>
+                    <Overlay show={showOverlay} target={target.current} placement="bottom" rootClose={true} rootCloseEvent='click' onHide={() => setShowOverlay(false)}>
                        {({ placement, arrowProps, show: _show, popper, ...props }) => (
                            <div
                                {...props}
@ -218,39 +240,29 @@ function NewPlay() {
                                }}>

                                <ButtonGroup aria-label="difficulty">
-                                    <Button onClick={handleStartEasyGame}>Facile</Button>
-                                    <Button onClick={handleStartHardGame}>Difficile</Button>
+                                    <Button onClick={handleStartEasyGame}><FormattedMessage id='play.enigme.easy'/></Button>
+                                    <Button onClick={handleStartMediumGame}><FormattedMessage id='play.enigme.medium'/></Button>
+                                    <Button onClick={handleStartHardGame}><FormattedMessage id='play.enigme.hard'/></Button>
                                </ButtonGroup>
                            </div>
                        )}
                    </Overlay>

-                    <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
-                    {/* <button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button> */}
-                    {/* {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>} */}
-                    <button onClick={goBack} className="ButtonNavRejoin" style={{ visibility:returnVisibility}}>Retourner à la partie</button>
+                    <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> <FormattedMessage id='play.create'/> </button>
+                    <button onClick={launchTuto} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> <FormattedMessage id='play.tuto'/> </button>
+                    <button onClick={goBack} className="ButtonNavRejoin" style={{ display:returnVisibility}}><FormattedMessage id='play.return'/> </button>

                </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>
-            <div className='NewrightContainer'>
-                <div style={{ border:'solid 2px lightgray', borderRadius:'15px', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column', padding:'20px', margin:'20px 0px'}}>
-                    <h2>
-                        {user && user.pseudo}
-                    </h2>
-                    <img src={user?.profilePicture}
-                            height='150'
-                            width='150'
-                            alt="Person"
-                            />
-                </div>
-                {user && (<ScoreBoard Player={user}/>)}
            </div>
+
+            <div className='rightContainer'>
+                {user && <ScoreBoard Player={user}/>}
+            </div>        
        </div>
    );
 }
--- a/cryptide_project/src/Pages/Play.css
+++ b/cryptide_project/src/Pages/Play.css
@ -1,17 +1,16 @@
-
-.MainContainer{
-    flex: 1 1 0;
+.MainContainer {
    display: flex;
    flex-direction: row;
-    justify-content:space-around
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 }

-.MidContainer{
+.MidContainer {
    display: flex;
-    /* justify-content:center; */
-    align-items:center;
+    justify-content: center;
+    align-items: center;
    flex-direction: column;
-
    margin-top: 15px;
    width: 30%;
 }
@ -21,20 +20,24 @@
    justify-content: center;
 }

-.leftContainer{
-    width: 30%;
+.leftContainer {
+    height: 100%;
+    margin: 20px 30px;
+    width: 70%;
 }

-.rightContainer{
+.rightContainer {
+    height: 100%;
+    margin: 20px 30px;
    width: 30%;
 }

-.NewleftContainer{    
+.NewleftContainer {
    margin: 20px 30px;
    width: 70%;
 }

-.NewrightContainer{
+.NewrightContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
@ -42,81 +45,55 @@
    width: 30%;
 }

-/* .textBoard div{
-    display: flex;
-    flex-direction:column-reverse;
-    justify-content:space-between
-} */
-
-/* .textBoard div:nth-child(2){
+.buttonGroupVertical {
    display: flex;
-    justify-content: end;
-} */
-
-/**Button**/
-.buttonGroupVertical{
-    display: flex;
-    justify-content:center;
-    align-items:center;
+    justify-content: center;
+    align-items: center;
    flex-direction: column;
 }

-.NewbuttonGroupVertical{
+.NewbuttonGroupVertical {
    display: flex;
-    justify-content:space-around;
-    align-items:start;
+    flex-direction: row;
+    justify-content: space-evenly;
 }

-
-.ButtonNav{
+.ButtonNav {
    margin: 15px 10px;
-    width:200px;
+    width: 200px;
    height: 8vh;
-
-    /* background-color: #85C9C2;
-    color: #2A4541; */
    color: white;
-
-    border: solid;
+    border: 2px solid #0056b3;
    border-radius: 15px;
-    border-width: 2px;
-
-    font-size:larger;
+    font-size: larger;
 }

-
-.ButtonNavRejoin{
+.ButtonNavRejoin {
    margin: 15px 10px;
-    width:200px;
+    width: 200px;
    height: 8vh;
-
    color: white;
    background-color: aquamarine;
-
-    border: solid 2px rgb(40, 225, 163);
+    border: 2px solid #0056b3;
    border-radius: 15px;
-
-    font-size:larger;
+    font-size: larger;
 }
-.returnDiv{
+
+.returnDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
-
-    margin:40px 15px;
-
-    border: solid 2px whitesmoke;
+    margin: 40px 15px;
+    border: 2px solid whitesmoke;
    border-radius: 15px;
-    
    background-color: white;
 }

 .returnDiv p {
    margin: 15px;
    padding: 10px;
-    border: solid 1px whitesmoke;
+    border: 1px solid whitesmoke;
    border-radius: 10px;
-
-    font-weight:500;
-}
+    font-weight: 500;
+}
--- a/cryptide_project/src/Pages/Profile.css
+++ b/cryptide_project/src/Pages/Profile.css
@ -1,6 +1,5 @@
 .mainContainer{
    display: flex;
-    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    margin: 50px;
--- a/cryptide_project/src/Pages/Profile.tsx
+++ b/cryptide_project/src/Pages/Profile.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ProfilePDP from '../Components/ProfilePDP';

 import SessionService from '../services/SessionService';
@ -24,20 +24,34 @@ import Modal from 'react-bootstrap/Modal';
 import Form from 'react-bootstrap/Form';
 import ProgressBar from 'react-bootstrap/ProgressBar';

-
 import {basePath} from "../AdressSetup"

 //@ts-ignore
 const Profile = () => {
-  
  const navigate = useNavigate();
-  //let player;
-  const {user, logout} = useAuth()
-
  const [editingUsername, setEditingUsername] = useState(false);
+  const {isLoggedIn, login, logout, user, setUserData, manager } = useAuth();
  const [newUsername, setNewUsername] = useState(user?.pseudo);

-  //@ts-ignore
+  useEffect(() => {
+      if (user == null){
+          manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
+              if (user!=null){
+                  if (loggedIn){
+                      login()
+                      setUserData(user)
+                  }
+              }
+          })
+      }
+  }, [isLoggedIn]);
+
+  const handleLogout = () => {
+    logout();
+    navigate(`${basePath}/`);
+  };
+  
+  // @ts-ignore
  const onUsernameChange = (newUsername) => {
    if(user?.pseudo != null){
      SessionService.UpdatePseudo(user.pseudo, newUsername)
@ -351,7 +365,10 @@ const Profile = () => {
            </Modal>
          </>
        </div>
-
+      </div>
+      {/* Bouton de déconnexion */}
+      <div className='logout'>
+        <Button variant="warning" onClick={handleLogout}>Déconnexion</Button>
      </div>
    </div>
    </>
--- a/cryptide_project/src/Pages/SignUpForm.tsx
+++ b/cryptide_project/src/Pages/SignUpForm.tsx
@ -9,7 +9,6 @@ import {basePath} from "../AdressSetup"

 const SignUp = () => {
    const navigate = useNavigate(); 
-
    const [error, setError] = useState<string | null>(null);
    const [showConfirmation, setShowConfirmation] = useState(false);

--- a/cryptide_project/src/Pages/Tutorial.tsx
+++ b/cryptide_project/src/Pages/Tutorial.tsx
@ -0,0 +1,754 @@
+import React, { useState, useEffect } from 'react';
+import Switch from "react-switch";
+import {saveAs} from "file-saver"
+
+/* Style */
+import "./InGame.css"
+import {useTheme} from '../Style/ThemeContext'
+/* Component */
+import GraphContainer from '../Components/GraphContainer';
+import PlayerList from '../Components/PlayerList';
+import TurnBar from '../Components/TurnBar';
+
+/* Icon */
+import Param from "../res/icon/param.png";
+import Info from "../res/icon/infoGreen.png";
+import Check from "../res/icon/checkboxGreen.png";
+import MGlass from "../res/icon/magnifying-glass.png";
+import Reset from "../res/icon/reset.png";
+import Oeye from "../res/icon/eye.png";
+import Ceye from "../res/icon/hidden.png";
+import ImgBot from "../res/img/bot.png";
+
+import detective from "../res/img/tuto/tuto-detective.jpg";
+import ava from "../res/img/tuto/tuto-ava2.png";
+import indicetxt from "../res/img/tuto/tuto-indiceTxt.png"
+import rep from "../res/img/tuto/tuto-rep.png";
+import joueurs from "../res/img/tuto/tuto-joueurs.png";
+import graph from "../res/img/tuto/tuto-graph.png";
+
+import step1 from "../res/img/tuto/tuto2-1.png";
+import step2 from "../res/img/tuto/tuto2-2.png";
+import step3 from "../res/img/tuto/tuto2-3.png";
+import step4 from "../res/img/tuto/tuto2-4.png";
+import step5 from "../res/img/tuto/tuto2-5.png";
+import step6 from "../res/img/tuto/tuto2-6.png";
+
+/* nav */
+import { Link, Navigate, useNavigate, useNavigationType } from 'react-router-dom';
+
+/* Boostrap */
+import Offcanvas from 'react-bootstrap/Offcanvas';
+import Modal from 'react-bootstrap/Modal';
+import Card from 'react-bootstrap/Card';
+import Button from 'react-bootstrap/Button';
+
+/* Model */
+import Stub from '../model/Stub';
+import { useGame } from '../Contexts/GameContext';
+import { socket } from '../SocketConfig';
+import { Network } from 'vis-network';
+import {generateLatexCode, generateLatexCodeEnigme} from '../Script/LatexScript';
+import Pair from '../model/Pair';
+import Indice from '../model/Indices/Indice';
+import {basePath} from "../AdressSetup"
+import TutorialGraph from '../Components/TutorialGraph';
+import { useAuth } from '../Contexts/AuthContext';
+import EasyBot from '../model/EasyBot';
+import { set } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+
+
+let cptNavigation = 0
+
+//@ts-ignore
+const Tutorial = ({locale, changeLocale}) => {
+  const {personNetwork, person, indices, players, setPlayersData, indice, actualPlayerIndex} = useGame()
+  const {user} = useAuth()
+
+  
+  const theme = useTheme();
+  
+  const navigate = useNavigate()
+  
+  const [greyForEveryone, setGreyForEveryone] = useState<() => void>(() => {});
+
+  const setGreyForEveryoneData = (func: () => void) => {
+    setGreyForEveryone(func)
+  }
+
+  const navigationType = useNavigationType()
+    cptNavigation++
+    if (cptNavigation % 2 == 0){
+        if (navigationType.toString() == "POP"){
+            socket.emit("player quit")
+            navigate(`${basePath}/`)
+        }
+    }
+  
+  //* Historique
+  const [history, setHistory] = useState<string[]>([]);
+  const [showLast, setShowLast] = useState(false)
+  const [askedWrong, setAskedWrong] = useState(false)
+  const [importToPdf, setImportToPdf] = useState(false)
+  const [importToJSON, setImportToJSON] = useState(false)
+  const [tutoStep, setTutoStep] = useState(0)
+
+  const setTutoStepData = (step: number) => {
+    setTutoStep(step)
+  }
+
+  const setImportToJSONData = (imp: boolean) => {
+    setImportToJSON(imp)
+  }
+
+  const setImportToPdfData = (imp: boolean) => {
+    setImportToPdf(imp)
+  }
+
+  // Fonction pour ajouter un élément à l'historique
+  const addToHistory = (message: string) => {
+    setHistory(prevHistory => [...prevHistory, message]);
+  };
+  
+  const setShowLastData = () =>{
+    setLastVisible(!showLast);
+    setShowLast(!showLast);
+  }
+
+  const setAskedWrongData = (askedWrong: boolean) => {
+    setAskedWrong(askedWrong)
+  }
+
+  useEffect(() => {
+    const historyContainer = document.getElementById('history-container');
+    if (historyContainer) {
+      historyContainer.scrollTop = historyContainer.scrollHeight;
+    }
+  }, [history]);
+
+  useEffect(() => {
+    if (user == null){
+      return
+    }
+    setPlayersData([user, new EasyBot("Scooby-Doo", "Scooby-Doo", ImgBot), new EasyBot("Batman", "Batman", ImgBot)])
+  }, [])
+
+
+
+  const [showChoiceBar, setShowChoiceBar] = useState(false);
+  const [showTurnBar, setShowTurnBar] = useState(false);
+  const [turnBarText, setTurnBarText] = useState("");
+  const [playerTouched, setPlayerTouched] = useState(-2)
+  const [playerIndex, setPlayerIndex] = useState(-2)
+
+
+  const [network, setNetwork] = useState<Network | null>(null)
+  const [networkEnigme, setNetworkEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
+
+  const setNetworkData = (network: Network) => {
+    setNetwork(network)
+  }
+
+  const setNetworkEnigmeData = (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => {
+    setNetworkEnigme(networkEnigme)
+  }
+
+  const handleNodeClick = (shouldShowChoiceBar: boolean) => {
+    setShowChoiceBar(shouldShowChoiceBar);
+  };
+
+    const handleSetPlayerTouched = (newPlayerTouched: number) => {
+      setPlayerTouched(newPlayerTouched);
+    };
+  
+
+  const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
+    setShowTurnBar(shouldShowTurnBar);
+  };
+  
+  const handleTurnBarTextChange = (newTurnBarText: string) =>{
+    setTurnBarText(newTurnBarText)
+  }
+
+  const setPlayerIndexData = (playerIndex: number) => {
+    setPlayerIndex(playerIndex)
+  }
+
+  
+  const resetGraph = () => {
+    setisLoading(true);
+    socket.emit("reset graph", socket.id)
+    setTimeout(() => {
+      setisLoading(false);
+    }, 2000);  
+  }
+
+  /* offcanvas */
+  //? faire une fonction pour close et show en fonction de l'etat du canva ?
+  //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const [showP, setShowP] = useState(false);
+  const handleCloseP = () => setShowP(false);
+  const handleShowP = () => setShowP(true);
+
+  const [showS, setShowS] = useState(false);
+  const handleCloseS = () => setShowS(false);
+  const handleShowS = () => setShowS(true);
+
+  const [cptTour, setcptTour] = useState(0);
+
+  const [LastVisible, setLastVisible] = useState(false);
+
+  const [isLoading, setisLoading] = useState(false);
+  
+
+  //@ts-ignore
+  const changecptTour = (newcptTour) => {
+    setcptTour(newcptTour);
+  };
+  
+    const handleChange = () => {
+      if (show){
+        handleClose()
+      }
+      else {
+        handleShow()
+      }
+    };
+  
+    const handleChangeS = () => {
+      if (showS){
+        handleCloseS()
+      }
+      else {
+        handleShowS()
+      }
+    };
+
+    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
+      window.open(url);
+    };
+  
+  const [SwitchEnabled, setSwitchEnabled] = useState(false)
+  const allIndices = Stub.GenerateIndice()
+
+  const nbPlayer = players.length;
+  const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
+
+
+
+    //* gestion demo */
+  const [showM, setShowM] = useState(false);
+  const [showTuto2, setShowTuto2] = useState(false);
+  const [showTuto21, setShowTuto21] = useState(false);
+  const [showTuto22, setShowTuto22] = useState(false);
+  const [showTuto3, setShowTuto3] = useState(false);
+
+  const handleCloseM = () => {
+    setShowM(false);
+    handleShowHelp()
+  }
+  const handleShowM = () => setShowM(true);
+
+  const handleCloseHelp = () => {
+    switch(tutoStep){
+      case 0:
+        setShowTuto2(false);
+        break;
+      case 1:
+        setShowTuto21(false);
+        break;
+      case 2:
+        setShowTuto22(false);
+        break;
+      case 3:
+        setShowTuto3(false);
+        break;
+    }
+  }
+  const handleShowHelp = () => {
+    switch(tutoStep){
+      case 0:
+        setShowTuto2(true);
+        break;
+      case 1:
+        setShowTuto21(true);
+        break;
+      case 2:
+        setShowTuto22(true);
+        break;
+      case 3:
+        setShowTuto3(true);
+        break;
+    }
+  }
+  
+
+  const handleCloseTuto2 = () => setShowTuto2(false);
+  const handleShowTuto2 = () => setShowTuto2(true);
+
+  const handleCloseTuto21 = () => setShowTuto21(false);
+  const handleShowTuto21 = () => setShowTuto21(true);
+
+  const handleCloseTuto22 = () => setShowTuto22(false);
+  const handleShowTuto22 = () => setShowTuto22(true);
+  
+  const handleCloseTuto3 = () => setShowTuto3(false);
+  const handleShowTuto3 = () => setShowTuto3(true);
+  
+
+  const [step, setStep] = useState(-1);
+
+  //@ts-ignore
+  const displayModalstep = (step: number) => {
+    //* for step 2
+    setStep(0); // remise a 0 de step
+    switch(step) {
+      case 1:
+        setShowTuto21(true);
+        break;
+      case 2:
+        setShowTuto22(true);
+        break;
+      case 3:
+        setShowTuto3(true);
+        break;
+    }
+  
+  }
+
+  useEffect(() => {
+    handleShowM();
+  }, [])
+
+    return (
+      <div id="mainDiv">
+        {showTurnBar && <TurnBar text={turnBarText}/>}
+        <div id='graphDiv'>
+          <TutorialGraph  tutoStep={tutoStep}
+                          setTutoStep={setTutoStepData}
+                          handleShowTurnBar={handleShowTurnBar} 
+                          handleTurnBarTextChange={handleTurnBarTextChange} 
+                          addToHistory={addToHistory}
+                          setPlayerTouched={handleSetPlayerTouched} 
+                          playerTouched={playerTouched}
+                          setNetwork={setNetworkData}
+                          showLast={showLast}
+                          setPlayerIndex={setPlayerIndexData}
+                          setGreyForEveryone={setGreyForEveryoneData}
+                          displayModalstep={displayModalstep}/>
+        </div>
+
+        <div className='historique' id="history-container">
+            {history.map((item, index) => (
+                <div key={index}>{item}</div>
+            ))}
+        </div>
+
+
+        <div className='menuGame'>
+          {/* <Button variant="primary" onClick={handleShowM}>
+              tuto 1
+          </Button>
+          <Button variant="primary" onClick={handleShowTuto2} disabled={tuto1disable}>
+              tuto 2
+          </Button> */}
+
+          <Button variant="primary" onClick={handleShowHelp}>
+            <FormattedMessage id='aide'/>
+          </Button>
+          <Link to={`${basePath}/info`} target='_blank'>
+            <button className='button' 
+              style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+              }}>
+              <img src={Info} alt="info" height="40"/>
+            </button>
+          </Link>
+
+          <button className='button' onClick={handleChange}
+            style={{ 
+              backgroundColor: theme.colors.tertiary,
+              borderColor: theme.colors.secondary
+            }}>
+            <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>
+
+          
+          <div className='playerlistDiv'>
+            <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong} greyForEveryone={greyForEveryone}/>
+          </div>
+          
+
+        <Offcanvas show={show} 
+                  onHide={handleClose} 
+                  placement='end'
+                  scroll={true}
+                  backdrop={false}
+                  style={{ height: '20%', width: '25%', top: '60vh' }}>
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title><FormattedMessage id='indice'/></Offcanvas.Title>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+            {indice?.ToString(locale)}
+          </Offcanvas.Body>
+        </Offcanvas>
+      
+
+
+        <Modal
+          show={showM}
+          onHide={handleCloseM}
+          backdrop="static"
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
+          <Modal.Header>
+            <Modal.Title><FormattedMessage id='tutorial.title'/></Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+
+          {step === -1 && (
+            <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+              <Card.Img variant="top" src={detective} style={{width:'300px', height:'300px'}}/>
+              <Card.Body>
+                <Card.Title> <FormattedMessage id='tuto.title.1'/> </Card.Title>
+                <Card.Text>
+                  <FormattedMessage id='tuto.txt.1.1'/> <br/>
+                  <FormattedMessage id='tuto.txt.1.2'/> <br/>
+                  <FormattedMessage id='tuto.txt.1.3'/> <br/>
+                  <FormattedMessage id='tuto.txt.1.4'/> <br/>
+                  <FormattedMessage id='tuto.txt.1.5'/> <br/>
+                  <i><FormattedMessage id='tuto.txt.1.6'/></i>
+                </Card.Text>
+              </Card.Body>
+            </Card>
+          )}
+            {step === 0 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={ava} style={{width:'300px', height:'300px'}}/>
+                <Card.Body>
+                  <Card.Title> <FormattedMessage id='tuto.title.2'/> </Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.2.1'/>
+                    <br />
+                    <FormattedMessage id='tuto.txt.2.2' /><b>Ava</b><FormattedMessage id='tuto.txt.2.2.1'/><b>40 <FormattedMessage id='age_indice_end'/></b><FormattedMessage id='tuto.txt.2.2.2'/><b><FormattedMessage id='basketball'/></b><FormattedMessage id='tuto.txt.2.2.3'/><b><FormattedMessage id='tennis'/></b><FormattedMessage id='tuto.txt.2.2.4'/><b><FormattedMessage id='redhead'/></b><FormattedMessage id='tuto.txt.2.2.5'/><b>2 <FormattedMessage id='nb_friends_indice_end'/></b> : Carter <FormattedMessage id='and'/> Liam.
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 1 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={indicetxt} style={{width:'300px', height:'auto'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.3'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.3.1'/>
+                    <br />
+                    "<u><FormattedMessage id='tuto.txt.3.2'/></u>".
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 3 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={joueurs} style={{width:'auto', height:'300px'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.4'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.4.1'/>
+                    <br />
+                    <FormattedMessage id='tuto.txt.4.2'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 4 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={rep} style={{width:'300px', height:'300px'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.5'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.5.1'/>
+                    <br />
+                    <ul>
+                      <li>
+                        <FormattedMessage id='majUn'/> <u><FormattedMessage id='square'/></u> <FormattedMessage id='tuto.txt.5.2'/>.
+                      </li>
+                      <li>
+                        <FormattedMessage id='majUn'/> <u><FormattedMessage id='round'/></u> <FormattedMessage id='tuto.txt.5.3'/>.
+                      </li>
+                    </ul>
+                    <FormattedMessage id='tuto.txt.5.4'/><br />
+                    <FormattedMessage id='tuto.txt.5.5.1'/>(<u><FormattedMessage id='color.green'/></u>) <FormattedMessage id='tuto.txt.5.5.2'/>.
+                    <br/><FormattedMessage id='tuto.txt.5.6'/> (<u><FormattedMessage id='color.yellow'/></u>).
+                    <br/><FormattedMessage id='tuto.txt.5.7.1'/><u><FormattedMessage id='tuto.txt.5.7.2'/></u>.
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 5 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Header>
+                  <button className='button' 
+                    style={{ 
+                      backgroundColor: theme.colors.tertiary,
+                      borderColor: theme.colors.secondary
+                    }}>
+                    <img src={Info} alt="info" height="40"/>
+                  </button>
+                </Card.Header>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.6'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.6.1.1'/><b><FormattedMessage id='tuto.txt.6.1.2'/></b><FormattedMessage id='tuto.txt.6.1.3'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 2 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Header>
+                  <button className='button' 
+                    style={{ 
+                      backgroundColor: theme.colors.tertiary,
+                      borderColor: theme.colors.secondary
+                    }}>
+                    <img src={MGlass} alt="info" height="40"/>
+                  </button>
+                </Card.Header>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.7'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.7.1'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 6 && (
+              <Card style={{ width: '90%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={graph} style={{width:'auto', height:'300px'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.8'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.8.1'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.8.2'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.8.3'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+
+
+          </Modal.Body>
+          <Modal.Footer style={{display:'flex'}}>
+            <div style={{ width:'100%', display:'flex', justifyContent:'start'}}>
+              <label style={{ color:'gray'}}><FormattedMessage id='step'/> {step+1}/7</label>
+            </div>
+            { step != -1 && (<Button variant="primary" onClick={() => setStep(step - 1)}><FormattedMessage id='previous'/></Button>)}
+            { step === 6 ? (<Button variant="primary" onClick={handleCloseM}><FormattedMessage id='continue'/></Button>) : 
+            <Button variant="primary" onClick={() => setStep(step + 1)}><FormattedMessage id='next'/></Button>}
+            
+          </Modal.Footer>
+        </Modal>
+
+        <Modal
+          show={showTuto2}
+          onHide={handleCloseTuto2}
+          backdrop="static"
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
+          <Modal.Header>
+            <Modal.Title><FormattedMessage id='tutorial.title'/></Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+
+              <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={step1} style={{width:'auto', height:'300px'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.9'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.9.1'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.9.2.1'/><b>Scooby-Doo</b><FormattedMessage id='tuto.txt.9.2.2'/><b>Violet</b><FormattedMessage id='tuto.txt.9.2.3'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+
+          </Modal.Body>
+          <Modal.Footer style={{display:'flex'}}>
+            <Button variant="primary" onClick={handleCloseTuto2}><FormattedMessage id='compris'/></Button>
+          </Modal.Footer>
+        </Modal>
+
+        <Modal
+          show={showTuto21}
+          onHide={handleCloseTuto21}
+          backdrop="static"
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
+          <Modal.Header>
+            <Modal.Title><FormattedMessage id='tutorial.title'/></Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+            {step === 0 && (
+              <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={step2} style={{width:'300px', height:'auto'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.10'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.10.1.1'/> <u><FormattedMessage id='tuto.txt.10.1.2'/></u><FormattedMessage id='tuto.txt.10.1.3'/><i><FormattedMessage id='tuto.txt.10.1.4'/></i><FormattedMessage id='tuto.txt.10.1.5'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.10.2'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 1 && (
+              <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={step3} style={{width:'200px', height:'auto'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.11'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.11.1.1'/><b><FormattedMessage id='non'/></b><FormattedMessage id='tuto.txt.11.1.2'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.11.2.1'/><b><FormattedMessage id='tuto.txt.11.2.2'/></b><FormattedMessage id='tuto.txt.11.2.3'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.11.3'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+            {step === 2 && (
+              <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={step4} style={{width:'300px', height:'auto'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.12'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.12.1.1'/><u><FormattedMessage id='tuto.txt.12.1.2'/></u><FormattedMessage id='tuto.txt.12.1.3'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.12.2'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            )}
+
+
+          </Modal.Body>
+          <Modal.Footer style={{display:'flex'}}>
+            <div style={{ width:'100%', display:'flex', justifyContent:'start'}}>
+              <label style={{ color:'gray'}}><FormattedMessage id='step'/> {step+1}/3</label>
+            </div>
+            { step != 0 && (<Button variant="primary" onClick={() => setStep(step - 1)}><FormattedMessage id='previous'/></Button>)}
+            { step === 2 ? (<Button variant="primary" onClick={handleCloseTuto21}><FormattedMessage id='close'/></Button>) : 
+            <Button variant="primary" onClick={() => setStep(step + 1)}><FormattedMessage id='next'/></Button>}
+          </Modal.Footer>
+        </Modal>
+
+        <Modal
+          show={showTuto22}
+          onHide={handleCloseTuto22}
+          backdrop="static"
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
+          <Modal.Header>
+            <Modal.Title><FormattedMessage id='tutorial.title'/></Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+
+              <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={step5} style={{width:'300px', height:'auto'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.13'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.13.1.1'/><b><FormattedMessage id='tuto.txt.13.1.2'/></b><FormattedMessage id='tuto.txt.13.1.3'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.13.2.1'/><u><FormattedMessage id='tuto.txt.13.2.2'/></u><FormattedMessage id='tuto.txt.13.2.3'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.13.3.1'/><b>Liam</b> <FormattedMessage id='tuto.txt.13.3.2'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+          </Modal.Body>
+          <Modal.Footer style={{display:'flex'}}>
+            <Button variant="primary" onClick={handleCloseTuto22}><FormattedMessage id='compris'/></Button>
+          </Modal.Footer>
+        </Modal>
+
+        <Modal
+          show={showTuto3}
+          onHide={handleCloseTuto3}
+          backdrop="static"
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
+          <Modal.Header>
+            <Modal.Title>The End Game</Modal.Title>
+          </Modal.Header>
+          <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+              <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
+                <Card.Img variant="top" src={step6} style={{width:'250px', height:'auto'}}/>
+                <Card.Body>
+                  <Card.Title><FormattedMessage id='tuto.title.14'/></Card.Title>
+                  <Card.Text>
+                    <FormattedMessage id='tuto.txt.14.1'/>
+                    <br/>
+                    <FormattedMessage id='tuto.txt.14.2'/>
+                    <ul>
+                      <li>
+                        <FormattedMessage id='tuto.txt.14.3'/><i>{indices[1]?.ToString(locale)}</i>.
+                      </li>
+                      <li>
+                        <FormattedMessage id='tuto.txt.14.4'/><i>{indices[2]?.ToString(locale)}</i>.
+                      </li>
+                      <li>
+                        <FormattedMessage id='tuto.txt.14.5'/><i>{indices[0]?.ToString(locale)}</i>.
+                      </li>
+                    </ul>
+                    <FormattedMessage id='tuto.txt.14.6.1'/><b><FormattedMessage id='tuto.txt.14.6.2'/></b><FormattedMessage id='tuto.txt.14.6.3'/><b><FormattedMessage id='tuto.txt.14.6.4'/></b><FormattedMessage id='tuto.txt.14.6.5'/>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+          </Modal.Body>
+          <Modal.Footer style={{display:'flex'}}>
+            <Button variant="primary" onClick={handleCloseTuto3}><FormattedMessage id='compris'/></Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  };
+  
+
+export default Tutorial;
--- a/cryptide_project/src/Script/LatexScript.tsx
+++ b/cryptide_project/src/Script/LatexScript.tsx
@ -64,7 +64,6 @@ function generateLatexCode(personsNet : PersonNetwork, choosenPerson : Person, c
        person.getFriends().forEach((friend) => {
            latexCode += `  \\draw (${person.getId()}) -- (${friend.getId()});\n`;
        });
-        console.log(person.getFriends().length);
    });
    
    latexCode += "\\end{tikzpicture}\n";
@ -87,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"

@ -147,7 +146,6 @@ function generateLatexCodeEnigme(personsNet : PersonNetwork, choosenPerson : Per
        person.getFriends().forEach((friend) => {
            latexCode += `  \\draw (${person.getId()}) -- (${friend.getId()});\n`;
        });
-        console.log(person.getFriends().length);
    });
    
    latexCode += "\\end{tikzpicture}\n";
@ -194,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
--- a/cryptide_project/src/Translations/en.json
+++ b/cryptide_project/src/Translations/en.json
@ -1,6 +1,9 @@
 {
    "languageSelector.french": "French",
    "languageSelector.english": "English",
+    "languageSelector.espagnol": "Espagnol",
+    "languageSelector.portuguese": "Portuguese",
+    "languageSelector.russian": "Russian",

    "home.histoire.title": "HISTORY",
    "home.histoire": "Cryptozoology studies the traces of legendary monsters: cryptids. Yetis, Chupacabra, beast of the gevaudan, Dahut, etc. , are very serious topics for you… Cross the clues and be the first to discover them!",
@ -23,6 +26,13 @@
    "sign_up":" Sign up ",
    "log_out":" Log out ",

+    "indice":"Hint",
+    "param":"Settings",
+    "sfx":"Activate sounds",
+    "aide":"Help",
+
+    "majUn":"A",
+
    "join" : "Join",
    "create_room" : "Create room",
    "play_solo" : "Single player",
@ -41,6 +51,10 @@
    "redhead": "Red",
    "brown": "Brown",

+
+    "oui": "yes",
+    "non": "no",
+
    "and": "and",
    "or": "or",
    "or_sport": "or",
@ -65,15 +79,80 @@
    "sport_start": "The suspect plays at least",
    "sport_end": "",

+    "navbar.play" : "Play",
+    "navbar.presentation":"Presentation",
+    "navbar.info":"Information",

-
-
-
-
-
-
-
-
+    
+    "hard": "Hard",
+    "medium": "Medium",
+    "strong": "Strong",
+    "weak": "Weak",
+    "none": "None",
+    
+    "turn" : "Round",
+    "square":"square",
+    "round":"round",
+
+    "step": "Step",
+    "previous": "Previous",
+    "next": "Next",
+    "continue": "Continue",
+    "compris": "Understood!",
+    "close": "Close",
+
+    "regenerate":"Regenarte graph",
+    "BackHome" : "Back to home",
+    "askeveryone" : "Ask everyone",
+
+    "color.green":"Green",
+    "color.blue":"Blue",
+    "color.red":"Red",
+    "color.yellow":"Yellow",
+
+    "play.jouerseul": "Play alone",
+    "play.enigme": "Solve an enigma",
+    "play.enigme.easy": "Easy",
+    "play.enigme.medium": "Intermediate",
+    "play.enigme.hard": "Hard",
+
+    "play.create": "Create a game",
+    "play.tuto": "Tutorial",
+    "play.return": "Return to game",
+
+    "lobbies.all":"All",
+    "lobbies.dispo":"Disponible",
+
+    "placeholder.searchLobby": "Search for a lobby...",
+
+    "score.nbPlayed": "Games Played",
+    "score.best": "Best Score",
+    "score.moy": "Average Attempts",
+    "score.NbWin": "Number of Wins",
+    "score.ratio": "Win/Loss Ratio",
+    "score.bestTmp": "Best Time",
+    "score.moyTmp": "Average Time",
+    "score.nothing": "Nothing for the moment",
+
+    "score.titre.easy": "Easy Enigma",
+    "score.titre.int": "Intermediate Enigma",
+    "score.titre.hard": "Hard Enigma",
+    "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!",
+    "lobby.wait": "Wait for all your friends to join before starting the game.",
+    "lobby.invite": "Invite friends",
+    "lobby.copyLink": "Link copied",
+    "lobby.nbNode": "Select the number of nodes (between 20 and 60)",
+    "lobby.start": "Start the game!",
+
+    "game.yourTurn":"It's your turn !",
+    "game.wrong":"Wrong choice, put a square !",

    "informations" : "Information",
    "info.intro.title":"Introduction to the game :",
@ -111,6 +190,11 @@
    "hair.chatain":"Brown",
    "hair.noir":"Black",

+    "param.node": "Select the number of nodes (between 20 and 50)",
+    "param.clue": "Select the number of clues (between 3 and 6)",
+    "param.valid": "Validate",
+
+
    "info.composant.sport.title":"Sports",
    "info.composant.sport":"The characters' hobbies are represented by five sports respectively :",
    "info.composant.baseball":"Baseball",
@ -129,6 +213,15 @@
    "info.objectif.t3":"Counter-manipulation",
    "info.objectif.t3.text":"If a player places a square token, the questioner must also play his game by placing a square token of his color on a node of the graph. Countermanipulation becomes a formidable weapon to divert the accusation and sow confusion.",

+    "info.interface": "Game Interface",
+    "info.interface.text": "For each game, you will have certain interface elements available:",
+    "info.interface.param": "The 'Settings' button allows the display and management of various game settings, such as enabling or disabling sound effects. It is also possible to choose the number of nodes for the 'Enigma' game mode using this button.",
+    "info.interface.reset": "The 'Reset' button resets the current state of the graph. If you have moved it too much or want its display to be neater, this button is for you!",
+    "info.interface.info": "The 'Information' button redirects to the game rule page (this one).",
+    "info.interface.fiche": "The 'Clue Deduction Sheet' button displays a table that, along with the progress of the game, allows deducing which clues are most likely for each player.",
+    "info.interface.indice": "The 'Personal Clue' button is the most important; it displays your secret clue. Only you know it! You'll have to be clever to deceive your friends and keep it a secret for as long as possible!",
+    "info.interface.vision": "The 'Last Moves Vision' button allows the user to visualize the last 5 moves made. It acts as a visual tool.",
+
    "etape":"Step",
    "info.deroulement.e1":"Ask Strategic Questions",
    "info.deroulement.e1.text":"Each round begins with a player asking another player a question about a person on the graph. Answers are formulated by placing square or round tokens to indicate certainty or doubt as to the involvement of this person.",
@ -140,5 +233,125 @@
    "info.indice-possible.age":"Person's age",
    "info.indice-possible.hair":"Hair color of a person",
    "info.indice-possible.sport":"Sport(s) of a person",
-    "info.indice-possible.voisin":"Character of neighbours"
+    "info.indice-possible.voisin":"Character of neighbours",
+
+    "info.mdj": "Game Modes",
+    "info.mdj.text": "There are various other game modes that allow you to add variety and make the game more or less complex.",
+    "info.mdj.mastermind": "Mastermind",
+    "info.mdj.mastermind.text": "The 'Mastermind' game mode is a solo mode where you must be able to guess the culprit using the minimum number of guesses. In this mode, you won't have any clues, but you'll need to guess them during the game. Selecting a suspect reveals the state of all clues for that suspect. It becomes possible to guess the clues and then identify the culprit!",
+    "info.mdj.enigme": "Enigma",
+    "info.mdj.enigme.text": "This is a solo mode with three difficulty levels:",
+    "info.mdj.enigme.easy": "Easy Enigma",
+    "info.mdj.enigme.easy.txt": "In this game mode, you have access to all clues, and you must guess the culprit that matches all these clues. You can practice guessing the culprit in this mode.",
+    "info.mdj.enigme.medium": "Intermediate Enigma",
+    "info.mdj.enigme.medium.txt": "In this game mode, you don't have access to clues, but you have just enough information about some suspects to be able to guess the culprit. This information will help you guess the clues, and the culprit is the suspect for whom all the clues match. If you select the wrong suspect, don't worry! You'll have information about that suspect, making it easier for you to find the culprit. The goal is to find the culprit in the minimum number of guesses.",
+    "info.mdj.enigme.hard": "Hard Enigma",
+    "info.mdj.enigme.hard.txt": "This final variant is similar to the intermediate enigma; however, you must find the culprit on the first try, or you lose! It's up to you to play! The goal is to find the culprit in the minimum amount of time.",
+
+    "tutorial.title": "Tutorial",
+
+    "tuto.title.1": "Welcome to SocialGraph!",
+    "tuto.txt.1.1": "You play as a glory-seeking detective faced with a crime.",
+    "tuto.txt.1.2": "However, other investigators are also on the case, all seeking the title of the world's best detective.",
+    "tuto.txt.1.3": "Each has a crucial clue to identify the culprit; you'll need to deduce your competitors' clues if you want to win!",
+    "tuto.txt.1.4": "Interrogate your competitors to get answers with yes or no, but beware, a refusal has consequences.",
+    "tuto.txt.1.5": "Be the first to deduce the clues of others and find the culprit to win the coveted recognition.",
+    "tuto.txt.1.6": "If you have any doubts, click on the 'help' button to display the current tutorial step.",
+
+    "tuto.title.2": "The Suspects",
+    "tuto.txt.2.1": "Here is how a suspect is represented; each suspect has different characteristics, including their name, age, sport, and hair color.",
+    "tuto.txt.2.2": "For example, here we have ",
+    "tuto.txt.2.2.1": ", who is ",
+    "tuto.txt.2.2.2": ", practicing ",
+    "tuto.txt.2.2.3": " and ",
+    "tuto.txt.2.2.4": ", has ",
+    "tuto.txt.2.2.5": " hair, and possesses ",
+
+    "tuto.title.3": "The Clues",
+    "tuto.txt.3.1": "In this game, each detective has a clue that identifies a characteristic of the culprit. Your clue is:",
+    "tuto.txt.3.2": "The suspect is between 20 and 29 years old.",
+
+    "tuto.title.4": "The Detectives",
+    "tuto.txt.4.1": "It is possible to see the detectives on the left side of the screen, represented by circles of different colors. The square outline means that the detective is in deep thought.",
+    "tuto.txt.4.2": "To interrogate a detective about a suspect, select the detective, then click on the suspect you want. The detective will respond with what he thinks of this suspect based on his clue.",
+
+    "tuto.title.5": "The Responses",
+    "tuto.txt.5.1": "Detectives will respond to you only with circles or squares of their color.",
+    "tuto.txt.5.2": " means that their clue clears the suspect.",
+    "tuto.txt.5.3": " means that their clue may incriminate the suspect.",
+    "tuto.txt.5.4": "For example, here:",
+    "tuto.txt.5.5.1": "Scooby-Doo's clue ",
+    "tuto.txt.5.5.2": "clears Logan.",
+    "tuto.txt.5.6": "Eleanor can be suspected based on Batman's clue.",
+    "tuto.txt.5.7.1": "Evelyn is cleared by the clues of ",
+    "tuto.txt.5.7.2": "3 different detectives.",
+
+    "tuto.title.6": "The Rules of the Game",
+    "tuto.txt.6.1.1": "This button takes you to the game's ",
+    "tuto.txt.6.1.2": "information page",
+    "tuto.txt.6.1.3": ", with all the rules of the game, including objectives, clues, flow, etc.",
+
+    "tuto.title.7": "The Clue",
+    "tuto.txt.7.1": "This button allows you to display your personal clue; keep it a secret! It is your best asset to win.",
+
+    "tuto.title.8": "Time to Practice!",
+    "tuto.txt.8.1": "Well done! You now have all the basics of a real detective.",
+    "tuto.txt.8.2": "You will now have a practical exercise for solving a case, alongside our dear Batman and Scooby-Doo.",
+    "tuto.txt.8.3": "Click 'Continue' to start your first game.",
+
+    "tuto.title.9": "First Steps",
+    "tuto.txt.9.1": "Welcome to this second part, where we will learn the flow of a real investigation.",
+    "tuto.txt.9.2.1": "First, select player ",
+    "tuto.txt.9.2.2": " and question them about the suspect named ",
+    "tuto.txt.9.2.3": " by clicking on the latter.",
+
+    "tuto.title.10": "Your First Turn",
+    "tuto.txt.10.1.1": "Great, ",
+    "tuto.txt.10.1.2": "Violet has been identified by Scooby-Doo's clue",
+    "tuto.txt.10.1.3": ", which is essential information! However, this does not necessarily ",
+    "tuto.txt.10.1.4": "mean",
+    "tuto.txt.10.1.5": " that she is guilty.",
+    "tuto.txt.10.2": "Now, it's the other players' turn to play; let's see what they did.",
+
+    "tuto.title.11": "Other Players' First Turn",
+    "tuto.txt.11.1.1": "It seems that Scooby-Doo also questioned Batman about Violet, and Batman responded with ",
+    "tuto.txt.11.1.2": "a square. This means Violet is not guilty and is innocent!",
+    "tuto.txt.11.2.1": "Scooby-Doo made a mistake by questioning someone who could clear Violet. As a ",
+    "tuto.txt.11.2.2": "punishment",
+    "tuto.txt.11.2.3": ", he must also place a square on another player, revealing more information about his clue. So now we know that Scooby-Doo's clue does not identify Sebastian.",
+    "tuto.txt.11.3": "Next, Batman questioned Scooby-Doo about Charlotte, identified by Scooby-Doo's clue.",
+
+    "tuto.title.12": "Second Turn",
+    "tuto.txt.12.1.1": "You notice that ",
+    "tuto.txt.12.1.2": "your clue also identifies Charlotte",
+    "tuto.txt.12.1.3": ", so what if we ask Batman if he thinks Charlotte is the culprit?",
+    "tuto.txt.12.2": "This would allow us to end the game!",
+
+    "tuto.title.13": "The Punishment",
+    "tuto.txt.13.1.1": "Oh no, it seems that Batman's clue clears Charlotte, and you have made a mistake; the ",
+    "tuto.txt.13.1.2": "punishment",
+    "tuto.txt.13.1.3": " applies!",
+    "tuto.txt.13.2.1": "So, you must place a ",
+    "tuto.txt.13.2.2": "square on another player",
+    "tuto.txt.13.2.3": ", revealing more information about your clue.",
+    "tuto.txt.13.3.1": "But all is not lost! Let's place our square on ",
+    "tuto.txt.13.3.2": "for that, select the desired suspect directly.",
+
+    "tuto.title.14": "The End of the Game",
+    "tuto.txt.14.1": "This turn is also rich in information!",
+    "tuto.txt.14.2": "You now have enough information to guess the clues of others:",
+    "tuto.txt.14.3": "Scooby-Doo seems to have:",
+    "tuto.txt.14.4": "Batman seems to have:",
+    "tuto.txt.14.5": "And your clue is:",
+    "tuto.txt.14.6.1": "You now have all the cards in hand to guess who the culprit is. Click the ",
+    "tuto.txt.14.6.2": "Ask Everyone",
+    "tuto.txt.14.6.3": " button, then select a suspect to make an ",
+    "tuto.txt.14.6.4": "accusation",
+    "tuto.txt.14.6.5": " to guess. Good luck!",
+
+    "history.mis": " placed a ",
+    "à": "to",
+    "history.cantPose": " can no longer place a square",
+    "history.NotCoupable": " is not the culprit!"
+
 }
--- a/cryptide_project/src/Translations/es.json
+++ b/cryptide_project/src/Translations/es.json
@ -0,0 +1,163 @@
+{
+    "languageSelector.french": "Francés",
+    "languageSelector.english": "Inglés",
+    "languageSelector.espagnol": "Español",
+    "languageSelector.portuguese": "Portugués",
+    "languageSelector.russian": "Ruso",
+
+    "home.histoire.title": "HISTORIA",
+    "home.histoire": "La criptozoología estudia las huellas de monstruos legendarios: criptidos. Yetis, Chupacabra, bestia de Gévaudan, Dahut, etc. son temas muy serios para ti... Cruza las pistas y sé el primero en descubrirlos.",
+
+    "home.jeu.title": "EL JUEGO",
+    "home.jeu": "Cada jugador tiene una pista en el campo donde se encuentra la criatura. Cruzando tu información, solo puede haber una casilla. Pero el objetivo es ser el primero en encontrarla. Pregunta a tus colegas y, sin embargo, competidores. Solo pueden responderte con un 'no' o un 'quizás', con mucha lógica y un poco de audacia, ¡puedes entrar en la leyenda!",
+
+    "home.plus.title": "FORTALEZAS",
+    "home.plus.1": "Un mecanismo de deducción asombroso.",
+    "home.plus.2": "Una inmensa rejugabilidad.",
+    "home.plus.3": "Un tema sorprendente y fuerte.",
+
+    "game.time": "Tiempo: 45 minutos",
+    "game.players": "Jugadores: de 3 a 5 jugadores",
+    "game.age": "Edad: 10 años en adelante",
+    "game.createdBy": "Creado por:",
+    "game.illustratedBy": "Ilustrado por:",
+
+    "log_in": "Iniciar sesión",
+    "sign_up": "Registrarse",
+    "log_out": "Cerrar sesión",
+
+    "join": "Unirse",
+    "create_room": "Crear sala",
+    "play_solo": "Jugador individual",
+
+    "play": "JUGAR",
+
+    "football": "Fútbol",
+    "basketball": "Baloncesto",
+    "baseball": "Béisbol",
+    "tennis": "Tenis",
+    "bowling": "Bolos",
+
+    "white": "Blanco",
+    "black": "Negro",
+    "blond": "Rubio",
+    "redhead": "Pelirrojo",
+    "brown": "Marrón",
+
+    "and": "y",
+    "or": "o",
+    "or_sport": "o",
+
+    "age_indice_start": "El sospechoso tiene entre",
+    "age_indice_more_start": "El sospechoso tiene al menos",
+    "age_indice_end": "años",
+
+    "color_edges_start": "El sospechoso tiene al menos un amigo con cabello",
+    "color_edges_end": "",
+
+    "color_start": "El sospechoso tiene cabello",
+    "color_end": "",
+
+    "nb_friends_indice_start": "El sospechoso tiene",
+    "nb_friends_indice_end": "amigos",
+
+    "nb_sports_indice_start": "El sospechoso juega",
+    "nb_sports_indice_end": "deporte(s)",
+
+    "sport_start": "El sospechoso juega al menos",
+    "sport_end": "",
+
+    "navbar.play" : "Jugar",
+    "navbar.presentation":"Presentación",
+    "navbar.info":"Información",
+
+    "round":"Vuelta",
+
+    "informations": "Información",
+    "info.intro.title": "Introducción al juego:",
+    "info.intro.text": "¡Bienvenido a nuestro emocionante juego de deducción, donde la intriga y la travesura se combinan en una emocionante aventura! Sumérgete en un mundo de misterio e intriga, donde cada interacción cuenta y cada pista te acerca a la verdad. Imagina un gráfico complejo donde cada vértice representa a una persona, cada eje una relación, y cada detalle cuenta. Te sumerges en un desafiante reto para descubrir quién entre estas personas es el misterioso asesino. Cada jugador tiene una pista crucial y solo el intercambio estratégico de estas pistas te llevará a resolver el misterio. Explora nuestra página de reglas para entender las complejidades del juego, descubre pistas que pueden guiarte y desarrolla estrategias inteligentes para identificar al culpable. ¡Manipula a tus amigos para ser el primero en descubrir quién es el asesino oculto en el gráfico! ¿Estás listo para aceptar el desafío y desenmascarar al asesino oculto en el gráfico? ¡Que comience la investigación!",
+
+    "info.sommaire": "Contenidos",
+
+    "info.title.composant": "Componentes del juego",
+    "info.title.objectif": "Objetivo del juego",
+    "info.title.deroulement": "Desarrollo del juego",
+    "info.title.indice_possible": "Posible pista del juego",
+
+    "info.pions": "Peones",
+    "info.composant.text": "A cada jugador se le asignará un color específico que distinguirá las acciones representadas por los peones de la siguiente manera:",
+
+    "info.composant.carre.title": "Fichas cuadradas",
+    "info.composant.carre": "Estas fichas indican una negación. Cuando un jugador coloca una ficha cuadrada, significa que su pista elimina a la persona designada.",
+
+    "info.composant.rond.title": "Fichas redondas",
+    "info.composant.rond": "Estas fichas representan un 'quizás'. El jugador que deposita esta ficha afirma que la persona es sospechosa, pero esto no garantiza su culpabilidad. ¡Solo hay un sospechoso que lleva una ficha redonda para todos los jugadores en el juego, y ese es el culpable!",
+
+    "info.car_perso": "Características",
+    "info.composant.textcar": "Además de sus nombres, los personajes están representados con otras características:",
+
+    "info.composant.age.title": "Edades",
+    "info.composant.age": "Cada persona tiene una edad para autenticarlos, que varía entre 0 y 60 años. La edad es una característica que se confirmará con pistas en forma de ",
+    "info.composant.age.link": "grupos de edad",
+
+    "info.composant.hair_col.title": "Colores de cabello",
+    "info.composant.hair_col": "Los personajes también tienen un color de cabello, que puede ser de los siguientes colores:",
+
+    "hair.blanc": "Blanco",
+    "hair.blond": "Rubio",
+    "hair.roux": "Pelirrojo",
+    "hair.chatain": "Marrón",
+    "hair.noir": "Negro",
+
+    "info.composant.sport.title": "Deportes",
+    "info.composant.sport": "Los hobbies de los personajes están representados por cinco deportes respectivamente:",
+    "info.composant.baseball": "Béisbol",
+    "info.composant.basketball": "Baloncesto",
+    "info.composant.bowling": "Bowling",
+    "info.composant.football": "Fútbol",
+    "info.composant.tennis": "Tenis",
+    "info.composant.sport.bis": "Entre estos deportes, cada personaje puede tener entre 0 y 3 deportes, lo que facilita su identificación utilizando las pistas que tienes.",
+
+    "info.objectif.intro": "Bienvenido al ingenioso universo de nuestro juego de deducción, donde el engaño y la astucia son las claves del éxito. Tu misión es desentrañar el misterio detrás de cada interacción del complejo gráfico que representa las relaciones entre individuos.",
+    "info.objectif.t1": "Manipulación Sutil",
+    "info.objectif.t1.text": "El objetivo final es descubrir quién entre los individuos es el asesino, pero no a través de una colaboración abierta. Por el contrario, utilizarás una manipulación sutil para difuminar las líneas y distraer a tus oponentes. Haz preguntas estratégicas, responde con malicia y siembra pistas engañosas para acercarte al resultado.",
+    "info.objectif.t2": "Trucos",
+    "info.objectif.t2.text": "Cada ronda ofrece la oportunidad de sembrar dudas entre tus oponentes. Cuando un jugador te hace preguntas, responde colocando inteligentemente un token cuadrado para indicar que 'según tu pista, esa persona no puede ser el culpable' o un token redondo para sugerir que permanezcan en la lista de sospechosos. Ten cuidado, porque cada gesto puede interpretarse, y la verdad a menudo está oculta detrás de una fachada de pistas engañosas.",
+    "info.objectif.t3": "Contramanipulación",
+    "info.objectif.t3.text": "Si un jugador coloca un token cuadrado, el que hace la pregunta también debe jugar su juego colocando un token cuadrado de su color en un nodo del gráfico. La contramanipulación se convierte en un arma formidable para desviar la acusación y sembrar la confusión.",
+
+    "info.interface": "Interfaz de juego",
+    "info.interface.text": "Para cada juego, tendrás disponibles ciertos elementos de interfaz:",
+    "info.interface.param": "El botón 'Configuración' permite mostrar y gestionar varias configuraciones del juego, como activar o desactivar efectos de sonido. También es posible elegir el número de nodos para el modo de juego 'Enigma' con este botón.",
+    "info.interface.reset": "El botón 'Restablecer' restablece el estado actual del gráfico. Si lo has movido demasiado o quieres que su visualización sea más ordenada, ¡este botón es para ti!",
+    "info.interface.info": "El botón 'Información' redirige a la página de reglas del juego (esta).",
+    "info.interface.fiche": "El botón 'Hoja de Deducción de Pistas' muestra una tabla que, junto con el progreso del juego, permite deducir qué pistas son más probables para cada jugador.",
+    "info.interface.indice": "El botón 'Pista Personal' es el más importante; muestra tu pista secreta. ¡Solo tú lo sabes! Tendrás que ser astuto para engañar a tus amigos y mantenerlo en secreto el mayor tiempo posible!",
+    "info.interface.vision": "El botón 'Visión de los Últimos Movimientos' permite al usuario visualizar los últimos 5 movimientos realizados. Actúa como una herramienta visual.",
+
+    "etape": "Paso",
+    "info.deroulement.e1": "Hacer preguntas estratégicas",
+    "info.deroulement.e1.text": "Cada ronda comienza con un jugador haciendo preguntas a otro jugador sobre una persona en el gráfico. Las respuestas se formulan colocando fichas cuadradas o redondas para indicar certeza o duda sobre la participación de esa persona.",
+    "info.deroulement.e2": "Contramanipulación y Contra-pregunta",
+    "info.deroulement.e2.text": "Si un jugador coloca una ficha cuadrada, el que hace la pregunta también debe colocar una ficha cuadrada en un nodo del gráfico. Las contra-preguntas son una forma de confundir a los jugadores y desviar la acusación.",
+    "info.deroulement.e3": "La Adivinanza Final",
+    "info.deroulement.e3.text": "El juego alcanza su clímax cuando un jugador intenta la 'Adivinanza' final, afirmando que tal persona es el asesino. Otros jugadores",
+
+    "info.indice-possible.age": "Edad de la persona",
+    "info.indice-possible.hair": "Color de pelo de una persona",
+    "info.indice-possible.sport": "Deporte(s) de una persona",
+    "info.indice-possible.voisin": "Personaje de los vecinos",
+
+    "info.mdj": "Modos de juego",
+    "info.mdj.text": "Existen varios modos de juego que te permiten agregar variedad y hacer el juego más o menos complejo.",
+    "info.mdj.mastermind": "Mastermind",
+    "info.mdj.mastermind.text": "El modo de juego 'Mastermind' es un modo para un solo jugador donde debes ser capaz de adivinar al culpable utilizando el menor número de suposiciones. En este modo, no tendrás ninguna pista, pero deberás adivinarlas durante el juego. Seleccionar a un sospechoso revela el estado de todas las pistas para ese sospechoso. ¡Se vuelve posible adivinar las pistas y luego identificar al culpable!",
+    "info.mdj.enigme": "Enigma",
+    "info.mdj.enigme.text": "Este es un modo para un solo jugador con tres niveles de dificultad:",
+    "info.mdj.enigme.easy": "Enigma Fácil",
+    "info.mdj.enigme.easy.txt": "En este modo de juego, tienes acceso a todas las pistas y debes adivinar al culpable que coincide con todas estas pistas. Puedes practicar adivinando al culpable en este modo.",
+    "info.mdj.enigme.medium": "Enigma Intermedio",
+    "info.mdj.enigme.medium.txt": "En este modo de juego, no tienes acceso a pistas, pero tienes información suficiente sobre algunos sospechosos para poder adivinar al culpable. Esta información te ayudará a adivinar las pistas, y el culpable es el sospechoso para el cual todas las pistas coinciden. Si seleccionas al sospechoso equivocado, ¡no te preocupes! Tendrás información sobre ese sospechoso, lo que facilitará encontrar al culpable. El objetivo es encontrar al culpable en el menor número de suposiciones.",
+    "info.mdj.enigme.hard": "Enigma Difícil",
+    "info.mdj.enigme.hard.txt": "Esta variante final es similar al enigma intermedio; sin embargo, ¡debes encontrar al culpable en el primer intento, o pierdes! ¡Depende de ti jugar! El objetivo es encontrar al culpable en el menor tiempo posible."
+}
--- a/cryptide_project/src/Translations/fr.json
+++ b/cryptide_project/src/Translations/fr.json
@ -1,6 +1,9 @@
 {
    "languageSelector.french": "Français",
    "languageSelector.english": "Anglais",
+    "languageSelector.espagnol": "Espagnol",
+    "languageSelector.portuguese": "Portugais",
+    "languageSelector.russian": "Russe",

    "home.histoire.title": "L'HISTOIRE",
    "home.histoire": "La cryptozoologie étudie les traces des monstres de légende : les cryptides. Yétis, Chupacabra, bête du gévaudan, Dahut, etc., sont des sujets très sérieux pour vous… Croisez les indices et soyez le premier à les découvrir!",
@ -23,6 +26,12 @@
    "sign_up":" S'inscrire ",
    "log_out":" Se déconnecter ",

+    "indice":"Indice",
+    "param":"Paramètres",
+    "sfx":"Activer les sons",
+    "aide":"Aide",
+
+    "majUn":"Un",

    "join" : "Rejoindre",
    "create_room" : "Créer une partie",
@ -41,6 +50,10 @@
    "redhead": "Roux",
    "brown": "Brun",

+
+    "oui": "oui",
+    "non": "non",
+
    "and": "et",
    "or": "ou",
    "or_sport": "ou du",
@ -64,19 +77,85 @@
    "sport_start": "Le suspect pratique au moins du",
    "sport_end": "",

-
-
-
-
-
-
-
-
-
+    "navbar.play" : "Jouer",
+    "navbar.presentation":"Présentation",
+    "navbar.info":"Informations",
+
+    "hard" : "Difficile",
+    "medium" : "Intermédiaire",
+    "strong" : "Fort",
+    "weak" : "Faible",
+    "none" : "Aucun",
+
+    "turn" : "Tour",
+    "square":"carré",
+    "round":"rond",
+
+    "step" : "Étape",
+    "previous" : "Précédent",
+    "next" : "Suivant",
+    "continue" : "Poursuivre",
+    "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": "Mastermind",
+    "play.enigme": "Résoudre une énigme",
+    "play.enigme.easy": "Facile",
+    "play.enigme.medium": "Intermédiaire",
+    "play.enigme.hard": "Difficile",
+
+    "play.create":"Créer une partie",
+    "play.tuto": "Tutoriel",
+    "play.return": "Retourner à la partie",
+
+    "lobbies.all":"Tous",
+    "lobbies.dispo":"Disponibles",
+
+    "placeholder.searchLobby": "Rechercher un lobby...",
+
+    "score.nbPlayed" : "Parties Jouées",
+    "score.best" : "Best-Score",
+    "score.moy" : "Moyenne d'essai",
+    "score.NbWin" : "Nombre de victoire",
+    "score.ratio" : "Ratio V/D",
+    "score.bestTmp" : "Meilleur temps",
+    "score.moyTmp" : "Moyenne de temps",
+    "score.nothing" : "Rien pour le moment",
+
+    "score.titre.easy" : "Énigme facile",
+    "score.titre.int" : "Énigme intermédiaire",
+    "score.titre.hard" : "Énigme difficile",
+    "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 !",
+    "lobby.wait" : "Attendez que tous vos amis rejoignent avant de lancer la partie.",
+    "lobby.invite" : "Inviter des amis",
+    "lobby.copyLink" : "Lien copié",
+    "lobby.nbNode" : "Sélectionner le nombre de noeud (entre 20 et 60) ",
+    "lobby.start" : "Démarrer la partie !",
+
+
+    "game.yourTurn":"À vous de jouer !",
+    "game.wrong":"Mauvais choix, posez un carré !",

    "informations" : "Informations",
    "info.intro.title":"Introduction au jeu :",
-    "info.intro.text":"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 tueur. 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 tueur caché dans le graphe ? Que l'enquête commence !",
+    "info.intro.text":"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 !",

    "info.sommaire":"Sommaire",

@ -110,6 +189,12 @@
    "hair.chatain":"Châtain",
    "hair.noir":"Noir",

+
+    "param.node":"Sélectionner le nombre de noeuds (entre 20 et 50)",
+    "param.clue":"Sélectionner le nombre d'indices (entre 3 et 6)",
+    "param.valid":"Valider",
+
+
    "info.composant.sport.title":"Les Sports",
    "info.composant.sport":"Les loisirs des personnages sont représentés par cinq sports respectivement :",
    
@ -122,12 +207,21 @@

    "info.objectif.intro":"Bienvenue dans l'univers astucieux de notre jeu de déduction, où la tromperie et la ruse sont les clés du succès. Votre mission est de démêler le mystère qui se cache derrière chaque interaction du graphique complexe représentant les relations entre les individus.",
    "info.objectif.t1":"Manipulation Subtile",
-    "info.objectif.t1.text":"Le but ultime est de découvrir qui parmi les individus est le tueur, mais pas par une collaboration ouverte. Au contraire, vous utiliserez la manipulation subtile pour brouiller les pistes et 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.",
+    "info.objectif.t1.text":"Le but ultime est de découvrir qui parmi les individus est le coupable, mais pas par une collaboration ouverte. Au contraire, vous utiliserez la manipulation subtile pour brouiller les pistes et 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.",
    "info.objectif.t2":"Jeu de Duperie",
    "info.objectif.t2.text":"Chaque tour offre l'opportunité de semer le doute parmi vos adversaires. Lorsqu'un joueur vous interroge, répondez en plaçant habilement un jeton carré pour indiquer que 'selon votre indice, cette personne ne peut être le coupable' ou un jeton rond pour suggérer qu'elle reste dans la liste des suspects. Soyez prudent, car chaque geste peut être interprété, et la vérité est souvent cachée derrière une façade d'indices trompeurs.",
    "info.objectif.t3":"Contre-manipulation",
    "info.objectif.t3.text":"Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en posant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient une arme redoutable pour détourner l'accusation et semer la confusion.",

+    "info.interface":"Interface du jeu",
+    "info.interface.text":"Pour chacune des parties, vous aurez certains éléments d'interface à disposition :",
+    "info.interface.param":"Le bouton 'Paramètre' permet l'affichage et la gestion de différents paramètres de la partie, comme par exemple l'option d'activé ou non l' effect sonore. Il est aussi possible de choisir le nombre de nœud du mode de jeu 'Enigme' à l'aide de ce bouton.",
+    "info.interface.reset":"Le bouton 'Reset' permet de réinitialiser l'état du graphe actuel. Si jamais vous avez trop déplacé ce dernier, ou que vous souhaite que son affichage soit plus propre, ce bouton est fait pour vous !",
+    "info.interface.info":"Le bouton 'Information' permet de rediriger vers la page de règle du jeu (celle-ci).",
+    "info.interface.fiche":"Le bouton 'Fiche de déduction d'indice' permet l'affichage de tableau permettant, avec le déroulé de la partie, de déduire quels indices sont les plus probables pour chaque joueur.",
+    "info.interface.indice":"Le bouton 'Indice personnel' est le plus important, en effet, il permet d'afficher quel est votre indice secret. Vous seul le connaissez ! Il va falloir ruser pour tromper vos amis et le garder secret le plus longtemps possible !",
+    "info.interface.vision":"Le bouton 'Vision des derniers mouvements' permet à l'utilisateur de visualiser les 5 derniers coup effectué. Il agit donc vraiment comme un outil visuel.",
+    
    "etape":"Étape",

    "info.deroulement.e1":"Poser des Questions Stratégiques",
@ -135,10 +229,131 @@
    "info.deroulement.e2":"Contre-manipulation et Contre-questions",
    "info.deroulement.e2.text":"Si un joueur place un jeton carré, le questionneur doit également poser un jeton carré sur un nœud du graphique. Les contre-questions sont un moyen de semer la confusion parmi les joueurs et de détourner l'accusation.",
    "info.deroulement.e3":"Le 'Guess' Final",
-    "info.deroulement.e3.text":"La partie atteint son apogée lorsqu'un joueur tente le 'Guess' final, affirmant que telle personne est le tueur. Les autres joueurs peuvent alors contredire cette affirmation en plaçant leurs propres jetons carrés. Si aucune réfutation n'est faite, le joueur ayant fait le 'Guess' remporte la partie, démontrant ainsi sa maîtrise dans l'art de la manipulation.",
+    "info.deroulement.e3.text":"La partie atteint son apogée lorsqu'un joueur tente le 'Guess' final, affirmant que telle personne est le coupable. Les autres joueurs peuvent alors contredire cette affirmation en plaçant leurs propres jetons carrés. Si aucune réfutation n'est faite, le joueur ayant fait le 'Guess' remporte la partie, démontrant ainsi sa maîtrise dans l'art de la manipulation.",

    "info.indice-possible.age":"Âge d'une personne",
    "info.indice-possible.hair":"Couleur de cheveux d'une personne",
    "info.indice-possible.sport":"Sport(s) d'une personne",
-    "info.indice-possible.voisin":"Caractèristique des voisins"
+    "info.indice-possible.voisin":"Caractèristique des voisins",
+
+    "info.mdj":"Modes de jeu",
+    "info.mdj.text":"Il existe différents autres modes de jeu, qui permettent de varier les plaisirs et de rendre le jeu plus ou moins complexe.",
+    "info.mdj.mastermind":"Mastermind",
+    "info.mdj.mastermind.text":"Le mode de jeu 'Mastermind' est un mode de jeu solo. Où vous devez être capable de deviner qui est le coupable en utilisant le minimum de coup. Pour cela, vous n'aurez aucun indice, mais vous allez devoir être capable de les deviner au cours de la partie. Sélectionner un suspect révéle l'état de tous les indices pour ce dernier. Il devient donc possible de deviner les indices, pour ensuite deviner le coupable !",
+    "info.mdj.enigme":"Énigme",
+    "info.mdj.enigme.text":"Il s'agit d'un mode solo, pour lequel on retrouve 3 modes de difficultés :",
+    "info.mdj.enigme.easy":"L'énigme facile",
+    "info.mdj.enigme.easy.txt":"Dans ce mode de jeu, vous avez accès à tous les indices, et vous devez deviner le coupable qui répond à tous ces indices. Vous pouvez donc vous entraîner à deviner le coupable dans ce mode.",
+    "info.mdj.enigme.medium":"L'énigme intermédiaire",
+    "info.mdj.enigme.medium.txt":"Dans ce mode de jeu, vous n'avez pas accès au indice, mais vous avez juste assez d'informations sur certains suspects pour pouvoir deviner le coupable. Ces informations vont vous permettre de deviner les indices, et le coupable est le suspect pour lequel tous les indices correspondent. Si jamais vous sélectionnez le mauvais suspect, pas de panique ! Vous aurez les informations relatives à ce dernier, ce qui vous facilitera le travail pour trouver le coupable. L'objectif est donc de trouver le coupable en un minimum de coup.",
+    "info.mdj.enigme.hard":"L'énigme difficile",
+    "info.mdj.enigme.hard.txt":"Cette dernière variante est similaire à l'énigme intermédiaire, cependant, il faudra trouver du premier coup sinon, vous aurez perdu ! À vous de jouer ! L'objectif est donc de trouver le coupable en un minimum de temps.",
+
+    "tutorial.title":"Tutoriel",
+    "tuto.title.1":"Bienvenue dans SocialGraph !",
+    "tuto.txt.1.1":"Vous incarnez un détective assoiffé de gloire, confronté à un crime.",
+    "tuto.txt.1.2":"Cependant, d'autres enquêteurs sont également sur le coup, tous cherchant à décrocher le titre de meilleur détective du monde.",
+    "tuto.txt.1.3":"Chacun possède un indice crucial pour identifier le coupable, il va falloir déduire l'indice de vos concurrents si vous souhaitez l'emporter !",
+    "tuto.txt.1.4":"Interrogez vos concurrents pour obtenir des réponses par oui ou non, mais méfiez-vous, un refus a des conséquences.",
+    "tuto.txt.1.5":"Soyez le premier à déduire les indices des autres et à trouver le coupable pour remporter la reconnaissance tant convoitée.",
+    "tuto.txt.1.6":"Si vous avez le moindre doute, cliquer sur le bouton 'aide' pour afficher l'étape actuel du tuto",
+
+    "tuto.title.2":"Les Suspects",
+    "tuto.txt.2.1":"Voici comment est représenté un suspect, chaque suspect possède différentes caractéristiques, que ce soit leur nom, âge, sport et leur couleur de cheveux.",
+    "tuto.txt.2.2":"Par exemple, ici, nous avons ",
+    "tuto.txt.2.2.1":", qui a ",
+    "tuto.txt.2.2.2":", qui pratique du ",
+    "tuto.txt.2.2.3":" et du ",
+    "tuto.txt.2.2.4":", qui a les cheveux ",
+    "tuto.txt.2.2.5":" et qui possède ",
+
+    "tuto.title.3":"Les indices",
+    "tuto.txt.3.1":"Dans ce jeu, chaque détective possède un indice, qui permet d'identifier une caractéristique du coupable, votre indice est le suivant :",
+    "tuto.txt.3.2":"Le suspect a entre 20 et 29 ans",
+    
+    "tuto.title.4":"Les Détectives",
+    "tuto.txt.4.1":"Il est possible de voir les détectives sur le côté gauche de l'écran, ils sont représentés par des cercles de couleurs différentes. Le contour carré signifie que ce détective est en pleine réflexion.",
+    "tuto.txt.4.2":"Pour interroger un détective à propos d'un suspect, il suffit de le sélectionner, puis de cliquer sur le suspect que vous souhaitez. Il vous répondra donc ce qu'il pense de ce suspect selon son indice.",
+
+    "tuto.title.5":"Les réponses",
+    "tuto.txt.5.1":"Les détéctives vous répondrons que par des ronds ou des carrés de leur couleur.",
+    "tuto.txt.5.2":" signifie que son indice innocente le suspect",
+    "tuto.txt.5.3":" signifie que son indice peut incréminer le suspect",
+    "tuto.txt.5.4":"Par exemple, ici :",
+    "tuto.txt.5.5.1":"l'indice du détéctive Scooby-Doo ",
+    "tuto.txt.5.5.2":" permet d'innocenter Logan",
+    "tuto.txt.5.6":"Eleanor peut être suspectée par l'indice du détective Batman ",
+    "tuto.txt.5.7.1":"Evelyn est innocentée par l'indice de ",
+    "tuto.txt.5.7.2":"3 détéctives différents",
+    
+    "tuto.title.6":"Les règles du jeu",
+    "tuto.txt.6.1.1":"Ce bouton vous mène à la page d'",
+    "tuto.txt.6.1.2":"information du jeu",
+    "tuto.txt.6.1.3":", avec toutes les règles du jeu, que ce soit les objectifs, les indices, le déroulement, etc.",
+
+    "tuto.title.7":"L'indice",
+    "tuto.txt.7.1":"Ce bouton vous permet d'afficher votre indice personnel, gardez le secret ! Il s'agit de votre meilleur atout pour gagner.",
+
+    "tuto.title.8":"Place à la pratique !",
+    "tuto.txt.8.1":"Bien joué ! Vous avez maintenant toutes les bases d'un veritable détéctive.",
+    "tuto.txt.8.2":"Vous allez à présent avoir un exercice pratique pour la résolution d'une enquête, au côté de ces très chère Batman et Scooby-Doo.",
+    "tuto.txt.8.3":"Cliquer sur 'Poursuivre' pour commencer votre première partie.",
+
+
+    "tuto.title.9":"Premier pas",
+    "tuto.txt.9.1":"Bienvenue dans cette seconde partie, où nous allons apprendre le déroulé d'une veritable enquête.",
+    "tuto.txt.9.2.1":"Dans un premier temps, sélectionnez le joueur ",
+    "tuto.txt.9.2.2":" et questionnez le à propos du suspect nommé ",
+    "tuto.txt.9.2.3":" en cliquant sur cette dernière.",
+
+    "tuto.title.10":"Votre premier tour",
+    "tuto.txt.10.1.1":"Super, ",
+    "tuto.txt.10.1.2":"Violet a été identifié par l'indice de Scooby-Doo",
+    "tuto.txt.10.1.3":", c'est une information essentielle ! Cependant, cela ne signifie ",
+    "tuto.txt.10.1.4":"pas forcément",
+    "tuto.txt.10.1.5":" qu'elle est coupable.",
+    "tuto.txt.10.2":"C'est à présent le tour aux autres joueurs de jouer, regardons ce qu'ils ont fait.",
+
+    "tuto.title.11":"Premier tour des autres joueurs",
+    "tuto.txt.11.1.1":"Il semblerait que Scooby-Doo ait lui aussi interrogé Batman à propos de Violet, et que ce dernier ait répondu ",
+    "tuto.txt.11.1.2":" par un carré. Cela signifie que Violet n'est pas coupable, et qu'elle est donc innocente !",
+    "tuto.txt.11.2.1":"Scooby-Doo a donc fait une erreur, en questionnant quelqu'un pouvant innocenter Violet. En guise de ",
+    "tuto.txt.11.2.2":"punition",
+    "tuto.txt.11.2.3":", il doit, lui aussi, poser un carré sur un autre joueur, révélant aussi plus d'information sur son indice.Nous savons donc maintenant que l'indice de Scooby-Doo ne permet pas d'identifier Sebastian.",
+    "tuto.txt.11.3":"Ensuite, Batman a questionné Scooby-Doo à propos de Charlotte, qui est identifié par l'indice de Scooby-Doo.",
+
+    "tuto.title.12":"Second tour",
+    "tuto.txt.12.1.1":"Vous remarquez que ",
+    "tuto.txt.12.1.2":"votre indice identifie lui aussi Charlotte",
+    "tuto.txt.12.1.3":", et si nous demandions à Batman, si ce dernier pense que Charlotte est la coupable ?",
+    "tuto.txt.12.2":"Cela nous permettrait donc de mettre fin à la partie !",
+
+    "tuto.title.13":"La punition",
+    "tuto.txt.13.1.1":"Mince, il semblerait que l'indice de Batman innocente Charlotte, et que vous avez donc commit une erreur, la ",
+    "tuto.txt.13.1.2":"punition",
+    "tuto.txt.13.1.3":" s'applique !",
+    "tuto.txt.13.2.1":"Vous devez donc poser un ",
+    "tuto.txt.13.2.2":"carré sur un autre joueur",
+    "tuto.txt.13.2.3":", révélant ainsi plus d'information sur votre indice.",
+    "tuto.txt.13.3.1": "Mais rien n'est joué ! Posons notre carré sur ",
+    "tuto.txt.13.3.2": "pour cela, sélectionnez directement le suspect désiré.",
+    
+    "tuto.title.14":"La fin du jeu",
+    "tuto.txt.14.1":"Ce tour est lui aussi riche en informations !",
+    "tuto.txt.14.2":"Vous avez à présent assez d'information pour deviner les indices des autres : ",
+    "tuto.txt.14.3":"Scooby-Doo semble avoir : ",
+    "tuto.txt.14.4":"Batman semble avoir : ",
+    "tuto.txt.14.5":"Et votre indice est : ",
+    "tuto.txt.14.6.1":"Vous avez à présent toutes les cartes en main pour deviner qui est le coupable, cliquer sur le bouton ",
+    "tuto.txt.14.6.2":"Ask Everyone",
+    "tuto.txt.14.6.3":", puis séléctionné un suspect pour émettre une ",
+    "tuto.txt.14.6.4":"accusation",
+    "tuto.txt.14.6.5":" pour deviner, bonne chance !",
+
+
+    "history.mis":" a mis un ",
+    "à":"à",
+    "history.cantPose":" ne peut plus poser de carré",
+    "history.NotCoupable":" n'est pas le coupable !"
 }
+
--- a/cryptide_project/src/Translations/pt.json
+++ b/cryptide_project/src/Translations/pt.json
@ -0,0 +1,167 @@
+{
+    "languageSelector.french": "Francês",
+    "languageSelector.english": "Inglês",
+    "languageSelector.espagnol": "Espanhol",
+    "languageSelector.portuguese": "Português",
+    "languageSelector.russian": "Russo",
+
+    "home.histoire.title": "HISTÓRIA",
+    "home.histoire": "A criptozoologia estuda as pegadas de monstros lendários: criptídeos. Yetis, Chupacabra, a besta de Gévaudan, Dahut, etc., são tópicos muito sérios para você... Cruze as pistas e seja o primeiro a descobri-los!",
+    
+    "home.jeu.title": "O JOGO",
+    "home.jeu": "Cada jogador tem uma pista no campo onde a criatura está localizada. Ao cruzar suas informações, só pode haver uma caixa. Mas o objetivo é ser o primeiro a encontrá-la. Pergunte aos seus colegas, e ainda assim aos concorrentes. Eles só podem responder com 'não' ou 'talvez', com muita lógica e um pouco de audácia, você pode entrar na lenda!",
+    
+    "home.plus.title": "FORÇA",
+    "home.plus.1": "Um mecanismo de dedução incrível.",
+    "home.plus.2": "Uma imensa rejogabilidade.",
+    "home.plus.3": "Um tema surpreendente e forte.",
+
+    "game.time": "Tempo: 45 minutos",
+    "game.players": "Jogadores: 3 a 5 jogadores",
+    "game.age": "Idade: 10 anos ou mais",
+    "game.createdBy": "Criado por:",
+    "game.illustratedBy": "Ilustrado por:",
+
+    "log_in":" Entrar ",
+    "sign_up":" Inscrever-se ",
+    "log_out":" Sair ",
+
+    "join" : "Participar",
+    "create_room" : "Criar sala",
+    "play_solo" : "Jogador único",
+
+    "play" : "JOGAR",
+
+    "football": "Futebol",
+    "basketball": "Basquete",
+    "baseball": "Beisebol",
+    "tennis": "Tênis",
+    "bowling": "Boliche",
+
+    "white": "Branco",
+    "black": "Preto",
+    "blond": "Loiro",
+    "redhead": "Ruivo",
+    "brown": "Castanho",
+
+    "and": "e",
+    "or": "ou",
+    "or_sport": "ou",
+
+
+    "age_indice_start": "O suspeito tem entre",
+    "age_indice_more_start": "O suspeito tem pelo menos",
+    "age_indice_end": "anos",
+    
+    "color_edges_start": "O suspeito tem pelo menos um amigo com",
+    "color_edges_end": "cabelo",
+
+    "color_start": "O suspeito tem",
+    "color_end": "cabelo",
+
+    "nb_friends_indice_start": "O suspeito tem",
+    "nb_friends_indice_end": "amigos",
+
+    "nb_sports_indice_start": "O suspeito pratica",
+    "nb_sports_indice_end": "esporte(s)",
+
+    "sport_start": "O suspeito joga pelo menos",
+    "sport_end": "",
+
+    "navbar.play" : "Jogar",
+    "navbar.presentation":"Apresentação",
+    "navbar.info":"Informação",
+
+    "round":"ronda",
+
+
+    "informations" : "Informação",
+    "info.intro.title":"Introdução ao jogo:",
+    "info.intro.text":"Bem-vindo ao nosso empolgante jogo de dedução, onde intriga e malícia se unem em uma aventura emocionante! Mergulhe em um mundo de mistério e intriga, onde cada interação conta, e cada pista o aproxima da verdade. Imagine um gráfico complexo onde cada vértice representa uma pessoa, cada eixo uma relação, e cada detalhe conta. Você está imerso em um desafio desafiador para descobrir quem, entre esses indivíduos, é o misterioso assassino. Cada jogador tem uma pista crucial, e apenas o compartilhamento estratégico dessas pistas o levará a resolver o mistério. Explore nossa página de regras para entender as complexidades do jogo, descobrir pistas que podem orientá-lo e desenvolver estratégias inteligentes para identificar o culpado. Manipule seus amigos para ser o primeiro a descobrir quem é o assassino escondido no gráfico. Você está pronto para aceitar o desafio e desmascarar o assassino oculto no gráfico? Que a investigação comece!",
+
+    "info.sommaire":"Conteúdo",
+
+    "info.title.composant":"Componentes do Jogo",
+    "info.title.objectif":"Objetivo do Jogo",
+    "info.title.deroulement":"Desenvolvimento do Jogo",
+    "info.title.indice_possible":"Possíveis Pistas do Jogo",
+
+    "info.pions" : "Peões",
+    "info.composant.text" : "Cada jogador será associado a uma cor específica que distinguirá as ações representadas pelos peões da seguinte forma:",
+
+    "info.composant.carre.title":"Fichas quadradas",
+    "info.composant.carre":"Essas fichas indicam uma negação. Quando um jogador coloca uma ficha quadrada, significa que sua pista elimina a pessoa designada.",
+    
+    "info.composant.rond.title":"Fichas redondas",
+    "info.composant.rond":"Essas fichas representam um 'talvez'. O jogador que deposita esta ficha afirma que a pessoa é suspeita, mas isso não garante sua culpa. Há apenas um suspeito com uma ficha redonda para todos os jogadores no jogo, e este é o culpado!",
+
+    "info.car_perso":"Características",
+    "info.composant.textcar":"Além de seus nomes, os personagens são representados com outras características:",
+
+    "info.composant.age.title":"Idades",
+    "info.composant.age":"Cada pessoa tem uma idade para autenticá-la, variando entre 0 e 60 anos. A idade é uma característica que será confirmada por pistas na forma de ",
+    "info.composant.age.link":"grupos etários",
+
+    "info.composant.hair_col.title":"Cores de cabelo",
+    "info.composant.hair_col":"Os personagens também têm uma cor de cabelo, que pode ser encontrada nas seguintes cores:",
+
+    "hair.blanc":"Branco",
+    "hair.blond":"Loiro",
+    "hair.roux":"Ruivo",
+    "hair.chatain":"Castanho",
+    "hair.noir":"Preto",
+
+    "info.composant.sport.title":"Esportes",
+    "info.composant.sport":"Os hobbies dos personagens são representados por cinco esportes, respectivamente:",
+
+    "info.composant.baseball":"Beisebol",
+    "info.composant.basketball":"Basquete",
+    "info.composant.bowling":"Boliche",
+    "info.composant.football":"Futebol",
+    "info.composant.tennis":"Tênis",
+    "info.composant.sport.bis":"Entre esses esportes, cada personagem pode ter entre 0 e 3 esportes, o que facilita sua identificação usando as pistas que você possui.",
+
+    "info.objectif.intro":"Bem-vindo ao universo inteligente do nosso jogo de dedução, onde a decepção e a astúcia são as chaves para o sucesso. Sua missão é desvendar o mistério por trás de cada interação do gráfico complexo que representa as relações entre os indivíduos.",
+    "info.objectif.t1":"Manipulação Sutil",
+    "info.objectif.t1.text":"O objetivo final é descobrir quem, entre os indivíduos, é o assassino, mas não por meio de colaboração aberta. Pelo contrário, você usará manipulação sutil para turvar as linhas e distrair seus oponentes. Faça perguntas estratégicas, responda com malícia e plante pistas enganosas para se aproximar do resultado.",
+    "info.objectif.t2":"Trapaça",
+    "info.objectif.t2.text":"Cada rodada oferece a oportunidade de semear dúvidas entre seus oponentes. Quando um jogador faz perguntas a você, responda colocando astutamente uma ficha quadrada para indicar que 'dependendo da sua pista, essa pessoa não pode ser o culpado' ou uma ficha redonda para sugerir que eles permanecem na lista de suspeitos. Cuidado, porque cada gesto pode ser interpretado, e a verdade muitas vezes está escondida por trás de uma fachada de pistas enganosas.",
+    "info.objectif.t3":"Contra-manipulação",
+    "info.objectif.t3.text":"Se um jogador colocar uma ficha quadrada, o questionador também deve jogar seu jogo colocando uma ficha quadrada de sua cor em um nó do gráfico. A contra-manipulação se torna uma arma formidável para desviar a acusação e semear confusão.",
+
+    "info.interface": "Interface do Jogo",
+    "info.interface.text": "Para cada jogo, você terá certos elementos de interface disponíveis:",
+    "info.interface.param": "O botão 'Configurações' permite exibir e gerenciar várias configurações do jogo, como ativar ou desativar efeitos sonoros. Também é possível escolher o número de nós para o modo de jogo 'Enigma' usando este botão.",
+    "info.interface.reset": "O botão 'Redefinir' redefine o estado atual do gráfico. Se você o moveu demais ou deseja que sua exibição fique mais organizada, este botão é para você!",
+    "info.interface.info": "O botão 'Informações' redireciona para a página de regras do jogo (esta aqui).",
+    "info.interface.fiche": "O botão 'Folha de Dedução de Pistas' exibe uma tabela que, junto com o progresso do jogo, permite deduzir quais pistas são mais prováveis para cada jogador.",
+    "info.interface.indice": "O botão 'Pista Pessoal' é o mais importante; ele exibe sua pista secreta. Só você a conhece! Você terá que ser esperto para enganar seus amigos e mantê-la em segredo o máximo possível!",
+    "info.interface.vision": "O botão 'Últimas Jogadas' permite ao usuário visualizar as últimas 5 jogadas feitas. Ele age como uma ferramenta visual.",
+
+    "etape":"Etapa",
+    "info.deroulement.e1":"Faça Perguntas Estratégicas",
+    "info.deroulement.e1.text":"Cada rodada começa com um jogador fazendo perguntas a outro jogador sobre uma pessoa no gráfico. As respostas são formuladas colocando fichas quadradas ou redondas para indicar certeza ou dúvida quanto ao envolvimento dessa pessoa.",
+    "info.deroulement.e2":"Contra-manipulação e Contra-perguntas",
+    "info.deroulement.e2.text":"Se um jogador colocar uma ficha quadrada, o questionador também deve colocar uma ficha quadrada em um nó no gráfico. Contra-perguntas são uma maneira de confundir os jogadores e desviar a acusação.",
+    "info.deroulement.e3":"O Palpite Final",
+    "info.deroulement.e3.text":"O jogo atinge seu clímax quando um jogador tenta o 'Palpite' final, alegando que tal pessoa é o assassino. Outros jogadores podem contradizer essa declaração colocando suas próprias fichas quadradas. Se nenhuma refutação for feita, o jogador que fez o 'Palpite' vence o jogo, demonstrando sua maestria na arte da manipulação.",
+
+    "info.indice-possible.age":"Idade da Pessoa",
+    "info.indice-possible.hair":"Cor do cabelo de uma pessoa",
+    "info.indice-possible.sport":"Esporte(s) de uma pessoa",
+    "info.indice-possible.voisin":"Personagem dos vizinhos",
+
+    "info.mdj": "Modos de Jogo",
+    "info.mdj.text": "Existem vários outros modos de jogo que permitem adicionar variedade e tornar o jogo mais ou menos complexo.",
+    "info.mdj.mastermind": "Mestre das Pistas",
+    "info.mdj.mastermind.text": "O modo de jogo 'Mestre das Pistas' é um modo solo onde você deve ser capaz de adivinhar o culpado usando o número mínimo de palpites. Neste modo, você não terá pistas, mas precisará adivinhá-las durante o jogo. Selecionar um suspeito revela o estado de todas as pistas para esse suspeito. Torna-se possível adivinhar as pistas e depois identificar o culpado!",
+    "info.mdj.enigme": "Enigma",
+    "info.mdj.enigme.text": "Este é um modo solo com três níveis de dificuldade:",
+    "info.mdj.enigme.easy": "Enigma Fácil",
+    "info.mdj.enigme.easy.txt": "Neste modo de jogo, você tem acesso a todas as pistas e deve adivinhar o culpado que corresponde a todas essas pistas. Você pode praticar adivinhando o culpado neste modo.",
+    "info.mdj.enigme.medium": "Enigma Intermediário",
+    "info.mdj.enigme.medium.txt": "Neste modo de jogo, você não tem acesso a pistas, mas tem informações suficientes sobre alguns suspeitos para poder adivinhar o culpado. Essas informações o ajudarão a adivinhar as pistas, e o culpado é o suspeito para quem todas as pistas correspondem. Se você selecionar o suspeito errado, não se preocupe! Você terá informações sobre aquele suspeito, o que facilitará encontrar o culpado. O objetivo é encontrar o culpado no mínimo de palpites.",
+    "info.mdj.enigme.hard": "Enigma Difícil",
+    "info.mdj.enigme.hard.txt": "Esta variante final é semelhante ao enigma intermediário; no entanto, você deve encontrar o culpado na primeira tentativa, ou você perde! Depende de você jogar! O objetivo é encontrar o culpado no mínimo de tempo."
+
+}
--- a/cryptide_project/src/Translations/ru.json
+++ b/cryptide_project/src/Translations/ru.json
@ -0,0 +1,165 @@
+{
+    "languageSelector.french": "Французский",
+    "languageSelector.english": "Английский",
+    "languageSelector.espagnol": "Испанский",
+    "languageSelector.portuguese": "Португальский",
+    "languageSelector.russian": "Русский",
+    
+    "home.histoire.title": "ИСТОРИЯ",
+    "home.histoire": "Криптозоология изучает следы легендарных монстров: криптидов. Иети, Чупакабра, зверь из Жеводана, Дахут и т. д., это очень серьезные темы для вас... Пересеките улики и первым откройте их!",
+    
+    "home.jeu.title": "ИГРА",
+    "home.jeu": "У каждого игрока есть улика на поле, где находится существо. Путем кросс-референцирования вашей информации может быть только одна клетка. Но цель - быть первым, кто ее найдет. Спрашивайте своих коллег, а также конкурентов. Они могут отвечать только «нет» или «возможно». С логикой и дерзостью вы можете войти в легенду!",
+    
+    "home.plus.title": "СИЛА",
+    "home.plus.1": "Умопомрачительный механизм дедукции.",
+    "home.plus.2": "Огромная возможность переигрывания.",
+    "home.plus.3": "Удивительная и крепкая тема.",
+
+    "game.time": "Время: 45 минут",
+    "game.players": "Игроки: от 3 до 5 человек",
+    "game.age": "Возраст: от 10 лет",
+    "game.createdBy": "Создано:",
+    "game.illustratedBy": "Иллюстрировано:",
+
+    "log_in":" Войти ",
+    "sign_up":" Зарегистрироваться ",
+    "log_out":" Выйти ",
+
+    "join" : "Присоединиться",
+    "create_room" : "Создать комнату",
+    "play_solo" : "Один игрок",
+
+    "play" : "ИГРАТЬ",
+
+    "football": "Футбол",
+    "basketball": "Баскетбол",
+    "baseball": "Бейсбол",
+    "tennis": "Теннис",
+    "bowling": "Боулинг",
+
+    "white": "Белый",
+    "black": "Черный",
+    "blond": "Блондин",
+    "redhead": "Рыжий",
+    "brown": "Каштановый",
+
+    "and": "и",
+    "or": "или",
+    "or_sport": "или",
+
+
+    "age_indice_start": "Подозреваемый находится в возрасте от",
+    "age_indice_more_start": "Подозреваемый по крайней мере",
+    "age_indice_end": "лет",
+    
+    "color_edges_start": "У подозреваемого есть хотя бы один друг с",
+    "color_edges_end": "волосами",
+
+    "color_start": "У подозреваемого есть",
+    "color_end": "волосы",
+
+    "nb_friends_indice_start": "У подозреваемого есть",
+    "nb_friends_indice_end": "друзей",
+
+    "nb_sports_indice_start": "Подозреваемый играет в",
+    "nb_sports_indice_end": "вида(ов) спорта",
+
+    "sport_start": "Подозреваемый играет по меньшей мере в",
+    "sport_end": "",
+
+    "navbar.play" : "Разыграть",
+    "navbar.presentation":"Презентационный",
+    "navbar.info":"Информация",
+
+    "round" : "Раунд",
+
+    "informations" : "Информация",
+    "info.intro.title":"Введение в игру :",
+    "info.intro.text":"Добро пожаловать в нашу захватывающую игру-дедукцию, где интрига и хитрость соединяются в захватывающем приключении! Погрузитесь в мир тайны и интриги, где каждое взаимодействие имеет значение, и каждая улика приближает вас к правде. Представьте себе сложный граф, где каждая вершина представляет собой человека, каждая ось - отношение, и каждая деталь имеет значение. Вы бросаетесь в сложное испытание, чтобы открыть тайну, кто из этих людей - загадочный убийца. У каждого игрока есть важная улика, и только стратегический обмен этими уликами приведет вас к разгадке тайны. Изучите нашу страницу с правилами, чтобы понять тонкости игры, обнаружьте улики, которые могут вас направить, и разрабатывайте умные стратегии для выявления виновного. Манипулируйте своими друзьями, чтобы быть первым, кто узнает, кто убийца! Готовы ли вы принять вызов и разоблачить убийцу, скрытого в графе? Пусть начнется расследование!",
+
+    "info.sommaire":"Содержание",
+
+    "info.title.composant":"Игровые компоненты",
+    "info.title.objectif":"Цель игры",
+    "info.title.deroulement":"Ход игры",
+    "info.title.indice_possible":"Возможное игровое подсказка",
+
+    "info.pions" : "Фишки",
+    "info.composant.text" : "Каждому игроку будет присвоен определенный цвет, который будет отличать действия, представленные фишками, следующим образом :",
+    
+    "info.composant.carre.title":"квадратные фишки",
+    "info.composant.carre":"Эти фишки указывают на отрицание. Когда игрок ставит квадратную фишку, это означает, что его улика исключает указанного человека.",
+    
+    "info.composant.rond.title":"круглые фишки",
+    "info.composant.rond":"Эти фишки представляют собой 'возможно'. Игрок, укладывающий эту фишку, утверждает, что человек является подозреваемым, но это не гарантирует его вину. Есть только один подозреваемый с круглой фишкой для всех игроков в игре, и это убийца!",
+
+    "info.car_perso":"Характеристики",
+    "info.composant.textcar":"Помимо их имен, персонажи представлены другими характеристиками :",
+    
+    "info.composant.age.title":"Возраст",
+    "info.composant.age":"У каждого человека есть возраст для его идентификации, варьирующийся от 0 до 60 лет. Возраст - это характеристика, которая будет подтверждена уликами в виде ",
+    "info.composant.age.link":"возрастных групп",
+
+    "info.composant.hair_col.title":"Цвет волос",
+    "info.composant.hair_col":"У персонажей также есть цвет волос, который может быть следующими цветами :",
+
+    "hair.blanc":"Белый",
+    "hair.blond":"Блондин",
+    "hair.roux":"Рыжий",
+    "hair.chatain":"Каштановый",
+    "hair.noir":"Черный",
+
+    "info.composant.sport.title":"Спорт",
+    "info.composant.sport":"Увлечения персонажей представлены пятью видами спорта :",
+    "info.composant.baseball":"Бейсбол",
+    "info.composant.basketball":"Баскетбол",
+    "info.composant.bowling":"Боулинг",
+    "info.composant.football":"Футбол",
+    "info.composant.tennis":"Теннис",
+    "info.composant.sport.bis":"Среди этих видов спорта каждый персонаж может заниматься от 0 до 3 видов спорта, что облегчит их идентификацию с использованием имеющихся у вас улик.",
+
+
+    "info.objectif.intro":"Добро пожаловать в умный мир нашей игры-дедукции, где обман и хитрость - ключи к успеху. Ваша миссия - раскрывать тайну за каждым взаимодействием сложного графа, представляющего отношения между людьми.",
+    "info.objectif.t1":"Тонкая манипуляция",
+    "info.objectif.t1.text":"Основная цель - узнать, кто из людей является убийцей, но не через открытое сотрудничество. Напротив, вы будете использовать тонкую манипуляцию, чтобы размыть границы и отвлечь своих оппонентов. Задавайте стратегические вопросы, отвечайте злонамеренно и сеивайте вводные улики, чтобы приблизиться к результату.",
+    "info.objectif.t2":"Хитрость",
+    "info.objectif.t2.text":"Каждый раунд предоставляет возможность сеять сомнения среди ваших оппонентов. Когда вас допрашивают, отвечайте, умно ставя квадратную фишку, чтобы указать, что 'в зависимости от вашей улики этот человек не может быть убийцей' или круглую фишку, чтобы предположить, что они остаются в списке подозреваемых. Будьте осторожны, потому что каждый жест может быть истолкован, и правда часто скрыта за фасадом вводных улик.",
+    "info.objectif.t3":"Контрманипуляция",
+    "info.objectif.t3.text":"Если игрок ставит квадратную фишку, допрашивающий также должен играть свою игру, ставя квадратную фишку своего цвета на узле графа. Контрманипуляция становится мощным оружием для отвода обвинения и посева смуты.",
+
+    "info.interface": "Игровой интерфейс",
+    "info.interface.text": "Для каждой игры у вас будут доступны определенные элементы интерфейса:",
+    "info.interface.param": "Кнопка 'Настройки' позволяет отображать и управлять различными настройками игры, такими как включение или выключение звуковых эффектов. С ее помощью также можно выбирать количество узлов для режима игры 'Загадка'.",
+    "info.interface.reset": "Кнопка 'Сброс' сбрасывает текущее состояние графа. Если вы передвинули его слишком сильно или хотите, чтобы его отображение было аккуратнее, эта кнопка для вас!",
+    "info.interface.info": "Кнопка 'Информация' перенаправляет на страницу правил игры (эту).",
+    "info.interface.fiche": "Кнопка 'Таблица вывода улик' отображает таблицу, которая, вместе с ходом игры, позволяет делать выводы о том, какие улики наиболее вероятны для каждого игрока.",
+    "info.interface.indice": "Кнопка 'Личная улика' самая важная; она отображает вашу секретную улику. Только вы знаете ее! Вам придется быть умным, чтобы обмануть своих друзей и держать ее в секрете как можно дольше!",
+    "info.interface.vision": "Кнопка 'Последние движения' позволяет пользователю визуализировать последние 5 сделанных ходов. Она действует как визуальный инструмент.",
+
+    "etape": "Шаг",
+    "info.deroulement.e1": "Задавайте стратегические вопросы",
+    "info.deroulement.e1.text": "Каждый раунд начинается с того, что один игрок задает другому игроку вопрос о человеке на графике. Ответы формулируются путем установки квадратных или круглых фишек, чтобы указать уверенность или сомнение в причастности этого человека.",
+    "info.deroulement.e2": "Контролирование и контропросы",
+    "info.deroulement.e2.text": "Если игрок устанавливает квадратную фишку, задающий вопрос также должен установить квадратную фишку на узле графика. Контропросы - это способ сбить с толку игроков и отклонить обвинение.",
+    "info.deroulement.e3": "Окончательное предположение",
+    "info.deroulement.e3.text": "Игра достигает своего пика, когда игрок пытается сделать окончательное 'Предположение', утверждая, что такой-то человек - убийца. Другие игроки могут затем противоречить этому заявлению, устанавливая свои собственные квадратные фишки. Если не последует опровержение, игрок, сделавший 'Предположение', выигрывает игру, продемонстрировав свое мастерство в искусстве манипуляции.",
+
+    "info.indice-possible.age": "Возраст человека",
+    "info.indice-possible.hair": "Цвет волос человека",
+    "info.indice-possible.sport": "Спорт(ы) человека",
+    "info.indice-possible.voisin": "Характер соседей",
+
+    "info.mdj": "Режимы игры",
+    "info.mdj.text": "Существует различные режимы игры, которые позволяют вам добавить разнообразие и сделать игру более или менее сложной.",
+    "info.mdj.mastermind": "Мастер-майнд",
+    "info.mdj.mastermind.text": "Режим игры 'Мастер-майнд' - это сольный режим, в котором вы должны угадать убийцу, используя минимальное количество догадок. В этом режиме у вас не будет никаких улик, но вам нужно будет угадать их в ходе игры. Выбор подозреваемого позволяет узнать состояние всех улик для этого подозреваемого. Становится возможным угадать улики, а затем определить убийцу!",
+    "info.mdj.enigme": "Загадка",
+    "info.mdj.enigme.text": "Это сольный режим с тремя уровнями сложности:",
+    "info.mdj.enigme.easy": "Легкая загадка",
+    "info.mdj.enigme.easy.txt": "В этом режиме у вас есть доступ ко всем уликам, и вы должны угадать убийцу, соответствующего всем этим уликам. Вы можете практиковаться в угадывании убийцы в этом режиме.",
+    "info.mdj.enigme.medium": "Средняя загадка",
+    "info.mdj.enigme.medium.txt": "В этом режиме у вас нет доступа к уликам, но у вас есть достаточно информации о некоторых подозреваемых, чтобы угадать убийцу. Эта информация поможет вам угадать улики, и убийца - подозреваемый, для которого все улики совпадают. Если вы выберете неправильного подозреваемого, не волнуйтесь! У вас будет информация о том подозреваемом, что облегчит вам поиск убийцы. Цель - найти убийцу минимальным количеством догадок.",
+    "info.mdj.enigme.hard": "Трудная загадка",
+    "info.mdj.enigme.hard.txt": "Этот последний вариант аналогичен средней загадке; однако вы должны найти убийцу с первой попытки, иначе вы проиграли! Решайте сами! Цель - найти убийцу минимальным количеством времени."
+}
--- a/cryptide_project/src/model/DataManagers/DbUserService.ts
+++ b/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
--- a/cryptide_project/src/model/DataManagers/IUserService.ts
+++ b/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>
--- a/cryptide_project/src/model/EnigmeDuJourCreator.ts
+++ b/cryptide_project/src/model/EnigmeDuJourCreator.ts
@ -29,7 +29,7 @@ class EnigmeDuJourCreator{
                        possibleIndices.forEach((possibleIndice, index) =>{
                            const tester = IndiceTesterFactory.Create(possibleIndice)
                            if (tester.Works(person)){
-                                const t = veryTmpIndice.findIndex((tmpIndice) => tmpIndice.getId() == possibleIndice.getId())
+                                 const t = veryTmpIndice.findIndex((tmpIndice) => tmpIndice.getId() == possibleIndice.getId())
                                if (t != -1){
                                    veryTmpIndice.splice(t, 1)
                                }
@ -58,10 +58,7 @@ class EnigmeDuJourCreator{
                }
                possibleIndices = [...tmpPossibleIndices]
                modifiedPersons.push(choosenPair)
-                console.log(possibleIndices)
            }
-            console.log("choosenIndice => " + choosenIndice.ToString("fr"))
-            console.log("possibleIndices => " + possibleIndices[0].ToString("fr"))
            modifiedPersons.forEach((pair) =>{
                map.get(pair.first.getId())?.push(new Pair(choosenIndice, pair.second))
            })
--- a/cryptide_project/src/model/Graph/Edge.ts
+++ b/cryptide_project/src/model/Graph/Edge.ts
@ -2,6 +2,7 @@ class Edge{
    
    public from: number
    public to: number
+    public color: string = "black"
    
    constructor(from: number, to: number){
        this.from = from
--- a/cryptide_project/src/model/User.tsx
+++ b/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)
--- a/cryptide_project/src/react-app-env.d.tsx
+++ b/cryptide_project/src/react-app-env.d.tsx
@ -2,3 +2,5 @@ declare module "*.png";
 declare module "*.svg";
 declare module "*.jpeg";
 declare module "*.jpg";
+declare module '*.mp3';
+declare module '*.wav';
--- a/cryptide_project/src/res/Audio/turn.mp3
+++ b/cryptide_project/src/res/Audio/turn.mp3
--- a/cryptide_project/src/res/Audio/win.wav
+++ b/cryptide_project/src/res/Audio/win.wav
--- a/cryptide_project/src/res/botNames.json
+++ b/cryptide_project/src/res/botNames.json
@ -0,0 +1,22 @@
+{
+    "names": [
+        "Sherlock Holmes",
+        "Inspecteur Gadget",
+        "Scooby-Doo",
+        "Marple",
+        "Spocky",
+        "Phoenix",
+        "Batman",
+        "James Bond",
+        "Sherlockio",
+        "Verra",
+        "Hercule Poirot",
+        "Colombo",
+        "MacGyver",
+        "Lupin",
+        "D. Conan",
+        "Pr. Layton",
+        "Dr. Watson"
+    ]
+  }
+  
--- a/cryptide_project/src/res/icon/pdf.png
+++ b/cryptide_project/src/res/icon/pdf.png
--- a/cryptide_project/src/res/icon/tex.png
+++ b/cryptide_project/src/res/icon/tex.png
--- a/cryptide_project/src/res/img/tuto/tuto-ava.png
+++ b/cryptide_project/src/res/img/tuto/tuto-ava.png
--- a/cryptide_project/src/res/img/tuto/tuto-ava2.png
+++ b/cryptide_project/src/res/img/tuto/tuto-ava2.png
--- a/cryptide_project/src/res/img/tuto/tuto-detective.jpg
+++ b/cryptide_project/src/res/img/tuto/tuto-detective.jpg
--- a/cryptide_project/src/res/img/tuto/tuto-graph.png
+++ b/cryptide_project/src/res/img/tuto/tuto-graph.png
--- a/cryptide_project/src/res/img/tuto/tuto-indice.png
+++ b/cryptide_project/src/res/img/tuto/tuto-indice.png
--- a/cryptide_project/src/res/img/tuto/tuto-indiceTxt.png
+++ b/cryptide_project/src/res/img/tuto/tuto-indiceTxt.png
--- a/cryptide_project/src/res/img/tuto/tuto-info.png
+++ b/cryptide_project/src/res/img/tuto/tuto-info.png
--- a/cryptide_project/src/res/img/tuto/tuto-joueurs.png
+++ b/cryptide_project/src/res/img/tuto/tuto-joueurs.png
--- a/cryptide_project/src/res/img/tuto/tuto-rep.png
+++ b/cryptide_project/src/res/img/tuto/tuto-rep.png
--- a/cryptide_project/src/res/img/tuto/tuto-tada.png
+++ b/cryptide_project/src/res/img/tuto/tuto-tada.png
--- a/cryptide_project/src/res/img/tuto/tuto2-1.png
+++ b/cryptide_project/src/res/img/tuto/tuto2-1.png
--- a/cryptide_project/src/res/img/tuto/tuto2-2.png
+++ b/cryptide_project/src/res/img/tuto/tuto2-2.png
--- a/cryptide_project/src/res/img/tuto/tuto2-3.png
+++ b/cryptide_project/src/res/img/tuto/tuto2-3.png
--- a/cryptide_project/src/res/img/tuto/tuto2-4.png
+++ b/cryptide_project/src/res/img/tuto/tuto2-4.png
--- a/cryptide_project/src/res/img/tuto/tuto2-5.png
+++ b/cryptide_project/src/res/img/tuto/tuto2-5.png
--- a/cryptide_project/src/res/img/tuto/tuto2-6.png
+++ b/cryptide_project/src/res/img/tuto/tuto2-6.png
--- a/cryptide_project/src/services/ScoreboardService.tsx
+++ b/cryptide_project/src/services/ScoreboardService.tsx
@ -0,0 +1,244 @@
+import {ADRESSE_DBSERVER} from '../AdressSetup';
+
+class ScoreboardService {
+
+    // ------------------------------ GET ------------------------------
+    // ----------------------------- DAILY -----------------------------
+    // ----------------------------- STATS -----------------------------
+
+    static async getDailyMastermindStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getDailyMastermind', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getDailyEasyEnigmaStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getDailyEasyEnigma', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getDailyMediumEnigmaStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getDailyMediumEnigma', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getDailyHardEnigmaStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getDailyHardEnigma', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getDailyOnlineStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getDailyOnline', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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;
+        }
+    }
+
+    // ------------------------------ GET ------------------------------
+    // ----------------------------- WEEKLY ----------------------------
+    // ----------------------------- STATS -----------------------------
+
+    static async getWeeklyMastermindStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getWeeklyMastermind', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getWeeklyEasyEnigmaStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getWeeklyEasyEnigma', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getWeeklyMediumEnigmaStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getWeeklyMediumEnigma', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getWeeklyHardEnigmaStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getWeeklyHardEnigma', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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 getWeeklyOnlineStats() {
+        try {
+            const response = await fetch(ADRESSE_DBSERVER + '/scoreboard/getWeeklyOnline', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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;
+        }
+    }
+}
+
+export default ScoreboardService;
--- a/cryptide_project/src/services/SessionService.tsx
+++ b/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', {
@ -165,7 +193,6 @@ class SessionService {
            throw error;
        }
    }
-
 }

 export default SessionService;
--- a/cryptide_project/src/tuto/graph.json
+++ b/cryptide_project/src/tuto/graph.json
@ -0,0 +1 @@
+{"persons":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]}]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3],"friends":[{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]}]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]}]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]}]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0],"friends":[{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]}]}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thomas Chazot	6005281801	Image qui fonctionne continuous-integration/drone/push Build is passing Details	6 months ago
Thomas CHAZOT	547f02227f	revert `53ac430987` continuous-integration/drone/push Build is passing Details revert fix /	7 months ago
Thomas Chazot	53ac430987	fix / continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	450123404e	icon pour download	7 months ago
Thomas Chazot	fc11d0a0e5	évite doublons	7 months ago
Thomas Chazot	6a106608ba	évite doublons	7 months ago
Thomas Chazot	a01003d3c8	correct background dans le endgame continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	752fbaacb2	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	bb6e6c6cba	modif page home	7 months ago
Pierre FERREIRA	32bc994b41	Merge pull request 'EngGamePage' (#115 ) from EngGamePage into master continuous-integration/drone/push Build is passing Details Reviewed-on: #115	7 months ago
Baptiste MARCEL	e4df530d95	modif page présentation continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	d8c5af20ba	Merge branch 'master' into EngGamePage continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	669ca42bd1	modif page end game continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	32e3f1ce2e	Merge pull request 'fixRT10' (#114 ) from fixRT10 into master continuous-integration/drone/push Build is passing Details Reviewed-on: #114	7 months ago
Pierre Ferreira	1f00476f7f	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into fixRT10 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	294cd87672	commit pour merge le fix de thomas 🔧	7 months ago
Thomas Chazot	7d994ad89f	indice afficher même après changement du graph continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	8ef1fb05bf	fix pour pas qu'on puisse mettre plus de noeuds que voulu continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	fe2836b636	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into fixRT10	7 months ago
Pierre Ferreira	d23c1277cd	changement du nom du bouton ✏️ continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	e561118af7	fix pour pas que l'on puisse appuyer plusieurs fois sur le même noeuds continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	2d5ca7ae70	nombre de noeuds et d'indice dans la session continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	d6bc06bcba	fix de tout le scoreboard ✨ continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	dab6ab2755	fix de plein de bug de rt10, nouvelle gestion de paramètre, problème de trad etc. 🚑 continuous-integration/drone/push Build is passing Details	7 months ago
Thomas CHAZOT	de58aff695	Mise à jour de 'cryptide_project/src/Pages/Lobbies.tsx' continuous-integration/drone/push Build is passing Details	7 months ago
Thomas CHAZOT	af89e69255	Mise à jour de 'cryptide_project/Scripts/social_graph.sh' continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	e94001ce1d	Merge pull request 'sonarSmells' (#110 ) from sonarSmells into master continuous-integration/drone/push Build is passing Details Reviewed-on: #110	7 months ago
Pierre Ferreira	f88e8e66b4	fix du css, et du pb dans lobby 🚑 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	5d89f8e1bd	🚑 continuous-integration/drone/push Build is failing Details	7 months ago
Pierre Ferreira	927bb1ff6b	fix bug sonar 1 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	50092b31d6	Merge pull request 'trad' (#109 ) from trad into master continuous-integration/drone/push Build is passing Details Reviewed-on: #109	7 months ago
Pierre Ferreira	5cdc99b168	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into trad continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	9e22cefef3	téléchargement au pdf fini continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	20822a2311	changement de tout les tostring fr pour qu'ils aient la langue dynamique ⚡ continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	19d95804dd	trad suite au merge 🔧 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	f2d6b89d03	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into trad	7 months ago
Pierre Ferreira	0a6e5bba9a	traduction de l'historique en fr et en 📝 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	8efeaca9d6	finitions de la traduction du tuto en fr 🌐 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	e7b0dfb9b4	mise en place de la traducton sur les pages de jeu et sur la première partie du tuto 📝 continuous-integration/drone/push Build is failing Details	7 months ago
Thomas CHAZOT	df666c2fe6	Mise à jour de '.drone.yml' continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	712e85ed97	permet la modification du nombre d'indice continuous-integration/drone/push Build is failing Details	7 months ago
Pierre Ferreira	edb90ea926	🌐 toujours plus de trad 🌐 continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	94219e01d3	enigme intermédiaire + overlay qui se barre continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	34a53d016f	ajout des traduction fr et en sur le lobby 💥 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	d65ec81b59	ajout de la traduction pour toute la page NewPlay pour fr et en ⚡ continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	c5aa5ea930	choix du nombre de noeuds pour les modes solos continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	5032e57bab	Merge pull request 'infos' (#108 ) from infos into master continuous-integration/drone/push Build is passing Details Reviewed-on: #108	7 months ago
Pierre Ferreira	7ff10c7fac	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into infos continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	9204879022	Merge pull request 'fixPDgt' (#107 ) from fixPDgt into master continuous-integration/drone/push Build is failing Details Reviewed-on: #107	7 months ago
Pierre Ferreira	74270afe4d	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into fixPDgt continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	e5fd800163	ajout de différentes langues pour la page info 🌐 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	e9226dcfdd	page d'information fonctionnelle a 100%, avec toute la traduction fr et en 📝 continuous-integration/drone/push Build is passing Details	7 months ago
Thomas CHAZOT	de143642b2	Mise à jour de '.drone.yml' continuous-integration/drone/push Build is passing Details	7 months ago
Thomas CHAZOT	b6a41d2307	Mise à jour de '.drone.yml' continuous-integration/drone/push Build is passing Details	7 months ago
Thomas CHAZOT	6664096f9b	Mise à jour de '.drone.yml' continuous-integration/drone/push Build is passing Details	7 months ago
Thomas CHAZOT	ef0325cd93	Mise à jour de '.drone.yml' continuous-integration/drone/push Build is failing Details	7 months ago
Pierre Ferreira	5bf10caee7	descriptions des modes infos continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	80ba299587	changement de l'affichage en cas d'absence de lobby 🎨 continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	4199e9fdd0	fix du bug pour le build continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	26b164792d	Merge pull request 'soundEffect :loud_volume:' (#106 ) from soundEffect into master continuous-integration/drone/push Build is passing Details Reviewed-on: #106	7 months ago
Pierre Ferreira	2467297ef2	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into soundEffect continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	ca54bf97ff	Ajout de l'option de desactivé les soundeffects, dans les paramètres avec le switch ! 💥 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	6d93bfb180	changement selon les indication de thomas, et ajout du soundeffect pour la win 🔊	7 months ago
Thomas Chazot	15deb0bef0	fix de la fuite mémoire ? continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	ed394ad4d6	fix de la fuite mémoire ?	7 months ago
Pierre Ferreira	3e4233d33e	Ajout de la gestion des soundeffects, et de deux sons, pour le turn et la win 🔊 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre FERREIRA	925cc2c61c	Merge pull request 'tuto' (#104 ) from tuto into master continuous-integration/drone/push Build is passing Details Reviewed-on: #104	7 months ago
Pierre Ferreira	441c980866	Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into tuto continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	3a11370afc	correction pour la demo 🚑 continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	09c648a914	"merge avec master" continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	ae53743188	Merge branch 'master' into weeklyDaily	7 months ago
Pierre FERREIRA	ab96c12126	Merge pull request 'tuto' (#103 ) from tuto into master continuous-integration/drone/push Build is passing Details Reviewed-on: #103	7 months ago
Pierre Ferreira	f319283234	Merge branch 'tuto' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into tuto continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	258c01153f	fin du tutorial 💥	7 months ago
Thomas Chazot	6fe508e094	pp en ligne continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	08b56ebe58	"Merge master + correctif session info" continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	3a1a5c87fe	Merge branch 'master' into weeklyDaily	7 months ago
Thomas Chazot	faa5408f17	new seed pour tuto + nom pour les bots pour l'immersion + autres fix continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	8d547734d8	changement du style suite à la sélection d'un joueur 💄	7 months ago
Pierre Ferreira	aea3de423f	changement du tuto suite aux retour de louison 📝	7 months ago
Pierre Ferreira	177a75d5ed	finission du tuto et gestion du bouton d'aide. 🍱 continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	9a8c49d18a	Ajout de toutes les composantes pour avoir l'ensemble des stats daily et weekly continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	8f7d61b4a5	Amélioration affichages stats + modif navbar (finito le dropdown menu) continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	c376013dfe	Suppression des dépendances inutiles des anciens test carousel continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	472d94ebe1	Modif bouton pour jouer + Carousel pour les stats sur les différentes parties (Nous, Daily, Weekly) continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	e478ebd963	fix de petit probleme de compilation :ambuance:	7 months ago
Pierre Ferreira	4f91b9ae10	Merge branch 'tuto' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into tuto continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	c7ecd20501	implémentation de la plupart du tutoriel pour le joueur novice 💥	7 months ago
Thomas Chazot	2c574a5d72	fix du bug pour les modes solos continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	b6582c8d16	Wouhou tuto fini continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	5bbb61080a	fin du code du tuto :) <3 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	076cd70cee	Merge branch 'tuto' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into tuto	7 months ago
Pierre Ferreira	b258d84bff	implémentation de la première partie du tuto 📝	7 months ago
Thomas Chazot	14b2bb398c	fin code du tuto manque juste partie pif continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	1785c9f46b	Merge branch 'tuto' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into tuto	7 months ago
Pierre Ferreira	98338431b5	affichage de carte dans un modal pour le debut du tuto ⚡	7 months ago
Thomas Chazot	4c53dfe324	step 1 continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	6428533a27	Merge remote-tracking branch 'origin/debugRU' into tuto continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	49f4beb205	début tuto2	7 months ago
Pierre Ferreira	d97ed83ae4	changement de l'interface du joueur actuel 🎨 continuous-integration/drone/push Build is passing Details	7 months ago
Thomas Chazot	355ef62f7f	début tuto continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	abbcdef165	fix de l'emoji qui s'affiche pour les pseudos trop courts	7 months ago
Pierre Ferreira	c08223fbb5	mise de localhost pour les serv 🎉 continuous-integration/drone/push Build is passing Details	7 months ago
Pierre Ferreira	8b41bb5dbe	tueur -> coupable ✏️ continuous-integration/drone/push Build is failing Details	7 months ago
Baptiste MARCEL	e878d6e281	Modif affichage stats scoreboard + modif DESC to ASC dans DBService continuous-integration/drone/push Build is failing Details	7 months ago
Thomas Chazot	ae0e390eee	? continuous-integration/drone/push Build is failing Details	7 months ago
Thomas Chazot	aa102b42bb	changement de dernière minute	7 months ago
Baptiste MARCEL	10edfb1f4f	page info contient l'état de la session pour navbar dynamique continuous-integration/drone/push Build is failing Details	7 months ago
Baptiste MARCEL	b9f1f99e0b	Correctif apporté pour le fonctionnement du temps lors d'une partie continuous-integration/drone/push Build is failing Details	7 months ago
Baptiste MARCEL	78dd03cefa	ajout dans le scoreboard des stats daily/weekly multijoueur + correctif pour affichage quand pas de data continuous-integration/drone/push Build is passing Details	7 months ago
Baptiste MARCEL	8a1946fa09	Scoreboard Service + Controller qui permet récupérer DailyMastermind + Affichage du dailyMastermind continuous-integration/drone/push Build is passing Details	7 months ago
				`@ -1 +0,0 @@`
				<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.b6842da5.js"></script><link href="/static/css/main.6888e917.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
				`@ -0,0 +1 @@`
				{"persons":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]}]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3],"friends":[{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]}]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]}]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]}]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0],"friends":[{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]}]}