mirror of
https://github.com/exane/not-gwent-online
synced 2024-12-23 21:03:14 +00:00
change landing view rendering to php
This commit is contained in:
parent
33ae055598
commit
66cc04d36c
@ -15,8 +15,8 @@ var app = new Vue({
|
||||
},
|
||||
|
||||
components: {
|
||||
landing: require('./components/landing'),
|
||||
lobby: require('./components/lobby')
|
||||
lobby: require('./components/lobby'),
|
||||
navigation: require('./components/navigation')
|
||||
}
|
||||
|
||||
});
|
||||
|
@ -1,15 +0,0 @@
|
||||
module.exports = {
|
||||
|
||||
template: require('../views/landing.html'),
|
||||
|
||||
components: {
|
||||
login: require('./modals/login')
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
setTimeout(function() {
|
||||
$('.container-form-landing').addClass('active')
|
||||
}, 400);
|
||||
}
|
||||
|
||||
};
|
5
site/client/app/components/navigation.js
Normal file
5
site/client/app/components/navigation.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
|
||||
template: require('../views/navigation.html')
|
||||
|
||||
};
|
@ -4,25 +4,18 @@ var router = new Router();
|
||||
module.exports = {
|
||||
|
||||
init: function(app) {
|
||||
router.on('/', function() {
|
||||
app.view = 'landing';
|
||||
app.section = 'landing';
|
||||
});
|
||||
|
||||
router.on('/lobby', function() {
|
||||
app.view = 'lobby';
|
||||
app.section = 'inner';
|
||||
});
|
||||
|
||||
this.configure();
|
||||
router.init('/');
|
||||
router.init();
|
||||
},
|
||||
|
||||
configure: function() {
|
||||
router.configure({
|
||||
notfound: function() {
|
||||
router.setRoute('/')
|
||||
}
|
||||
html5history: true
|
||||
})
|
||||
}
|
||||
}
|
@ -1,31 +0,0 @@
|
||||
<login></login>
|
||||
|
||||
<section class="container-landing">
|
||||
<div class="wrap-landing">
|
||||
<img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
|
||||
|
||||
<p class="teaser-landing">
|
||||
Play The Witcher Gwent Card-Game online!<br>
|
||||
Play with randomly generated teams, or build your own!
|
||||
</p>
|
||||
|
||||
<div class="container-form-landing">
|
||||
|
||||
<form class="form-session">
|
||||
<input type="text" placeholder="Username" class="field-session" autofocus>
|
||||
<input type="password" placeholder="Password" class="field-session">
|
||||
|
||||
<div class="wrap-btn-action btn-register-action">
|
||||
<input type="submit" value="Register" class="btn-action">
|
||||
<i class="icon-load"></i>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<span class="choose">or</span>
|
||||
|
||||
<a href="#/lobby" class="btn-second btn-guest">Play as guest</a>
|
||||
<a href="#" class="btn-none btn-login" v-on="click: modal = true">Login</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
@ -1,9 +1,11 @@
|
||||
<section class="container-inner">
|
||||
|
||||
<a href="#/lobby"><img src="assets/img/logo-medium.png" width="148" height="46" alt="Gwent" class="logo-medium"></a>
|
||||
<a href="./lobby"><img src="assets/img/logo-medium.png" width="148" height="46" alt="Gwent" class="logo-medium"></a>
|
||||
|
||||
<navigation></navigation>
|
||||
|
||||
<main>
|
||||
|
||||
blaa
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
7
site/client/app/views/navigation.html
Normal file
7
site/client/app/views/navigation.html
Normal file
@ -0,0 +1,7 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#/lobby" class="active">Lobby</a></li>
|
||||
<li><a href="#">Deck Builder</a></li>
|
||||
<li><a href="#">Highscore</a></li>
|
||||
</ul>
|
||||
</nav>
|
@ -3,7 +3,27 @@ body.inner {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.logo-medium {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.container-inner {
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
main {
|
||||
float: left;
|
||||
width: 70%;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 300px);
|
||||
min-height: 400px;
|
||||
|
||||
background: -moz-linear-gradient(top, rgba(8,13,20,1) 17%, rgba(8,13,20,0.65) 46%, rgba(239,239,239,0) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,rgba(8,13,20,1)), color-stop(46%,rgba(8,13,20,0.65)), color-stop(100%,rgba(239,239,239,0)));
|
||||
background: -webkit-linear-gradient(top, rgba(8,13,20,1) 17%,rgba(8,13,20,0.65) 46%,rgba(239,239,239,0) 100%);
|
||||
background: -o-linear-gradient(top, rgba(8,13,20,1) 17%,rgba(8,13,20,0.65) 46%,rgba(239,239,239,0) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(8,13,20,1) 17%,rgba(8,13,20,0.65) 46%,rgba(239,239,239,0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(8,13,20,1) 17%,rgba(8,13,20,0.65) 46%,rgba(239,239,239,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080d14', endColorstr='#00efefef',GradientType=0 );
|
||||
}
|
@ -3,6 +3,15 @@ body.landing {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.icon-guest-load {
|
||||
background: url(../img/guest-load.gif) #ca5a07 no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: right;
|
||||
margin: 5px -7px 0 7px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrap-landing {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
|
36
site/client/assets/sass/_nav.scss
Normal file
36
site/client/assets/sass/_nav.scss
Normal file
@ -0,0 +1,36 @@
|
||||
nav {
|
||||
float: left;
|
||||
margin: 30px 0 0 0;
|
||||
clear: both;
|
||||
|
||||
ul {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #8798ac;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
|
||||
font-size: 19px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
padding: 12px 25px;
|
||||
float: left;
|
||||
|
||||
@include transition(color);
|
||||
|
||||
&:hover {
|
||||
color: #c5cfda;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $main;
|
||||
text-shadow: none;
|
||||
background: rgba(#080d14, .9);
|
||||
}
|
||||
}
|
||||
}
|
@ -9,4 +9,5 @@
|
||||
'modal',
|
||||
'form',
|
||||
'landing',
|
||||
'inner';
|
||||
'inner',
|
||||
'nav';
|
@ -12,12 +12,29 @@
|
||||
<link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="@{{ section }}">
|
||||
<body class="{{ $section }}">
|
||||
|
||||
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
|
||||
@yield('content')
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="{{ url('assets/js/bundle.js') }}"></script>
|
||||
|
||||
<script>
|
||||
// todo: extract to vue
|
||||
setTimeout(function() {
|
||||
$('.container-form-landing').addClass('active')
|
||||
}, 400);
|
||||
|
||||
// todo: extract to vue
|
||||
$('.btn-guest').on('click', function() {
|
||||
// set localstorage for guest
|
||||
$('.icon-guest-load').show();
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.href = './lobby';
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
11
site/client/views/inner.blade.php
Normal file
11
site/client/views/inner.blade.php
Normal file
@ -0,0 +1,11 @@
|
||||
@extends('app')
|
||||
|
||||
@section('content')
|
||||
|
||||
@if($type == 'server')
|
||||
<component is="lobby" v-transition transition-mode="out-in"></component>
|
||||
@else
|
||||
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
|
||||
@endif
|
||||
|
||||
@stop
|
37
site/client/views/landing.blade.php
Normal file
37
site/client/views/landing.blade.php
Normal file
@ -0,0 +1,37 @@
|
||||
@extends('app')
|
||||
|
||||
@section('content')
|
||||
|
||||
<login></login>
|
||||
|
||||
<section class="container-landing">
|
||||
<div class="wrap-landing">
|
||||
<img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
|
||||
|
||||
<p class="teaser-landing">
|
||||
Play The Witcher Gwent Card-Game online!<br>
|
||||
Play with randomly generated teams, or build your own!
|
||||
</p>
|
||||
|
||||
<div class="container-form-landing">
|
||||
|
||||
<form class="form-session">
|
||||
<input type="text" placeholder="Username" class="field-session" autofocus>
|
||||
<input type="password" placeholder="Password" class="field-session">
|
||||
|
||||
<div class="wrap-btn-action btn-register-action">
|
||||
<input type="submit" value="Register" class="btn-action">
|
||||
<i class="icon-action-load"></i>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<span class="choose">or</span>
|
||||
|
||||
<a class="btn-second btn-guest">Play as guest <i class="icon-guest-load"></i></a>
|
||||
<a href="#" class="btn-none btn-login" v-on="click: modal = true">Login</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
@ -1,17 +0,0 @@
|
||||
<div class="modal">
|
||||
<div class="modal-banner">
|
||||
<div class="wrap-modal">
|
||||
|
||||
<form class="form-session form-login">
|
||||
<input type="text" placeholder="Username" class="field-session">
|
||||
<input type="password" placeholder="Password" class="field-session">
|
||||
|
||||
<div class="wrap-btn-action btn-login-action">
|
||||
<input type="submit" value="Login" class="btn-action">
|
||||
<i class="icon-load"></i>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
BIN
site/public/assets/img/guest-load.gif
Normal file
BIN
site/public/assets/img/guest-load.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
@ -42,7 +42,7 @@
|
||||
public function render($request, Exception $e)
|
||||
{
|
||||
if($e instanceof NotFoundHttpException) {
|
||||
//return redirect('/');
|
||||
return redirect('/');
|
||||
}
|
||||
|
||||
return parent::render($request, $e);
|
||||
|
@ -1,5 +1,16 @@
|
||||
<?php
|
||||
|
||||
get('/lobby', function() {
|
||||
return view('inner')
|
||||
->withSection('inner')
|
||||
->withType('server');
|
||||
});
|
||||
|
||||
get('/', function() {
|
||||
return view('app');
|
||||
if(Auth::check()) {
|
||||
return redirect('/lobby');
|
||||
}
|
||||
|
||||
return view('landing')
|
||||
->withSection('landing');
|
||||
});
|
Loading…
Reference in New Issue
Block a user