prepare vue and little styling

site/client/app/app.js

@@ -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);

site/client/app/components/landing.js

@@ -0,0 +1,11 @@
+module.exports = {
+
+  template: require('../views/landing.html'),
+
+  ready: function() {
+    setTimeout(function() {
+      $('.container-form-landing').addClass('active')
+    }, 400);
+  }
+
+};

site/client/app/components/lobby.js

@@ -0,0 +1,5 @@
+module.exports = {
+
+  template: require('../views/lobby.html')
+
+};

site/client/app/routes.js

@@ -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('/')
+      }
+    })
+  }
+}

site/client/app/views/landing.html

@@ -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>

site/client/app/views/lobby.html

@@ -0,0 +1 @@
+LOBBY HIER BLA BLA

site/client/assets/sass/_base.scss

@@ -13,6 +13,11 @@ body {
   font-family: 'Titillium Web', sans-serif;
 }
 
+body.inner {
+  background: url(../img/inner-bg.jpg) center top no-repeat;
+  background-size: cover;
+}
+
 ::-moz-selection {
   background: rgba($main, .99);
   color: #fff;

site/client/assets/sass/_landing.scss

@@ -18,7 +18,9 @@ body.landing {
   width: 100%;
   margin: 12% 0 0 0;
 
-  //tablet: 9%
+  @include mq(medium) {
+    margin: 9% 0 0 0;
+  }
 }
 
 .teaser-landing {
@@ -43,7 +45,7 @@ body.landing {
   opacity: 0;
 
   &.active {
-    transition: all .4s ease-in-out .2s;
+    transition: all .4s ease-in-out 0s;
 
     margin: 60px 0;
     opacity: 1;

site/client/assets/sass/_mixins.scss

@@ -24,4 +24,16 @@ $main: #d96f1f;
 
 @mixin transition($type: all) {
   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; }
+  }
 }

site/client/gulpfile.js

@@ -9,4 +9,5 @@ elixir.config.publicDir = '../public/';
 
 elixir(function(mix) {
   mix.sass('app.scss');
+  mix.browserify('../../app/app.js');
 });

site/client/package.json

@@ -3,5 +3,10 @@
   "devDependencies": {
     "gulp": "^3.8.8",
     "laravel-elixir": "^2.0.0"
+  },
+  "dependencies": {
+    "director": "^1.2.8",
+    "vue": "^0.12.1",
+    "vue-resource": "^0.1.3"
   }
 }

site/client/views/app.blade.php

@@ -3,6 +3,7 @@
   <head>
 
     <meta charset="utf-8">
+    <meta name="csrf-token" class="token" content="{{ csrf_token() }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Gwent Online</title>
@@ -11,16 +12,12 @@
     <link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
 
   </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="{{ url('assets/js/app.js') }}"></script>
-
-    <script>
-      $('.container-form-landing').addClass('active');
-    </script>
+    <script src="{{ url('assets/js/bundle.js') }}"></script>
 
   </body>
 </html>

site/client/views/tpl/landing.blade.php

@@ -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

site/public/assets/js/core.js

@@ -1,7 +0,0 @@
-$('.register-btn').on('click', function() {
-  $('.icon-load').show();
-});
-
-$('.btn-login').on('click', function() {
-  $('.overlay').addClass('active');
-});

site/server/app/Exceptions/Handler.php

@@ -1,20 +1,20 @@
 <?php
 
-namespace Gwent\Exceptions;
+  namespace Gwent\Exceptions;
 
-use Exception;
-use Symfony\Component\HttpKernel\Exception\HttpException;
-use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+  use Exception;
+  use Symfony\Component\HttpKernel\Exception\HttpException;
+  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.
      *
      * @var array
      */
     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.
      *
-     * @param  \Exception  $e
+     * @param  \Exception $e
+     *
      * @return void
      */
     public function report(Exception $e)
     {
-        return parent::report($e);
+      return parent::report($e);
     }
 
     /**
      * Render an exception into an HTTP response.
      *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \Exception  $e
+     * @param  \Illuminate\Http\Request $request
+     * @param  \Exception               $e
+     *
      * @return \Illuminate\Http\Response
      */
     public function render($request, Exception $e)
     {
-        return parent::render($request, $e);
+      if($e instanceof NotFoundHttpException) {
+        //return redirect('/');
+      }
+
+      return parent::render($request, $e);
     }
-}
+  }

site/server/app/Http/routes.php

@@ -1,6 +1,5 @@
 <?php
 
   get('/', function() {
-    return view('tpl.landing')
-      ->withSection('landing');
+    return view('app');
   });