summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/components/gameList.js3
-rw-r--r--frontend/src/components/playerList.js11
-rw-r--r--frontend/src/global-styles.css4
-rw-r--r--frontend/src/scenes/GameBrowser/index.js19
-rw-r--r--frontend/src/scenes/Lobby/index.js3
-rw-r--r--frontend/src/scenes/SplashScreen/components/HomeLayout.js13
-rw-r--r--frontend/src/scenes/SplashScreen/index.js17
7 files changed, 34 insertions, 36 deletions
diff --git a/frontend/src/components/gameList.js b/frontend/src/components/gameList.js
index 0b4091a7..b8567130 100644
--- a/frontend/src/components/gameList.js
+++ b/frontend/src/components/gameList.js
@@ -1,7 +1,7 @@
// @flow
+import { Button, Text } from '@blueprintjs/core';
import type { List } from 'immutable';
import React from 'react';
-import { Button, Space, Text } from 'rebass';
import { Flex } from 'reflexbox';
import type { Game } from '../models/games';
@@ -11,7 +11,6 @@ export const GameList = ({ games, joinGame }: { games: List<Game>, joinGame: (ga
return (
<Flex key={game.get('displayName', index)}>
<Text>{game.name}</Text>
- <Space auto />
<Button onClick={() => joinGame(game.id)}>Join</Button>
</Flex>
);
diff --git a/frontend/src/components/playerList.js b/frontend/src/components/playerList.js
index cc247668..bbdbc83b 100644
--- a/frontend/src/components/playerList.js
+++ b/frontend/src/components/playerList.js
@@ -1,8 +1,15 @@
+//@flow
+import { Text } from '@blueprintjs/core';
+import { List } from 'immutable';
import React from 'react';
-import { Text } from 'rebass';
import { Flex } from 'reflexbox';
+import { Player } from '../models/players';
-export const PlayerList = ({ players }) => (
+export type PlayerListProps = {
+ players: List<Player>;
+};
+
+export const PlayerList = ({ players }: PlayerListProps) => (
<div>
{players.map(player => {
return (
diff --git a/frontend/src/global-styles.css b/frontend/src/global-styles.css
index b55284c7..a158de59 100644
--- a/frontend/src/global-styles.css
+++ b/frontend/src/global-styles.css
@@ -8,7 +8,3 @@ body {
color: #111;
background-color: #fff;
}
-
-.Button:hover {
- box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.125);
-} \ No newline at end of file
diff --git a/frontend/src/scenes/GameBrowser/index.js b/frontend/src/scenes/GameBrowser/index.js
index 7bb8b59d..5a94e290 100644
--- a/frontend/src/scenes/GameBrowser/index.js
+++ b/frontend/src/scenes/GameBrowser/index.js
@@ -1,8 +1,8 @@
// @flow
+import { Button, Classes, InputGroup, Intent, Text } from '@blueprintjs/core';
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';
@@ -38,20 +38,17 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
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}
+ <InputGroup
+ placeholder="Game name"
+ name="game_name"
+ onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)}
+ rightElement={<CreateGameButton 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>
@@ -59,6 +56,10 @@ class GameBrowserPresenter extends Component<GameBrowserProps> {
}
}
+const CreateGameButton = ({onClick}) => (
+ <Button className={Classes.MINIMAL} onClick={onClick} intent={Intent.PRIMARY}>Create Game</Button>
+);
+
const mapStateToProps = state => ({
currentPlayer: getCurrentPlayer(state.get('players')),
games: getAllGames(state.get('games')),
diff --git a/frontend/src/scenes/Lobby/index.js b/frontend/src/scenes/Lobby/index.js
index ad39d09e..0a427805 100644
--- a/frontend/src/scenes/Lobby/index.js
+++ b/frontend/src/scenes/Lobby/index.js
@@ -1,7 +1,8 @@
+//@flow
+import { Button } from '@blueprintjs/core';
import { List } from 'immutable';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import { Button } from 'rebass';
import { PlayerList } from '../../components/playerList';
import type { Game } from '../../models/games';
import type { Player } from '../../models/players';
diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
index 08029d45..c9950f44 100644
--- a/frontend/src/scenes/SplashScreen/components/HomeLayout.js
+++ b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
@@ -1,7 +1,6 @@
// @flow
import type { Node } 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';
@@ -10,12 +9,10 @@ export type HomeLayoutProps = {
children?: Node,
}
-export const HomeLayout = ({ children }: HomeLayoutProps) => (
- <div>
- <Banner align="center" backgroundImage={background}>
- <img src={logo} alt="Seven Wonders" />
- {children}
- </Banner>
- <ErrorToastContainer />
+export const HomeLayout = ({children}: HomeLayoutProps) => (
+ <div style={{backgroundImage: `url(${background})`}}>
+ <img src={logo} alt="Seven Wonders"/>
+ {children}
+ <ErrorToastContainer/>
</div>
);
diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/scenes/SplashScreen/index.js
index 745d8ee7..5d9af862 100644
--- a/frontend/src/scenes/SplashScreen/index.js
+++ b/frontend/src/scenes/SplashScreen/index.js
@@ -2,7 +2,6 @@
import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import { Container } from 'rebass';
import { actions } from '../../redux/players';
import { HomeLayout } from './components/HomeLayout';
@@ -23,15 +22,13 @@ class SplashScreenPresenter extends Component<SplashScreenProps> {
render() {
return (
<HomeLayout>
- <Container>
- <form onSubmit={this.play}>
- <InputGroup
- placeholder="Username"
- onChange={e => (this._username = e.target.value)}
- rightElement={this.renderSubmit()}
- />
- </form>
- </Container>
+ <form onSubmit={this.play}>
+ <InputGroup
+ placeholder="Username"
+ onChange={e => (this._username = e.target.value)}
+ rightElement={this.renderSubmit()}
+ />
+ </form>
</HomeLayout>
);
}
bgstack15