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.
Cryptid/cryptide_project/src/Pages/EndGame.tsx

72 lines
2.4 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)
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='300' height='300'/>
<h3>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
</div>
<div className='bottom'>
<div className='centerDivH'>
<BigButtonNav dest="/play" img={Leave}/>
</div>
<ul className='centerDivH'>
{
players.map((player, index) => (
<div className="playerContainer">
{player.id!=winner?.id &&
<>
<PersonStatus img={Person} state={Person} key={index} name={player.name} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
<h5 style={{width: 50}}>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h5>
</>
}
</div>
))
}
</ul>
<div className='centerDivH'>
<BigButtonNav dest="/lobby" img={Replay}/>
</div>
</div>
</div>
);
}
export default EndGame;