Merge pull request 'ajout de l'affichage du graphe en fin de jeu (comme sur demo) et fix du problème de tostring quand le joueur retourné à la page de jeu ⚡' (#89) from mergefix into master ⚡

Reviewed-on: #89

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";
@@ -14,7 +14,6 @@ import NodePerson from "../model/Graph/NodePerson";
 import { useAuth } from "../Contexts/AuthContext";
 import Indice from "../model/Indices/Indice";
 import Pair from "../model/Pair";
-
 interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
   handleShowTurnBar: (shouldShowTurnBar: boolean) => void
@@ -58,7 +57,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();
@@ -298,6 +297,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     const network = new Network(container, networkData, initialOptions);
     network.stabilize();
     setNetwork(network)
+    setSeedData(network.getSeed())
 
     if (isDaily){
       setNetworkEnigme(dailyEnigme)
@@ -520,6 +520,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         const currentPlayer = players[actualPlayerIndex];
         const winner = players[winnerIndex];
   
+        setNetworkDataData(networkData)
         setNodeIdData(-1)
         setActualPlayerIndexData(-1)
         setLastIndex(-1)
@@ -730,6 +731,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

@@ -114,4 +114,11 @@
     background-color: white;
 
     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 */
@@ -15,20 +15,65 @@ import Replay from '../res/icon/replay.png';
 import PersonStatus from '../Components/PersonStatus';
 import ButtonImgNav from '../Components/ButtonImgNav';
 import BigButtonNav from '../Components/BigButtonNav';
+//
+import { Network } from "vis-network/standalone/esm/vis-network";
+import { map } from 'lodash';
 
-/* nav */
+/* Nav */
 import { Link } from 'react-router-dom';
 
-/* lang */
+/* Lang */
 import { FormattedMessage } from 'react-intl';
-import { useGame } from '../Contexts/GameContext';
-import { map } from 'lodash';
+
+/* Model */
 import Player from '../model/Player';
 
+/* Context  */
+import { useGame } from '../Contexts/GameContext';
+
+/* Boostrap */
+import { Button } from 'react-bootstrap';
+import Bot from '../model/Bot';
 
-function EndGame() {
 
+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',
+                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
@@ -75,6 +120,12 @@ function EndGame() {
 
     console.log(winner)
     console.log(indices)
+
+    let indicenull = false;
+    if (indices.length == 0){
+        indicenull = true;
+    }
+
     return (
         <div>
             {!IsSolo ? (
@@ -87,27 +138,25 @@ function EndGame() {
                     </div>
                     <div className='winner'>
                         <img src={Person} width='250' height='250'/>
-                        <h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
+
+                        {!indicenull && (<h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>)}
                     </div>
                     <div className='bottomEnd'>
-                        <div className='centerDivH' onClick={resetAll}>
+                        {/* <div className='centerDivH' onClick={resetAll}>
                             <BigButtonNav dest="/play" img={Leave}/>
-                        </div>
+                        </div> */}
                         <div className="losingPlayersContainer">
                             {losingPlayers.map((player, index) => (
                                 <div className="playerContainer" key={index}>
                                     {player.id !== winner?.id && (
                                         <div>
                                             <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false}/>
-                                            <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
+                                            {!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>)}
                                         </div>
                                     )}
                                 </div>
                             ))}
                         </div>
-                        <div className='centerDivH'>
-                            <BigButtonNav dest="/lobby" img={Replay}/>
-                        </div>
                     </div>
                 </div>
             ): (
@@ -149,6 +198,13 @@ function EndGame() {
                 </div>
             </div>
             )}
+
+            <div id="vis-graph"/>
+
+            <div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
+                <Button href='/'>Retour à l'accueil</Button>
+            </div>
+
         </div>
     );
 }