mirror of
https://github.com/exane/not-gwent-online
synced 2024-10-31 10:36:53 +00:00
prepare vue and little styling
This commit is contained in:
parent
c29e398eb7
commit
9d7f473e76
24
site/client/app/app.js
Normal file
24
site/client/app/app.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
var Vue = require('vue');
|
||||||
|
var router = require('./routes');
|
||||||
|
|
||||||
|
Vue.use(require('vue-resource'));
|
||||||
|
Vue.http.headers.common['X-CSRF-TOKEN'] = $('.token').attr('content');
|
||||||
|
|
||||||
|
var app = new Vue({
|
||||||
|
|
||||||
|
el: 'body',
|
||||||
|
|
||||||
|
data: {
|
||||||
|
name: '',
|
||||||
|
view: '',
|
||||||
|
section: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
'landing': require('./components/landing'),
|
||||||
|
'lobby': require('./components/lobby')
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
router.init(app);
|
11
site/client/app/components/landing.js
Normal file
11
site/client/app/components/landing.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
module.exports = {
|
||||||
|
|
||||||
|
template: require('../views/landing.html'),
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
$('.container-form-landing').addClass('active')
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
5
site/client/app/components/lobby.js
Normal file
5
site/client/app/components/lobby.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
|
||||||
|
template: require('../views/lobby.html')
|
||||||
|
|
||||||
|
};
|
28
site/client/app/routes.js
Normal file
28
site/client/app/routes.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
var Router = require('director').Router;
|
||||||
|
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('/');
|
||||||
|
},
|
||||||
|
|
||||||
|
configure: function() {
|
||||||
|
router.configure({
|
||||||
|
notfound: function() {
|
||||||
|
router.setRoute('/')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
29
site/client/app/views/landing.html
Normal file
29
site/client/app/views/landing.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<section class="container-landing" id="lol">
|
||||||
|
<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">Login</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
1
site/client/app/views/lobby.html
Normal file
1
site/client/app/views/lobby.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
LOBBY HIER BLA BLA
|
@ -13,6 +13,11 @@ body {
|
|||||||
font-family: 'Titillium Web', sans-serif;
|
font-family: 'Titillium Web', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.inner {
|
||||||
|
background: url(../img/inner-bg.jpg) center top no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: rgba($main, .99);
|
background: rgba($main, .99);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -18,7 +18,9 @@ body.landing {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 12% 0 0 0;
|
margin: 12% 0 0 0;
|
||||||
|
|
||||||
//tablet: 9%
|
@include mq(medium) {
|
||||||
|
margin: 9% 0 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.teaser-landing {
|
.teaser-landing {
|
||||||
@ -43,7 +45,7 @@ body.landing {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
transition: all .4s ease-in-out .2s;
|
transition: all .4s ease-in-out 0s;
|
||||||
|
|
||||||
margin: 60px 0;
|
margin: 60px 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -25,3 +25,15 @@ $main: #d96f1f;
|
|||||||
@mixin transition($type: all) {
|
@mixin transition($type: all) {
|
||||||
transition: $type .3s ease-in-out 0s;
|
transition: $type .3s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin mq($point) {
|
||||||
|
@if $point == big {
|
||||||
|
@media (max-width: 1600px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $point == medium {
|
||||||
|
@media (max-width: 1450px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $point == small {
|
||||||
|
@media (max-width: 600px) { @content; }
|
||||||
|
}
|
||||||
|
}
|
@ -9,4 +9,5 @@ elixir.config.publicDir = '../public/';
|
|||||||
|
|
||||||
elixir(function(mix) {
|
elixir(function(mix) {
|
||||||
mix.sass('app.scss');
|
mix.sass('app.scss');
|
||||||
|
mix.browserify('../../app/app.js');
|
||||||
});
|
});
|
||||||
|
@ -3,5 +3,10 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"gulp": "^3.8.8",
|
"gulp": "^3.8.8",
|
||||||
"laravel-elixir": "^2.0.0"
|
"laravel-elixir": "^2.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"director": "^1.2.8",
|
||||||
|
"vue": "^0.12.1",
|
||||||
|
"vue-resource": "^0.1.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="csrf-token" class="token" content="{{ csrf_token() }}">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<title>Gwent Online</title>
|
<title>Gwent Online</title>
|
||||||
@ -11,16 +12,12 @@
|
|||||||
<link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
|
<link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="{{ $section }}">
|
<body class="@{{ section }}">
|
||||||
|
|
||||||
@yield('content')
|
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
|
||||||
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||||
<script src="{{ url('assets/js/app.js') }}"></script>
|
<script src="{{ url('assets/js/bundle.js') }}"></script>
|
||||||
|
|
||||||
<script>
|
|
||||||
$('.container-form-landing').addClass('active');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -1,37 +0,0 @@
|
|||||||
@extends('app')
|
|
||||||
|
|
||||||
@section('content')
|
|
||||||
|
|
||||||
@include('partials.modals.login')
|
|
||||||
|
|
||||||
<section class="container-landing">
|
|
||||||
<div class="wrap-landing">
|
|
||||||
<img src="{{ url('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="#" class="btn-second btn-guest">Play as guest</a>
|
|
||||||
<a href="#" class="btn-none btn-login">Login</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
@stop
|
|
BIN
site/public/assets/img/inner-bg.jpg
Normal file
BIN
site/public/assets/img/inner-bg.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 91 KiB |
@ -1,7 +0,0 @@
|
|||||||
$('.register-btn').on('click', function() {
|
|
||||||
$('.icon-load').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.btn-login').on('click', function() {
|
|
||||||
$('.overlay').addClass('active');
|
|
||||||
});
|
|
@ -1,20 +1,20 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace Gwent\Exceptions;
|
namespace Gwent\Exceptions;
|
||||||
|
|
||||||
use Exception;
|
use Exception;
|
||||||
use Symfony\Component\HttpKernel\Exception\HttpException;
|
use Symfony\Component\HttpKernel\Exception\HttpException;
|
||||||
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
|
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
|
||||||
|
|
||||||
|
class Handler extends ExceptionHandler {
|
||||||
|
|
||||||
class Handler extends ExceptionHandler
|
|
||||||
{
|
|
||||||
/**
|
/**
|
||||||
* A list of the exception types that should not be reported.
|
* A list of the exception types that should not be reported.
|
||||||
*
|
*
|
||||||
* @var array
|
* @var array
|
||||||
*/
|
*/
|
||||||
protected $dontReport = [
|
protected $dontReport = [
|
||||||
HttpException::class,
|
HttpException::class,
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -22,23 +22,29 @@ class Handler extends ExceptionHandler
|
|||||||
*
|
*
|
||||||
* This is a great spot to send exceptions to Sentry, Bugsnag, etc.
|
* This is a great spot to send exceptions to Sentry, Bugsnag, etc.
|
||||||
*
|
*
|
||||||
* @param \Exception $e
|
* @param \Exception $e
|
||||||
|
*
|
||||||
* @return void
|
* @return void
|
||||||
*/
|
*/
|
||||||
public function report(Exception $e)
|
public function report(Exception $e)
|
||||||
{
|
{
|
||||||
return parent::report($e);
|
return parent::report($e);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Render an exception into an HTTP response.
|
* Render an exception into an HTTP response.
|
||||||
*
|
*
|
||||||
* @param \Illuminate\Http\Request $request
|
* @param \Illuminate\Http\Request $request
|
||||||
* @param \Exception $e
|
* @param \Exception $e
|
||||||
|
*
|
||||||
* @return \Illuminate\Http\Response
|
* @return \Illuminate\Http\Response
|
||||||
*/
|
*/
|
||||||
public function render($request, Exception $e)
|
public function render($request, Exception $e)
|
||||||
{
|
{
|
||||||
return parent::render($request, $e);
|
if($e instanceof NotFoundHttpException) {
|
||||||
|
//return redirect('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
return parent::render($request, $e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
get('/', function() {
|
get('/', function() {
|
||||||
return view('tpl.landing')
|
return view('app');
|
||||||
->withSection('landing');
|
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user