From 1dd590dd7760ff3a2134ae327a00d25214b9a0a5 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Thu, 30 Nov 2023 08:48:08 +0100 Subject: [PATCH] =?UTF-8?q?ajout=20de=20l'affichage=20du=20graphe=20en=20f?= =?UTF-8?q?in=20de=20jeu=20(comme=20sur=20demo)=20et=20fix=20du=20probl?= =?UTF-8?q?=C3=A8me=20de=20tostring=20quand=20le=20joueur=20retourn=C3=A9?= =?UTF-8?q?=20=C3=A0=20la=20page=20de=20jeu=20:zap:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/GraphContainer.tsx | 8 +- cryptide_project/src/Contexts/GameContext.tsx | 15 +++- cryptide_project/src/Pages/EndGame.css | 9 +- cryptide_project/src/Pages/EndGame.tsx | 82 ++++++++++++++++--- 4 files changed, 96 insertions(+), 18 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 445a790..e43918b 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"; @@ -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 = ({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 = ({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 = ({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 = ({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..03fd3f5 100644 --- a/cryptide_project/src/Pages/EndGame.css +++ b/cryptide_project/src/Pages/EndGame.css @@ -114,4 +114,11 @@ background-color: white; padding: 10px; -} \ No newline at end of file +} + +#vis-graph { + height: 500px; + margin: 50px; + border: 2px solid #ccc; + overflow: hidden; +} diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index 1c24b76..6ae83f6 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 */ @@ -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 (
{!IsSolo ? ( @@ -87,27 +138,25 @@ function EndGame() {
-

{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}

+ + {!indicenull && (

{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}

)}
-
+ {/*
-
+
*/}
{losingPlayers.map((player, index) => (
{player.id !== winner?.id && (
{}} index={index} playerIndex={-2} showCircle={false}/> -
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
+ {!indicenull && (
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
)}
)}
))}
-
- -
): ( @@ -149,6 +198,13 @@ function EndGame() { )} + +
+ +
+ +
+
); }