62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import "./Winner.css";
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import Resource from './Resource.js';
|
|
import { getPlayerName } from './Common.js';
|
|
import PlayerColor from './PlayerColor.js';
|
|
|
|
const Winner = ({table, color}) => {
|
|
const quitClicked = (event) => {
|
|
table.setSelected("");
|
|
}
|
|
|
|
if (!table.game) {
|
|
return <></>;
|
|
}
|
|
|
|
const name = getPlayerName(table.game.sessions, color),
|
|
player = table.game.players[color];
|
|
let playerCount = 0;
|
|
for (let key in table.game.players) {
|
|
if (table.game.players[key].status !== 'Not active') {
|
|
playerCount++;
|
|
}
|
|
}
|
|
|
|
let description = <>Congratulations, <b>{name}</b>!
|
|
<p><PlayerColor color={color}/> {name} won the game after {Math.floor(table.game.turns / playerCount)} turns. They
|
|
had <b>{player.potential}</b> unplayed Victory Point card(s).</p>
|
|
</>;
|
|
for (let key in table.game.players) {
|
|
if (key === color) {
|
|
continue;
|
|
}
|
|
let tmp = table.game.players[key];
|
|
if (tmp.status === 'Not active') {
|
|
continue;
|
|
}
|
|
let line = <><PlayerColor color={key}/> {getPlayerName(table.game.sessions, key)} finished with {tmp.points} victory points.
|
|
They had <b>{tmp.potential}</b> unplayed Victory Point card(s).</>
|
|
description = <>{description}<p>{line}</p></>;
|
|
}
|
|
|
|
description = <>{description}<p>If everyone goes back to the Lobby, you can play again.</p></>;
|
|
|
|
return (
|
|
<div className="Winner">
|
|
<Paper>
|
|
<div className="Title">{name} has won with {player.points} victory points!</div>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<Resource type={`vp-palace`} disabled count={1}/>
|
|
<div className="Description">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
<Button onClick={quitClicked}>Go back to Lobby</Button>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Winner; |