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

modif page end game
continuous-integration/drone/push Build is passing Details

Browse Source
pull/115/head
Baptiste MARCEL 10 months ago
parent de58aff695
commit 669ca42bd1
2 changed files with 248 additions and 168 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,124 +1,90 @@
.head{
/* Styles for the Winner and Indice section */
.head {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.leaderboard-header{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: fit-content;
border-radius: 0px 0px 30px 30px;
border: solid;
border-width: 0 5px;
}
.leaderboard-header {
border: 2px solid;
border-color: #0064E0;
padding: 20px;
}
.bottomEnd{
text-align: center;
border-radius: 0px 0px 10px 10px;
}
/* Styles for the Winner's details */
.winner-details {
display: flex;
justify-content: space-around;
}
.winner{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.playersContainer {
display: flex;
flex-direction: column;
align-items: center;
/* padding-left: "5px"; */
width: 100px;
background-color: red;
}
.playerContainer{
/* display: flex;
align-items: center; */
/* flex-direction: column; */
/* width: 300px; */
width: 30%;
margin-bottom: 20px;
/* margin-bottom: 10px; */
border: solid 1px whitesmoke;
border-radius: 15px;
background-color: white;
}
.losingPlayersContainer{
justify-content: center;
}
.winner-details img {
width: 75px;
height: 75px;
border-radius: 50%;
margin-right: 10px;
}
/* Styles for the Indice Display */
.indiceDisplay {
border: 2px solid whitesmoke;
border-radius: 10px;
margin: 5px; /* Réduire la marge */
padding: 8px; /* Réduire le rembourrage */
box-shadow: 3px 3px 3px rgb(246, 246, 246); /* Réduire l'ombre */
}
/* Styles for the Losing Players Container */
.losingPlayersContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 10px 0;
max-width: 50%;
overflow-y: scroll;
max-height: 200px;
/* background-color: yellow; */
}
.indiceDisplay{
border: solid 2px whitesmoke;
border-radius: 10px;
margin: 0 15px 0 15px;
padding: 10px;
box-shadow: 5px 5px 5px rgb(246, 246, 246);
}
.SoloContainer{
margin: 5px;
}
/* Styles for individual Player Containers */
.playerContainer {
display: flex;
flex-direction: column;
align-items: center;
border: solid 1px whitesmoke;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid whitesmoke;
border-radius: 15px;
background-color: white;
}
max-width: 50%;
}
.indicesolo{
.soloContainer {
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 {
justify-content: center;
align-items: center;
width: 100%; /* Ajoutez cette ligne pour occuper toute la largeur */
}
.solostat{
border: solid 1px whitesmoke;
border-radius: 15px;
background-color: white;
padding: 10px;
}
margin: 5px;
width: fit-content; /* Ajoutez cette ligne pour ajuster la largeur au contenu */
}
.center {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#vis-graph {
/* Styles for the Graph Container */
#vis-graph {
height: 500px;
margin: 50px;
margin: 5px;
border: 2px solid #ccc;
overflow: hidden;
}
overflow: hidden;
}

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

@ -35,7 +35,7 @@ import Player from '../model/Player';
import { useGame } from '../Contexts/GameContext';
/* Boostrap */
import { Button } from 'react-bootstrap';
import { Button, Col, Container, Row } from 'react-bootstrap';
import Bot from '../model/Bot';
import {basePath} from "../AdressSetup"
@ -147,77 +147,191 @@ function EndGame({lang}: {lang: string}) {
}, 2000);
};
return (
<div>
<div style={{overflow:"hidden"}}>
{playTurnSound && <audio src={WinSound} autoPlay />}
{!IsSolo ? (
<div>
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h1>{winner?.pseudo} a gagné !</h1>
<h3>Le coupable était <u>{person?.getName()}</u></h3>
</header>
</div>
<div className='winner'>
<img src={Person} width='250' height='250'/>
{!indicenull && (<h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString(lang)}</h3>)}
</div>
<div className='bottomEnd'>
{/* <div className='centerDivH' onClick={resetAll}>
<BigButtonNav dest="/play" img={Leave}/>
</div> */}
<div className="losingPlayersContainer">
{players.map((player, index) => (
player.id !== winner?.id && (
<div className="playerContainer" key={index}>
<PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false} askedWrong={false}/>
{!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString(lang)}</h6>)}
</div>
)
))}
</div>
</div>
</div>
<Container>
{/* Winner et son indice */}
<Row>
<Col>
<div className="losingPlayersContainer">
{/* Indices pairs */}
{players.map((player, index) => (
index % 2 == 0 && (
<div className="playerContainer" key={index}>
<PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false} askedWrong={false}/>
{!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString(lang)}</h6>)}
</div>
)
))}
</div>
</Col>
<Col xs={6}>
<Row>
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h4>{winner?.pseudo} a gagné !</h4>
<h5>Le coupable était <u>{person?.getName()}</u></h5>
</header>
</div>
</Row>
<Row>
<div id="vis-graph"></div>
</Row>
<Row className="justify-content-md-center">
<Button href={`${basePath}/`} style={{
width:"50%",
margin:"10px"
}}>Retour à l'accueil</Button>
</Row>
</Col>
<Col>
<div className="losingPlayersContainer">
{players.map((player, index) => (
index % 2 == 1 && (
<div className="playerContainer" key={index}>
<PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false} askedWrong={false}/>
{!indicenull && (<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString(lang)}</h6>)}
</div>
)
))}
</div>
</Col>
</Row>
</Container>
): (
<div>
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h1>Vous avez gagné !</h1>
<h3>Le coupable était <u>{person?.getName()}</u></h3>
</header>
</div>
<div className='winner'>
<img src={Person} width='250' height='250'/>
<h1>{winner?.pseudo}</h1>
</div>
<div className='bottomEnd'>
<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(lang)}</h6>
</div>
//</div>
))
}
</div>
</div>
</div>
</div>
)}
<div id="vis-graph"/>
<Container fluid>
{/* Perd une énigme */}
{!winner && (
<Row>
<Col>
<Row>
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h4>Vous avez perdu !</h4>
<h5>Le coupable était <u>{person?.getName()}</u></h5>
</header>
</div>
<div className='centerDivH' onClick={resetAll} style={{margin: "20px"}}>
<Button href={`${basePath}/`}>Retour à l'accueil</Button>
</div>
<Row>
{!IsDaily &&
<Col className='center'>
<p className='solostat'>Nombre de coups : {nbCoup}</p>
</Col>
}
<Col className='center'>
<p className='solostat'>Temps : {temps}s</p>
</Col>
</Row>
</Row>
<Row>
<Col>
{indices.map((indice, index) => (
index % 2 == 0 && (
<div className='playerContainer'>
<h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
</div>
)
))}
</Col>
<Col xs={6}>
<div id="vis-graph"></div>
</Col>
<Col>
<div className="losingPlayersContainer">
{indices.map((indice, index) => (
index % 2 == 1 && (
<div className='playerContainer'>
<h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
</div>
)
))}
</div>
</Col>
</Row>
<Row className="justify-content-md-center">
<Button href={`${basePath}/`} style={{
width:"50%",
margin:"10px"
}}>Retour à l'accueil</Button>
</Row>
</Col>
</Row>
)}
{/* Gagne une énigme */}
{winner && (
<Row>
<Col>
<Row>
<div className="head">
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h4>Vous avez gagné !</h4>
<h5>Le coupable était <u>{person?.getName()}</u></h5>
</header>
</div>
<Row>
{!IsDaily &&
<Col className='center'>
<p className='solostat'>Nombre de coups : {nbCoup}</p>
</Col>
}
<Col className='center'>
<p className='solostat'>Temps : {temps}s</p>
</Col>
</Row>
</Row>
<Row>
<Col>
{indices.map((indice, index) => (
index % 2 == 0 && (
<div className='playerContainer'>
<h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
</div>
)
))}
</Col>
<Col xs={6}>
<div id="vis-graph"></div>
</Col>
<Col>
<div className="losingPlayersContainer">
{indices.map((indice, index) => (
index % 2 == 1 && (
<div className='playerContainer'>
<h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
</div>
)
))}
</div>
</Col>
</Row>
<Row className='justify-content-center'>
<Button href={`${basePath}/`} style={{
width:"50%",
margin:"10px"
}}>Retour à l'accueil</Button>
</Row>
</Col>
</Row>
)}
</Container>
)}
</div>
);
}

Write Preview
Loading…
Cancel
Save