mirror of
https://github.com/exane/not-gwent-online
synced 2024-12-23 21:03:14 +00:00
choose leader view
This commit is contained in:
parent
b460cf6cd7
commit
35a40b3624
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
@ -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>
|
||||
|
12
site/client/app/modules/deck-builder/views/show-leaders.html
Normal file
12
site/client/app/modules/deck-builder/views/show-leaders.html
Normal file
@ -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>
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user