Improve lobby's style

4 files changed, 36 insertions, 25 deletions

diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.jsx
index 08ce92e9..6363cff2 100644
--- a/frontend/src/components/game-browser/GameList.jsx
+++ b/frontend/src/components/game-browser/GameList.jsx
@@ -15,7 +15,7 @@ type GameListProps = {
 };
 
 const GameListPresenter = ({ games, joinGame }: GameListProps) => (
-        <table className='pt-html-table pt-interactive'>
+        <table className='pt-html-table'>
           <thead>
           <GameListHeaderRow />
           </thead>
diff --git a/frontend/src/components/lobby/Lobby.jsx b/frontend/src/components/lobby/Lobby.jsx
index ea865025..b4e323a8 100644
--- a/frontend/src/components/lobby/Lobby.jsx
+++ b/frontend/src/components/lobby/Lobby.jsx
@@ -3,33 +3,28 @@ import { Button } from '@blueprintjs/core';
 import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { PlayerList } from '../../components/lobby/PlayerList';
 import type { Game } from '../../models/games';
 import type { Player } from '../../models/players';
 import { actions, getCurrentGame } from '../../redux/games';
-import { getPlayers } from '../../redux/players';
+import { getCurrentPlayer, getPlayers } from '../../redux/players';
+import { PlayerList } from './PlayerList';
 
 export type LobbyProps = {
   currentGame: Game,
+  currentPlayer: Player,
   players: List<Player>,
   startGame: () => void,
 }
 
 class LobbyPresenter extends Component<LobbyProps> {
-  getTitle() {
-    if (this.props.currentGame) {
-      return this.props.currentGame.name + ' — Lobby';
-    } else {
-      return 'What are you doing here? You haven\'t joined a game yet!';
-    }
-  }
 
   render() {
+    const {currentGame, currentPlayer, players, startGame} = this.props;
     return (
       <div>
-        <h2>{this.getTitle()}</h2>
-        <PlayerList players={this.props.players} />
-        <Button onClick={this.props.startGame}>Start Game</Button>
+        <h2>{currentGame.name + ' — Lobby'}</h2>
+        <PlayerList players={players} owner={currentGame.owner} currentPlayer={currentPlayer}/>
+        <Button onClick={startGame}>Start Game</Button>
       </div>
     );
   }
@@ -40,6 +35,7 @@ const mapStateToProps = state => {
   console.info(game);
   return {
     currentGame: game,
+    currentPlayer: getCurrentPlayer(state),
     players: game ? getPlayers(state.get('players'), game.players) : new List(),
   };
 };
diff --git a/frontend/src/components/lobby/PlayerList.jsx b/frontend/src/components/lobby/PlayerList.jsx
index db3d4418..e0528c97 100644
--- a/frontend/src/components/lobby/PlayerList.jsx
+++ b/frontend/src/components/lobby/PlayerList.jsx
@@ -1,23 +1,36 @@
 //@flow
-import { Text } from '@blueprintjs/core';
+import { Icon, Text } from '@blueprintjs/core'
 import { List } from 'immutable';
-import React from 'react';
+import * as React from 'react';
 import { Flex } from 'reflexbox';
 import { Player } from '../../models/players';
 
 type PlayerListProps = {
-  players: List<Player>;
+  players: List<Player>,
+  owner: string,
+  currentPlayer: Player,
 };
 
-const PlayerItem = ({player}) => (
-  <Flex>
-    <Text>{player.displayName}</Text>
-    <Text>({player.username})</Text>
-  </Flex>
+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}: PlayerListProps) => (
-  <div>
-    {players.map(player => <PlayerItem key={player.username} player={player}/>)}
-  </div>
+export const PlayerList = ({players, owner, currentPlayer}: PlayerListProps) => (
+  <table className='pt-html-table'>
+    <tbody>
+      {players.map(player => <PlayerListItem key={player.username}
+                                             player={player}
+                                             isOwner={player.username === owner}
+                                             isUser={player.username === currentPlayer.username}/>)}
+    </tbody>
+  </table>
 );
diff --git a/frontend/src/models/games.js b/frontend/src/models/games.js
index dfa0591d..7a8dfbc7 100644
--- a/frontend/src/models/games.js
+++ b/frontend/src/models/games.js
@@ -38,6 +38,7 @@ export type GameState = 'LOBBY' | 'PLAYING';
 export type GameShape = {
   id: number,
   name: string | void,
+  owner: string,
   players: List<string>,
   settings: SettingsType,
   state: GameState,
@@ -49,6 +50,7 @@ export type GameNormalMapType = { [string]: GameShape };
 const GameRecord: GameType = Record({
   id: -1,
   name: null,
+  owner: 'anonymous',
   players: new List(),
   settings: new Settings(),
   state: 'LOBBY',