visualisation graphe sur la page endgame

cryptide_project/src/Components/GraphContainer.tsx

@@ -4,7 +4,7 @@ import GraphCreator from "../model/Graph/GraphCreator";
 import "./GraphContainer.css";
 import IndiceTesterFactory from "../model/Factory/IndiceTesterFactory";
 import Person from "../model/Person";
-import { Navigate, useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useGame } from "../Contexts/GameContext";
 import { socket } from "../SocketConfig"
 import { colorToEmoji, positionToColor, positionToEmoji } from "../ColorHelper";
@@ -51,7 +51,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   let initMtn = 0
 
   const {isLoggedIn, user, manager} = useAuth();
-  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData} = useGame();
+  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData} = useGame();
   const params = new URLSearchParams(window.location.search);
 
   const navigate = useNavigate();
@@ -281,6 +281,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     const network = new Network(container, networkData, initialOptions);
 
     setNetwork(network)
+    setSeedData(network.getSeed())
 
     if (isDaily){
       dailyEnigme.forEach((pairs, index) => {
@@ -488,7 +489,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         cptEndgame++;
         const currentPlayer = players[actualPlayerIndex];
         const winner = players[winnerIndex];
-  
+        setNetworkDataData(networkData)
         setNodeIdData(-1)
         setActualPlayerIndexData(-1)
         setLastIndex(-1)
@@ -699,6 +700,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
 
                     if (user!=null){
                       setWinnerData(user)
+                      setNetworkDataData(networkData)
                     }
                     cptTour ++;
                     setNbCoupData(cptTour)

cryptide_project/src/Contexts/GameContext.tsx

@@ -21,6 +21,8 @@ interface GameContextProps {
   dailyEnigme: Map<number, Pair<Indice, boolean>[]>
   nbCoup : number
   temps : number
+  networkData: any
+  seed: number | string;
   setIndicesData: (newIndices: Indice[]) => void;
   setIndiceData: (newIndice: Indice) => void;
   setPersonData: (newPerson: Person) => void;
@@ -37,6 +39,8 @@ interface GameContextProps {
   setDailyEnigmeData: (map: Map<number, Pair<Indice, boolean>[]>) => void
   setNbCoupData: (newNbCoup : number) => void
   settempsData: (newtemps : number) => void
+  setNetworkDataData: (networkData: any) => void
+  setSeedData: (seed: number | string) => void
 }
 
 const GameContext = createContext<GameContextProps | undefined>(undefined);
@@ -61,7 +65,16 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
   const [dailyEnigme, setDailyEnigme] = useState<Map<number, Pair<Indice, boolean>[]>>(new Map())
   const [nbCoup, setNbCoup] = useState<number>(0);
   const [temps, settemps] = useState<number>(0);
+  const [networkData, setNetworkData] = useState<any>(null);
+  const [seed, setSeed] = useState<number | string>(0);
 
+  const setNetworkDataData = (networkData: any) => {
+    setNetworkData(networkData);
+  }
+
+  const setSeedData = (seed: number | string) => {
+    setSeed(seed);
+  }
 
   const setIndicesData = (newIndices: Indice[]) => {
     setIndices(newIndices);
@@ -142,7 +155,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}}>
+    <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}}>
       {children}
     </GameContext.Provider>
   );

cryptide_project/src/Pages/EndGame.css

@@ -1,4 +1,3 @@
-
 .head{
     display: flex;
     justify-content: center;
@@ -115,3 +114,10 @@
 
     padding: 10px;
 }
+
+#vis-graph {
+    height: 500px;
+    margin: 50px; 
+    border: 2px solid #ccc;
+    overflow: hidden; 
+  }

cryptide_project/src/Pages/EndGame.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 
 /* Style */
@@ -16,15 +16,50 @@ import PersonStatus from '../Components/PersonStatus';
 import ButtonImgNav from '../Components/ButtonImgNav';
 import BigButtonNav from '../Components/BigButtonNav';
 import { Button } from 'react-bootstrap';
+import { Network } from "vis-network/standalone/esm/vis-network";
+
 
 import { useGame } from '../Contexts/GameContext';
 import Player from '../model/Player';
 
 
 function EndGame() {
-
+    const {networkData, seed} = useGame();
     const params = new URLSearchParams(window.location.search);
     
+    const initialOptions = {
+
+        layout: {
+            improvedLayout: true,
+            randomSeed: seed,
+            hierarchical: {
+                enabled: false,
+                direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
+                sortMethod: 'hubsize'
+            },
+            //randomSeed: 2
+        },
+        physics: {
+            enabled: true,
+            barnesHut: {
+                gravitationalConstant: -1000,
+                springConstant: 0.001,
+                springLength: 100
+            }
+        }
+    };
+
+    useEffect(() => {
+        const container = document.getElementById("vis-graph");
+        if (!container) {
+            console.error("Container not found");
+            return;
+          }
+        const network = new Network(container, networkData, initialOptions);
+        console.log(networkData)
+    
+    }, []);
+
     //* Gestion solo
     let IsSolo: boolean = false
     const solotmp = params.get('solo');
@@ -104,10 +139,6 @@ function EndGame() {
                             <BigButtonNav dest="/lobby" img={Replay}/>
                         </div> */}
                     </div>
-
-                    <div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
-                        <Button href='/'>Retour à l'accueil</Button>
-                    </div>
                 </div>
             ): (
             <div>
@@ -144,12 +175,16 @@ function EndGame() {
                     </div> */}
                 </div>
                 
+                
+            </div>
+            )}
+            
+            <div id="vis-graph"/>
+
             <div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
                 <Button href='/'>Retour à l'accueil</Button>
             </div>
         </div>
-            )}
-        </div>
     );
 }