merge multiple cards

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

@@ -29,13 +29,34 @@ module.exports = {
   },
 
   filters: {
+
+    // Iterate for correct card type and merge multiple cards.
     getType: function(c, type) {
+      var a = [];
+      var itemCount = {};
+
       var tmp = $.map(c, (item) => {
-        //if(item.type == type) return item;
+        if($.inArray(item.card.type, type) > -1) {
-        if($.inArray(item.type, type) > -1) return item;
+          if($.inArray(item.card.name, a) > -1) {
+            itemCount[item.card.name] = (itemCount[item.card.name] || 1) + 1;
+          } else {
+            a.push(item.card.name);
+
+            return item;
+          }
+        }
       });
 
-      return tmp;
+      // todo: extract to method
+      var tmp2 = $.map(tmp, (item) => {
+        if(itemCount[item.card.name]) {
+          item.count = itemCount[item.card.name];
+        }
+
+        return item;
+      });
+
+      return tmp2;
     }
   },
 
@@ -66,7 +87,10 @@ module.exports = {
       var _deck = deck[this.factionFilter];
 
       for(var item in _deck) {
-        this.deck.push(cards[_deck[item]]);
+        this.deck.push({
+          card: cards[_deck[item]],
+          count: 1
+        });
       }
     },
 

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

@@ -38,9 +38,9 @@
       <span>LEADER</span>
 
       <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="count-card no-select">{{ item.count }}x</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="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + item.card.img + '.png)'"></div>
         <div class="shadow"></div>
         <div class="overlay-card"></div>
       </div>
@@ -51,9 +51,9 @@
       <span>CLOSE COMBAT</span>
 
       <div class="card-wrap-small" v-repeat="item: deck | getType [0]" track-by="$index">
-        <div class="count-card no-select">{{ c > 1 ? c + 'x' : '' }}</div>
+        <div class="count-card no-select">{{ item.count }}x</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="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + item.card.img + '.png)'"></div>
         <div class="shadow"></div>
         <div class="overlay-card"></div>
       </div>
@@ -63,8 +63,9 @@
       <span>RANGE</span>
 
       <div class="card-wrap-small" v-repeat="item: deck | getType [1]" track-by="$index">
+        <div class="count-card no-select">{{ item.count }}x</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="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + item.card.img + '.png)'"></div>
         <div class="shadow"></div>
         <div class="overlay-card"></div>
       </div>
@@ -74,8 +75,9 @@
       <span>SPECIAL</span>
 
       <div class="card-wrap-small" v-repeat="item: deck | getType [4,5]" track-by="$index">
+        <div class="count-card no-select">{{ item.count }}x</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="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + item.card.img + '.png)'"></div>
         <div class="shadow"></div>
         <div class="overlay-card"></div>
       </div>