choix du nombre de noeuds pour les modes solos

7 months ago · c5aa5ea930
parent 5032e57bab
commit c5aa5ea930
3 changed files with 93 additions and 22 deletions
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/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,10 +117,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
      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)
+        }
      }


@ -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 (
    <>
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/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={{ 
@ -422,6 +439,8 @@ const InGame = ({locale, changeLocale}) => {
            </button>
          </div>

+          
+



@ -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>
-            <label style={{ display:'flex'}}>
-              <Switch checked={soundPreference} onChange={handleSoundPreferenceChange}/>
-              <p style={{ marginLeft:'20px'}}>Activer les SFX</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'}}>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>
--- 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))
            })