choix du nombre de noeuds pour les modes solos

cryptide_project/src/Components/GraphContainer.tsx

@@ -21,6 +21,9 @@ 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";
 
 interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
@@ -50,6 +53,10 @@ interface MyGraphComponentProps {
   putGreyBackground : () => void
   putCorrectBackground : () => void
   putImposssibleGrey : () => void
+  setChangeGraph : (func: (nbNodes: number) => void) => void
+
+  nbNodes: number
+
 
   handleTurn :() => void
 }
@@ -80,16 +87,17 @@ let cptUseEffect = 0
 let testPlayers: Player[] = []
 let testTemps = 0
 let testFirst = false
+let testFirst2 = true
 
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey, handleTurn}) => {
-  let cptTour: number = 0
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey, handleTurn, nbNodes, setChangeGraph}) => {
+  let cptTour: number = 1
 
   //* Gestion du temps :
   let initMtn = 0
 
   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, temps} = 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} = useGame();
   const params = new URLSearchParams(window.location.search);
 
   const navigate = useNavigate();
@@ -109,11 +117,13 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       settempsData(testTemps)
       testTemps += 0.5
 
+      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
@@ -364,10 +374,29 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     }
   }, [importToJSON])
 
+  const changeGraph = (nbNodes: number) => {
+    //todo différencier les deux
+    const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, nbNodes)
+    setPersonData(choosenPerson)
+    setPersonNetworkData(networkPerson)
+    setIndicesData(choosenIndices)
+    const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
+    setDailyEnigmeData(map)
+    addToHistory("<----- [Tour " + 1  +"/"+networkPerson.getPersons().length + "] ----->");
+    changecptTour(1)
+    testTemps=0
+    
+
+  }
+
   useEffect(() => {
     if (personNetwork == null){
       return
     }
+
+    if (solo){
+      setChangeGraph(() => changeGraph)
+    }
     const graph = GraphCreator.CreateGraph(personNetwork)
 
     let n = graph.nodesPerson;
@@ -1087,8 +1116,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             else{
               addToHistory(personTest.getName() + " n'est pas le coupable !"); //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 + "] ----->");
+              addToHistory("<----- [Tour " + cptTour  +"/"+networkData.nodes.length + "] ----->");
               changecptTour(cptTour); // On le transmet a la page précédente avec la fonction
             }
           }
@@ -1101,7 +1129,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 (
     <>

cryptide_project/src/Pages/InGame.tsx

@@ -107,6 +107,8 @@ const InGame = ({locale, changeLocale}) => {
   const [putCorrectBackground, setPutCorrectBackground] = useState<() => void>(() => {});
   const [putGreyBackgroud, setPutGreyBackground] = useState<() => void>(() => {});
   const [putImposssibleGrey, setPutImposssibleGrey] = useState<() => void>(() => {});
+  const [changeGraph, setChangeGraph] = useState<(nbNodes: number) => void>(() => {});
+
 
 
   const setPutCorrectBackgroundData = (func: () => void) => {
@@ -121,6 +123,10 @@ const InGame = ({locale, changeLocale}) => {
     setPutImposssibleGrey(func)
   }
 
+  const setChangeGraphData = (func: (nbNodes: number) => void) => {
+    setChangeGraph(func)
+  }
+
   const setImportToJSONData = (imp: boolean) => {
     setImportToJSON(imp)
   }
@@ -255,7 +261,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);
 
@@ -317,6 +323,14 @@ const InGame = ({locale, changeLocale}) => {
   const [playTurnSound, setPlayTurnSound] = useState(false);
   const [soundPreference, setSoundPreference] = useState(true); // utilisateur
 
+  const [enteredNumber, setEnteredNumber] = useState(25);
+
+  //@ts-ignore
+  const handleNumberChange = (event) => {
+      const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10)));
+      setEnteredNumber(newNumber);
+  };
+
   const handleSoundPreferenceChange = () => {
     setSoundPreference(!soundPreference);
     console.log("changement des options du son : "+ soundPreference)
@@ -365,7 +379,9 @@ const InGame = ({locale, changeLocale}) => {
                           putCorrectBackground={putCorrectBackground}
                           putGreyBackground={putGreyBackgroud}
                           putImposssibleGrey={putImposssibleGrey}
-                          handleTurn={handleTurn}/>
+                          handleTurn={handleTurn}
+                          setChangeGraph={setChangeGraphData}
+                          nbNodes={enteredNumber}/>
         </div>
         {playTurnSound && <audio src={turnSound} autoPlay />}
 
@@ -401,6 +417,7 @@ const InGame = ({locale, changeLocale}) => {
 
 
         <div className='menuGame'>
+
           <div className='resetDiv'>
             <button className='button'
               style={{ 
@@ -425,6 +442,8 @@ const InGame = ({locale, changeLocale}) => {
           
 
 
+
+
           {/* <Link to='/info#indice-possible' target='_blank'> 
             //? redirection impossible apparament (securité des navigateur
           */}
@@ -513,15 +532,42 @@ const InGame = ({locale, changeLocale}) => {
         <Offcanvas show={showS} 
                   onHide={handleCloseS} 
                   placement='top'
-                  style={{height: '30%', width: '30%', left: '70%' }}>
+                  style={{height: '40%', width: '30%', left: '70%' }}>
           <Offcanvas.Header closeButton>
             <Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
           </Offcanvas.Header>
           <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'}}>Activer les SFX</p>
               </label>
+
+              {IsSolo && 
+              <div className='nbNodeDiv'>
+                  <label htmlFor="numberInput">Sélectionner le nombre de noeud (entre 20 et 50) :</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={enteredNumber}
+                          onChange={handleNumberChange}
+                          min={20}
+                          max={60}/>
+                      <button className='valuebutton' onClick={() => { if (enteredNumber<50) setEnteredNumber(enteredNumber+1)}}
+                          style={{borderColor:theme.colors.secondary}}> + </button>
+                  </div>
+                  <button onClick={() => {setHistory([]); changeGraph(enteredNumber)}}
+                                              style={{ 
+                                                backgroundColor: theme.colors.tertiary,
+                                                borderColor: theme.colors.secondary,
+                                              }}>Valider</button>
+              </div>}
+            </div>
           </Offcanvas.Body>
         </Offcanvas>
       </div>

cryptide_project/src/model/EnigmeDuJourCreator.ts

@@ -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))
             })