permet la modification du nombre d'indice

7 months ago · 712e85ed97
parent 94219e01d3
commit 712e85ed97
7 changed files with 105 additions and 72 deletions
--- 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",
--- a/cryptide_project/src/AdressSetup.ts
+++ b/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

--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/cryptide_project/src/Components/GraphContainer.tsx
@ -53,14 +53,13 @@ interface MyGraphComponentProps {
  putGreyBackground : () => void
  putCorrectBackground : () => void
  putImposssibleGrey : () => void
-  setChangeGraph : (func: (nbNodes: number) => void) => void
-
-  nbNodes: number
-
+  setChangeGraph : (func: (nbNodes: number, nbIndices: number) => void) => void

  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, nbNodes, 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, 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){
-    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)
+      console.log(gameStart)
+      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("À 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
--- 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;
@ -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>
  );
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/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}
-                          nbNodes={enteredNumber}/>
+                          setChangeGraph={setChangeGraphData}/>
        </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,
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/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)
    })

--- a/cryptide_project/src/Pages/NewPlay.tsx
+++ b/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())