Update front

client/src/components/App.js

@@ -133,22 +133,20 @@ class App extends Component {
                   </button>
               <h5 className="scoreTitle">Your score is {this.state.score}</h5>
           </Modal>
-      <h1>Am I late ?</h1>
         <header className="App_header">
-        {this.state.pastQuestion ? header : null}
-
+            {this.state.pastQuestion ? header : null}
+            <h1>Am I late ?</h1>
         </header>
-        <div className="jumbotron">
-        <div className="currentSection vertical-center container">
+          <div className="jumbotron">
+              <div className="currentSection vertical-center container">
           <h1 className="currentState">{this.state.currentQuestion}</h1>
           <img src={this.state.currentSticker} height="42" width="42" />
-          <h2 className="currentQuestion">Je fais quoi ?</h2>
           <div className="currentOptions">
             {this.state.currentResponses ? currentOptions : null}
           </div>
-      </div>
-      </div>
-      Votre score : {this.state.score}
+            <p>Votre score : {this.state.score}</p>
+        </div>
+        </div>
       </div>
     );
   }

client/src/components/Home.js

@@ -5,14 +5,21 @@ class Home extends Component {
 
     render() {
         return (
-            <div className="App">
-                <h2 className="App_intro">You are Ariel, a teacher at <strong>HETIC</strong>. < br />
-                    You had a class at <strong>9 AM</strong> but you're late. So late.< br />
-                    You get out of the bed, it's half past 9.< br />
+            <div className="App home">
+                <div className="App_box">
+                    <h1 className="App_intro" style={{textAlign:'center'}}>Am I late ?</h1>
 
-                    You have to get into the class before <strong>10 AM</strong>.< br />
+                    <h2 className="App_intro">
+                        <p>You are Ariel, a teacher at <strong>HETIC</strong>.</p>
+                        <p>You had a class at <strong>9 AM</strong> but you're late. So late.</p>
+                        <p>It's time to get out of the bed, it's half past 9.</p>
+                        <p>You have to get into the class before <strong>10 AM</strong>.</p>
+                        <p>Welcome to the grind.</p>
                     </h2>
-                <a href="/app" className="btn_app"><strong>Welcome to the grind</strong></a>
+                    <div>
+                        <a href="/app" className="btn_app"><strong>Start playing now</strong></a>
+                    </div>
+                </div>
             </div>
         )
     }

client/src/components/Router.js

@@ -1,4 +1,3 @@
-
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import Home from './Home'

client/src/styles/App.css

@@ -38,4 +38,4 @@
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-}
+}

client/src/styles/Home.css

@@ -1,8 +1,17 @@
+.App.home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.App.home .App_box {
+    max-width: 50%;
+}
+
 .App_intro {
     line-height: 1.25em;
     text-align: left;
-    display: inline-block;
-    margin-top: 33vh;
+    display: block;
     text-decoration: none;
 }
 

src/DataFixtures/AppFixtures.php

@@ -53,27 +53,27 @@ class AppFixtures extends Fixture
     {
         return [
             [
-                "text" => "ma question 1",
+                "text" => "2 gilberts arrivent, je fais quoi ?",
                 "responses" => [
                     [
-                        "text" => "option1",
+                        "text" => "Je fais ci",
                     ],
                     [
-                        "text" => "option2",
+                        "text" => "Je fais ça",
                     ],
                 ]
             ],
             [
-                "text" => "ma question 2",
+                "text" => "olala VM inc",
                 "responses" => [
                     [
-                        "text" => "option1",
+                        "text" => "j'abandonne",
                     ],
                     [
-                        "text" => "option2",
+                        "text" => "oui",
                     ],
                     [
-                        "text" => "option3",
+                        "text" => "non",
                     ],
                 ]
             ]
@@ -84,6 +84,10 @@ class AppFixtures extends Fixture
     {
         return [
             'http://image.noelshack.com/fichiers/2017/30/4/1501188178-jesusbestreup.png',
+            'https://risibank.fr/cache/stickers/d1/188-static.png',
+            'https://risibank.fr/cache/stickers/d325/32563-static.png',
+            'https://risibank.fr/cache/stickers/d456/45638-static.png',
+            'https://risibank.fr/cache/stickers/d341/34135-static.png',
         ];
     }