choose leader view

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

@@ -10,13 +10,19 @@ module.exports = {
       cards: [],
       deck: [],
 
-      leaders: [],
-      leader: null,
+      allLeaders: [],
+      myLeaders: [],
 
-      factionFilter: 'northern_realm'
+      factionFilter: 'northern_realm',
+
+      modalLeader: false
     }
   },
 
+  components: {
+    showleaders: require('./show-leaders')
+  },
+
   ready: function() {
     this.initCards();
     this.initDeck();
@@ -51,7 +57,7 @@ module.exports = {
       this.cards = $.map(cards, (n) => {
         if(n.type != 3) return n;
 
-        this.leaders.push(n);
+        this.allLeaders.push(n);
       });
     },
 
@@ -64,9 +70,12 @@ module.exports = {
       }
     },
 
-    // test
-    removeCard: function(el) {
+    showLeaders: function(currentLeader) {
+      this.myLeaders = $.map(this.allLeaders, (item) => {
+        if(item.faction == this.factionFilter) return item;
+      });
 
+      this.modalLeader = true;
     }
   }
 };

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

@@ -0,0 +1,25 @@
+module.exports = {
+
+  template: require('./../views/show-leaders.html'),
+
+  inherit: true,
+
+  methods: {
+    closeLeaders(e) {
+      if(e == 'close' || e.target.className == 'modal active' ) {
+        this.modalLeader = false;
+      }
+    },
+
+    chooseLeader(card) {
+      // todo: make own leader variable
+      for(var item in this.deck) {
+        if(this.deck[item].type == 3) {
+          this.deck.$set(item, card);
+        }
+      }
+
+      this.closeLeaders('close');
+    }
+  }
+};

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

@@ -1,3 +1,5 @@
+<showleaders></showleaders>
+
 <div class="heading">
   <div class="heading-decks">
     <a v-class="active: factionFilter == 'northern_realm'" v-on="click: changeDeck('northern_realm')">Northern Realm</a>
@@ -35,8 +37,8 @@
     <div class="my-card-container">
       <span>LEADER</span>
 
-      <div class="card-wrap-small" v-repeat="item: deck | getType [3]" track-by="$index">
-        <div class="count-card no-select">1x</div>
+      <div class="card-wrap-small" v-repeat="item: deck | getType [3]" track-by="$index" v-on="click: showLeaders(item.name)">
+        <!--div class="count-card no-select">1x</div-->
         <div class="bla ani"></div>
         <div class="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + item.img + '.png)'"></div>
         <div class="shadow"></div>

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

@@ -0,0 +1,12 @@
+<div class="modal" v-class="active: modalLeader" v-on="click: closeLeaders">
+  <div class="wrap-modal-leaders">
+
+    <div class="card-wrap card-wrap-big" v-repeat="card: myLeaders" v-on="click: chooseLeader(card)">
+      <div class="bla ani"></div>
+      <div class="card-img card" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + card.img  + '.png)'"></div>
+      <div class="shadow"></div>
+      <div class="overlay-card"></div>
+    </div>
+
+  </div>
+</div>