redefine app structure

site/client/app/modules/deck-builder/components/deck-builder.js

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

site/client/app/modules/deck-builder/views/deck-builder.html

@@ -0,0 +1 @@
+deckbuilder

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>

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

@@ -0,0 +1,48 @@
+module.exports = {
+
+  template: require('./../views/landing.html'),
+
+  inherit: true,
+
+  data: function() {
+    return {
+      modal: false
+    }
+  },
+
+  components: {
+    login: require('./login')
+  },
+
+  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);
+    },
+
+    openLogin: function() {
+      this.modal = true;
+
+      setTimeout(function() {
+        $('.login-username').focus();
+      }, 300);
+    },
+
+    closeLogin: function(e) {
+      if(e.target.className == 'modal active') {
+        this.modal = false;
+      }
+    }
+  }
+
+};

site/client/app/modules/landing/components/login.js

@@ -0,0 +1,11 @@
+module.exports = {
+
+  template: require('./../views/login.html'),
+
+  inherit: true,
+
+  methods: {
+
+  }
+
+};

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

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

site/client/app/modules/landing/views/login.html

@@ -0,0 +1,19 @@
+<div class="modal" v-class="active: modal" v-on="click: closeLogin">
+  <div class="modal-banner">
+    <div class="wrap-modal-login">
+
+      <form class="form-session">
+        <input type="text" placeholder="Username" class="field-session login-username">
+        <input type="password" placeholder="Password" class="field-session login-password">
+
+        <div class="wrap-btn-action btn-register-action">
+          <input type="submit" value="Login" class="btn-action">
+          <i class="icon-action-load"></i>
+        </div>
+
+        <span class="btn-sub">Forgot Password?</span>
+      </form>
+
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,135 @@
+<style>
+  .card {
+    float: left;
+    border-radius: 12px;
+    position: relative;
+    z-index: 10;;
+  }
+
+  .bla {
+    padding: 4px;
+    float: left;
+    border-radius: 14px;
+    margin: 100px;
+    position: relative;
+
+    box-shadow: 0 0 2px 0 orange;
+  }
+
+  .shadow {
+    border-radius: 35%;
+    box-shadow: 0 0 15px 14px #ffa500;
+    content: "";
+    height: calc(100% - 40px);
+    left: 10px;
+    position: absolute;
+    width: calc(100% - 20px);
+    z-index: 1;
+    top: 20px;
+    transition: all 0.3s ease-in-out 0s;
+
+    -webkit-animation: Shadow 4s ease-in-out infinite;
+    -moz-animation: Shadow 4s ease-in-out infinite;
+    animation: Shadow 4s ease-in-out infinite;
+  }
+
+
+  .ani {
+    background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
+    background-size: 800% 800%;
+
+    -webkit-animation: AnimationName 3s ease infinite;
+    -moz-animation: AnimationName 3s ease infinite;
+    animation: AnimationName 3s ease infinite;
+
+  }
+
+  @-webkit-keyframes Shadow {
+    0% {
+      opacity: 0;
+    }
+    25% {
+      opacity: .5;
+    }
+    50%{
+      opacity: 1;
+    }
+    75% {
+      opacity: .5;
+    }
+    100%{      opacity: 0;
+    }
+  }
+
+  @-webkit-keyframes Shadow {
+    0% {
+      opacity: 0;
+    }
+    25% {
+      opacity: .5;
+    }
+    50%{
+      opacity: 1;
+    }
+    75% {
+      opacity: .5;
+    }
+    100%{      opacity: 0;
+    }
+  }
+
+  @keyframes Shadow {
+    0% {
+      opacity: 0;
+    }
+    25% {
+      opacity: .5;
+    }
+    50%{
+      opacity: 1;
+    }
+    75% {
+      opacity: .5;
+    }
+    100%{      opacity: 0;
+    }
+  }
+
+  .overlay-card {
+    background: linear-gradient(2deg, rgba(255,255,255,.05), rgba(255,255,255,.3), rgba(255,255,255,.1));
+    background-size: 800% 800%;
+    position: absolute;
+    z-index: 20;
+    width: calc(100% - 5px);
+    height: calc(100% - 5px);
+    border-radius: 12px;
+
+    -webkit-animation: AnimationName 10s ease infinite;
+    -moz-animation: AnimationName 10s ease infinite;
+    animation: AnimationName 10s ease infinite;
+  }
+
+  @-webkit-keyframes AnimationName {
+    0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+  }
+  @-moz-keyframes AnimationName {
+    0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+  }
+  @keyframes AnimationName {
+    0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+  }
+</style>
+
+  <div class="bla ani">
+    <img src="http://80.240.132.120/gwent/assets/cards/ballista1.png" class="card" width="150" height="auto">
+    <div class="shadow"></div>
+    <div class="overlay-card"></div>
+  </div>
+
+</div>