You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.6 KiB
79 lines
2.6 KiB
import React from 'react';
|
|
|
|
|
|
/* Style */
|
|
import './EndGame.css';
|
|
import '../Style/Global.css';
|
|
import { useTheme } from '../Style/ThemeContext';
|
|
|
|
/* res */
|
|
import Person from '../res/img/Person.png';
|
|
import Leave from '../res/icon/leave.png';
|
|
import Replay from '../res/icon/replay.png';
|
|
|
|
/* Component */
|
|
import PersonStatus from '../Components/PersonStatus';
|
|
import ButtonImgNav from '../Components/ButtonImgNav';
|
|
import BigButtonNav from '../Components/BigButtonNav';
|
|
|
|
/* nav */
|
|
import { Link } from 'react-router-dom';
|
|
|
|
/* lang */
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { useGame } from '../Contexts/GameContext';
|
|
|
|
|
|
function EndGame() {
|
|
|
|
const {winner, person, players, indices} =useGame()
|
|
console.log(winner)
|
|
|
|
let losingPlayers;
|
|
|
|
if (winner != null) {
|
|
losingPlayers = players.filter(player => player.id !== winner.id);
|
|
} else {
|
|
losingPlayers = players;
|
|
}
|
|
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<div>
|
|
<div className="head">
|
|
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
|
|
<h1>{winner?.name} 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'>
|
|
<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.name} 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>
|
|
);
|
|
}
|
|
|
|
export default EndGame;
|