rewrite structure

site/client/app/app.js

@@ -15,8 +15,8 @@ var app = new Vue({
   },
 
   components: {
-    lobby: require('./components/lobby'),
+    inner: require('./components/inner'),
-    chat: require('./components/chat')
+    landing: require('./components/landing')
   }
 
 });

site/client/app/components/inner.js

@@ -0,0 +1,19 @@
+module.exports = {
+
+  template: require('../views/inner.html'),
+
+  data: function() {
+    return {
+      modal: false
+    }
+  },
+
+  components: {
+    searchmatch: require('./modals/searchMatch'),
+    navigation: require('./navigation'),
+    chat: require('./chat'),
+
+    lobby: require('./lobby')
+  }
+
+};

site/client/app/components/landing.js

@@ -0,0 +1,26 @@
+var router = require('./../routes');
+
+module.exports = {
+
+  template: require('../views/landing.html'),
+
+  inherit: true,
+
+  ready: function() {
+    setTimeout(function() {
+      $('.container-form-landing').addClass('active')
+    }, 300);
+  },
+
+  methods: {
+    asGuest: function() {
+      // set localstorage for guest
+      $('.icon-guest-load').show();
+
+      setTimeout(function() {
+        window.location.href = './lobby';
+      }, 500);
+    }
+  }
+
+};

site/client/app/components/lobby.js

@@ -2,15 +2,4 @@ module.exports = {
 
   template: require('../views/lobby.html'),
 
-  data: function() {
-  	return {
-  		modal: false
-  	}
-  },
-
-  components: {
-  	searchmatch: require('./modals/searchMatch'),
-  	navigation: require('./navigation')
-  }
-
 };

site/client/app/components/modals/login.js

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

site/client/app/components/navigation.js

@@ -12,8 +12,8 @@ module.exports = {
     },
 
     searchMatch: function() {
-    	this.modal = true;
+      this.modal = true;
-    	// trigger match functions
+      // trigger match functions
     }
   }
 

site/client/app/views/inner.html

@@ -0,0 +1,15 @@
+<searchmatch></searchmatch>
+
+<a href="./lobby"><img src="assets/img/logo-medium.png" width="120" height="38" alt="Gwent" class="logo-medium"></a>
+
+<main>
+
+  <navigation></navigation>
+
+  <section class="container-content">
+    <component is="lobby"></component>
+  </section>
+
+</main>
+
+ <component is="chat"></component>

site/client/app/views/landing.html

@@ -0,0 +1,29 @@
+<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" v-on="click: asGuest">Play as guest <i class="icon-guest-load"></i></a>
+      <a href="#" class="btn-none btn-login">Login</a>
+
+    </div>
+  </div>
+</section>

site/client/app/views/lobby.html

@@ -1,11 +1 @@
-<a href="./lobby"><img src="assets/img/logo-medium.png" width="120" height="38" alt="Gwent" class="logo-medium"></a>
+lobby
-
-<main>
-
-  <navigation></navigation>
-
-  <section class="container-content">
-    <searchmatch></searchmatch>
-  </section>
-
-</main>

site/client/app/views/modals/login.html

@@ -1,17 +0,0 @@
-<div class="modal" v-class="active: 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/client/assets/sass/_inner.scss

@@ -1,17 +1,13 @@
 body.inner {
   background: url(../img/inner-bg.jpg) #162232 center top no-repeat;
   background-size: cover;
+  padding: 40px;
 }
 
 .logo-medium {
   float: left;
 }
 
-.container-inner {
-  width: 100%;
-  padding: 40px;
-}
-
 main {
   float: left;
   clear: both;

site/client/views/app.blade.php

@@ -14,27 +14,14 @@
   </head>
   <body class="{{ $section }}">
 
-    @yield('content')
+    @if(Auth::check() || Request::path() != '/')
+      <component is="inner"></component>
+    @else
+      <component is="landing"></component>
+    @endif
 
     <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')
-      }, 300);
-
-      // 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

@@ -1,17 +0,0 @@
-@extends('app')
-
-@section('content')
-
-  <section class="container-inner">
-
-    @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
-
-    <component is="chat"></component>
-
-  </section>
-
-@stop

site/client/views/landing.blade.php

@@ -1,37 +0,0 @@
-@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/server/app/Http/routes.php

@@ -1,16 +1,11 @@
 <?php
 
   get('/lobby', function() {
-    return view('inner')
+    return view('app')
-      ->withSection('inner')
+      ->withSection('inner');
-      ->withType('server');
   });
 
   get('/', function() {
-    if(Auth::check()) {
+    return view('app')
-      return redirect('/lobby');
-    }
-
-    return view('landing')
       ->withSection('landing');
   });