Recode components and views

Classes/Laravel/esport/resources/views/template.blade.php

@@ -13,7 +13,7 @@
         @show
 
         <div class="container">
-            <div id="center">
+            <div class="center">
                 @yield('content')
             </div>
         </div>

frontend/src/assets/css/style.css

-div #body {
+div .body {
     display: flex;
     flex-direction: column;
 }
-div #navbar {
-    padding-bottom: 50px;
-}
-div #center {
+div .center {
     display: flex;
     justify-content: center;
 }
\ No newline at end of file

frontend/src/components/Navbar.vue

@@ -45,3 +45,9 @@
         }
     };
 </script>
+
+<style>
+    div #navbar {
+        padding-bottom: 50px;
+    }
+</style>
\ No newline at end of file

frontend/src/router/index.js

@@ -4,6 +4,7 @@ import Index from '../views/Index'
 import Signup from '../views/Signup'
 import Home from '../views/Home'
 import Rules from '../views/Rules'
+import GameChoice from '../views/GameChoice'
 import GameCreate from '../views/GameCreate'
 import GameJoin from '../views/GameJoin'
 import Game from '../views/Game'
@@ -31,6 +32,11 @@ const routes = [
     name: 'Rules',
     component: Rules
   },
+  {
+    path: '/gameChoice',
+    name: 'GameChoice',
+    component: GameChoice
+  },
   {
     path: '/gameCreate',
     name: 'GameCreate',

frontend/src/views/Game.vue

 <template>
-  <div id="body">
+  <div class="body">
     <Navbar/>
-    <div id="center">
+    <div class="center">
       <img src="../assets/img/game.png" class="img-fluid" alt="Responsive image">
     </div>
   </div>
 </template>
 
 <script>
-  import Navbar from '@/components/Navbar.vue'
+  import Navbar from '@/components/Navbar'
 
   export default {
     name: 'Game',

frontend/src/views/GameChoice.vue

+<template>
+  <div class="body">
+    <Navbar/>
+    <div class="center">
+      <div class="card shadow mb-4">
+        <h5 class="card-header text-primary">Choisissez le mode</h5>
+        <div class="card-body" style="width : 500px;">
+          <router-link to="/gameCreate">
+            <button type="button" class="btn btn-primary btn-block">Créer une partie</button>
+          </router-link>
+          <router-link to="/gameJoin">
+            <button type="button" class="btn btn-primary btn-block" style="margin-top: 20px;">Rejoindre une partie</button>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Navbar from '@/components/Navbar'
+
+  export default {
+    name: 'GameChoice',
+    components: {
+      Navbar
+    }
+  }
+</script>
\ No newline at end of file

frontend/src/views/GameCreate.vue

 <template>
-  <div id="body">
+  <div class="body">
     <Navbar/>
-    <div class="container-fluid" style="display: flex; justify-content: space-around;">
+    <div class="center">
       <div class="card shadow mb-4">
-        <div class="card-header py-3">
-          <h6 class="m-0 font-weight-bold text-primary">Créer une partie</h6>
-        </div>
+        <h5 class="card-header text-primary">Créer une partie</h5>
         <div class="card-body" style="width : 500px;">
           <router-link to="/game">
-            <a class="btn btn-primary btn-user btn-block">
-              Commencer
-            </a>
+            <button type="button" class="btn btn-primary btn-block">Commencer</button>
           </router-link>
         </div>
       </div>
@@ -19,7 +15,7 @@
 </template>
 
 <script>
-  import Navbar from '@/components/Navbar.vue'
+  import Navbar from '@/components/Navbar'
 
   export default {
     name: 'GameCreate',

frontend/src/views/GameJoin.vue

 <template>
-  <div id="body">
+  <div class="body">
     <Navbar/>
-    <div class="container-fluid" style="display: flex; justify-content: space-around;">
+    <div class="center">
       <div class="card shadow mb-4">
-        <div class="card-header py-3">
-          <h6 class="m-0 font-weight-bold text-primary">Rejoindre une partie</h6>
-        </div>
+        <h5 class="card-header text-primary">Rejoindre une partie</h5>
         <div class="card-body" style="width : 500px;">
-          <form class="user" method="post">
+          <form>
             <h5>Avec un identifiant :</h5>
-            <div class="form-group">
-              <input type="text" class="form-control form-control-user" id="id" placeholder="ID">
-            </div>
+            <Input :information="input" />
             <router-link to="/game">
-              <a class="btn btn-primary btn-user btn-block">
-                Commencer
-              </a>
+              <button type="button" class="btn btn-primary btn-block">Commencer</button>
             </router-link>
           </form>
-          <form class="user" method="post" style="margin-top: 100px;">
+          <form style="margin-top: 50px;">
             <h5>Sans identifiant :</h5>
             <router-link to="/game">
-              <a class="btn btn-primary btn-user btn-block">
-                Trouver une partie
-              </a>
+              <button type="button" class="btn btn-primary btn-block">Trouver une partie</button>
             </router-link>
           </form>
         </div>
@@ -33,12 +25,19 @@
 </template>
 
 <script>
-  import Navbar from '@/components/Navbar.vue'
+  import Navbar from '@/components/Navbar'
+  import Input from '@/components/Input'
 
   export default {
     name: 'GameJoin',
     components: {
-      Navbar
+      Navbar,
+      Input
+    },
+    data() {
+      return {
+        input: { type: 'text', id: 'id', placeholder: 'ID' }
+      }
     }
   }
 </script>
\ No newline at end of file

frontend/src/views/Home.vue

 <template>
-  <div id="body">
+  <div class="body">
     <Navbar/>
-    <div id="buttons">
+    <div class="center" style="justify-content: space-around;">
       <router-link to="/rules"><b-button variant="primary">Découvrir le mahjong</b-button></router-link>
-      <router-link to="/gameCreate"><b-button variant="primary">Commercer à jouer</b-button></router-link>
+      <router-link to="/gameChoice"><b-button variant="primary">Commercer à jouer</b-button></router-link>
     </div>
   </div>
 </template>
 
 <script>
-  import Navbar from '@/components/Navbar.vue'
+  import Navbar from '@/components/Navbar'
 
   export default {
     name: 'Home',
@@ -18,13 +18,3 @@
     }
   }
 </script>
\ No newline at end of file
-
-<style>
-  div #buttons {
-    display: flex;
-    justify-content: space-around;
-  }
-  b-button {
-    display: flex;
-  }
-</style>
\ No newline at end of file

frontend/src/views/Index.vue

 <template>
-  <div id="body">
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-xl-10 col-lg-12 col-md-9">
@@ -33,7 +32,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>

frontend/src/views/Rules.vue

 <template>
-  <div id="body">
+  <div class="body">
     <Navbar/>
-    <div id="center">
+    <div class="center">
       <h1>Les règles</h1>
     </div>
   </div>
 </template>
 
 <script>
-  import Navbar from '@/components/Navbar.vue'
+  import Navbar from '@/components/Navbar'
 
   export default {
     name: 'Rules',

frontend/src/views/Signup.vue

 <template>
-  <div id="body">
   <div class="container">
     <div class="card o-hidden border-0 shadow-lg my-5">
       <div class="card-body p-0">
@@ -29,7 +28,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>