From c6c26e95d87f9a974a032403b37364d8e659a97f Mon Sep 17 00:00:00 2001
From: Joffrey BION <joffrey.bion@gmail.com>
Date: Fri, 3 Feb 2017 01:05:48 +0100
Subject: Create home layout with zeus background

---
 .../static/images/background-zeus-temple.jpg       | Bin 571089 -> 0 bytes
 .../resources/static/images/logo-7-wonders.png     | Bin 301442 -> 0 bytes
 frontend/src/containers/home.js                    |  31 +++++++++++----------
 frontend/src/layouts/HomeLayout.js                 |  16 +++++++++++
 frontend/src/layouts/LobbyLayout.js                |   3 +-
 frontend/src/layouts/background-zeus-temple.jpg    | Bin 0 -> 571089 bytes
 frontend/src/layouts/index.js                      |   1 +
 frontend/src/layouts/logo-7-wonders.png            | Bin 0 -> 301442 bytes
 frontend/src/routes.js                             |   8 ++++--
 9 files changed, 42 insertions(+), 17 deletions(-)
 delete mode 100644 backend/src/main/resources/static/images/background-zeus-temple.jpg
 delete mode 100644 backend/src/main/resources/static/images/logo-7-wonders.png
 create mode 100644 frontend/src/layouts/HomeLayout.js
 create mode 100644 frontend/src/layouts/background-zeus-temple.jpg
 create mode 100644 frontend/src/layouts/logo-7-wonders.png

diff --git a/backend/src/main/resources/static/images/background-zeus-temple.jpg b/backend/src/main/resources/static/images/background-zeus-temple.jpg
deleted file mode 100644
index 5a28e933..00000000
Binary files a/backend/src/main/resources/static/images/background-zeus-temple.jpg and /dev/null differ
diff --git a/backend/src/main/resources/static/images/logo-7-wonders.png b/backend/src/main/resources/static/images/logo-7-wonders.png
deleted file mode 100644
index 96974d3e..00000000
Binary files a/backend/src/main/resources/static/images/logo-7-wonders.png and /dev/null differ
diff --git a/frontend/src/containers/home.js b/frontend/src/containers/home.js
index e70fc867..78ff5e6e 100644
--- a/frontend/src/containers/home.js
+++ b/frontend/src/containers/home.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { Heading, InlineForm } from 'rebass'
-import { Link } from 'react-router'
+import { Button, Container, Input } from 'rebass'
+import { actions } from '../redux/players'
+
 class HomePage extends Component {
 
   play = (e) => {
@@ -13,26 +14,28 @@ class HomePage extends Component {
 
   render() {
     return (
-      <div style={{maxWidth: '500px', margin: '0 auto'}}>
-        <Heading>Enter your username to start playing!</Heading>
-        <br />
-        <InlineForm
-          buttonLabel="Play now!"
-          label="Username"
+      <Container>
+        <Input
           name="username"
+          label="Username"
+          placeholder="Username"
+          hideLabel
           onChange={(e) => this._username = e.target.value}
-          onClick={this.play}
         />
-      </div>
+        <Button
+          backgroundColor="primary"
+          color="white"
+          big
+          onClick={this.play}>
+          PLAY NOW!
+        </Button>
+      </Container>
     )
   }
 }
 
-const mapStateToProps = (state) => ({
-
-})
+const mapStateToProps = (state) => ({})
 
-import { actions } from '../redux/players'
 const mapDispatchToProps = {
   chooseUsername: actions.chooseUsername
 }
diff --git a/frontend/src/layouts/HomeLayout.js b/frontend/src/layouts/HomeLayout.js
new file mode 100644
index 00000000..1d1d3bdd
--- /dev/null
+++ b/frontend/src/layouts/HomeLayout.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  Banner,
+  Container
+} from 'rebass'
+import logo from './logo-7-wonders.png'
+import background from './background-zeus-temple.jpg'
+
+export default (props) => (
+  <div>
+    <Banner align="center" backgroundImage={background}>
+      <img src={logo} alt="Seven Wonders"/>
+      {props.children}
+    </Banner>
+  </div>
+)
diff --git a/frontend/src/layouts/LobbyLayout.js b/frontend/src/layouts/LobbyLayout.js
index e6c747a7..83c210a1 100644
--- a/frontend/src/layouts/LobbyLayout.js
+++ b/frontend/src/layouts/LobbyLayout.js
@@ -2,6 +2,7 @@ import React from 'react'
 import {
   Banner,
 } from 'rebass'
+import logo from './logo-7-wonders.png'
 
 export default (props) => (
   <div>
@@ -10,7 +11,7 @@ export default (props) => (
       style={{minHeight: '30vh', marginBottom: 0}}
       backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
     >
-      <img src="images/logo-7-wonders.png" alt="Seven Wonders Logo"/>
+      <img src={logo} alt="Seven Wonders Logo"/>
     </Banner>
     {props.children}
   </div>
diff --git a/frontend/src/layouts/background-zeus-temple.jpg b/frontend/src/layouts/background-zeus-temple.jpg
new file mode 100644
index 00000000..5a28e933
Binary files /dev/null and b/frontend/src/layouts/background-zeus-temple.jpg differ
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
index 7beb62b8..0413b647 100644
--- a/frontend/src/layouts/index.js
+++ b/frontend/src/layouts/index.js
@@ -1 +1,2 @@
+export { default as HomeLayout } from './HomeLayout'
 export { default as LobbyLayout } from './LobbyLayout'
diff --git a/frontend/src/layouts/logo-7-wonders.png b/frontend/src/layouts/logo-7-wonders.png
new file mode 100644
index 00000000..96974d3e
Binary files /dev/null and b/frontend/src/layouts/logo-7-wonders.png differ
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 70762aa2..2e95abda 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -11,16 +11,20 @@ export const makeSagaRoutes = wsConnection => ({
   }
 })
 
-import { LobbyLayout } from './layouts'
+import { HomeLayout, LobbyLayout } from './layouts'
 import HomePage from './containers/home'
 import GameBrowser from './containers/gameBrowser'
 import Error404 from './components/errors/Error404'
 
 export const routes = [
+  {
+    path: '/',
+    component: HomeLayout,
+    indexRoute: { component: HomePage }
+  },
   {
     path: '/',
     component: LobbyLayout,
-    indexRoute: { component: HomePage },
     childRoutes: [
       { path: '/games', component: GameBrowser }
     ]
-- 
cgit