From 2faaaafa72e9b834932731a0dd7048b9d671f359 Mon Sep 17 00:00:00 2001 From: Baptiste Marcel Date: Tue, 28 Nov 2023 16:58:32 +0100 Subject: [PATCH] visualisation graphe sur la page endgame --- .../src/Components/GraphContainer.tsx | 8 +-- cryptide_project/src/Contexts/GameContext.tsx | 15 +++++- cryptide_project/src/Pages/EndGame.css | 10 +++- cryptide_project/src/Pages/EndGame.tsx | 53 +++++++++++++++---- 4 files changed, 71 insertions(+), 15 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 945b4e3..9b20ec0 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/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 = ({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 = ({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 = ({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 = ({onNodeClick, handleS if (user!=null){ setWinnerData(user) + setNetworkDataData(networkData) } cptTour ++; setNbCoupData(cptTour) diff --git a/cryptide_project/src/Contexts/GameContext.tsx b/cryptide_project/src/Contexts/GameContext.tsx index e6f7b8f..3dba918 100644 --- a/cryptide_project/src/Contexts/GameContext.tsx +++ b/cryptide_project/src/Contexts/GameContext.tsx @@ -21,6 +21,8 @@ interface GameContextProps { dailyEnigme: Map[]> 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[]>) => void setNbCoupData: (newNbCoup : number) => void settempsData: (newtemps : number) => void + setNetworkDataData: (networkData: any) => void + setSeedData: (seed: number | string) => void } const GameContext = createContext(undefined); @@ -61,7 +65,16 @@ export const GameProvider: React.FC = ({ children }) => { const [dailyEnigme, setDailyEnigme] = useState[]>>(new Map()) const [nbCoup, setNbCoup] = useState(0); const [temps, settemps] = useState(0); + const [networkData, setNetworkData] = useState(null); + const [seed, setSeed] = useState(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 = ({ children }) => { } return ( - + {children} ); diff --git a/cryptide_project/src/Pages/EndGame.css b/cryptide_project/src/Pages/EndGame.css index 6c3233d..56b6ed1 100644 --- a/cryptide_project/src/Pages/EndGame.css +++ b/cryptide_project/src/Pages/EndGame.css @@ -1,4 +1,3 @@ - .head{ display: flex; justify-content: center; @@ -114,4 +113,11 @@ background-color: white; padding: 10px; -} \ No newline at end of file +} + +#vis-graph { + height: 500px; + margin: 50px; + border: 2px solid #ccc; + overflow: hidden; + } \ No newline at end of file diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index 3456710..ef8ee8d 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect} from 'react'; /* Style */ @@ -16,14 +16,49 @@ 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 @@ -104,10 +139,6 @@ function EndGame() { */} - -
- -
): (
@@ -144,11 +175,15 @@ function EndGame() {
*/} -
- -
+ )} + +
+ +
+ +
); }