change landing view rendering to php

site/client/app/app.js

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

site/client/app/components/landing.js

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

site/client/app/components/navigation.js

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

site/client/app/routes.js

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

site/client/app/views/landing.html

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

site/client/app/views/lobby.html

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

site/client/app/views/navigation.html

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

site/client/assets/sass/_inner.scss

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

site/client/assets/sass/_landing.scss

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

site/client/assets/sass/_nav.scss

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

site/client/assets/sass/app.scss

@@ -9,4 +9,5 @@
 'modal',
 'form',
 'landing',
-'inner';
+'inner',
+'nav';

site/client/views/app.blade.php

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

site/client/views/inner.blade.php

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

site/client/views/landing.blade.php

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

site/client/views/partials/modals/login.blade.php

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

site/server/app/Exceptions/Handler.php

@@ -42,7 +42,7 @@
     public function render($request, Exception $e)
     {
       if($e instanceof NotFoundHttpException) {
-        //return redirect('/');
+        return redirect('/');
       }
 
       return parent::render($request, $e);

site/server/app/Http/routes.php

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