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');
+    }
+  }
+};