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>

site/client/assets/sass/_modal.scss

@@ -9,6 +9,17 @@
   text-align: center;
 }
 
+.wrap-modal-leaders {
+  margin: 14vh auto;
+  max-width: 750px;
+
+  @include transition();
+
+  .active & {
+    margin: 15vh auto;
+  }
+}
+
 .modal {
   position: fixed;
   width: 100%;

site/client/assets/sass/_shame_cards.scss

@@ -10,6 +10,14 @@
   height: 132px;
 }
 
+.card-wrap-big .card-img {
+  background-size: 150px 284px !important;
+  width: 150px !important;
+  height: 284px !important;
+  top: 4px;
+  left: 4px;
+}
+
 .card,
 .card-small-small {
   float: left;
@@ -136,10 +144,10 @@
   background-size: 800% 800%;
   position: absolute;
   z-index: 20;
-  top: 10px;
-  left: 10px;
-  width: calc(100% - 10px);
-  height: calc(100% - 5px);
+  top: 6px;
+  left: 6px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
   border-radius: 12px;
   opacity: 0;
   cursor: pointer;
@@ -180,6 +188,17 @@
 
 }
 
+.card-wrap-big {
+  width: 158px;
+  height: 292px;
+  transition: all 0.2s ease-in-out 0s;
+  margin: 0 0 0 20px;
+}
+
+  .card-wrap-big:hover {
+    //transform: scale(1.1,1.1) !important;
+  }
+
 .card-wrap-small {
   float: left;
   width: 74px;