summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/containers/app.js32
-rw-r--r--frontend/src/index.js6
-rw-r--r--frontend/src/redux/game.js4
-rw-r--r--frontend/src/redux/user.js2
-rw-r--r--frontend/src/sagas.js4
-rw-r--r--frontend/src/sagas/gameBrowser.js66
-rw-r--r--frontend/src/sagas/lobby.js74
-rw-r--r--frontend/src/sagas/usernameChoice.js2
8 files changed, 84 insertions, 106 deletions
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index d2245152..adfc557f 100644
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@@ -4,29 +4,13 @@ import {
Banner,
Heading,
Space,
- Button,
InlineForm,
Text
} from 'rebass'
import { Flex } from 'reflexbox'
-import Modal from '../../components/modals/username'
import GameBrowser from './gameBrowser'
class App extends Component {
- state = {
- usernameModal: false,
- }
-
- componentDidMount() {
-
- }
-
- toggleModal = (key) => {
- return (e) => {
- const val = !this.state[key]
- this.setState({ [key]: val })
- }
- }
createGame = (e) => {
e.preventDefault()
@@ -53,31 +37,25 @@ class App extends Component {
onChange={(e) => this._gameName = e.target.value}
onClick={this.createGame}
>
-
</InlineForm>
<Space auto />
- <Text><b>Username:</b> Cesar92</Text>
+ <Text><b>Username:</b> {this.props.username}</Text>
<Space x={1} />
- <Button
- onClick={this.toggleModal('usernameModal')}
- children="Change"/>
</Flex>
<GameBrowser />
- <Modal toggleModal={this.toggleModal} modalOpen={this.state.usernameModal} />
</div>
)
}
}
const mapStateToProps = (state) => ({
-
+ username: state.user.get('displayName')
})
-import { initializeWs } from "./actions";
-import { createGame } from '../GameBrowser/actions'
+
+import { actions } from '../redux/game'
const mapDispatchToProps = {
- initializeWs,
- createGame
+ createGame: actions.createGame
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 7622cd52..f06bb7b4 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -11,14 +11,16 @@ const { store, history } = configureStore(initialState)
import './global-styles.css'
import HomePage from './containers/home'
+import GameBrowser from './containers/app'
import Error404 from './components/errors/Error404'
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<div className="app">
- <Route path="/" component={HomePage}/>
- <Route path="*" component={Error404}/>
+ <Route path="/" component={HomePage} />
+ <Route path="/games" component={GameBrowser} />
+ <Route path="*" component={Error404} />
</div>
</Router>
</Provider>,
diff --git a/frontend/src/redux/game.js b/frontend/src/redux/game.js
index 64373958..a19e155e 100644
--- a/frontend/src/redux/game.js
+++ b/frontend/src/redux/game.js
@@ -1,14 +1,14 @@
import { Map } from 'immutable'
export const types = {
- NEW_GAME: 'GAME/NEW_GAME',
+ CREATE_OR_UPDATE_GAMES: 'GAME/CREATE_OR_UPDATE_GAMES',
ENTER_GAME: 'GAME/ENTER_GAME',
JOIN_GAME: 'GAME/JOIN_GAME',
CREATE_GAME: 'GAME/CREATE_GAME',
}
export const actions = {
- newGame: (game) => ({ type: types.NEW_GAME, game }),
+ createOrUpdateGame: (game) => ({ type: types.CREATE_OR_UPDATE_GAMES, game }),
enterGame: (username) => ({ type: types.ENTER_GAME, username }),
joinGame: (id) => ({ type: types.JOIN_GAME, id }),
createGame: (name) => ({ type: types.CREATE_GAME, name }),
diff --git a/frontend/src/redux/user.js b/frontend/src/redux/user.js
index 5926ed59..9046cc97 100644
--- a/frontend/src/redux/user.js
+++ b/frontend/src/redux/user.js
@@ -27,7 +27,7 @@ export default (state = initialState, action) => {
case types.SET_USERNAME:
return state.set('username', action.username)
.set('displayName', action.displayName)
- .set('id', action.index)
+ .set('index', action.index)
default:
return state
}
diff --git a/frontend/src/sagas.js b/frontend/src/sagas.js
index e43e91c2..7c356e1d 100644
--- a/frontend/src/sagas.js
+++ b/frontend/src/sagas.js
@@ -4,11 +4,15 @@ import { call } from 'redux-saga/effects'
import createWsConnection from './utils/createWebSocketConnection'
import usernameChoiceSaga from './sagas/usernameChoice'
+import gameBrowserSaga from './sagas/gameBrowser'
let wsConnection
const routes = {
*'/'() {
yield usernameChoiceSaga(wsConnection)
+ },
+ *'/games'() {
+ yield gameBrowserSaga(wsConnection)
}
}
diff --git a/frontend/src/sagas/gameBrowser.js b/frontend/src/sagas/gameBrowser.js
new file mode 100644
index 00000000..19d52df9
--- /dev/null
+++ b/frontend/src/sagas/gameBrowser.js
@@ -0,0 +1,66 @@
+import { call, put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+import { fromJS } from 'immutable'
+import { push } from 'react-router-redux'
+
+import { actions, types } from '../redux/game'
+
+function gameBrowserChannel(socket) {
+ return eventChannel(emit => {
+
+ const makeHandler = type => event => {
+ const response = fromJS(JSON.parse(event.body))
+ emit({ type, response })
+ }
+
+ const newGame = socket.subscribe('/topic/games', makeHandler(types.CREATE_OR_UPDATE_GAMES))
+ const joinGame = socket.subscribe('/user/queue/lobby/joined', makeHandler(types.JOIN_GAME))
+
+ const unsubscribe = () => {
+ newGame.unsubscribe()
+ joinGame.unsubscribe()
+ }
+
+ return unsubscribe
+ })
+}
+
+export function* watchGames({ socket }) {
+ const socketChannel = gameBrowserChannel(socket)
+
+ try {
+ while (true) {
+ const { type, response } = yield take(socketChannel)
+
+ switch (type) {
+ case types.CREATE_OR_UPDATE_GAMES:
+ yield put(actions.createOrUpdateGame(response))
+ break;
+ case types.JOIN_GAME:
+ yield put(actions.joinGame(response))
+ socketChannel.close();
+ yield put(push(`/lobby/${response.id}`))
+ break;
+ default:
+ console.error('Unknown type')
+ }
+ }
+ } finally {
+ console.info('gameBrowserChannel closed')
+ }
+}
+
+export function* createGame({ socket }) {
+ const { name } = yield take(types.CREATE_GAME)
+
+ socket.send("/app/lobby/create", JSON.stringify({ gameName: name }), {})
+}
+
+export function* gameBrowserSaga(socketConnection) {
+ yield [
+ call(watchGames, socketConnection),
+ call(createGame, socketConnection)
+ ]
+}
+
+export default gameBrowserSaga
diff --git a/frontend/src/sagas/lobby.js b/frontend/src/sagas/lobby.js
deleted file mode 100644
index 144d523a..00000000
--- a/frontend/src/sagas/lobby.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { call, put, take } from 'redux-saga/effects'
-import { eventChannel } from 'redux-saga'
-import { fromJS } from 'immutable'
-import { push } from 'react-router-redux'
-
-import { actions, types } from '../../redux/game'
-
-function createSocketChannel(socket) {
- return eventChannel(emit => {
- const makeHandler = (type) => (event) => {
- const response = fromJS(JSON.parse(event.body))
-
- emit({
- type,
- response
- })
- }
-
- const newGameHandler = makeHandler(types.NEW_GAME)
- const joinGameHandler = makeHandler(types.JOIN_GAME)
-
- const newGame = socket.subscribe('/topic/games', newGameHandler)
- const joinGame = socket.subscribe('/user/queue/join-game', joinGameHandler)
-
- const unsubscribe = () => {
- newGame.unsubscribe()
- joinGame.unsubscribe()
- }
-
- return unsubscribe
- })
-}
-
-export function* watchGames(socketConnection) {
-
- const { socket } = socketConnection
- const socketChannel = createSocketChannel(socket)
-
- while (true) {
- const { type, response } = yield take(socketChannel)
-
- switch (type) {
- case types.NEW_GAME:
- yield put(actions.newGame(response))
- break;
- case types.JOIN_GAME:
- yield put(actions.joinGame(response))
- break;
- default:
- console.error('Unknown type')
- }
- }
-}
-
-export function* createGame(socketConnection) {
- const { name } = yield take(types.CREATE_GAME)
- const { socket } = socketConnection
-
- socket.send("/app/lobby/create-game", JSON.stringify({
- 'gameName': name,
- 'playerName': 'Cesar92'
- }), {})
-}
-
-export function* gameBrowserSaga(socketConnection) {
- yield put(push('/lobby'))
-
- yield [
- call(watchGames, socketConnection),
- call(createGame, socketConnection)
- ]
-}
-
-export default gameBrowserSaga
diff --git a/frontend/src/sagas/usernameChoice.js b/frontend/src/sagas/usernameChoice.js
index 60a1a091..d0d0cdea 100644
--- a/frontend/src/sagas/usernameChoice.js
+++ b/frontend/src/sagas/usernameChoice.js
@@ -1,5 +1,6 @@
import { call, take, put } from 'redux-saga/effects'
import { eventChannel } from 'redux-saga'
+import { push } from 'react-router-redux'
import { actions, types } from '../redux/user'
@@ -21,6 +22,7 @@ function *usernameValidation({ socket }) {
const user = yield take(usernameChannel)
yield put(actions.setUsername(user.username, user.displayName, user.index))
usernameChannel.close()
+ yield put(push('/games'))
}
function *sendUsername({ socket }) {
bgstack15