Commit 41e3dda6 authored by raphael.peim's avatar raphael.peim

Recode components and views

parent e56aca59
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
@show @show
<div class="container"> <div class="container">
<div id="center"> <div class="center">
@yield('content') @yield('content')
</div> </div>
</div> </div>
......
div #body { div .body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
div #navbar { div .center {
padding-bottom: 50px;
}
div #center {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
\ No newline at end of file
...@@ -44,4 +44,10 @@ ...@@ -44,4 +44,10 @@
} }
} }
}; };
</script> </script>
\ No newline at end of file
<style>
div #navbar {
padding-bottom: 50px;
}
</style>
\ No newline at end of file
...@@ -4,6 +4,7 @@ import Index from '../views/Index' ...@@ -4,6 +4,7 @@ import Index from '../views/Index'
import Signup from '../views/Signup' import Signup from '../views/Signup'
import Home from '../views/Home' import Home from '../views/Home'
import Rules from '../views/Rules' import Rules from '../views/Rules'
import GameChoice from '../views/GameChoice'
import GameCreate from '../views/GameCreate' import GameCreate from '../views/GameCreate'
import GameJoin from '../views/GameJoin' import GameJoin from '../views/GameJoin'
import Game from '../views/Game' import Game from '../views/Game'
...@@ -31,6 +32,11 @@ const routes = [ ...@@ -31,6 +32,11 @@ const routes = [
name: 'Rules', name: 'Rules',
component: Rules component: Rules
}, },
{
path: '/gameChoice',
name: 'GameChoice',
component: GameChoice
},
{ {
path: '/gameCreate', path: '/gameCreate',
name: 'GameCreate', name: 'GameCreate',
......
<template> <template>
<div id="body"> <div class="body">
<Navbar/> <Navbar/>
<div id="center"> <div class="center">
<img src="../assets/img/game.png" class="img-fluid" alt="Responsive image"> <img src="../assets/img/game.png" class="img-fluid" alt="Responsive image">
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar'
export default { export default {
name: 'Game', name: 'Game',
......
<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
<template> <template>
<div id="body"> <div class="body">
<Navbar/> <Navbar/>
<div class="container-fluid" style="display: flex; justify-content: space-around;"> <div class="center">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div class="card-header py-3"> <h5 class="card-header text-primary">Créer une partie</h5>
<h6 class="m-0 font-weight-bold text-primary">Créer une partie</h6>
</div>
<div class="card-body" style="width : 500px;"> <div class="card-body" style="width : 500px;">
<router-link to="/game"> <router-link to="/game">
<a class="btn btn-primary btn-user btn-block"> <button type="button" class="btn btn-primary btn-block">Commencer</button>
Commencer
</a>
</router-link> </router-link>
</div> </div>
</div> </div>
...@@ -19,7 +15,7 @@ ...@@ -19,7 +15,7 @@
</template> </template>
<script> <script>
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar'
export default { export default {
name: 'GameCreate', name: 'GameCreate',
......
<template> <template>
<div id="body"> <div class="body">
<Navbar/> <Navbar/>
<div class="container-fluid" style="display: flex; justify-content: space-around;"> <div class="center">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div class="card-header py-3"> <h5 class="card-header text-primary">Rejoindre une partie</h5>
<h6 class="m-0 font-weight-bold text-primary">Rejoindre une partie</h6>
</div>
<div class="card-body" style="width : 500px;"> <div class="card-body" style="width : 500px;">
<form class="user" method="post"> <form>
<h5>Avec un identifiant :</h5> <h5>Avec un identifiant :</h5>
<div class="form-group"> <Input :information="input" />
<input type="text" class="form-control form-control-user" id="id" placeholder="ID">
</div>
<router-link to="/game"> <router-link to="/game">
<a class="btn btn-primary btn-user btn-block"> <button type="button" class="btn btn-primary btn-block">Commencer</button>
Commencer
</a>
</router-link> </router-link>
</form> </form>
<form class="user" method="post" style="margin-top: 100px;"> <form style="margin-top: 50px;">
<h5>Sans identifiant :</h5> <h5>Sans identifiant :</h5>
<router-link to="/game"> <router-link to="/game">
<a class="btn btn-primary btn-user btn-block"> <button type="button" class="btn btn-primary btn-block">Trouver une partie</button>
Trouver une partie
</a>
</router-link> </router-link>
</form> </form>
</div> </div>
...@@ -33,12 +25,19 @@ ...@@ -33,12 +25,19 @@
</template> </template>
<script> <script>
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar'
import Input from '@/components/Input'
export default { export default {
name: 'GameJoin', name: 'GameJoin',
components: { components: {
Navbar Navbar,
Input
},
data() {
return {
input: { type: 'text', id: 'id', placeholder: 'ID' }
}
} }
} }
</script> </script>
\ No newline at end of file
<template> <template>
<div id="body"> <div class="body">
<Navbar/> <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="/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>
</div> </div>
</template> </template>
<script> <script>
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar'
export default { export default {
name: 'Home', name: 'Home',
...@@ -17,14 +17,4 @@ ...@@ -17,14 +17,4 @@
Navbar Navbar
} }
} }
</script> </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
<template> <template>
<div id="body"> <div class="container">
<div class="container"> <div class="row justify-content-center">
<div class="row justify-content-center"> <div class="col-xl-10 col-lg-12 col-md-9">
<div class="col-xl-10 col-lg-12 col-md-9"> <div class="card o-hidden border-0 shadow-lg my-5">
<div class="card o-hidden border-0 shadow-lg my-5"> <div class="card-body p-0">
<div class="card-body p-0"> <div class="row">
<div class="row"> <div class="col-lg-6 d-none d-lg-block bg-login-image">
<div class="col-lg-6 d-none d-lg-block bg-login-image"> <img src="../assets/img/log.png" class="img-fluid" alt="Responsive image">
<img src="../assets/img/log.png" class="img-fluid" alt="Responsive image"> </div>
</div> <div class="col-lg-6">
<div class="col-lg-6"> <div class="p-5">
<div class="p-5"> <div class="text-center">
<div class="text-center"> <h1 class="h4 text-gray-900 mb-4">Connectez-vous !</h1>
<h1 class="h4 text-gray-900 mb-4">Connectez-vous !</h1> </div>
</div> <form class="user" @submit="onSubmit">
<form class="user" @submit="onSubmit"> <p id="message" style="color: red"></p>
<p id="message" style="color: red"></p> <Input v-for="input in inputs" :key="input.id" :information="input"/>
<Input v-for="input in inputs" :key="input.id" :information="input"/> <button type="submit" class="btn btn-primary btn-user btn-block">Connexion</button>
<button type="submit" class="btn btn-primary btn-user btn-block">Connexion</button> </form>
</form> <hr>
<hr> <div class="text-center">
<div class="text-center"> <router-link to="/signup">
<router-link to="/signup"> <a class="small">Créer un compte</a>
<a class="small">Créer un compte</a> </router-link>
</router-link>
</div>
</div> </div>
</div> </div>
</div> </div>
......
<template> <template>
<div id="body"> <div class="body">
<Navbar/> <Navbar/>
<div id="center"> <div class="center">
<h1>Les règles</h1> <h1>Les règles</h1>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar'
export default { export default {
name: 'Rules', name: 'Rules',
......
<template> <template>
<div id="body"> <div class="container">
<div class="container"> <div class="card o-hidden border-0 shadow-lg my-5">
<div class="card o-hidden border-0 shadow-lg my-5"> <div class="card-body p-0">
<div class="card-body p-0"> <div class="row">
<div class="row"> <div class="col-lg-6 d-none d-lg-block bg-login-image">
<div class="col-lg-6 d-none d-lg-block bg-login-image"> <img src="../assets/img/log.png" class="img-fluid" alt="Responsive image">
<img src="../assets/img/log.png" class="img-fluid" alt="Responsive image"> </div>
</div> <div class="col-lg-6">
<div class="col-lg-6"> <div class="p-5">
<div class="p-5"> <div class="text-center">
<div class="text-center"> <h1 class="h4 text-gray-900 mb-4">Créez un compte !</h1>
<h1 class="h4 text-gray-900 mb-4">Créez un compte !</h1> </div>
</div> <form class="user" @submit="onSubmit">
<form class="user" @submit="onSubmit"> <p id="message" style="color: red"></p>
<p id="message" style="color: red"></p> <Input v-for="input in inputs" :key="input.id" :information="input" />
<Input v-for="input in inputs" :key="input.id" :information="input" /> <button type="submit" class="btn btn-primary btn-user btn-block">Inscription</button>
<button type="submit" class="btn btn-primary btn-user btn-block">Inscription</button> </form>
</form> <hr>
<hr> <div class="text-center">
<div class="text-center"> <router-link to="/">
<router-link to="/"> <a class="small">Déjà inscrit ? Connectez-vous !</a>
<a class="small">Déjà inscrit ? Connectez-vous !</a> </router-link>
</router-link>
</div>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment