display correct deck list

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

@@ -8,7 +8,7 @@ module.exports = {
   data: function() {
     return {
       cards: [],
-      deck: {},
+      deck: [],
 
       leaders: [],
       leader: null,
@@ -22,6 +22,18 @@ module.exports = {
     this.initDeck();
   },
 
+  filters: {
+    getType: function(c, type) {
+      var tmp = $.map(c, (item) => {
+        if(item.type == type) return item;
+      });
+
+      return tmp;
+
+      return c;
+    }
+  },
+
   methods: {
     changeDeck: function(deck) {
       // todo: load animation
@@ -45,11 +57,13 @@ module.exports = {
     },
 
     initDeck: function() {
-      this.deck = {};
+      this.deck = [];
+      var _deck = deck[this.factionFilter];
+
+      for(var item in _deck) {
+        this.deck.push(cards[_deck[item]]);
+      }
 
-      deck[this.factionFilter].forEach((x) => {
-        this.deck[x] = (this.deck[x] || 0) + 1;
-      });
     },
 
     // test

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

@@ -14,7 +14,7 @@
   <div class="all-cards">
     <div class="clear-space"></div>
 
-    <div class="card-wrap" v-repeat="card: cards | filterBy factionFilter in faction">
+    <div class="card-wrap" v-repeat="card: cards | filterBy factionFilter in faction" track-by="$index">
       <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>
@@ -31,12 +31,14 @@
 
     <div class="clear-space"></div>
 
+    <!-- todo: own component -->
     <div class="my-card-container">
       <span>LEADER</span>
 
-      <div class="card-wrap-small">
+      <div class="card-wrap-small" v-repeat="item: deck | getType 3" track-by="$index">
+        <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/medic.png)'"></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>
         <div class="overlay-card"></div>
       </div>
@@ -46,9 +48,10 @@
     <div class="my-card-container">
       <span>CLOSE COMBAT</span>
 
-      <div class="card-wrap-small" v-repeat="5">
+      <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="bla ani"></div>
-        <div class="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/imlerith.png)'"></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>
         <div class="overlay-card"></div>
       </div>
@@ -57,9 +60,20 @@
     <div class="my-card-container">
       <span>RANGE</span>
 
-      <div class="card-wrap-small" v-repeat="11">
+      <div class="card-wrap-small" v-repeat="item: deck | getType 1" track-by="$index">
         <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/siege_tech.png)'"></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>
+        <div class="overlay-card"></div>
+      </div>
+    </div>
+
+    <div class="my-card-container">
+      <span>SPECIAL</span>
+
+      <div class="card-wrap-small" v-repeat="item: deck | getType 4" track-by="$index">
+        <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>
         <div class="overlay-card"></div>
       </div>
@@ -68,9 +82,9 @@
     <div class="my-card-container">
       <span>WEATHER</span>
 
-      <div class="card-wrap-small" v-repeat="3">
+      <div class="card-wrap-small" v-repeat="item: deck | getType 5" track-by="$index">
         <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/frost.png)'"></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>
         <div class="overlay-card"></div>
       </div>
@@ -83,6 +97,19 @@
 
   <style>
 
+    .count-card {
+      font-size: 22px;
+      color: #fff;
+      font-weight: bold;
+      position: absolute;
+      left: 60%;
+      top: 60%;
+      z-index: 100;
+      cursor: pointer;
+      text-shadow: 0 0 2px #000;
+      transform: translate(-50%, -50%);
+    }
+
     .my-card-container {
       float: left;
       width: 100%;

site/client/assets/sass/_base.scss

@@ -34,3 +34,7 @@ input, textarea {
 
 a { text-decoration: none; }
 ul { list-style: none; }
+
+.no-select {
+  user-select: none;
+}

site/client/assets/sass/_shame_cards.scss

@@ -219,27 +219,12 @@
   height: 100%;
 }
 
-.line {
-  background: -moz-linear-gradient(top, rgba(64,150,238,0) 0%, rgba(58,73,96,1) 52%, rgba(64,150,238,0) 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,150,238,0)), color-stop(52%,rgba(58,73,96,1)), color-stop(100%,rgba(64,150,238,0)));
-  background: -webkit-linear-gradient(top, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%);
-  background: -o-linear-gradient(top, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%);
-  background: -ms-linear-gradient(top, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%);
-  background: linear-gradient(to bottom, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004096ee', endColorstr='#004096ee',GradientType=0 );
-
-  width: 2px;
-  height: 100%;
-  float: left;
-}
-
 .heading {
   float: left;
   width: 100%;
   position: relative;
   z-index: 1000;
   padding: 25px 0;
-  //background: rgba(#080d14, .95);
 
   background: -moz-linear-gradient(top, rgba(8,13,20,1) 0%, rgba(8,13,20,1) 36%, rgba(8,13,20,0.85) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(8,13,20,1)), color-stop(36%,rgba(8,13,20,1)), color-stop(100%,rgba(8,13,20,0.85)));