mirror of
https://github.com/exane/not-gwent-online
synced 2024-10-31 10:36:53 +00:00
display correct deck list
This commit is contained in:
parent
6b1625166a
commit
9296a6b934
@ -8,7 +8,7 @@ module.exports = {
|
|||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
cards: [],
|
cards: [],
|
||||||
deck: {},
|
deck: [],
|
||||||
|
|
||||||
leaders: [],
|
leaders: [],
|
||||||
leader: null,
|
leader: null,
|
||||||
@ -22,6 +22,18 @@ module.exports = {
|
|||||||
this.initDeck();
|
this.initDeck();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
filters: {
|
||||||
|
getType: function(c, type) {
|
||||||
|
var tmp = $.map(c, (item) => {
|
||||||
|
if(item.type == type) return item;
|
||||||
|
});
|
||||||
|
|
||||||
|
return tmp;
|
||||||
|
|
||||||
|
return c;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
changeDeck: function(deck) {
|
changeDeck: function(deck) {
|
||||||
// todo: load animation
|
// todo: load animation
|
||||||
@ -45,11 +57,13 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
initDeck: function() {
|
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
|
// test
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
<div class="all-cards">
|
<div class="all-cards">
|
||||||
<div class="clear-space"></div>
|
<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="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="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="shadow"></div>
|
||||||
@ -31,12 +31,14 @@
|
|||||||
|
|
||||||
<div class="clear-space"></div>
|
<div class="clear-space"></div>
|
||||||
|
|
||||||
|
<!-- todo: own component -->
|
||||||
<div class="my-card-container">
|
<div class="my-card-container">
|
||||||
<span>LEADER</span>
|
<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="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="shadow"></div>
|
||||||
<div class="overlay-card"></div>
|
<div class="overlay-card"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -46,9 +48,10 @@
|
|||||||
<div class="my-card-container">
|
<div class="my-card-container">
|
||||||
<span>CLOSE COMBAT</span>
|
<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="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="shadow"></div>
|
||||||
<div class="overlay-card"></div>
|
<div class="overlay-card"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -57,9 +60,20 @@
|
|||||||
<div class="my-card-container">
|
<div class="my-card-container">
|
||||||
<span>RANGE</span>
|
<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="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="shadow"></div>
|
||||||
<div class="overlay-card"></div>
|
<div class="overlay-card"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -68,9 +82,9 @@
|
|||||||
<div class="my-card-container">
|
<div class="my-card-container">
|
||||||
<span>WEATHER</span>
|
<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="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="shadow"></div>
|
||||||
<div class="overlay-card"></div>
|
<div class="overlay-card"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -83,6 +97,19 @@
|
|||||||
|
|
||||||
<style>
|
<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 {
|
.my-card-container {
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -33,4 +33,8 @@ input, textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a { text-decoration: none; }
|
a { text-decoration: none; }
|
||||||
ul { list-style: none; }
|
ul { list-style: none; }
|
||||||
|
|
||||||
|
.no-select {
|
||||||
|
user-select: none;
|
||||||
|
}
|
@ -219,27 +219,12 @@
|
|||||||
height: 100%;
|
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 {
|
.heading {
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
padding: 25px 0;
|
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: -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)));
|
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)));
|
||||||
|
Loading…
Reference in New Issue
Block a user