From 1fcbf0b99632caa2616a518f5e9944244eea218c Mon Sep 17 00:00:00 2001
From: devfake <devfakeplus@googlemail.com>
Date: Wed, 24 Jun 2015 20:34:35 +0200
Subject: [PATCH] deck view
---
assets/data/deck.js | 1 +
.../deck-builder/components/deck-builder.js | 33 ++++-
.../deck-builder/views/deck-builder.html | 120 +++++++++++++++++-
site/client/assets/sass/_base.scss | 2 +-
site/client/assets/sass/_shame_cards.scss | 19 +++
5 files changed, 160 insertions(+), 15 deletions(-)
diff --git a/assets/data/deck.js b/assets/data/deck.js
index 27a979d..54a3866 100644
--- a/assets/data/deck.js
+++ b/assets/data/deck.js
@@ -1,6 +1,7 @@
module.exports = {
"northern_realm": [
+ "redanian_foot_soldier",
"redanian_foot_soldier",
"poor_fucking_infantry",
"redanian_foot_soldier",
diff --git a/site/client/app/modules/deck-builder/components/deck-builder.js b/site/client/app/modules/deck-builder/components/deck-builder.js
index fa2244b..6f36998 100644
--- a/site/client/app/modules/deck-builder/components/deck-builder.js
+++ b/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) {
+
}
}
};
\ No newline at end of file
diff --git a/site/client/app/modules/deck-builder/views/deck-builder.html b/site/client/app/modules/deck-builder/views/deck-builder.html
index d1d73a8..e63f0e3 100644
--- a/site/client/app/modules/deck-builder/views/deck-builder.html
+++ b/site/client/app/modules/deck-builder/views/deck-builder.html
@@ -1,7 +1,13 @@
<div class="heading">
- <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 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">
@@ -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>
\ No newline at end of file
diff --git a/site/client/assets/sass/_base.scss b/site/client/assets/sass/_base.scss
index d14a489..507e8cd 100644
--- a/site/client/assets/sass/_base.scss
+++ b/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;
}
diff --git a/site/client/assets/sass/_shame_cards.scss b/site/client/assets/sass/_shame_cards.scss
index 8578306..9685f76 100644
--- a/site/client/assets/sass/_shame_cards.scss
+++ b/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;
}
+
}
}