From a9061ae5047112ac240d36106e35fabeaefbf933 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Mon, 27 Nov 2023 09:58:35 +0100 Subject: [PATCH] gestion de la page de fin de jeu de facon a ce qu'elle soit dynamique pour le mode de jeu (solo ou pas) + ajout de la statistique nombre de tour et temps :zap: --- .../src/Components/GraphContainer.tsx | 16 ++- cryptide_project/src/Contexts/GameContext.tsx | 19 ++- cryptide_project/src/Pages/EndGame.css | 35 +++++ cryptide_project/src/Pages/EndGame.tsx | 120 ++++++++++++++---- cryptide_project/src/Pages/Play.tsx | 4 +- 5 files changed, 159 insertions(+), 35 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 7ec1cae..4375ee1 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -44,10 +44,13 @@ let firstEnigme = true const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, addToHistory, showLast, setNetwork}) => { -let cptTour: number = 0 + let cptTour: number = 0 + + //* Gestion du temps : + const initMtn = new Date().getSeconds() const {user} = useAuth() - const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme } = useGame(); + const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData} = useGame(); const params = new URLSearchParams(window.location.search); const navigate = useNavigate(); @@ -648,7 +651,13 @@ let cptTour: number = 0 works = false } if (index == indices.length - 1 && works){ - navigate("/endgame") + const Mtn = new Date().getSeconds() + + settempsData(Mtn - initMtn) + + cptTour ++; + setNbCoupData(cptTour) + navigate("/endgame?solo=true&daily=" + isDaily) } } @@ -657,7 +666,6 @@ let cptTour: number = 0 } addToHistory(person.getName() + " n'est pas le tueur !"); //TODO préciser le nombre d'indice qu'il a de juste - //TODO METTRE LA WIN CONDITION ICI AVEC LE MERGE cptTour ++; // On Incrémente le nombre de tour du joueur const tour = cptTour+1; addToHistory("<----- [Tour " + tour +"/"+networkData.nodes.length + "] ----->"); diff --git a/cryptide_project/src/Contexts/GameContext.tsx b/cryptide_project/src/Contexts/GameContext.tsx index ecc142d..e6f7b8f 100644 --- a/cryptide_project/src/Contexts/GameContext.tsx +++ b/cryptide_project/src/Contexts/GameContext.tsx @@ -19,6 +19,8 @@ interface GameContextProps { onlyFalse: boolean winner: Player | null dailyEnigme: Map[]> + nbCoup : number + temps : number setIndicesData: (newIndices: Indice[]) => void; setIndiceData: (newIndice: Indice) => void; setPersonData: (newPerson: Person) => void; @@ -33,6 +35,8 @@ interface GameContextProps { setWinnerData: (winner: Player) => void reset: () => void setDailyEnigmeData: (map: Map[]>) => void + setNbCoupData: (newNbCoup : number) => void + settempsData: (newtemps : number) => void } const GameContext = createContext(undefined); @@ -55,6 +59,8 @@ export const GameProvider: React.FC = ({ children }) => { const [onlyFalse, setOnlyFalse] = useState(false) const [winner, setWinner] = useState(null) const [dailyEnigme, setDailyEnigme] = useState[]>>(new Map()) + const [nbCoup, setNbCoup] = useState(0); + const [temps, settemps] = useState(0); const setIndicesData = (newIndices: Indice[]) => { @@ -110,6 +116,15 @@ export const GameProvider: React.FC = ({ children }) => { setDailyEnigme(map) } + + const setNbCoupData = (newNbCoup : number) => { + setNbCoup(newNbCoup); + } + + const settempsData = (newtemps : number) => { + settemps(newtemps); + } + const reset = () => { setIndices([]) setActualPlayerIndex(-1) @@ -122,10 +137,12 @@ export const GameProvider: React.FC = ({ children }) => { setTurnPlayerIndex(-1) setNodeId(-1) setIndice(null) + setNbCoup(0) + settemps(0) } return ( - + {children} ); diff --git a/cryptide_project/src/Pages/EndGame.css b/cryptide_project/src/Pages/EndGame.css index 9af5187..2cb9654 100644 --- a/cryptide_project/src/Pages/EndGame.css +++ b/cryptide_project/src/Pages/EndGame.css @@ -79,4 +79,39 @@ margin: 0 15px 0 15px; padding: 10px; box-shadow: 5px 5px 5px rgb(246, 246, 246); +} + +.SoloContainer{ + display: flex; + flex-direction: column; + align-items: center; + + border: solid 1px whitesmoke; + border-radius: 15px; + background-color: white; + + max-width: 50%; +} + +.indicesolo{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + /* margin: 10px 0; */ + /* max-height: 200px; */ +} + +.solostat{ + display: flex; + justify-content: space-between; + width: 70%; +} + +.solostat p { + border: solid 1px whitesmoke; + border-radius: 15px; + background-color: white; + + padding: 10px; } \ No newline at end of file diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index d588183..3948253 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -22,62 +22,126 @@ import { Link } from 'react-router-dom'; /* lang */ import { FormattedMessage } from 'react-intl'; import { useGame } from '../Contexts/GameContext'; +import { map } from 'lodash'; +import Player from '../model/Player'; function EndGame() { + const params = new URLSearchParams(window.location.search); + + //* Gestion solo + let IsSolo: boolean = false + const solotmp = params.get('solo'); + if (solotmp == "true"){ + IsSolo=true + } + + + //* Gestion daily + let IsDaily: boolean = false + const dailytmp = params.get('daily'); + if (dailytmp == "true"){ + IsDaily=true + } + const {reset} = useGame() const resetAll = () => { reset() } - - const {winner, person, players, indices} =useGame() + + const {winner, person, players, indices, nbCoup, temps} =useGame() + console.log(winner) let indice = indices[0] - const index = players.findIndex((p) => p.id == winner?.id) - if (index != -1) { - indice = indices[index] - } + let losingPlayers : Player[]; + if(!IsSolo){ + const index = players.findIndex((p) => p.id == winner?.id) + if (index != -1) { + indice = indices[index] + } + - let losingPlayers; - if (winner != null) { - losingPlayers = players.filter(player => player.id !== winner.id); - } else { - losingPlayers = players; + if (winner != null) { + losingPlayers = players.filter(player => player.id !== winner.id); + } else { + losingPlayers = players; + } + } + else{ + losingPlayers = []; } - const theme = useTheme(); return (
+ {!IsSolo && +
+
+
+

{winner?.pseudo} a gagné !

+

Le tueur était {person?.getName()}

+
+
+
+ +

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

+
+
+
+ +
+
+ {losingPlayers.map((player, index) => ( +
+ {player.id !== winner?.id && ( +
+ {}} index={index} showCircle={false}/> +
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
+
+ )} +
+ ))} +
+
+ +
+
+
+ }
-
-

{winner?.pseudo} a gagné !

-

Le tueur était {person?.getName()}

-
+
+

Vous avez gagné !

+

Le tueur était {person?.getName()}

+
-

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

+

[ {winner?.pseudo} ]

+
-
- {losingPlayers.map((player, index) => ( -
- {player.id !== winner?.id && ( -
- {}} index={index} showCircle={false}/> -
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
-
- )} -
- ))} +
+
+ {!IsDaily &&

Nombre de coups : {nbCoup}

} +

Temps : {temps}s

+
+
+ {indices.map((indice, index) => ( + //
+
+
Indice {index+1} : {indice.ToString("fr")}
+
+ //
+ )) + } +
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index b6975b3..7c6ae2b 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -75,10 +75,10 @@ function Play() { console.error(error); } }; - + fetchUserInformation(); }, [isLoggedIn]); - + const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();