summaryrefslogtreecommitdiff
path: root/frontend/src/components/lobby/PlayerList.jsx
blob: 80212a3edd87cf25b7faaa6f9375f262e037a8ca (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
//@flow
import { Classes, Icon } from '@blueprintjs/core'
import { List } from 'immutable';
import * as React from 'react';
import { Flex } from 'reflexbox';
import { ApiPlayer } from '../../api/model';

type PlayerListProps = {
  players: List<ApiPlayer>,
  owner: string,
  currentPlayer: ApiPlayer,
};

const PlayerListItem = ({player, isOwner, isUser}) => (
  <tr>
    <td>
      <Flex align='center'>
        {isOwner && <Icon icon='badge' title='Game owner'/>}
        {isUser && <Icon icon='user' title='This is you'/>}
      </Flex>
    </td>
    <td>{player.displayName}</td>
    <td>{player.username}</td>
  </tr>
);

export const PlayerList = ({players, owner, currentPlayer}: PlayerListProps) => (
  <table className={Classes.HTML_TABLE}>
    <tbody>
      {players.map(player => <PlayerListItem key={player.username}
                                             player={player}
                                             isOwner={player.username === owner}
                                             isUser={player.username === currentPlayer.username}/>)}
    </tbody>
  </table>
);
bgstack15