summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
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.css13
-rw-r--r--frontend/src/components/home/Home.jsx13
-rw-r--r--frontend/src/components/home/background-zeus-temple.jpg (renamed from frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg)bin571089 -> 571089 bytes
-rw-r--r--frontend/src/components/home/logo-7-wonders.png (renamed from frontend/src/scenes/SplashScreen/components/logo-7-wonders.png)bin301442 -> 301442 bytes
-rw-r--r--frontend/src/global-styles.css10
-rw-r--r--frontend/src/index.js1
-rw-r--r--frontend/src/scenes/SplashScreen/components/HomeLayout.js18
-rw-r--r--frontend/src/scenes/index.js6
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
index 5a28e933..5a28e933 100644
--- a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg
+++ b/frontend/src/components/home/background-zeus-temple.jpg
Binary files differ
diff --git a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png b/frontend/src/components/home/logo-7-wonders.png
index 96974d3e..96974d3e 100644
--- a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png
+++ b/frontend/src/components/home/logo-7-wonders.png
Binary files differ
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>
);
bgstack15