3 files changed, 36 insertions, 17 deletions
diff --git a/frontend/src/components/gameList.js b/frontend/src/components/gameList.js
new file mode 100644
index 00000000..c8720b26
--- /dev/null
+++ b/frontend/src/components/gameList.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Flex } from 'reflexbox'
+import { Text, Space, Button } from 'rebass'
+
+const GameList = (props) => (
+  <div>
+    {props.games.map((game, index) => {
+
+      const joinGame = () => props.joinGame(game.get('id'))
+
+      return (<Flex key={index}>
+        <Text>{game.get('name')}</Text>
+        <Space auto />
+        <Button onClick={joinGame}>Join</Button>
+      </Flex>)
+    })}
+  </div>
+)
+
+export default GameList
diff --git a/frontend/src/components/gamesList.js b/frontend/src/components/gamesList.js
deleted file mode 100644
index 0519e7d6..00000000
--- a/frontend/src/components/gamesList.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { Flex } from 'reflexbox'
-import { Text, Space } from 'rebass'
-
-const GameBrowser = (props) => (
-  <div>
-    {props.games.valueSeq().map((game, index) => {
-      return (<Flex key={index}>
-        <Text>{game.get('name')}</Text>
-        <Space auto />
-        <a href="#">Join</a>
-      </Flex>)
-    })}
-  </div>
-)
-
-export default GameBrowser
diff --git a/frontend/src/components/playerList.js b/frontend/src/components/playerList.js
new file mode 100644
index 00000000..30384d53
--- /dev/null
+++ b/frontend/src/components/playerList.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Flex } from 'reflexbox'
+import { Text } from 'rebass'
+
+const PlayerList = (props) => (
+  <div>
+    {props.players.map((player, index) => {
+      return (<Flex key={index}>
+        <Text>{player.get('displayName')}</Text>
+        <Text>({player.get('username')})</Text>
+      </Flex>)
+    })}
+  </div>
+)
+
+export default PlayerList