Crypteam
/
Cryptid
4
0
Fork 0
Code Issues 10 Pull Requests Packages Projects 9 Releases Wiki Activity

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 ⚡

Browse Source
pull/89/head
Pierre Ferreira 7 months ago
parent 049e3034d2
commit 1dd590dd77
4 changed files with 96 additions and 18 deletions
Show Stats Download Patch File Download Diff File

8
cryptide_project/src/Components/GraphContainer.tsx
Unescape View File

@ -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)

15
cryptide_project/src/Contexts/GameContext.tsx
Unescape View File

@ -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>
);

9
cryptide_project/src/Pages/EndGame.css
Unescape View File

@ -114,4 +114,11 @@
background-color: white;
padding: 10px;
}
}
#vis-graph {
height: 500px;
margin: 50px;
border: 2px solid #ccc;
overflow: hidden;
}

82
cryptide_project/src/Pages/EndGame.tsx
Unescape View File

@ -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>
);
}

Write Preview
Loading…
Cancel
Save