diff options
Diffstat (limited to 'frontend')
-rw-r--r-- | frontend/src/components/home/ChooseNameForm.jsx (renamed from frontend/src/scenes/SplashScreen/index.js) | 9 | ||||
-rw-r--r-- | frontend/src/components/home/Home.css | 13 | ||||
-rw-r--r-- | frontend/src/components/home/Home.jsx | 13 | ||||
-rw-r--r-- | frontend/src/components/home/background-zeus-temple.jpg (renamed from frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg) | bin | 571089 -> 571089 bytes | |||
-rw-r--r-- | frontend/src/components/home/logo-7-wonders.png (renamed from frontend/src/scenes/SplashScreen/components/logo-7-wonders.png) | bin | 301442 -> 301442 bytes | |||
-rw-r--r-- | frontend/src/global-styles.css | 10 | ||||
-rw-r--r-- | frontend/src/index.js | 1 | ||||
-rw-r--r-- | frontend/src/scenes/SplashScreen/components/HomeLayout.js | 18 | ||||
-rw-r--r-- | frontend/src/scenes/index.js | 6 |
9 files changed, 32 insertions, 38 deletions
diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/components/home/ChooseNameForm.jsx index 1eee4e1b..119fc851 100644 --- a/frontend/src/scenes/SplashScreen/index.js +++ b/frontend/src/components/home/ChooseNameForm.jsx @@ -3,13 +3,12 @@ import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { actions } from '../../redux/players'; -import { HomeLayout } from './components/HomeLayout'; -export type SplashScreenProps = { +export type ChooseNameFormPresenterProps = { chooseUsername: (username: string) => void, } -class SplashScreenPresenter extends Component<SplashScreenProps> { +class ChooseNameFormPresenter extends Component<ChooseNameFormPresenterProps> { _username = ''; play = e => { @@ -21,7 +20,6 @@ class SplashScreenPresenter extends Component<SplashScreenProps> { render() { return ( - <HomeLayout> <form onSubmit={this.play}> <InputGroup placeholder="Username" @@ -29,7 +27,6 @@ class SplashScreenPresenter extends Component<SplashScreenProps> { rightElement={this.renderSubmit()} /> </form> - </HomeLayout> ); } @@ -42,4 +39,4 @@ const mapDispatchToProps = { chooseUsername: actions.chooseUsername, }; -export const SplashScreen = connect(null, mapDispatchToProps)(SplashScreenPresenter); +export const ChooseNameForm = connect(null, mapDispatchToProps)(ChooseNameFormPresenter); diff --git a/frontend/src/components/home/Home.css b/frontend/src/components/home/Home.css new file mode 100644 index 00000000..bb89f058 --- /dev/null +++ b/frontend/src/components/home/Home.css @@ -0,0 +1,13 @@ +.homeRoot { + background: url('background-zeus-temple.jpg') center no-repeat; + background-size: cover; +} + +.fullscreen { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow: auto; +} diff --git a/frontend/src/components/home/Home.jsx b/frontend/src/components/home/Home.jsx new file mode 100644 index 00000000..91065ec7 --- /dev/null +++ b/frontend/src/components/home/Home.jsx @@ -0,0 +1,13 @@ +// @flow +import * as React from 'react'; +import { Flex } from 'reflexbox'; +import { ChooseNameForm } from './ChooseNameForm'; +import './Home.css' +import logo from './logo-7-wonders.png'; + +export const Home = () => ( + <Flex className='homeRoot fullscreen' column align='center' justify='center'> + <img src={logo} alt="Seven Wonders"/> + <ChooseNameForm/> + </Flex> +); diff --git a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg b/frontend/src/components/home/background-zeus-temple.jpg Binary files differindex 5a28e933..5a28e933 100644 --- a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg +++ b/frontend/src/components/home/background-zeus-temple.jpg diff --git a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png b/frontend/src/components/home/logo-7-wonders.png Binary files differindex 96974d3e..96974d3e 100644 --- a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png +++ b/frontend/src/components/home/logo-7-wonders.png diff --git a/frontend/src/global-styles.css b/frontend/src/global-styles.css index a158de59..e69de29b 100644 --- a/frontend/src/global-styles.css +++ b/frontend/src/global-styles.css @@ -1,10 +0,0 @@ -* { box-sizing: border-box; } - -body { - margin: 0; - padding: 0; - font-family: -apple-system, BlinkMacSystemFont, sans-serif; - line-height: 1.5; - color: #111; - background-color: #fff; -} diff --git a/frontend/src/index.js b/frontend/src/index.js index 8e82b96a..5b6e48a0 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -5,7 +5,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { ConnectedRouter } from 'react-router-redux'; -import './global-styles.css'; import { Application } from './scenes'; import { configureStore } from './store'; diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js deleted file mode 100644 index c9950f44..00000000 --- a/frontend/src/scenes/SplashScreen/components/HomeLayout.js +++ /dev/null @@ -1,18 +0,0 @@ -// @flow -import type { Node } from 'react'; -import React from 'react'; -import { ErrorToastContainer } from '../../../components/errors/errorToastContainer'; -import background from './background-zeus-temple.jpg'; -import logo from './logo-7-wonders.png'; - -export type HomeLayoutProps = { - children?: Node, -} - -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/index.js b/frontend/src/scenes/index.js index eb15e626..c708c9a9 100644 --- a/frontend/src/scenes/index.js +++ b/frontend/src/scenes/index.js @@ -2,13 +2,13 @@ import React from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; import { GameBrowser } from '../components/game-browser/GameBrowser'; import { Lobby } from './Lobby'; -import { SplashScreen } from './SplashScreen'; +import { Home } from '../components/home/Home'; export const Application = () => ( <Switch> - <Route path="/splash-screen" component={SplashScreen} /> <Route path="/games" component={GameBrowser} /> <Route path="/lobby" component={Lobby} /> - <Redirect from="*" to="/splash-screen" /> + <Route path="/" component={Home} /> + <Redirect to="/" /> </Switch> ); |