1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-10-31 10:36:53 +00:00

Merge branch 'master' of github.com:exane/gwent-online

This commit is contained in:
exane 2015-06-25 19:31:14 +02:00
commit c1137344a9
6 changed files with 90 additions and 12 deletions

View File

@ -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;
}
}
};

View File

@ -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');
}
}
};

View File

@ -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>

View 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>

View File

@ -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%;

View File

@ -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;