summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/components/gamesList.js17
-rw-r--r--frontend/src/containers/app.js61
-rw-r--r--frontend/src/containers/gameBrowser.js46
-rw-r--r--frontend/src/index.js11
-rw-r--r--frontend/src/layouts/LobbyLayout.js18
-rw-r--r--frontend/src/layouts/index.js1
6 files changed, 77 insertions, 77 deletions
diff --git a/frontend/src/components/gamesList.js b/frontend/src/components/gamesList.js
new file mode 100644
index 00000000..0519e7d6
--- /dev/null
+++ b/frontend/src/components/gamesList.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Flex } from 'reflexbox'
+import { Text, Space } from 'rebass'
+
+const GameBrowser = (props) => (
+ <div>
+ {props.games.valueSeq().map((game, index) => {
+ return (<Flex key={index}>
+ <Text>{game.get('name')}</Text>
+ <Space auto />
+ <a href="#">Join</a>
+ </Flex>)
+ })}
+ </div>
+)
+
+export default GameBrowser
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
deleted file mode 100644
index a8779b64..00000000
--- a/frontend/src/containers/app.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import {
- Banner,
- Heading,
- Space,
- InlineForm,
- Text
-} from 'rebass'
-import { Flex } from 'reflexbox'
-import GameBrowser from './gameBrowser'
-
-class App extends Component {
-
- createGame = (e) => {
- e.preventDefault()
- if (this._gameName !== undefined) {
- this.props.createGame(this._gameName)
- }
- }
-
- render() {
- return (
- <div>
- <Banner
- align="center"
- style={{minHeight: '30vh'}}
- backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
- >
- <Heading level={1}>Seven Wonders</Heading>
- </Banner>
- <Flex align="center" p={1}>
- <InlineForm
- buttonLabel="Create Game"
- label="Game name"
- name="game_name"
- onChange={(e) => this._gameName = e.target.value}
- onClick={this.createGame}
- >
- </InlineForm>
- <Space auto />
- <Text><b>Username:</b> {this.props.username}</Text>
- <Space x={1} />
- </Flex>
- <GameBrowser />
- </div>
- )
- }
-}
-
-const mapStateToProps = (state) => ({
- username: state.players.get('all').get(state.players.get('current')).get('username')
-})
-
-
-import { actions } from '../redux/games'
-const mapDispatchToProps = {
- createGame: actions.createGame
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/containers/gameBrowser.js b/frontend/src/containers/gameBrowser.js
index 9deb720b..bc3933fa 100644
--- a/frontend/src/containers/gameBrowser.js
+++ b/frontend/src/containers/gameBrowser.js
@@ -1,31 +1,53 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
+import {
+ Space,
+ InlineForm,
+ Text
+} from 'rebass'
import { Flex } from 'reflexbox'
-import { Text, Space } from 'rebass'
+import GamesList from '../components/gamesList'
-class GameBrowser extends Component {
+class App extends Component {
- listGames = (games) => {
- return games.valueSeq().map((game, index) => {
- return (<Flex key={index}>
- <Text>{game.get('name')}</Text>
- <Space auto />
- <a href="#">Join</a>
- </Flex>)
- })
+ createGame = (e) => {
+ e.preventDefault()
+ if (this._gameName !== undefined) {
+ this.props.createGame(this._gameName)
+ }
}
render() {
return (
<div>
- {this.listGames(this.props.games)}
+ <Flex align="center" p={1}>
+ <InlineForm
+ buttonLabel="Create Game"
+ label="Game name"
+ name="game_name"
+ onChange={(e) => this._gameName = e.target.value}
+ onClick={this.createGame}
+ >
+ </InlineForm>
+ <Space auto />
+ <Text><b>Username:</b> {this.props.username}</Text>
+ <Space x={1} />
+ </Flex>
+ <GamesList games={this.props.games} />
</div>
)
}
}
const mapStateToProps = (state) => ({
+ username: state.players.get('all').get(state.players.get('current')).get('displayName'),
games: state.games
})
-export default connect(mapStateToProps, {})(GameBrowser)
+
+import { actions } from '../redux/games'
+const mapDispatchToProps = {
+ createGame: actions.createGame
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/index.js b/frontend/src/index.js
index f06bb7b4..d5190d53 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,7 +2,7 @@ import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
-import { Router, Route } from 'react-router'
+import { Router, Route, IndexRoute } from 'react-router'
import { Provider } from 'react-redux'
import configureStore from './store'
@@ -11,15 +11,18 @@ const { store, history } = configureStore(initialState)
import './global-styles.css'
import HomePage from './containers/home'
-import GameBrowser from './containers/app'
+import { LobbyLayout } from './layouts'
+import GameBrowser from './containers/gameBrowser'
import Error404 from './components/errors/Error404'
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<div className="app">
- <Route path="/" component={HomePage} />
- <Route path="/games" component={GameBrowser} />
+ <Route path="/" component={LobbyLayout}>
+ <IndexRoute component={HomePage} />
+ <Route path="/games" component={GameBrowser} />
+ </Route>
<Route path="*" component={Error404} />
</div>
</Router>
diff --git a/frontend/src/layouts/LobbyLayout.js b/frontend/src/layouts/LobbyLayout.js
new file mode 100644
index 00000000..ac7c3264
--- /dev/null
+++ b/frontend/src/layouts/LobbyLayout.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import {
+ Banner,
+ Heading,
+} from 'rebass'
+
+export default (props) => (
+ <div>
+ <Banner
+ align="center"
+ style={{minHeight: '30vh'}}
+ backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
+ >
+ <Heading level={1}>Seven Wonders</Heading>
+ </Banner>
+ {props.children}
+ </div>
+)
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
new file mode 100644
index 00000000..7beb62b8
--- /dev/null
+++ b/frontend/src/layouts/index.js
@@ -0,0 +1 @@
+export { default as LobbyLayout } from './LobbyLayout'
bgstack15