permet la modification du nombre d'indice

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

cryptide_project/src/AdressSetup.ts

@@ -9,7 +9,7 @@ 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
 

cryptide_project/src/Components/GraphContainer.tsx

@@ -53,14 +53,13 @@ interface MyGraphComponentProps {
   putGreyBackground : () => void
   putCorrectBackground : () => void
   putImposssibleGrey : () => void
-  setChangeGraph : (func: (nbNodes: number) => void) => void
+  setChangeGraph : (func: (nbNodes: number, nbIndices: number) => void) => void
-
-  nbNodes: number
-
 
   handleTurn :() => void
 }
 
+let askedWrongBot = false
+let lastSocketId= ""
 let lastAskingPlayer = 0
 let lastNodeId = -1
 let first = true
@@ -68,14 +67,10 @@ 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
@@ -83,21 +78,20 @@ 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 testFirst2 = true
+let gameStartTmp = true
+let index = 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}) => {
-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, 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, setIndicesData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData, nodesC, temps, setPersonData, setPersonNetworkData, setDailyEnigmeData} = 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();
@@ -140,12 +134,10 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
 
   useEffect(() => {
     testPlayers = players
-    console.log(testPlayers)
   }, [players])
 
   useEffect(() =>{
     touchedPlayer=playerTouched
-    console.log(playerTouched)
     if (touchedPlayer == -1){
       if (!askedWrongLocal){
         putCorrectBackground()
@@ -184,17 +176,45 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
 
   let playerIndex: number = turnPlayerIndex
 
-  if (firstIndex){
+  useEffect(() => {
-    firstIndex=false
+    gameStartTmp=gameStart
-    setPlayerIndex(playerIndex)
+    if (gameStartTmp){
-  }
+      setGameStartData(false)
-  let index = 0
+      console.log(gameStart)
-  for (let i=0; i<players.length; i++){
+      setLastIndex(turnPlayerIndex)
-    if(players[i].id == socket.id){
+      setPlayerIndex(playerIndex)
-        index=i
-        break
     }
-  }
+    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("À vous de jouer")
+        handleShowTurnBar(true)
+      }
+    }
+  }, [gameStart])
+
+
+  
+
 
   useEffect(() =>{
     //* Gestion du sound des tours :
@@ -311,31 +331,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)
@@ -374,9 +369,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     }
   }, [importToJSON])
 
-  const changeGraph = (nbNodes: number) => {
+  const changeGraph = (nbNodes: number, nbIndices: number) => {
     //todo différencier les deux
-    const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, nbNodes)
+    const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(nbIndices, nbNodes)
     setPersonData(choosenPerson)
     setPersonNetworkData(networkPerson)
     setIndicesData(choosenIndices)
@@ -596,7 +591,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       })
       
       socket.on("node checked",(id, works, askedIndex, newPlayerIndex, socketId) => {
-        console.log("coucou")
         cptBug=0
         //@ts-ignore
         const node = nodes.get().find((n) => id == n.id)
@@ -605,7 +599,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

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

cryptide_project/src/Pages/InGame.tsx

@@ -108,7 +108,7 @@ 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 [changeGraph, setChangeGraph] = useState<(nbNodes: number, nbIndices: number) => void>(() => {});
 
 
 
@@ -124,7 +124,7 @@ const InGame = ({locale, changeLocale}) => {
     setPutImposssibleGrey(func)
   }
 
-  const setChangeGraphData = (func: (nbNodes: number) => void) => {
+  const setChangeGraphData = (func: (nbNodes: number, nbIndices: number) => void) => {
     setChangeGraph(func)
   }
 
@@ -325,13 +325,21 @@ const InGame = ({locale, changeLocale}) => {
   const [soundPreference, setSoundPreference] = useState(true); // utilisateur
 
   const [enteredNumber, setEnteredNumber] = useState(25);
+  const [enteredNumberIndices, setEnteredNumberIndices] = useState(3);
+
 
   //@ts-ignore
   const handleNumberChange = (event) => {
-      const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10)));
+      const newNumber = Math.max(20, Math.min(50, parseInt(event.target.value, 10)));
       setEnteredNumber(newNumber);
   };
 
+  //@ts-ignore
+  const handleNumberIndicesChange = (event) => {
+    const newNumber = Math.max(3, Math.min(6, parseInt(event.target.value, 10)));
+    setEnteredNumberIndices(newNumber);
+};
+
   const handleSoundPreferenceChange = () => {
     setSoundPreference(!soundPreference);
     console.log("changement des options du son : "+ soundPreference)
@@ -381,8 +389,7 @@ const InGame = ({locale, changeLocale}) => {
                           putGreyBackground={putGreyBackgroud}
                           putImposssibleGrey={putImposssibleGrey}
                           handleTurn={handleTurn}
-                          setChangeGraph={setChangeGraphData}
+                          setChangeGraph={setChangeGraphData}/>
-                          nbNodes={enteredNumber}/>
         </div>
         {playTurnSound && <audio src={turnSound} autoPlay />}
 
@@ -533,7 +540,7 @@ const InGame = ({locale, changeLocale}) => {
         <Offcanvas show={showS} 
                   onHide={handleCloseS} 
                   placement='top'
-                  style={{height: '40%', width: '30%', left: '70%' }}>
+                  style={{height: '60%', width: '30%', left: '70%' }}>
           <Offcanvas.Header closeButton>
             <Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
           </Offcanvas.Header>
@@ -546,7 +553,7 @@ const InGame = ({locale, changeLocale}) => {
 
               {IsSolo && 
               <div className='nbNodeDiv'>
-                  <label htmlFor="numberInput">Sélectionner le nombre de noeud (entre 20 et 50) :</label>
+                  <label htmlFor="numberInput">Sélectionner le nombre de noeuds (entre 20 et 50) :</label>
                   <div>
                       <button className='valuebutton' onClick={() => { if (enteredNumber>20) setEnteredNumber(enteredNumber-1)}}
                           style={{borderColor:theme.colors.secondary}}> - </button>
@@ -562,7 +569,32 @@ const InGame = ({locale, changeLocale}) => {
                       <button className='valuebutton' onClick={() => { if (enteredNumber<50) setEnteredNumber(enteredNumber+1)}}
                           style={{borderColor:theme.colors.secondary}}> + </button>
                   </div>
-                  <button onClick={() => {setHistory([]); changeGraph(enteredNumber)}}
+                  <button onClick={() => {setHistory([]); changeGraph(enteredNumber, enteredNumberIndices)}}
+                                              style={{ 
+                                                backgroundColor: theme.colors.tertiary,
+                                                borderColor: theme.colors.secondary,
+                                              }}>Valider</button>
+              </div>}
+
+              {IsSolo && 
+              <div className='nbNodeDiv'>
+                  <label htmlFor="numberInput">Sélectionner le nombre d'indices (entre 3 et 6) :</label>
+                  <div>
+                      <button className='valuebutton' onClick={() => { if (enteredNumberIndices>3) setEnteredNumberIndices(enteredNumberIndices-1)}}
+                          style={{borderColor:theme.colors.secondary}}> - </button>
+                      <input
+                          // type="number"
+                          style={{textAlign:'center'}}
+                          id="numberInput"
+                          disabled
+                          value={enteredNumberIndices}
+                          onChange={handleNumberIndicesChange}
+                          min={3}
+                          max={6}/>
+                      <button className='valuebutton' onClick={() => { if (enteredNumberIndices<6) setEnteredNumberIndices(enteredNumberIndices+1)}}
+                          style={{borderColor:theme.colors.secondary}}> + </button>
+                  </div>
+                  <button onClick={() => {setHistory([]); changeGraph(enteredNumber, enteredNumberIndices)}}
                                               style={{ 
                                                 backgroundColor: theme.colors.tertiary,
                                                 borderColor: theme.colors.secondary,

cryptide_project/src/Pages/Lobby.tsx

@@ -57,7 +57,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
@@ -138,6 +138,7 @@ function Lobby() {
         setPersonData(choosenOne)
         setPersonNetworkData(network)
         setIndicesData(choosenIndices)
+        setGameStartData(true)
         first = true
         gameStarted = true
         //socket.off("player left")
@@ -176,6 +177,7 @@ function Lobby() {
         setPersonData(choosenOne)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
+        setGameStartData(true)
         first = true
         gameStarted = true
         navigate(`${basePath}/game?solo=false&daily=false`)
@@ -186,7 +188,6 @@ function Lobby() {
         for (const p of tab.tab){
             tmpTab.push(JSONParser.JSONToPlayer(p))
         }
-        console.log(tmpTab);
         setPlayersData(tmpTab);
 
     });
@@ -211,7 +212,6 @@ function Lobby() {
         for (const p of tab.tab){
             tmpTab.push(JSONParser.JSONToPlayer(p))
         }
-        console.log(tmpTab)
         setPlayersData(tmpTab)
     })
 

cryptide_project/src/Pages/NewPlay.tsx

@@ -42,7 +42,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);
 
@@ -100,6 +100,7 @@ function NewPlay() {
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
         setIndicesData(choosenIndices)
+        setGameStartData(true)
         navigate(`${basePath}/game?solo=true&daily=false`);
     }
 
@@ -162,7 +163,7 @@ function NewPlay() {
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
         setIndicesData(choosenIndices)
-
+        setGameStartData(true)
         navigate(`${basePath}/game?solo=true&daily=true&difficulty=easy`);
         setShowOverlay(false);
     };
@@ -175,7 +176,8 @@ function NewPlay() {
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
-        setIndicesData(choosenIndices)
+        setGameStartData(true)
+
 
         navigate(`${basePath}/game?solo=true&daily=true&difficulty=intermediate`);
         if (first){
@@ -194,7 +196,7 @@ function NewPlay() {
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
-        setIndicesData(choosenIndices)
+        setGameStartData(true)
         if (first){
             first = false
             const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())