66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import "./Trade.css";
|
|
import { getPlayerName } from './Common.js';
|
|
import PlayerColor from './PlayerColor.js';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import Dice from './Dice.js';
|
|
|
|
const Trade = ({table}) => {
|
|
|
|
const rollClick = (event) => {
|
|
table.throwDice();
|
|
}
|
|
|
|
if (!table.game) {
|
|
return (<></>);
|
|
}
|
|
|
|
let players = [], hasRolled = true;
|
|
for (let color in table.game.players) {
|
|
const item = table.game.players[color],
|
|
name = getPlayerName(table.game.sessions, color);
|
|
if (color === table.game.color) {
|
|
hasRolled = item.orderRoll !== 0;
|
|
}
|
|
if (name) {
|
|
if (!item.orderRoll) {
|
|
item.orderRoll = 0;
|
|
}
|
|
players.push({ name: name, color: color, ...item });
|
|
}
|
|
}
|
|
|
|
players.sort((A, B) => {
|
|
if (A.order === B.order) {
|
|
if (A.orderRoll === B.orderRoll) {
|
|
return A.name.localeCompare(B.name);
|
|
}
|
|
return B.orderRoll - A.orderRoll;
|
|
}
|
|
return B.order - A.order;
|
|
});
|
|
|
|
players = players.map(item =>
|
|
<div className="TradePlayer" key={`player-${item.color}`}>
|
|
<PlayerColor color={item.color}/>
|
|
<div>{item.name}</div>
|
|
{ item.orderRoll !== 0 && <>rolled <Dice pips={item.orderRoll}/>.</> }
|
|
{ item.orderRoll === 0 && <>has not rolled yet. {item.orderStatus}</>}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="Trade">
|
|
{ table.game && <Paper>
|
|
<div className="Title">Game Order</div>
|
|
<div className="PlayerList">
|
|
{ players }
|
|
</div>
|
|
<Button disabled={hasRolled} onClick={rollClick}>Roll Dice</Button>
|
|
</Paper> }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Trade; |