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

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 ⚡

Browse Source
pull/81/head
Pierre Ferreira 1 year ago
parent d4171022ff
commit a9061ae504
5 changed files with 159 additions and 35 deletions
Show Stats Download Patch File Download Diff File

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

@ -44,10 +44,13 @@ let firstEnigme = true
const MyGraphComponent: React.FC<MyGraphComponentProps> = ({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 + "] ----->");

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

@ -19,6 +19,8 @@ interface GameContextProps {
onlyFalse: boolean
winner: Player | null
dailyEnigme: Map<number, Pair<Indice, boolean>[]>
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<number, Pair<Indice, boolean>[]>) => void
setNbCoupData: (newNbCoup : number) => void
settempsData: (newtemps : number) => void
}
const GameContext = createContext<GameContextProps | undefined>(undefined);
@ -55,6 +59,8 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
const [winner, setWinner] = useState<Player | null>(null)
const [dailyEnigme, setDailyEnigme] = useState<Map<number, Pair<Indice, boolean>[]>>(new Map())
const [nbCoup, setNbCoup] = useState<number>(0);
const [temps, settemps] = useState<number>(0);
const setIndicesData = (newIndices: Indice[]) => {
@ -110,6 +116,15 @@ export const GameProvider: React.FC<GameProviderProps> = ({ 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<GameProviderProps> = ({ children }) => {
setTurnPlayerIndex(-1)
setNodeId(-1)
setIndice(null)
setNbCoup(0)
settemps(0)
}
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 }}>
<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}}>
{children}
</GameContext.Provider>
);

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

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

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

@ -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 (
<div>
{!IsSolo &&
<div>
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h1>{winner?.pseudo} a gagné !</h1>
<h3>Le tueur était <u>{person?.getName()}</u></h3>
</header>
</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>
</div>
<div className='bottom'>
<div className='centerDivH' onClick={resetAll}>
<BigButtonNav dest="/play" img={Leave}/>
</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} showCircle={false}/>
<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>
}
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h1>{winner?.pseudo} a gagné !</h1>
<h3>Le tueur était <u>{person?.getName()}</u></h3>
</header>
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h1>Vous avez gagné !</h1>
<h3>Le tueur était <u>{person?.getName()}</u></h3>
</header>
</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>
<h1>[ {winner?.pseudo} ]</h1>
</div>
<div className='bottom'>
<div className='centerDivH' onClick={resetAll}>
<BigButtonNav dest="/play" img={Leave}/>
</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} showCircle={false}/>
<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
</div>
)}
</div>
))}
<div className="SoloContainer">
<div className='solostat'>
{!IsDaily && <p>Nombre de coups : {nbCoup}</p> }
<p>Temps : {temps}s</p>
</div>
<div className='indicesolo'>
{indices.map((indice, index) => (
// <div className="playerContainer" key={index}>
<div>
<h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
</div>
//</div>
))
}
</div>
</div>
<div className='centerDivH'>
<BigButtonNav dest="/lobby" img={Replay}/>

4
cryptide_project/src/Pages/Play.tsx
Unescape View File

@ -75,10 +75,10 @@ function Play() {
console.error(error);
}
};
fetchUserInformation();
}, [isLoggedIn]);
const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();

Write Preview
Loading…
Cancel
Save