From be86c9d23cdae888598e1f7de7812d7e0f1ca12c Mon Sep 17 00:00:00 2001 From: Victor Chabbert Date: Mon, 31 Jul 2017 18:44:01 +0200 Subject: Refactor routes to new structure --- frontend/src/api/model.js | 98 ++++++++++----------- frontend/src/api/sevenWondersApi.js | 8 +- frontend/src/components/errors/Error404.js | 2 +- frontend/src/index.js | 7 +- frontend/src/layouts/HomeLayout.js | 17 ---- frontend/src/layouts/background-zeus-temple.jpg | Bin 571089 -> 0 bytes frontend/src/layouts/logo-7-wonders.png | Bin 301442 -> 0 bytes frontend/src/routes.js | 49 ++++++----- frontend/src/scenes/Games/index.js | 65 ++++++++++++++ frontend/src/scenes/Lobby/index.js | 42 +++++++++ .../scenes/SplashScreen/components/HomeLayout.js | 17 ++++ .../components/background-zeus-temple.jpg | Bin 0 -> 571089 bytes .../SplashScreen/components/logo-7-wonders.png | Bin 0 -> 301442 bytes frontend/src/scenes/SplashScreen/index.js | 42 +++++++++ frontend/src/scenes/index.js | 17 ++++ 15 files changed, 271 insertions(+), 93 deletions(-) delete mode 100644 frontend/src/layouts/HomeLayout.js delete mode 100644 frontend/src/layouts/background-zeus-temple.jpg delete mode 100644 frontend/src/layouts/logo-7-wonders.png create mode 100644 frontend/src/scenes/Games/index.js create mode 100644 frontend/src/scenes/Lobby/index.js create mode 100644 frontend/src/scenes/SplashScreen/components/HomeLayout.js create mode 100644 frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg create mode 100644 frontend/src/scenes/SplashScreen/components/logo-7-wonders.png create mode 100644 frontend/src/scenes/SplashScreen/index.js create mode 100644 frontend/src/scenes/index.js (limited to 'frontend/src') diff --git a/frontend/src/api/model.js b/frontend/src/api/model.js index 2f9fad37..5d1f92c6 100644 --- a/frontend/src/api/model.js +++ b/frontend/src/api/model.js @@ -1,79 +1,79 @@ // @flow export type ApiError = { - message: string; - details: ApiErrorDetail[]; -} + message: string, + details: ApiErrorDetail[] +}; export type ApiErrorDetail = { - message: string; -} + message: string +}; export type ApiGameState = "LOBBY" | "PLAYING"; export type ApiLobby = { - id: number; - name: string; - owner: ApiPlayer; - players: ApiPlayer[]; - settings: ApiSettings; - state: ApiGameState; -} + id: number, + name: string, + owner: ApiPlayer, + players: ApiPlayer[], + settings: ApiSettings, + state: ApiGameState +}; export type ApiWonderSidePickMethod = "EACH_RANDOM" | "ALL_A" | "ALL_B" | "SAME_RANDOM_FOR_ALL"; export type ApiSettings = { - randomSeedForTests: number; - timeLimitInSeconds: number; - wonderSidePickMethod: ApiWonderSidePickMethod; - initialGold: number; - discardedCardGold: number; - defaultTradingCost: number; - pointsPer3Gold: number; - lostPointsPerDefeat: number; - wonPointsPerVictoryPerAge: Map; -} + randomSeedForTests: number, + timeLimitInSeconds: number, + wonderSidePickMethod: ApiWonderSidePickMethod, + initialGold: number, + discardedCardGold: number, + defaultTradingCost: number, + pointsPer3Gold: number, + lostPointsPerDefeat: number, + wonPointsPerVictoryPerAge: Map +}; export type ApiPlayer = { - username: string; - displayName: string; - index: number; - ready: boolean; -} + username: string, + displayName: string, + index: number, + ready: boolean +}; -export type ApiTable = {} +export type ApiTable = {}; -export type ApiAction = {} +export type ApiAction = {}; -export type ApiHandCard = {} +export type ApiHandCard = {}; -export type ApiCard = {} +export type ApiCard = {}; -export type ApiPreparedCard = {} +export type ApiPreparedCard = {}; export type ApiPlayerTurnInfo = { - playerIndex: number; - table: ApiTable; - currentAge: number; - action: ApiAction; - hand: ApiHandCard[]; - neighbourGuildCards: ApiCard[]; - message: string; -} + playerIndex: number, + table: ApiTable, + currentAge: number, + action: ApiAction, + hand: ApiHandCard[], + neighbourGuildCards: ApiCard[], + message: string +}; export type ApiMoveType = "PLAY" | "PLAY_FREE" | "UPGRADE_WONDER" | "DISCARD" | "COPY_GUILD"; export type ApiProvider = "LEFT_NEIGHBOUR" | "RIGHT_NEIGHBOUR"; export type ApiResourceType = "WOOD" | "STONE" | "ORE" | "CLAY" | "GLASS" | "PAPYRUS" | "LOOM"; export type ApiResources = { - quantities: Map; -} + quantities: Map +}; export type ApiBoughtResources = { - provider: ApiProvider; - resources: ApiResources; -} + provider: ApiProvider, + resources: ApiResources +}; export type ApiPlayerMove = { - type: ApiMoveType; - cardName: string; - boughtResources: ApiBoughtResources[]; -} + type: ApiMoveType, + cardName: string, + boughtResources: ApiBoughtResources[] +}; diff --git a/frontend/src/api/sevenWondersApi.js b/frontend/src/api/sevenWondersApi.js index 058408eb..534045c8 100644 --- a/frontend/src/api/sevenWondersApi.js +++ b/frontend/src/api/sevenWondersApi.js @@ -1,6 +1,12 @@ // @flow import type { - ApiError, ApiLobby, ApiPlayer, ApiPlayerMove, ApiPlayerTurnInfo, ApiPreparedCard, ApiTable, + ApiError, + ApiLobby, + ApiPlayer, + ApiPlayerMove, + ApiPlayerTurnInfo, + ApiPreparedCard, + ApiTable, } from './model'; import type { JsonStompClient, SubscribeFn } from './websocket'; import { createJsonStompClient } from './websocket'; diff --git a/frontend/src/components/errors/Error404.js b/frontend/src/components/errors/Error404.js index 32ab8e8d..9a5e005e 100644 --- a/frontend/src/components/errors/Error404.js +++ b/frontend/src/components/errors/Error404.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; const Error404 = () => (
diff --git a/frontend/src/index.js b/frontend/src/index.js index 2dc2442c..5441edc0 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -3,21 +3,18 @@ import 'babel-polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; import { ConnectedRouter } from 'react-router-redux'; -import { Route, Switch } from 'react-router'; import { Provider } from 'react-redux'; import './global-styles.css'; import configureStore from './store'; -import HomePage from './containers/home'; +import Routes from './scenes'; const initialState = {}; const { store, history } = configureStore(initialState); ReactDOM.render( - - - + , document.getElementById('root') diff --git a/frontend/src/layouts/HomeLayout.js b/frontend/src/layouts/HomeLayout.js deleted file mode 100644 index f139febf..00000000 --- a/frontend/src/layouts/HomeLayout.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow -import type { Children } from 'react'; -import React from 'react'; -import { Banner } from 'rebass'; -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 }) => ( -
- - Seven Wonders - {children} - - -
-); diff --git a/frontend/src/layouts/background-zeus-temple.jpg b/frontend/src/layouts/background-zeus-temple.jpg deleted file mode 100644 index 5a28e933..00000000 Binary files a/frontend/src/layouts/background-zeus-temple.jpg and /dev/null differ diff --git a/frontend/src/layouts/logo-7-wonders.png b/frontend/src/layouts/logo-7-wonders.png deleted file mode 100644 index 96974d3e..00000000 Binary files a/frontend/src/layouts/logo-7-wonders.png and /dev/null differ diff --git a/frontend/src/routes.js b/frontend/src/routes.js index b87977ef..60efed8d 100644 --- a/frontend/src/routes.js +++ b/frontend/src/routes.js @@ -1,23 +1,32 @@ // @flow -import { HomeLayout, LobbyLayout } from './layouts'; -import GameBrowser from './containers/gameBrowser'; -import HomePage from './containers/home'; -import Lobby from './containers/lobby'; +import React from 'react'; + +import Application from './scenes'; import Error404 from './components/errors/Error404'; -export const routes = [ - { - path: '/', - component: HomeLayout, - indexRoute: { component: HomePage }, - }, - { - path: '/', - component: LobbyLayout, - childRoutes: [{ path: '/games', component: GameBrowser }, { path: '/lobby/*', component: Lobby }], - }, - { - path: '*', - component: Error404, - }, -]; +import { Route, Switch } from 'react-router'; + +const Routes = () => ( + + + + +); + +export default Routes; +// export const routes = [ +// { +// path: '/', +// component: HomeLayout, +// indexRoute: { component: HomePage }, +// }, +// { +// path: '/', +// component: LobbyLayout, +// childRoutes: [{ path: '/games', component: GameBrowser }, { path: '/lobby/*', component: Lobby }], +// }, +// { +// path: '*', +// component: Error404, +// }, +// ]; diff --git a/frontend/src/scenes/Games/index.js b/frontend/src/scenes/Games/index.js new file mode 100644 index 00000000..a2031030 --- /dev/null +++ b/frontend/src/scenes/Games/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 { Games } from '../../models/games'; +import type { Player } from '../../models/players'; +import { actions, getAllGames } from '../../redux/games'; +import { getCurrentPlayer } from '../../redux/players'; + +class GameBrowser extends Component { + props: { + currentPlayer: Player, + games: List, + 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 ( +
+ + (this._gameName = e.target.value)} + onClick={this.createGame} + /> + + + Username: + {' '} + {this.props.currentPlayer && this.props.currentPlayer.displayName} + + + + +
+ ); + } +} + +const mapStateToProps = state => ({ + currentPlayer: getCurrentPlayer(state.get('players')), + games: getAllGames(state.get('games')), +}); + +const mapDispatchToProps = { + createGame: actions.requestCreateGame, + joinGame: actions.requestJoinGame, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(GameBrowser); diff --git a/frontend/src/scenes/Lobby/index.js b/frontend/src/scenes/Lobby/index.js new file mode 100644 index 00000000..1b5a11ff --- /dev/null +++ b/frontend/src/scenes/Lobby/index.js @@ -0,0 +1,42 @@ +import { List } from 'immutable'; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { Button } from 'rebass'; +import PlayerList from '../../components/playerList'; +import { actions, getCurrentGame } from '../../redux/games'; +import { getPlayers } from '../../redux/players'; + +class Lobby extends Component { + getTitle() { + if (this.props.currentGame) { + return this.props.currentGame.name + ' — Lobby'; + } else { + return 'What are you doing here? You haven\'t joined a game yet!'; + } + } + + render() { + return ( +
+

{this.getTitle()}

+ + +
+ ); + } +} + +const mapStateToProps = state => { + const game = getCurrentGame(state.get('games')); + console.info(game); + return { + currentGame: game, + players: game ? getPlayers(state.get('players'), game.players) : new List(), + }; +}; + +const mapDispatchToProps = { + startGame: actions.requestStartGame, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Lobby); diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js new file mode 100644 index 00000000..86666eb2 --- /dev/null +++ b/frontend/src/scenes/SplashScreen/components/HomeLayout.js @@ -0,0 +1,17 @@ +// @flow +import type { Children } from 'react'; +import React from 'react'; +import { Banner } from 'rebass'; +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 }) => ( +
+ + Seven Wonders + {children} + + +
+); diff --git a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg b/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg new file mode 100644 index 00000000..5a28e933 Binary files /dev/null and b/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg differ diff --git a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png b/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png new file mode 100644 index 00000000..96974d3e Binary files /dev/null and b/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png differ diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/scenes/SplashScreen/index.js new file mode 100644 index 00000000..0732b1b3 --- /dev/null +++ b/frontend/src/scenes/SplashScreen/index.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { Button, Container, Input } from 'rebass'; +import { actions } from '../../redux/players'; + +import HomeLayout from './components/HomeLayout'; + +class SplashScreen extends Component { + play = e => { + e.preventDefault(); + if (this._username !== undefined) { + this.props.chooseUsername(this._username); + } + }; + + render() { + return ( + + + (this._username = e.target.value)} + /> + + + + ); + } +} + +const mapStateToProps = state => ({}); + +const mapDispatchToProps = { + chooseUsername: actions.chooseUsername, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(SplashScreen); diff --git a/frontend/src/scenes/index.js b/frontend/src/scenes/index.js new file mode 100644 index 00000000..83554d48 --- /dev/null +++ b/frontend/src/scenes/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Route, Redirect, Switch } from 'react-router-dom'; + +import SplashScreen from './SplashScreen'; +import Games from './Games'; +import Lobby from './Lobby'; + +const Application = () => ( + + + + + + +); + +export default Application; -- cgit