Merge branch 'tuto' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into tuto

cryptide_project/src/AdressSetup.ts

@@ -1,8 +1,6 @@
-// const ADRESSE_WEBSERVER = "http://172.20.10.4:3002"
-// const ADRESSE_DBSERVER = "http://172.20.10.4:3003"
 const ADRESSE_WEBSERVER = "http://localhost:3002"
-const ADRESSE_DBSERVER = "http://localhost:3003"
 
+const ADRESSE_DBSERVER = "http://localhost:3003"
 
 const tmp = ADRESSE_DBSERVER
 const tmp2 = ADRESSE_WEBSERVER

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])
     
@@ -71,7 +71,7 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
     };
     const circleStyle: React.CSSProperties = {
         backgroundColor: touchedPlayer == index && showCircle ? 'gold' : positionToColor(index), // Changement de la couleur en fonction de la condition
-        borderRadius: '50%',
+        borderRadius: buffer,
         width: '80px',
         height: '80px',
         display: 'flex',
@@ -84,7 +84,7 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
     const circleStyleInt: React.CSSProperties = {
 
         backgroundColor:'white',
-        borderRadius: '50%',
+        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'>
+                <h5>{actualPlayerIndex !== index ? (name.substring(0, name.length - 2).length > 7 ? name.substring(0, name.length - 2).substring(0, 7) + '...' : name.substring(0, name.length - 2)) : 'vous'}</h5>
             </div>
         </div>
     );

cryptide_project/src/Components/TutorialGraph.tsx

@@ -24,50 +24,51 @@ import {basePath} from "../AdressSetup"
 import PersonNetwork from "../model/PersonsNetwork";
 
 interface TutorialGraphProps {
-  onNodeClick: (shouldShowChoiceBar: boolean) => void;
-  handleShowTurnBar: (shouldShowTurnBar: boolean) => void
-  handleTurnBarTextChange: (newTurnBarText: string) => void
-  setPlayerTouched: (newPlayerTouch: number) => void;
-  playerTouched: number
-  changecptTour: (newcptTour : number) => void
-  addToHistory: (message : string) => void
-  solo : boolean
-  isDaily : boolean
-  isEasy: boolean
   setNetwork: (network: Network) => void
   showLast: boolean
-  setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
-  askedWrong: boolean
-  setAskedWrong: (askedWrong: boolean) => void
   setPlayerIndex: (playerIndex: number) => void
-  importToPdf: boolean
-  setImportToPdf: (imp: boolean) => void
-  importToJSON: boolean
-  setImportToJSON: (imp: boolean) => 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
 }
 
 let lastNodes: NodePerson[] = []
 let firstIndex = true
+let first = true
+let touchedPlayer = -1
+let stepTuto = -1
+
 
 
 
-const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON}) => {
+const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
   let initMtn = 0
 
   const {isLoggedIn, user, manager} = useAuth();
-  const {setIndiceData} = useGame();
+  const {setIndiceData, setActualPlayerIndexData} = useGame();
   const params = new URLSearchParams(window.location.search);
 
   const navigate = useNavigate();
   const [lastIndex, setLastIndex] = useState(-1)
-  /*
+
+  if (first){
+    first = false
+    setActualPlayerIndexData(0)
+    handleTurnBarTextChange("C'est à vous de jouer !")
+    handleShowTurnBar(true)
+  }
+  
 
   useEffect(() =>{
     touchedPlayer=playerTouched
-    console.log(playerTouched)
+    /*
     if (touchedPlayer == -1){
       if (!askedWrongLocal){
         socket.emit("put correct background", socket.id)
@@ -82,9 +83,13 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTur
     else if(touchedPlayer == players.length){
       socket.emit("put imossible grey", socket.id)
     }
+    */
   }, [playerTouched])
 
-  */
+  useEffect(() => {
+    stepTuto = tutoStep
+  }, [tutoStep])
+
 
   useEffect(() => {
     const tab: NodePerson[] = []
@@ -118,13 +123,15 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTur
     const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph))
     const indices = JSONParser.JSONToIndices(jsonIndice)
 
+    console.log(indices)
+
     setIndiceData(indices[0])
     if (personNetwork == null){
       return
     }
     const graph = GraphCreator.CreateGraph(personNetwork)
 
-    const nodes = graph.nodesPerson;
+    const nodes = new DataSet(graph.nodesPerson);
 
 
     let n = graph.nodesPerson;
@@ -172,6 +179,11 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTur
     network.stabilize();
     setNetwork(network)
 
+    network.on("click", async (params) => {
+      
+      if(params.nodes.length > 0){
+      }
+    });
 
     network.on("dragging", (params) => {
       if (params.nodes.length > 0) {
@@ -180,7 +192,24 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTur
           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])
+          const pers = personNetwork.getPersons().find((p) => p.getId() === node?.id)
+          if (node !== undefined && pers !== undefined && pers.getName() === "Violet"){
+            networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(1, true)})
+            setTutoStep(1)
+          }
+        }
+      }
+      else{
+        setPlayerTouched(-1)
+      }
+    });
+  
     
   }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
 

cryptide_project/src/Pages/Tutorial.tsx

@@ -18,6 +18,8 @@ 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 ava from "../res/img/tuto/tuto-ava.png";
 
 /* nav */
@@ -39,19 +41,22 @@ import Pair from '../model/Pair';
 import Indice from '../model/Indices/Indice';
 import {basePath} from "../AdressSetup"
 import TutorialGraph from '../Components/TutorialGraph';
-import JSZip from 'jszip';
+import { useAuth } from '../Contexts/AuthContext';
+import EasyBot from '../model/EasyBot';
 
 
 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 params = new URLSearchParams(window.location.search);
 
   const navigationType = useNavigationType()
     cptNavigation++
@@ -62,32 +67,17 @@ const Tutorial = ({locale, changeLocale}) => {
         }
     }
   
-  //* Gestion solo
-  let IsSolo: boolean = true
-  const solotmp = params.get('solo');
-  if (solotmp == "false"){
-    IsSolo=false
-  }
-
-  //* Gestion daily
-  let isDaily: boolean = true
-  const isDailytmp = params.get('daily');
-  if (isDailytmp == "false"){
-    isDaily=false
-  }
-
-
-  let isEasy: boolean = true
-  const isEasytmp = params.get('easy');
-  if (isEasytmp == "false"){
-    isEasy=false
-  }
   //* 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)
@@ -118,8 +108,14 @@ const Tutorial = ({locale, changeLocale}) => {
     }
   }, [history]);
 
+  useEffect(() => {
+    if (user == null){
+      return
+    }
+    setPlayersData([user, new EasyBot("Bot1", "Bot1", ImgBot), new EasyBot("Bot2", "Bot2", ImgBot)])
+  }, [])
+
 
-  const {personNetwork, person, indices} = useGame()
 
   const [showChoiceBar, setShowChoiceBar] = useState(false);
   const [showTurnBar, setShowTurnBar] = useState(false);
@@ -160,46 +156,7 @@ const Tutorial = ({locale, changeLocale}) => {
     setPlayerIndex(playerIndex)
   }
 
-  const generateTEX = async () => {
-    if (network != null && personNetwork != null && person != null){
-
-      const zip = new JSZip();
-      
-      if (isDaily && 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);
-      }
-      else{
-        const tex = generateLatexCode(personNetwork, person, indices, network)
-        const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' });
-        zip.file('socialGraph.tex', tex);
-      }
-
-      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';
-
-      for (const imageName of imageNames) {
-        const imageUrl = process.env.PUBLIC_URL + `/${imagesFolder}/${imageName}`;
-        const response = await fetch(imageUrl);
-        
-        if (response.ok) {
-          const imageBlob = await response.blob();
-          zip.file(`${imageName}`, imageBlob);
-        } else {
-          console.error(`Erreur de chargement de l'image ${imageName}`);
-        }
-      }
-
-      const content = await zip.generateAsync({ type: 'blob' });
-
-      // Enregistre l'archive en tant que fichier
-      saveAs(content, 'social_graph.zip');
-      
-      // Utiliser FileSaver pour télécharger le fichier
-    }
-  }
-
+  
   const resetGraph = () => {
     setisLoading(true);
     socket.emit("reset graph", socket.id)
@@ -264,7 +221,6 @@ const Tutorial = ({locale, changeLocale}) => {
   
   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;
@@ -282,36 +238,37 @@ const Tutorial = ({locale, changeLocale}) => {
       <div id="mainDiv">
         {showTurnBar && <TurnBar text={turnBarText}/>}
         <div id='graphDiv'>
-          <TutorialGraph onNodeClick={handleNodeClick} 
+          <TutorialGraph  tutoStep={tutoStep}
+                          setTutoStep={setTutoStepData}
                           handleShowTurnBar={handleShowTurnBar} 
                           handleTurnBarTextChange={handleTurnBarTextChange} 
-                          changecptTour={changecptTour} 
                           addToHistory={addToHistory}
-                          solo={IsSolo} 
-                          isDaily={isDaily} 
-                          isEasy={isEasy}
                           setPlayerTouched={handleSetPlayerTouched} 
                           playerTouched={playerTouched}
                           setNetwork={setNetworkData}
-                          setNetworkEnigme={setNetworkEnigmeData}
                           showLast={showLast}
-                          setPlayerIndex={setPlayerIndexData}
-                          askedWrong={askedWrong}
-                          setAskedWrong={setAskedWrongData}
-                          importToPdf={importToPdf}
-                          setImportToPdf={setImportToPdfData}
-                          importToJSON={importToJSON}
-                          setImportToJSON={setImportToJSONData}/>
+                          setPlayerIndex={setPlayerIndexData}/>
         </div>
 
-        
-        {(!isDaily || (isDaily && isEasy)) &&
-          <div className='historique' id="history-container">
-              {history.map((item, index) => (
-                  <div key={index}>{item}</div>
-              ))}
-          </div>
-        }   
+        <div className='historique' id="history-container">
+            {history.map((item, index) => (
+                <div key={index}>{item}</div>
+            ))}
+        </div>
+         
+
+        <div className='paramDiv'>
+          <button className='button'
+            style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeS}>
+            <img src={Param} alt="paramètres" height='40'/>
+          </button>
+        </div>
+
+
 
         <div className='menuGame'>
           <Button variant="primary" onClick={handleShowM}>
@@ -335,20 +292,33 @@ const Tutorial = ({locale, changeLocale}) => {
             <img src={MGlass} alt="indice" height="40"/>
           </button>
 
-          {!IsSolo && <button className='button' onClick={setShowLastData}
+          <button className='button' onClick={setShowLastData}
             style={{ 
               backgroundColor: theme.colors.tertiary,
               borderColor: theme.colors.secondary
             }}>
             <img src={ eye } alt="indice" height="40"/>
-          </button>}
+          </button>
         </div>
 
-          { !IsSolo &&
-            <div className='playerlistDiv'>
-              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
-            </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>
+          */}
+
+          
+          <div className='playerlistDiv'>
+            <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
+          </div>
+          
 
         <Offcanvas show={show} 
                   onHide={handleClose}