3 files changed, 102 insertions, 0 deletions
diff --git a/frontend/src/containers/HomePage/actions.js b/frontend/src/containers/HomePage/actions.js
new file mode 100644
index 00000000..e06d6fa2
--- /dev/null
+++ b/frontend/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/frontend/src/containers/HomePage/index.js b/frontend/src/containers/HomePage/index.js
new file mode 100644
index 00000000..c8e33239
--- /dev/null
+++ b/frontend/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/frontend/src/containers/HomePage/saga.js b/frontend/src/containers/HomePage/saga.js
new file mode 100644
index 00000000..0fbe8a45
--- /dev/null
+++ b/frontend/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