4 files changed, 56 insertions, 18 deletions

diff --git a/src/main/js/src/containers/App/index.js b/src/main/js/src/containers/App/index.js
index 5d9bba3c..3b7e8fbf 100644
--- a/src/main/js/src/containers/App/index.js
+++ b/src/main/js/src/containers/App/index.js
@@ -1,9 +1,11 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import {
   Banner,
   Heading,
   Space,
   Button,
+  InlineForm,
   Text
 } from 'rebass'
 import { Flex } from 'reflexbox'
@@ -12,7 +14,7 @@ import GameBrowser from '../GameBrowser'
 
 class App extends Component {
   state = {
-    usernameModal: false
+    usernameModal: false,
   }
 
   componentDidMount() {
@@ -26,6 +28,11 @@ class App extends Component {
     }
   }
 
+  createGame = (e) => {
+    e.preventDefault()
+    this.props.createGame(this._gameName)
+  }
+
   render() {
     return (
       <div>
@@ -37,9 +44,15 @@ class App extends Component {
           <Heading level={1}>Seven Wonders</Heading>
         </Banner>
         <Flex align="center" p={1}>
-          <Button
-            theme="success"
-            children="Create Game"/>
+          <InlineForm
+            buttonLabel="Create Game"
+            label="Game name"
+            name="game_name"
+            onChange={(e) => this._gameName = e.target.value}
+            onClick={this.createGame}
+          >
+
+          </InlineForm>
           <Space auto />
           <Text><b>Username:</b> Cesar92</Text>
           <Space x={1} />
@@ -54,13 +67,15 @@ class App extends Component {
   }
 }
 
-// const mapStateToProps = (state) => ({
-//
-// })
-//
-// import { initializeWs } from "./actions";
-// const mapDispatchToProps = {
-//   initializeWs
-// }
+const mapStateToProps = (state) => ({
+
+})
+
+import { initializeWs } from "./actions";
+import { createGame } from '../GameBrowser/actions'
+const mapDispatchToProps = {
+  initializeWs,
+  createGame
+}
 
-export default App
+export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/src/main/js/src/containers/GameBrowser/actions.js b/src/main/js/src/containers/GameBrowser/actions.js
index b5bba965..376973b4 100644
--- a/src/main/js/src/containers/GameBrowser/actions.js
+++ b/src/main/js/src/containers/GameBrowser/actions.js
@@ -1,4 +1,4 @@
-import { NEW_GAME, JOIN_GAME } from './constants'
+import { NEW_GAME, JOIN_GAME, CREATE_GAME } from './constants'
 
 export const newGame = (game) => ({
   type: NEW_GAME,
@@ -9,3 +9,8 @@ export const joinGame = (id) => ({
   type: JOIN_GAME,
   id
 })
+
+export const createGame = (name) => ({
+  type: CREATE_GAME,
+  name
+})
diff --git a/src/main/js/src/containers/GameBrowser/constants.js b/src/main/js/src/containers/GameBrowser/constants.js
index c178dc3f..36f701b7 100644
--- a/src/main/js/src/containers/GameBrowser/constants.js
+++ b/src/main/js/src/containers/GameBrowser/constants.js
@@ -1,2 +1,3 @@
 export const NEW_GAME = 'gameBrowser/NEW_GAME'
 export const JOIN_GAME = 'gameBrowser/JOIN_GAME'
+export const CREATE_GAME = 'gameBrowser/CREATE_GAME'
diff --git a/src/main/js/src/containers/GameBrowser/saga.js b/src/main/js/src/containers/GameBrowser/saga.js
index 66d26e38..8f947683 100644
--- a/src/main/js/src/containers/GameBrowser/saga.js
+++ b/src/main/js/src/containers/GameBrowser/saga.js
@@ -1,7 +1,7 @@
-import { put, take } from 'redux-saga/effects'
+import { call, put, take } from 'redux-saga/effects'
 import { eventChannel } from 'redux-saga'
 
-import { NEW_GAME, JOIN_GAME } from './constants'
+import { NEW_GAME, JOIN_GAME, CREATE_GAME } from './constants'
 import { newGame, joinGame } from './actions'
 
 function createSocketChannel(socket) {
@@ -29,7 +29,7 @@ function createSocketChannel(socket) {
   })
 }
 
-export function* watchOnNewGames(socketConnection) {
+export function* watchGames(socketConnection) {
 
   const { socket } = socketConnection
   const socketChannel = createSocketChannel(socket)
@@ -50,4 +50,21 @@ export function* watchOnNewGames(socketConnection) {
   }
 }
 
-export default watchOnNewGames
+export function* createGame(socketConnection) {
+  const { name } = yield take(CREATE_GAME)
+  const { socket } = socketConnection
+  console.log(socket)
+  socket.send("/app/lobby/create-game", JSON.stringify({
+    'gameName': name,
+    'playerName': 'Cesar92'
+  }), {})
+}
+
+export function* gameBrowserSaga(socketConnection) {
+  yield [
+    call(watchGames, socketConnection),
+    call(createGame, socketConnection)
+  ]
+}
+
+export default gameBrowserSaga