redefine app structure

site/client/app/modules/inner/components/chat.js

@@ -0,0 +1,19 @@
+module.exports = {
+
+  template: require('../views/chat.html'),
+
+  data: function() {
+    return {
+      message: ''
+    }
+  },
+
+  methods: {
+    submitChat: function(e) {
+      e.preventDefault();
+
+      console.log(this.message);
+    }
+  }
+
+};

site/client/app/modules/inner/components/inner.js

@@ -0,0 +1,22 @@
+module.exports = {
+
+  template: require('../views/inner.html'),
+
+  inherit: true,
+
+  data: function() {
+    return {
+      modal: false
+    }
+  },
+
+  components: {
+    searchmatch: require('./search-match'),
+    navigation: require('./navigation'),
+    chat: require('./chat'),
+
+    lobby: require('./../../lobby/components/lobby'),
+    deckBuilder: require('./../../deck-builder/components/deck-builder'),
+  }
+
+};

site/client/app/modules/inner/components/navigation.js

@@ -0,0 +1,25 @@
+module.exports = {
+
+  template: require('../views/navigation.html'),
+
+  inherit: true,
+
+  data: function() {
+    return {
+      // todo: work with slug filter
+      navigation: [
+        { name: 'Lobby', route: '/lobby' },
+        { name: 'Deck Builder', route: '/deck-builder' },
+        { name: 'Highscore', route: '/highscore' }
+      ]
+    }
+  },
+
+  methods: {
+    searchMatch: function() {
+      this.modal = true;
+      // trigger match functions
+    }
+  }
+
+};

site/client/app/modules/inner/components/search-match.js

@@ -0,0 +1,14 @@
+module.exports = {
+
+  template: require('./../views/search-match.html'),
+
+  inherit: true,
+
+  methods: {
+    cancelMatch: function() {
+      this.modal = false;
+      // trigger match functions
+    }
+  }
+
+};

site/client/app/modules/inner/views/chat.html

@@ -0,0 +1,17 @@
+<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 class="chats">
+      blaa blaa
+    </div>
+
+    <textarea class="chatbox" placeholder="Type an message..." v-model="message" autofocus v-on="keydown: submitChat(this) | key 'enter'"></textarea>
+  </div>
+
+</section>

site/client/app/modules/inner/views/inner.html

@@ -0,0 +1,26 @@
+<searchmatch></searchmatch>
+
+<a href="./lobby"><img src="assets/img/logo-medium.png" width="120" height="38" alt="Gwent" class="logo-medium"></a>
+
+<main>
+
+  <style>
+    .test {
+      transition: all .5s ease;
+    }
+    .test-enter, .test-leave {
+      opacity: 0;
+    }
+  </style>
+
+  <navigation></navigation>
+
+  <section class="container-content">
+
+    <router-view class="test" v-transition="test" transition-mode="out-in"></router-view>
+
+  </section>
+
+</main>
+
+<component is="chat"></component>

site/client/app/modules/inner/views/navigation.html

@@ -0,0 +1,11 @@
+<nav>
+  <ul>
+    <li v-repeat="nav: navigation">
+      <a v-link="{{ nav.route }}" class="{{ route.path == nav.route ? 'active' : '' }}">
+        {{ nav.name }}
+      </a>
+    </li>
+
+    <li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li>
+  </ul>
+</nav>

site/client/app/modules/inner/views/search-match.html

@@ -0,0 +1,12 @@
+<div class="modal" v-class="active: modal">
+  <div class="modal-banner">
+    <div class="wrap-modal-search">
+
+      <i class="icon-content-load"></i>
+      <p class="modal-para">Search for Player</p>
+
+      <span class="btn-sub" v-on="click: cancelMatch">Cancel</span>
+
+    </div>
+  </div>
+</div>