116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import Resource from './Resource.js';
|
|
import "./PlayersStatus.css";
|
|
import BoardPieces from './BoardPieces.js';
|
|
import { getPlayerName } from './Common.js';
|
|
import PlayerColor from './PlayerColor.js';
|
|
import Placard from './Placard.js';
|
|
|
|
const Player = ({ table, color, onClick, reverse }) => {
|
|
if (!table.game) {
|
|
return <></>;
|
|
}
|
|
const game = table.game;
|
|
const player = game.players[color];
|
|
|
|
const developmentCards = player.unplayed
|
|
? <Resource label={true} type={'progress-back'}
|
|
count={player.unplayed} disabled/>
|
|
: undefined;
|
|
const armyCards = player.army
|
|
? <Resource label={true} type={'army-1'} count={player.army} disabled/>
|
|
: undefined;
|
|
let points = <></>;
|
|
if (player.points && reverse) {
|
|
points = <><b>{player.points}</b><Resource type={'progress-back'}
|
|
count={player.points} disabled/></>;
|
|
} else if (player.points) {
|
|
points = <><Resource type={'progress-back'} count={player.points}
|
|
disabled/><b>{player.points}</b></>;
|
|
}
|
|
|
|
const longestRoad = game.longestRoad && game.longestRoad === color ?
|
|
<Placard
|
|
disabled
|
|
active={false}
|
|
type='longest-road'
|
|
count={game.longestRoadLength}
|
|
/> : undefined;
|
|
|
|
const largestArmy = game.largestArmy && game.largestArmy === color ?
|
|
<Placard
|
|
disabled
|
|
active={false}
|
|
type='largest-army'
|
|
count={game.largestArmySize}
|
|
/> : undefined;
|
|
|
|
return <div className="Player">
|
|
<div className="Who">
|
|
<PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
|
|
</div>
|
|
<div className="What">
|
|
{ game.color === color &&
|
|
<div className="LongestRoad">
|
|
Longest road: {player.longestRoad ? player.longestRoad : 0}
|
|
</div>
|
|
}
|
|
<div className="Points">{points}</div>
|
|
{ (largestArmy || longestRoad || armyCards || developmentCards) && <>
|
|
<div className="Has">
|
|
{ !reverse && <>
|
|
{ largestArmy }
|
|
{ longestRoad }
|
|
{ !largestArmy && armyCards }
|
|
{ developmentCards }
|
|
</> }
|
|
{ reverse && <>
|
|
{ developmentCards }
|
|
{ !largestArmy && armyCards }
|
|
{ longestRoad }
|
|
{ largestArmy }
|
|
</> }
|
|
</div>
|
|
</> }
|
|
</div>
|
|
<div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
|
|
<BoardPieces onClick={onClick} table={table} color={color}/>
|
|
</div>
|
|
</div>
|
|
};
|
|
|
|
const PlayersStatus = ({ table, onClick, color, active }) => {
|
|
if (!table.game) {
|
|
return <></>;
|
|
}
|
|
|
|
const game = table.game;
|
|
let players;
|
|
if (color) {
|
|
players = <Player
|
|
onClick={onClick}
|
|
reverse
|
|
key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
|
|
table={table}
|
|
color={color}/>;
|
|
} else {
|
|
players = Object.getOwnPropertyNames(game.players)
|
|
.filter(color => game.players[color].status === 'Active'
|
|
&& game.color !== color)
|
|
.map(color => {
|
|
return <Player
|
|
onClick={onClick}
|
|
key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
|
|
table={table}
|
|
color={color}/>;
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>
|
|
{ players }
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PlayersStatus; |