Use radial list for lobby

3 files changed, 59 insertions, 2 deletions

diff --git a/frontend/src/components/lobby/Lobby.jsx b/frontend/src/components/lobby/Lobby.jsx
index b4e323a8..82c00b20 100644
--- a/frontend/src/components/lobby/Lobby.jsx
+++ b/frontend/src/components/lobby/Lobby.jsx
@@ -7,7 +7,7 @@ import type { Game } from '../../models/games';
 import type { Player } from '../../models/players';
 import { actions, getCurrentGame } from '../../redux/games';
 import { getCurrentPlayer, getPlayers } from '../../redux/players';
-import { PlayerList } from './PlayerList';
+import { RadialPlayerList } from './RadialPlayerList';
 
 export type LobbyProps = {
   currentGame: Game,
@@ -23,7 +23,7 @@ class LobbyPresenter extends Component<LobbyProps> {
     return (
       <div>
         <h2>{currentGame.name + ' — Lobby'}</h2>
-        <PlayerList players={players} owner={currentGame.owner} currentPlayer={currentPlayer}/>
+        <RadialPlayerList players={players} owner={currentGame.owner} currentPlayer={currentPlayer}/>
         <Button onClick={startGame}>Start Game</Button>
       </div>
     );
diff --git a/frontend/src/components/lobby/RadialPlayerList.jsx b/frontend/src/components/lobby/RadialPlayerList.jsx
new file mode 100644
index 00000000..c3dd988e
--- /dev/null
+++ b/frontend/src/components/lobby/RadialPlayerList.jsx
@@ -0,0 +1,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;
+}
+
diff --git a/frontend/src/components/lobby/round-table.png b/frontend/src/components/lobby/round-table.png
new file mode 100644
index 00000000..f277376d
--- /dev/null
+++ b/frontend/src/components/lobby/round-table.png