deck view

assets/data/deck.js

@@ -1,6 +1,7 @@
 module.exports = {
 
   "northern_realm": [
+    "redanian_foot_soldier",
     "redanian_foot_soldier",
     "poor_fucking_infantry",
     "redanian_foot_soldier",

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,
@@ -18,12 +18,8 @@ module.exports = {
   },
 
   ready: function() {
-    // filter over leaders and store them separately.
-    this.cards = $.map(cards, (n) => {
-      if(n.type != 3) return n;
-
-      this.leaders.push(n);
-    });
+    this.initCards();
+    this.initDeck();
   },
 
   methods: {
@@ -31,11 +27,34 @@ module.exports = {
       // todo: load animation
       $('.all-cards').addClass('remove');
       this.factionFilter = deck;
+      this.initDeck();
       $('.all-cards').scrollTop(0);
 
       setTimeout(function() {
         $('.all-cards').removeClass('remove');
       }, 500);
+    },
+
+    // Filter for leaders and store them separately.
+    initCards: function() {
+      this.cards = $.map(cards, (n) => {
+        if(n.type != 3) return n;
+
+        this.leaders.push(n);
+      });
+    },
+
+    initDeck: function() {
+      this.deck = {};
+
+      deck[this.factionFilter].forEach((x) => {
+        this.deck[x] = (this.deck[x] || 0) + 1;
+      });
+    },
+
+    // test
+    removeCard: function(el) {
+
     }
   }
 };

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

@@ -1,9 +1,15 @@
 <div class="heading">
+  <div class="heading-decks">
     <a v-class="active: factionFilter == 'northern_realm'" v-on="click: changeDeck('northern_realm')">Northern Realm</a>
     <a v-class="active: factionFilter == 'scoiatael'" v-on="click: changeDeck('scoiatael')">Scoia'tael</a>
     <a v-class="active: factionFilter == 'monster'" v-on="click: changeDeck('monster')">Monster</a>
   </div>
 
+  <div class="heading-my-deck">
+    <span>My Deck</span>
+  </div>
+</div>
+
 <div class="all-cards-wrap">
   <div class="all-cards">
     <div class="clear-space"></div>
@@ -20,8 +26,111 @@
   </div>
 </div>
 
+<div class="all-deck-wrap">
+  <div class="all-deck">
+
+    <div class="clear-space"></div>
+
+    <div class="my-card" v-repeat="deck">
+      <div class="images">
+        <div
+          v-repeat="$value"
+          class="img-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/medic.png)'"></div>
+      </div>
+      <div class="sep">{{ $value }}x Blue Stripes Commando<br>
+        <span>
+          Power: 5 (Close Combat)
+        </span>
+        <em class="delete" v-on="click: removeCard($key)">Delete</em>
+      </div>
+    </div>
+
+    <div class="clear-space"></div>
+
+  </div>
+</div>
+
   <style>
 
+    .delete {
+      float: left;
+      clear: both;
+      font-style: normal;
+    }
+
+    .images {
+      position: relative;
+      width: 50px;
+      height: 94px;
+      float: left;
+    }
+
+    .img-small {
+      float: left;
+      background-size: 50px 94px;
+      width: 50px;
+      height: 94px;
+      position: absolute;
+      z-index: 100;
+    }
+
+      .img-small:nth-child(2) {
+        top: 3px;
+        z-index: 99;
+        right: -3px;
+        opacity: .5;
+      }
+
+      .img-small:nth-child(3) {
+        top: 6px;
+        z-index: 98;
+        right: -6px;
+        opacity: .5;
+      }
+
+    .my-card {
+      color: #c3cdd8;
+      float: left;
+      width: 50%;
+      margin: 0 0 20px 0;
+    }
+
+    .all-deck i {
+      color: #435365;
+      font-style: normal;
+      float: left;
+      font-size: 20px;
+      margin: 8px 0 0 0;
+    }
+
+    .sep {
+      float: left;
+      margin: 0 0 0 20px;
+      width: calc(100% - 100px);
+    }
+
+    .all-deck span {
+      color: #435365;
+      font-size: 14px;
+      float: left;
+    }
+
+    .all-deck-wrap {
+      width: 47%;
+      overflow: hidden;
+      float: right;
+      height: calc(100% + 40px);
+      padding: 0 20px;
+      margin: -80px 0 0 0;
+    }
+
+    .all-deck {
+      float: left;
+      width: calc(100% + 50px);
+      height: 100%;
+      overflow-y: auto;
+    }
+
     .shadow-all-cards {
       height: 60px;
       float: left;
@@ -35,13 +144,10 @@
     .test {
       float: left;
       overflow: hidden;
+      width: 100%;;
     }
 
     .remove {
       opacity: 0;
     }
-
-    .load-deck {
-
-    }
   </style>

site/client/assets/sass/_base.scss

@@ -10,7 +10,7 @@ body {
 
 body {
   width: 100%;
-  min-width: 1000px;
+  min-width: 1200px;
   overflow: hidden;
   font-family: 'Titillium Web', sans-serif;
 }

site/client/assets/sass/_shame_cards.scss

@@ -219,6 +219,24 @@
   background: linear-gradient(to bottom, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080d14', endColorstr='#d9080d14',GradientType=0 );
 
+  .heading-decks {
+    float: left;
+    width: 53%;
+  }
+
+  .heading-my-deck {
+    float: left;
+    width: 47%;
+  }
+
+  span {
+    float: left;
+    font-size: 17px;
+    color: #435365;
+    font-weight: 600;
+    margin: 0 0 0 20px;
+  }
+
   a {
     font-size: 17px;
     color: #435365;
@@ -229,6 +247,7 @@
     &.active {
       color: #c3cdd8;
     }
+
   }
 }