Improve game list's style

1 files changed, 42 insertions, 12 deletions

diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.jsx
index e3601d51..5ec2303b 100644
--- a/frontend/src/components/game-browser/GameList.jsx
+++ b/frontend/src/components/game-browser/GameList.jsx
@@ -1,11 +1,13 @@
 // @flow
-import { Button, Text } from '@blueprintjs/core';
+import { Button, Icon } from '@blueprintjs/core';
 import type { List } from 'immutable';
 import React from 'react';
 import { connect } from 'react-redux';
-import { Flex } from 'reflexbox';
 import type { Game } from '../../models/games';
 import { actions, getAllGames } from '../../redux/games';
+import './GameList.css';
+import { GameStatus } from './GameStatus';
+import { PlayerCount } from './PlayerCount';
 
 type GameListProps = {
   games: List<Game>,
@@ -13,18 +15,46 @@ type GameListProps = {
 };
 
 const GameListPresenter = ({ games, joinGame }: GameListProps) => (
-  <div>
-    {games.map((game: Game, index: number) => {
-      return (
-        <Flex key={game.get('displayName', index)}>
-          <Text>{game.name}</Text>
-          <Button onClick={() => joinGame(game.id)}>Join</Button>
-        </Flex>
-      );
-    })}
-  </div>
+        <table className='pt-html-table pt-interactive'>
+          <thead>
+          <GameListHeaderRow />
+          </thead>
+          <tbody>
+          {games.map((game: Game) => <GameListItemRow key={game.id} game={game} joinGame={joinGame}/>)}
+          </tbody>
+        </table>
 );
 
+const GameListHeaderRow = () => (
+  <tr>
+    <th>Name</th>
+    <th>Status</th>
+    <th>Nb Players</th>
+    <th>Join</th>
+  </tr>
+);
+
+const GameListItemRow = ({game, joinGame}) => (
+  <tr>
+    <td>{game.name}</td>
+    <td>
+      <GameStatus state={game.state} />
+    </td>
+    <td>
+      <PlayerCount nbPlayers={game.players.size} />
+    </td>
+    <td>
+      <JoinButton game={game} joinGame={joinGame}/>
+    </td>
+  </tr>
+);
+
+const JoinButton = ({game, joinGame}) => {
+  const disabled = game.state !== 'LOBBY';
+  const icon = <Icon icon='arrow-right' title={false} />;
+  return <Button minimal disabled={disabled} icon={icon} title='Join Game' onClick={() => joinGame(game.id)}/>;
+};
+
 const mapStateToProps = state => ({
   games: getAllGames(state.get('games')),
 });