add routing

site/client/app/components/deckBuilder.js

@@ -0,0 +1,5 @@
+module.exports = {
+
+  template: "<h2>deckbuilder hier</h2>"
+
+};

site/client/app/components/inner.js

@@ -13,7 +13,8 @@ module.exports = {
     navigation: require('./navigation'),
     chat: require('./chat'),
 
-    lobby: require('./lobby')
+    lobby: require('./lobby'),
+    deckBuilder: require('./deckBuilder')
   }
 
 };

site/client/app/components/lobby.js

@@ -1,5 +1,5 @@
 module.exports = {
 
-  template: require('../views/lobby.html'),
+  template: "<h2>lobby hier</h2>"
 
 };

site/client/app/components/navigation.js

@@ -7,10 +7,6 @@ module.exports = {
   inherit: true,
 
   methods: {
-    changeView: function(view) {
-      router.changeRoute(view);
-    },
-
     searchMatch: function() {
       this.modal = true;
       // trigger match functions

site/client/app/routes.js

@@ -1,26 +1,19 @@
-var routes = {
+require('../../../public/Config.js');
-  '/lobby': function() {
-    alert('lobby');
-  },
-
-  '/deck-builder': function() {
-    alert('deck-builder');
-  },
-
-  '/highscore': function() {
-    alert('highscore');
-  }
-};
-
-var options = {
-  html5history: true
-}
-
-var Router = require('director').Router;
-var router = new Router(routes).configure(options).init();
 
 module.exports = {
-  changeRoute: function(route) {
+
-    router.setRoute(route);
+  maps: {
+    '/lobby': {
+      component: 'lobby'
+    },
+
+    '/deck-builder': {
+      component: 'deckBuilder'
+    }
+  },
+
+  options: {
+    history: true,
+    root: window.Config.Site.base
   }
 }

site/client/app/views/inner.html

@@ -4,10 +4,21 @@
 
 <main>
 
+  <style>
+    .test {
+      transition: all .5s ease;
+    }
+    .test-enter, .test-leave {
+      opacity: 0;
+    }
+  </style>
+
   <navigation></navigation>
 
   <section class="container-content">
-    <component is="lobby"></component>
+
+    <router-view class="test" v-transition="test" transition-mode="out-in"></router-view>
+
   </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 class="active" v-link="/lobby">Lobby</a></li>
-    <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
+    <li><a v-link="/deck-builder">Deck Builder</a></li>
     <li><a v-on="click: changeView('highscore')">Highscore</a></li>
 
     <li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li>

site/client/assets/sass/_modal.scss

@@ -21,11 +21,11 @@
   opacity: 0;
   visibility: hidden;
 
+  @include transition();
+
   &.active {
     visibility: visible;
     opacity: 1;
-
-    @include transition();
   }
 }
 
@@ -38,9 +38,9 @@
   margin: 24vh 0 0 0;
   float: left;
 
-  .active & {
   @include transition();
 
+  .active & {
     margin: 25vh 0 0 0;
   }
 }
@@ -65,7 +65,6 @@
   clear: both;
   width: 100%;
   text-align: center;
-  //margin: 3px 0 0 20px;
 }
 
 .btn-cancel {
@@ -77,7 +76,9 @@
   color: darken(#8798ac, 10%);
   cursor: pointer;
 
+  @include transition();
+
   &:hover {
-    color: #8798ac;
+    color: #fff;
   }
 }