10 files changed, 144 insertions, 8 deletions
diff --git a/src/main/js/src/containers/GameBrowser/saga.js b/src/main/js/src/containers/GameBrowser/saga.js
index 29115a2b..4cd3d207 100644
--- a/src/main/js/src/containers/GameBrowser/saga.js
+++ b/src/main/js/src/containers/GameBrowser/saga.js
@@ -1,6 +1,7 @@
 import { call, put, take } from 'redux-saga/effects'
 import { eventChannel } from 'redux-saga'
 import { fromJS } from 'immutable'
+import { push } from 'react-router-redux'
 
 import { NEW_GAME, JOIN_GAME, CREATE_GAME } from './constants'
 import { newGame, joinGame } from './actions'
@@ -63,6 +64,8 @@ export function* createGame(socketConnection) {
 }
 
 export function* gameBrowserSaga(socketConnection) {
+  yield put(push('/lobby'))
+
   yield [
     call(watchGames, socketConnection),
     call(createGame, socketConnection)
diff --git a/src/main/js/src/containers/HomePage/actions.js b/src/main/js/src/containers/HomePage/actions.js
new file mode 100644
index 00000000..e06d6fa2
--- /dev/null
+++ b/src/main/js/src/containers/HomePage/actions.js
@@ -0,0 +1,6 @@
+export const ENTER_GAME = 'homePage/ENTER_GAME'
+
+export const enterGame = (username) => ({
+  type: ENTER_GAME,
+  username
+})
diff --git a/src/main/js/src/containers/HomePage/index.js b/src/main/js/src/containers/HomePage/index.js
new file mode 100644
index 00000000..c8e33239
--- /dev/null
+++ b/src/main/js/src/containers/HomePage/index.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Heading, InlineForm } from 'rebass'
+
+class HomePage extends Component {
+
+  play = (e) => {
+    e.preventDefault()
+    if (this._username !== undefined) {
+      this.props.enterGame(this._username)
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Heading>Enter your username to start playing!</Heading>
+        <InlineForm
+          buttonLabel="Play now!"
+          label="Username"
+          name="username"
+          onChange={(e) => this._username = e.target.value}
+          onClick={this.play}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({
+
+})
+
+import { enterGame } from './actions'
+const mapDispatchToProps = {
+  enterGame
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomePage)
diff --git a/src/main/js/src/containers/HomePage/saga.js b/src/main/js/src/containers/HomePage/saga.js
new file mode 100644
index 00000000..0fbe8a45
--- /dev/null
+++ b/src/main/js/src/containers/HomePage/saga.js
@@ -0,0 +1,57 @@
+import { call, put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+import { ENTER_GAME } from './actions'
+import { setUsername } from '../UserRepo/actions'
+
+import gameBrowserSaga from '../GameBrowser/saga'
+
+function* sendUsername(socketConnection) {
+  const { username: playerName } = yield take(ENTER_GAME)
+  const { socket } = socketConnection
+
+  socket.send("/app/chooseName", JSON.stringify({
+    playerName
+  }), {})
+}
+
+function createSocketChannel(socket) {
+  return eventChannel(emit => {
+    const receiveUsername = socket.subscribe('/user/queue/nameChoice', event => {
+      emit(JSON.parse(event.body))
+    })
+
+    const unsubscribe = () => {
+      receiveUsername.unsubscribe()
+    }
+
+    return unsubscribe
+  })
+}
+
+function* validateUsername(socketConnection) {
+  const { socket } = socketConnection
+  const socketChannel = createSocketChannel(socket)
+
+  const response = yield take(socketChannel)
+
+  if (response.error) {
+    return false
+  }
+
+  yield put(setUsername(response.userName, response.displayName, response.index))
+  yield call(gameBrowserSaga, socketConnection)
+  return true
+}
+
+function* homeSaga(socketConnection) {
+  let validated = false
+  do {
+    const [, usernameValid] = yield [
+      call(sendUsername, socketConnection),
+      call(validateUsername, socketConnection)
+    ]
+    validated = usernameValid
+  } while (!validated)
+}
+
+export default homeSaga
diff --git a/src/main/js/src/containers/UserRepo/actions.js b/src/main/js/src/containers/UserRepo/actions.js
new file mode 100644
index 00000000..dc06035b
--- /dev/null
+++ b/src/main/js/src/containers/UserRepo/actions.js
@@ -0,0 +1,8 @@
+export const SET_USERNAME = 'homePage/SET_USERNAME'
+
+export const setUsername = (userName, displayName, index) => ({
+  type: SET_USERNAME,
+  userName,
+  index,
+  displayName
+})
diff --git a/src/main/js/src/containers/UserRepo/reducer.js b/src/main/js/src/containers/UserRepo/reducer.js
new file mode 100644
index 00000000..82960a58
--- /dev/null
+++ b/src/main/js/src/containers/UserRepo/reducer.js
@@ -0,0 +1,18 @@
+import { SET_USERNAME } from './actions'
+import { fromJS } from 'immutable'
+const initialState = fromJS({
+  username: '',
+  displayName: '',
+  id: null
+})
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SET_USERNAME:
+      return state.set('username', action.userName)
+        .set('displayName', action.displayName)
+        .set('id', action.index)
+    default:
+      return state
+  }
+}
diff --git a/src/main/js/src/index.js b/src/main/js/src/index.js
index 78c63ddf..3edce222 100644
--- a/src/main/js/src/index.js
+++ b/src/main/js/src/index.js
@@ -10,14 +10,14 @@ const initialState = {}
 const { store, history } = configureStore(initialState)
 
 import './global-styles.css'
-import App from './containers/App'
+import HomePage from './containers/HomePage'
 import Error404 from './components/errors/Error404'
 
 ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>
       <div className="app">
-        <Route path="/" component={App}/>
+        <Route path="/" component={HomePage}/>
         <Route path="*" component={Error404}/>
       </div>
     </Router>
diff --git a/src/main/js/src/reducers.js b/src/main/js/src/reducers.js
index 42887838..d9db899b 100644
--- a/src/main/js/src/reducers.js
+++ b/src/main/js/src/reducers.js
@@ -1,10 +1,13 @@
 import { combineReducers } from 'redux'
 import { routerReducer } from 'react-router-redux'
+
 import gamesReducer from './containers/GameBrowser/reducer'
+import userReducer from './containers/UserRepo/reducer'
 
 export default function createReducer() {
   return combineReducers({
     games: gamesReducer,
-    routing: routerReducer
+    routing: routerReducer,
+    user: userReducer,
   })
 }
diff --git a/src/main/js/src/sagas.js b/src/main/js/src/sagas.js
index 66531ead..58ef73ee 100644
--- a/src/main/js/src/sagas.js
+++ b/src/main/js/src/sagas.js
@@ -3,7 +3,7 @@ import { fork, call } from 'redux-saga/effects'
 import createWsConnection from './utils/createWebSocketConnection'
 
 import errorSaga from './containers/App/saga'
-import newGamesSaga from './containers/GameBrowser/saga'
+import homeSaga from './containers/HomePage/saga'
 
 function* wsAwareSagas() {
   let wsConnection
@@ -15,7 +15,7 @@ function* wsAwareSagas() {
   }
 
   yield fork(errorSaga, wsConnection)
-  yield fork(newGamesSaga, wsConnection)
+  yield fork(homeSaga, wsConnection)
 }
 
 export default function* rootSaga() {
diff --git a/src/main/js/src/store.js b/src/main/js/src/store.js
index 8368b508..e9ac401e 100644
--- a/src/main/js/src/store.js
+++ b/src/main/js/src/store.js
@@ -1,6 +1,6 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import { browserHistory} from 'react-router'
-import { syncHistoryWithStore } from 'react-router-redux'
+import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux'
 
 import createReducer from './reducers'
 import createSagaMiddleware from 'redux-saga'
@@ -8,9 +8,11 @@ import rootSaga from './sagas'
 
 export default function configureStore(initialState = {}) {
   const sagaMiddleware = createSagaMiddleware()
+  const history = browserHistory
 
   const middlewares = [
-    sagaMiddleware
+    sagaMiddleware,
+    routerMiddleware(history)
   ]
 
   const enhancers = [
@@ -33,6 +35,6 @@ export default function configureStore(initialState = {}) {
 
   return {
     store,
-    history: syncHistoryWithStore(browserHistory, store)
+    history: syncHistoryWithStore(history, store)
   }
 }