diff options
Diffstat (limited to 'frontend/src')
23 files changed, 107 insertions, 56 deletions
diff --git a/frontend/src/components/errors/Error404.js b/frontend/src/components/errors/Error404.js index 9a5e005e..07046632 100644 --- a/frontend/src/components/errors/Error404.js +++ b/frontend/src/components/errors/Error404.js @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -const Error404 = () => ( +export const Error404 = () => ( <div> <h1>No Match</h1> <Link to="/"> @@ -9,4 +9,3 @@ const Error404 = () => ( </Link> </div> ); -export default Error404; diff --git a/frontend/src/components/errors/errorToastContainer.js b/frontend/src/components/errors/errorToastContainer.js index 65711073..d8da6af6 100644 --- a/frontend/src/components/errors/errorToastContainer.js +++ b/frontend/src/components/errors/errorToastContainer.js @@ -2,8 +2,6 @@ import React from 'react'; import ReduxToastr from 'react-redux-toastr'; import './react-redux-toastr.min.css'; -const ErrorToastContainer = props => ( +export const ErrorToastContainer = props => ( <ReduxToastr timeOut={4000} preventDuplicates position="bottom-left" progressBar /> ); - -export default ErrorToastContainer; diff --git a/frontend/src/components/gameList.js b/frontend/src/components/gameList.js index 0a478b96..0b4091a7 100644 --- a/frontend/src/components/gameList.js +++ b/frontend/src/components/gameList.js @@ -5,7 +5,7 @@ import { Button, Space, Text } from 'rebass'; import { Flex } from 'reflexbox'; import type { Game } from '../models/games'; -const GameList = ({ games, joinGame }: { games: List<Game>, joinGame: (gameId: string) => void }) => ( +export const GameList = ({ games, joinGame }: { games: List<Game>, joinGame: (gameId: string) => void }) => ( <div> {games.map((game: Game, index: number) => { return ( @@ -18,5 +18,3 @@ const GameList = ({ games, joinGame }: { games: List<Game>, joinGame: (gameId: s })} </div> ); - -export default GameList; diff --git a/frontend/src/components/modals/username.js b/frontend/src/components/modals/username.js index 19b7eeb0..f6127667 100644 --- a/frontend/src/components/modals/username.js +++ b/frontend/src/components/modals/username.js @@ -1,7 +1,7 @@ import React from 'react'; import { Button, Close, Input, Overlay, Panel, PanelFooter, PanelHeader, Space } from 'rebass'; -const Modal = ({ modalOpen, toggleModal }) => ( +export const Modal = ({ modalOpen, toggleModal }) => ( <Overlay open={modalOpen} onDismiss={toggleModal('usernameModal')}> <Panel theme="info"> <PanelHeader> @@ -17,5 +17,3 @@ const Modal = ({ modalOpen, toggleModal }) => ( </Panel> </Overlay> ); - -export default Modal; diff --git a/frontend/src/components/playerList.js b/frontend/src/components/playerList.js index 4ddbe056..cc247668 100644 --- a/frontend/src/components/playerList.js +++ b/frontend/src/components/playerList.js @@ -2,7 +2,7 @@ import React from 'react'; import { Text } from 'rebass'; import { Flex } from 'reflexbox'; -const PlayerList = ({ players }) => ( +export const PlayerList = ({ players }) => ( <div> {players.map(player => { return ( @@ -14,5 +14,3 @@ const PlayerList = ({ players }) => ( })} </div> ); - -export default PlayerList; diff --git a/frontend/src/index.js b/frontend/src/index.js index 8c52b440..f8841abc 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -7,8 +7,9 @@ import { ConnectedRouter } from 'react-router-redux'; import './global-styles.css'; import '@blueprintjs/core/dist/blueprint.css'; -import configureStore from './store'; +import { configureStore } from './store'; import { Application } from './scenes'; + const initialState = {}; const { store, history } = configureStore(initialState); diff --git a/frontend/src/layouts/LobbyLayout.js b/frontend/src/layouts/LobbyLayout.js index 389c4096..85316bad 100644 --- a/frontend/src/layouts/LobbyLayout.js +++ b/frontend/src/layouts/LobbyLayout.js @@ -1,10 +1,10 @@ import type { Children } from 'react'; import React from 'react'; import { Banner } from 'rebass'; -import ErrorToastContainer from '../components/errors/errorToastContainer'; +import { ErrorToastContainer } from '../components/errors/errorToastContainer'; import logo from './logo-7-wonders.png'; -export default ({ children }: { children: Children }) => ( +export const LobbyLayout = ({ children }: { children: Children }) => ( <div> <Banner align="center" diff --git a/frontend/src/models/games.js b/frontend/src/models/games.js index dd660d45..6420e06d 100644 --- a/frontend/src/models/games.js +++ b/frontend/src/models/games.js @@ -64,7 +64,7 @@ const GamesRecord: GamesType = Record({ all: new Map(), current: null, }); -export default class GamesState extends GamesRecord { +export class GamesState extends GamesRecord { addGame(g: GameShape) { const game: Game = new Game(g); return this.mergeDeepIn(['all', game.id], game); diff --git a/frontend/src/models/players.js b/frontend/src/models/players.js index 8fb17128..2af6b0f7 100644 --- a/frontend/src/models/players.js +++ b/frontend/src/models/players.js @@ -29,7 +29,7 @@ const PlayersRecord: PlayersType = Record({ current: '', }); // $FlowFixMe -export default class PlayerState extends PlayersRecord { +export class PlayerState extends PlayersRecord { addPlayer(p: PlayerShape) { const player: Player = new Player(p); const playerMap = Map({ [player.username]: player }); diff --git a/frontend/src/reducers.js b/frontend/src/reducers.js index 076d269e..97c5259e 100644 --- a/frontend/src/reducers.js +++ b/frontend/src/reducers.js @@ -2,10 +2,10 @@ import { reducer as toastrReducer } from 'react-redux-toastr'; import { routerReducer } from 'react-router-redux'; import { combineReducers } from 'redux-immutable'; -import gamesReducer from './redux/games'; -import playersReducer from './redux/players'; +import { gamesReducer } from './redux/games'; +import { playersReducer } from './redux/players'; -export default function createReducer() { +export function createReducer() { return combineReducers({ games: gamesReducer, players: playersReducer, diff --git a/frontend/src/redux/games.js b/frontend/src/redux/games.js index e89bb842..22b0d6bc 100644 --- a/frontend/src/redux/games.js +++ b/frontend/src/redux/games.js @@ -2,7 +2,7 @@ import type { List, Map } from 'immutable'; import { fromJS } from 'immutable'; import type { Game, GameMapType, GameNormalMapType, GameShape } from '../models/games'; -import GamesState from '../models/games'; +import { GamesState } from '../models/games'; export const types = { UPDATE_GAMES: 'GAMES/UPDATE_GAMES', @@ -29,7 +29,7 @@ export const actions = { enterGame: () => ({ type: types.ENTER_GAME }), }; -export default (state: GamesState = new GamesState(), action: Actions) => { +export const gamesReducer = (state: GamesState = new GamesState(), action: Actions) => { switch (action.type) { case types.UPDATE_GAMES: return state.addGames(action.games); diff --git a/frontend/src/redux/players.js b/frontend/src/redux/players.js index 85b579f3..de68ae13 100644 --- a/frontend/src/redux/players.js +++ b/frontend/src/redux/players.js @@ -1,4 +1,4 @@ -import PlayerState, { Player } from '../models/players'; +import { Player, PlayerState } from '../models/players'; export const types = { REQUEST_CHOOSE_USERNAME: 'USER/REQUEST_CHOOSE_USERNAME', @@ -21,7 +21,7 @@ export const actions = { }), }; -export default (state = new PlayerState(), action) => { +export const playersReducer = (state = new PlayerState(), action) => { switch (action.type) { case types.SET_CURRENT_PLAYER: return state.addPlayer(action.player); diff --git a/frontend/src/sagas.js b/frontend/src/sagas.js index 4a93ffb4..457dac04 100644 --- a/frontend/src/sagas.js +++ b/frontend/src/sagas.js @@ -2,12 +2,12 @@ import type { History } from 'react-router'; import { call, fork } from 'redux-saga/effects'; import { connectToGame, SevenWondersSession } from './api/sevenWondersApi'; -import errorHandlingSaga from './sagas/errors'; -import homeSaga from './sagas/home'; -import gameBrowserSaga from './sagas/gameBrowser'; -import lobbySaga from './sagas/lobby'; +import { errorHandlingSaga } from './sagas/errors'; +import { homeSaga } from './sagas/home'; +import { gameBrowserSaga } from './sagas/gameBrowser'; +import { lobbySaga } from './sagas/lobby'; -export default function* rootSaga(history: History): * { +export function* rootSaga(history: History): * { let sevenWondersSession: SevenWondersSession | void; try { sevenWondersSession = yield call(connectToGame); diff --git a/frontend/src/sagas/errors.js b/frontend/src/sagas/errors.js index b6ccb91d..6598da6c 100644 --- a/frontend/src/sagas/errors.js +++ b/frontend/src/sagas/errors.js @@ -6,7 +6,7 @@ import { apply, cancelled, take } from 'redux-saga/effects'; import type { ApiError } from '../api/model'; import type { SevenWondersSession } from '../api/sevenWondersApi'; -export default function* errorHandlingSaga(session: SevenWondersSession): * { +export function* errorHandlingSaga(session: SevenWondersSession): * { const errorChannel: Channel = yield eventChannel(session.watchErrors()); try { while (true) { diff --git a/frontend/src/sagas/gameBrowser.js b/frontend/src/sagas/gameBrowser.js index 81b2a848..f6aa77bd 100644 --- a/frontend/src/sagas/gameBrowser.js +++ b/frontend/src/sagas/gameBrowser.js @@ -54,7 +54,7 @@ function* joinGame(session: SevenWondersSession): * { } } -function* gameBrowserSaga(session: SevenWondersSession): * { +export function* gameBrowserSaga(session: SevenWondersSession): * { yield all([ call(watchGames, session), call(watchLobbyJoined, session), @@ -62,5 +62,3 @@ function* gameBrowserSaga(session: SevenWondersSession): * { call(joinGame, session), ]); } - -export default gameBrowserSaga; diff --git a/frontend/src/sagas/home.js b/frontend/src/sagas/home.js index 89271706..db273d28 100644 --- a/frontend/src/sagas/home.js +++ b/frontend/src/sagas/home.js @@ -25,8 +25,6 @@ function* validateUsername(session: SevenWondersSession): * { } } -function* homeSaga(session: SevenWondersSession): * { +export function* homeSaga(session: SevenWondersSession): * { yield all([call(sendUsername, session), call(validateUsername, session)]); } - -export default homeSaga; diff --git a/frontend/src/sagas/lobby.js b/frontend/src/sagas/lobby.js index 3f23a125..2deb5035 100644 --- a/frontend/src/sagas/lobby.js +++ b/frontend/src/sagas/lobby.js @@ -48,8 +48,6 @@ function* startGame(session: SevenWondersSession): * { } } -function* lobbySaga(session: SevenWondersSession): * { +export function* lobbySaga(session: SevenWondersSession): * { yield all([call(watchLobbyUpdates, session), call(watchGameStart, session), call(startGame, session)]); } - -export default lobbySaga; diff --git a/frontend/src/scenes/GameBrowser/index.js b/frontend/src/scenes/GameBrowser/index.js new file mode 100644 index 00000000..20a835d1 --- /dev/null +++ b/frontend/src/scenes/GameBrowser/index.js @@ -0,0 +1,65 @@ +// @flow +import type { List } from 'immutable'; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { InlineForm, Space, Text } from 'rebass'; +import { Flex } from 'reflexbox'; +import { GameList } from '../../components/gameList'; +import type { Game } from '../../models/games'; +import type { Player } from '../../models/players'; +import { actions, getAllGames } from '../../redux/games'; +import { getCurrentPlayer } from '../../redux/players'; + +class GameBrowserPresenter extends Component { + props: { + currentPlayer: Player, + games: List<Game>, + createGame: (gameName: string) => void, + joinGame: (gameId: string) => void + }; + + _gameName: string | void = undefined; + + createGame = (e: SyntheticEvent): void => { + e.preventDefault(); + if (this._gameName !== undefined) { + this.props.createGame(this._gameName); + } + }; + + render() { + return ( + <div> + <Flex align="center" p={1}> + <InlineForm + buttonLabel="Create Game" + label="Game name" + name="game_name" + onChange={(e: SyntheticInputEvent) => (this._gameName = e.target.value)} + onClick={this.createGame} + /> + <Space auto /> + <Text> + <b>Username:</b> + {' '} + {this.props.currentPlayer && this.props.currentPlayer.displayName} + </Text> + <Space x={1} /> + </Flex> + <GameList games={this.props.games} joinGame={this.props.joinGame} /> + </div> + ); + } +} + +const mapStateToProps = state => ({ + currentPlayer: getCurrentPlayer(state.get('players')), + games: getAllGames(state.get('games')), +}); + +const mapDispatchToProps = { + createGame: actions.requestCreateGame, + joinGame: actions.requestJoinGame, +}; + +export const GameBrowser = connect(mapStateToProps, mapDispatchToProps)(GameBrowserPresenter); diff --git a/frontend/src/scenes/Lobby/index.js b/frontend/src/scenes/Lobby/index.js index 1b5a11ff..57ad5c7f 100644 --- a/frontend/src/scenes/Lobby/index.js +++ b/frontend/src/scenes/Lobby/index.js @@ -2,11 +2,11 @@ import { List } from 'immutable'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Button } from 'rebass'; -import PlayerList from '../../components/playerList'; +import { PlayerList } from '../../components/playerList'; import { actions, getCurrentGame } from '../../redux/games'; import { getPlayers } from '../../redux/players'; -class Lobby extends Component { +class LobbyPresenter extends Component { getTitle() { if (this.props.currentGame) { return this.props.currentGame.name + ' — Lobby'; @@ -39,4 +39,4 @@ const mapDispatchToProps = { startGame: actions.requestStartGame, }; -export default connect(mapStateToProps, mapDispatchToProps)(Lobby); +export const Lobby = connect(mapStateToProps, mapDispatchToProps)(LobbyPresenter); diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js index 86666eb2..2a3fd856 100644 --- a/frontend/src/scenes/SplashScreen/components/HomeLayout.js +++ b/frontend/src/scenes/SplashScreen/components/HomeLayout.js @@ -2,11 +2,11 @@ import type { Children } from 'react'; import React from 'react'; import { Banner } from 'rebass'; -import ErrorToastContainer from '../../../components/errors/errorToastContainer'; +import { ErrorToastContainer } from '../../../components/errors/errorToastContainer'; import background from './background-zeus-temple.jpg'; import logo from './logo-7-wonders.png'; -export default ({ children }: { children: Children }) => ( +export const HomeLayout = ({ children }: { children: Children }) => ( <div> <Banner align="center" backgroundImage={background}> <img src={logo} alt="Seven Wonders" /> diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/scenes/SplashScreen/index.js index feff8b1e..dca8bc49 100644 --- a/frontend/src/scenes/SplashScreen/index.js +++ b/frontend/src/scenes/SplashScreen/index.js @@ -5,9 +5,9 @@ import { Container } from 'rebass'; import { actions } from '../../redux/players'; import { InputGroup, Button, Classes, Intent } from '@blueprintjs/core'; -import HomeLayout from './components/HomeLayout'; +import { HomeLayout } from './components/HomeLayout'; -class SplashScreen extends Component { +class SplashScreenPresenter extends Component { _username = ''; play = e => { @@ -42,4 +42,4 @@ const mapDispatchToProps = { chooseUsername: actions.chooseUsername, }; -export default connect(null, mapDispatchToProps)(SplashScreen); +export const SplashScreen = connect(null, mapDispatchToProps)(SplashScreenPresenter); diff --git a/frontend/src/scenes/index.js b/frontend/src/scenes/index.js index ffc2c856..0229e850 100644 --- a/frontend/src/scenes/index.js +++ b/frontend/src/scenes/index.js @@ -1,14 +1,14 @@ import React from 'react'; import { Route, Redirect, Switch } from 'react-router-dom'; -import SplashScreen from './SplashScreen'; -import Games from './Games'; -import Lobby from './Lobby'; +import { SplashScreen } from './SplashScreen'; +import { GameBrowser } from './GameBrowser'; +import { Lobby } from './Lobby'; export const Application = () => ( <Switch> <Route path="/splash-screen" component={SplashScreen} /> - <Route path="/games" component={Games} /> + <Route path="/games" component={GameBrowser} /> <Route path="/lobby" component={Lobby} /> <Redirect from="*" to="/splash-screen" /> </Switch> diff --git a/frontend/src/store.js b/frontend/src/store.js index 37bc0822..3170d194 100644 --- a/frontend/src/store.js +++ b/frontend/src/store.js @@ -4,10 +4,10 @@ import createHistory from 'history/createBrowserHistory'; import { routerMiddleware } from 'react-router-redux'; import { fromJS } from 'immutable'; import createSagaMiddleware from 'redux-saga'; -import createReducer from './reducers'; -import rootSaga from './sagas'; +import { createReducer } from './reducers'; +import { rootSaga } from './sagas'; -export default function configureStore(initialState: Object = {}) { +export function configureStore(initialState: Object = {}) { const sagaMiddleware = createSagaMiddleware(); const history = createHistory(); |