summaryrefslogtreecommitdiff
path: root/frontend/src/components/lobby/PlayerList.tsx
blob: bfc3a56ca69715bd5e661778200e0a66a0d242bb (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
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 PlayerListItemProps = {
  player: ApiPlayer,
  isOwner: boolean,
  isUser: boolean,
};

const PlayerListItem = ({player, isOwner, isUser}: PlayerListItemProps) => (
  <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>
);

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

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