From c2eda5c0f25850d1c64ed238458e2bd696d06cc3 Mon Sep 17 00:00:00 2001
From: Joffrey BION <joffrey.bion@gmail.com>
Date: Sat, 9 Jun 2018 18:13:47 +0200
Subject: Fix home screen style

---
 frontend/src/components/home/ChooseNameForm.jsx    |  42 +++++++++++++++++++
 frontend/src/components/home/Home.css              |  13 ++++++
 frontend/src/components/home/Home.jsx              |  13 ++++++
 .../src/components/home/background-zeus-temple.jpg | Bin 0 -> 571089 bytes
 frontend/src/components/home/logo-7-wonders.png    | Bin 0 -> 301442 bytes
 frontend/src/global-styles.css                     |  10 -----
 frontend/src/index.js                              |   1 -
 .../scenes/SplashScreen/components/HomeLayout.js   |  18 ---------
 .../components/background-zeus-temple.jpg          | Bin 571089 -> 0 bytes
 .../SplashScreen/components/logo-7-wonders.png     | Bin 301442 -> 0 bytes
 frontend/src/scenes/SplashScreen/index.js          |  45 ---------------------
 frontend/src/scenes/index.js                       |   6 +--
 12 files changed, 71 insertions(+), 77 deletions(-)
 create mode 100644 frontend/src/components/home/ChooseNameForm.jsx
 create mode 100644 frontend/src/components/home/Home.css
 create mode 100644 frontend/src/components/home/Home.jsx
 create mode 100644 frontend/src/components/home/background-zeus-temple.jpg
 create mode 100644 frontend/src/components/home/logo-7-wonders.png
 delete mode 100644 frontend/src/scenes/SplashScreen/components/HomeLayout.js
 delete mode 100644 frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg
 delete mode 100644 frontend/src/scenes/SplashScreen/components/logo-7-wonders.png
 delete mode 100644 frontend/src/scenes/SplashScreen/index.js

diff --git a/frontend/src/components/home/ChooseNameForm.jsx b/frontend/src/components/home/ChooseNameForm.jsx
new file mode 100644
index 00000000..119fc851
--- /dev/null
+++ b/frontend/src/components/home/ChooseNameForm.jsx
@@ -0,0 +1,42 @@
+// @flow
+import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { actions } from '../../redux/players';
+
+export type ChooseNameFormPresenterProps = {
+  chooseUsername: (username: string) => void,
+}
+
+class ChooseNameFormPresenter extends Component<ChooseNameFormPresenterProps> {
+  _username = '';
+
+  play = e => {
+    e.preventDefault();
+    if (this._username !== undefined) {
+      this.props.chooseUsername(this._username);
+    }
+  };
+
+  render() {
+    return (
+        <form onSubmit={this.play}>
+          <InputGroup
+            placeholder="Username"
+            onChange={e => (this._username = e.target.value)}
+            rightElement={this.renderSubmit()}
+          />
+        </form>
+    );
+  }
+
+  renderSubmit = () => (
+    <Button className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} rightIcon="arrow-right" />
+  );
+}
+
+const mapDispatchToProps = {
+  chooseUsername: actions.chooseUsername,
+};
+
+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/components/home/background-zeus-temple.jpg b/frontend/src/components/home/background-zeus-temple.jpg
new file mode 100644
index 00000000..5a28e933
Binary files /dev/null and b/frontend/src/components/home/background-zeus-temple.jpg differ
diff --git a/frontend/src/components/home/logo-7-wonders.png b/frontend/src/components/home/logo-7-wonders.png
new file mode 100644
index 00000000..96974d3e
Binary files /dev/null and b/frontend/src/components/home/logo-7-wonders.png 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/SplashScreen/components/background-zeus-temple.jpg b/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg
deleted file mode 100644
index 5a28e933..00000000
Binary files a/frontend/src/scenes/SplashScreen/components/background-zeus-temple.jpg and /dev/null differ
diff --git a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png b/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png
deleted file mode 100644
index 96974d3e..00000000
Binary files a/frontend/src/scenes/SplashScreen/components/logo-7-wonders.png and /dev/null differ
diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/scenes/SplashScreen/index.js
deleted file mode 100644
index 1eee4e1b..00000000
--- a/frontend/src/scenes/SplashScreen/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// @flow
-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 = {
-  chooseUsername: (username: string) => void,
-}
-
-class SplashScreenPresenter extends Component<SplashScreenProps> {
-  _username = '';
-
-  play = e => {
-    e.preventDefault();
-    if (this._username !== undefined) {
-      this.props.chooseUsername(this._username);
-    }
-  };
-
-  render() {
-    return (
-      <HomeLayout>
-        <form onSubmit={this.play}>
-          <InputGroup
-            placeholder="Username"
-            onChange={e => (this._username = e.target.value)}
-            rightElement={this.renderSubmit()}
-          />
-        </form>
-      </HomeLayout>
-    );
-  }
-
-  renderSubmit = () => (
-    <Button className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} rightIcon="arrow-right" />
-  );
-}
-
-const mapDispatchToProps = {
-  chooseUsername: actions.chooseUsername,
-};
-
-export const SplashScreen = connect(null, mapDispatchToProps)(SplashScreenPresenter);
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>
 );
-- 
cgit