rewrite structure and bit chat styling

site/client/app/app.js

@@ -16,9 +16,10 @@ var app = new Vue({
 
   components: {
     lobby: require('./components/lobby'),
-    navigation: require('./components/navigation')
+    navigation: require('./components/navigation'),
+    chat: require('./components/chat')
   }
 
 });
 
-router.init(app);
+//router.init(app);

site/client/app/components/chat.js

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

site/client/app/components/navigation.js

@@ -1,5 +1,4 @@
-var Router = require('director').Router;
-var router = new Router();
+var router = require('./../routes');
 
 module.exports = {
 
@@ -7,7 +6,7 @@ module.exports = {
 
   methods: {
     changeView: function(view) {
-      router.setRoute('test');
+      router.changeRoute(view);
     }
   }
 

site/client/app/routes.js

@@ -1,24 +1,28 @@
-var Router = require('director').Router;
-var router = new Router();
-
-module.exports = {
-
-  init: function(app) {
-    router.on('/lobby', function() {
-      app.view = 'lobby';
-      app.section = 'inner';
-    });
-
-    router.on('/test', function() {
-    })
-
-    this.configure();
-    router.init();
+var routes = {
+  '/lobby': function() {
+    alert('lobby');
   },
 
-  configure: function() {
-    router.configure({
-      html5history: true
-    })
+  '/deck-builder': function() {
+    alert('deck-builder');
+  },
+
+  '/highscore': function() {
+    alert('highscore');
+  }
+};
+
+var options = {
+  html5history: true,
+  run_handler_in_init: false,
+  convert_hash_in_init: false
+}
+
+var Router = require('director').Router;
+var router = new Router(routes).configure(options).init();
+
+module.exports = {
+  changeRoute: function(route) {
+    router.setRoute(route);
   }
 }

site/client/app/views/chat.html

@@ -0,0 +1,13 @@
+<section class="container-chat">
+  <nav>
+    <ul>
+      <li><a class="active">Lobby Chat</a></li>
+      <li><a>Current Match</a></li>
+    </ul>
+  </nav>
+
+  <div class="chat">
+
+  </div>
+
+</section>

site/client/app/views/lobby.html

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

site/client/app/views/navigation.html

@@ -1,7 +1,7 @@
 <nav>
   <ul>
     <li><a class="active" v-on="click: changeView('lobby')">Lobby</a></li>
-    <li><a href="#" v-on="click: changeView('builder')">Deck Builder</a></li>
-    <li><a href="#" v-on="click: changeView('highscore')">Highscore</a></li>
+    <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
+    <li><a v-on="click: changeView('highscore')">Highscore</a></li>
   </ul>
 </nav>

site/client/assets/sass/_chat.scss

@@ -0,0 +1,22 @@
+.container-chat {
+  float: right;
+  width: 29%;
+
+  a {
+    font-size: 14px;
+    padding: 15px 15px;
+  }
+}
+
+.chat {
+  float: left;
+  width: 100%;
+  padding: 20px;
+  height: calc(100vh - 300px);
+  min-height: 400px;
+  clear: both;
+
+  color: #fff;
+
+  @include contentGradient();
+}

site/client/assets/sass/_inner.scss

@@ -14,7 +14,13 @@ body.inner {
 
 main {
   float: left;
+  clear: both;
   width: 70%;
+}
+
+.container-content {
+  float: left;
+  width: 100%;
   padding: 20px;
   height: calc(100vh - 300px);
   min-height: 400px;

site/client/assets/sass/_nav.scss

@@ -21,6 +21,7 @@ nav {
     padding: 12px 25px;
     float: left;
     cursor: pointer;
+    height: 55px;
 
     @include transition(color);
 

site/client/assets/sass/app.scss

@@ -10,4 +10,5 @@
 'form',
 'landing',
 'inner',
-'nav';
+'nav',
+'chat';

site/client/views/inner.blade.php

@@ -2,10 +2,16 @@
 
 @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
+  <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