Handle username choice

9 files changed, 102 insertions, 8 deletions

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..616f24af
--- /dev/null
+++ b/src/main/js/src/containers/HomePage/saga.js
@@ -0,0 +1,24 @@
+import { call, put, take } from 'redux-saga/effects'
+import { push } from 'react-router-redux'
+import { ENTER_GAME } from './actions'
+import { setUsername } from '../UserRepo/actions'
+
+function* initGameSession(socketConnection) {
+  const { username: playerName } = yield take(ENTER_GAME)
+  const { socket } = socketConnection
+
+  socket.send("/app/chooseName", JSON.stringify({
+    playerName
+  }), {})
+  // TODO: get response from server to continue
+  // TODO: handle case where username is taken
+
+  yield put(setUsername(playerName))
+  yield put(push('/lobby'))
+}
+
+function* homeSaga(socketConnection) {
+  yield call(initGameSession, socketConnection)
+}
+
+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..c850a900
--- /dev/null
+++ b/src/main/js/src/containers/UserRepo/actions.js
@@ -0,0 +1,6 @@
+export const SET_USERNAME = 'homePage/SET_USERNAME'
+
+export const setUsername = (username) => ({
+  type: SET_USERNAME,
+  username
+})
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..3d9f6e38
--- /dev/null
+++ b/src/main/js/src/containers/UserRepo/reducer.js
@@ -0,0 +1,14 @@
+import { SET_USERNAME } from './actions'
+import { fromJS } from 'immutable'
+const initialState = fromJS({
+  username: ''
+})
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SET_USERNAME:
+      return state.set('username', action.username)
+    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)
   }
 }