blob: c3dd988e205d4edbcddb018f7825ae6314b7f1ea (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
//@flow
import { Icon } from '@blueprintjs/core'
import { List } from 'immutable';
import * as React from 'react';
import { Flex } from 'reflexbox';
import { Player } from '../../models/players';
import { RadialList } from './radial-list/RadialList';
import roundTable from './round-table.png';
type RadialPlayerListProps = {
players: List<Player>,
owner: string,
currentPlayer: Player,
};
const PlayerItem = ({player, isOwner, isUser}) => (
<Flex column align='center'>
<UserIcon isOwner={isOwner} isUser={isUser}/>
<h5 style={{margin: 0}}>{player.displayName}</h5>
</Flex>
);
const PlayerPlaceholder = () => (
<Flex column align='center' style={{opacity: 0.4}}>
<UserIcon isOwner={false} isUser={false}/>
<h5 style={{margin: 0}}>?</h5>
</Flex>
);
const UserIcon = ({isUser, isOwner}) => {
const icon = isOwner ? 'badge' : 'user';
const title = isOwner ? 'Game owner' : false;
const intent = isUser ? 'warning' : 'none';
return <Icon icon={icon} iconSize={50} intent={intent} title={title}/>;
};
export const RadialPlayerList = ({players, owner, currentPlayer}: RadialPlayerListProps) => {
const playerItems = players.map(player => <PlayerItem key={player.username}
player={player}
isOwner={player.username === owner}
isUser={player.username === currentPlayer.username}/>);
const tableImg = <img src={roundTable} alt='Round table' style={{width: 200, height: 200}}/>;
return <RadialList items={completeWithPlaceholders(playerItems.toArray())}
centerElement={tableImg}
diameter={350}
offsetDegrees={180}
itemWidth={120}
itemHeight={100}/>;
};
function completeWithPlaceholders(playerItems: Array<React.Node>): Array<React.Node> {
while (playerItems.length < 3) {
playerItems.push(<PlayerPlaceholder/>);
}
return playerItems;
}
|
