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 1 year ago
parent de58aff695
commit 669ca42bd1
2 changed files with 248 additions and 168 deletions
Show Stats Download Patch File Download Diff File

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

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

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

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

Write Preview
Loading…
Cancel
Save