diff --git a/client/js/client.js b/client/js/client.js
index f1adb4b..ecc0bc8 100644
--- a/client/js/client.js
+++ b/client/js/client.js
@@ -464,7 +464,7 @@ let BattleView = Backbone.View.extend({
}
if(this.user.get("setAgile")){
let id = this.user.get("setAgile");
- this.$el.find("[data-id='" + id + "']").addClass("activeCard");
+ this.$el.find("[data-id='" + id + "']").parent().addClass("activeCard");
}
if(this.user.get("setHorn")){
let id = this.user.get("setHorn");
@@ -585,16 +585,17 @@ let BattleView = Backbone.View.extend({
},
calculateMargin: function($container, minSize){
minSize = typeof minSize === "number" && minSize >= 0 ? minSize : 6;
+ var Class = $container.find(".card-wrap").length ? ".card-wrap" : ".card";
var n = $container.children().size();
- let w = $container.width(), c = $container.find(".card").outerWidth() + 3;
+ let w = $container.width(), c = $container.find(Class).outerWidth();
let res;
if(n < minSize)
res = 0;
else {
- res = -((w - c) / (n - 1) - c) + 1
+ res = 0;//-((w - c) / (n - 1) - c) + 1
}
- $container.find(".card").css("margin-left", -res);
+ $container.find(Class).css("margin-left", -res);
}
});
@@ -838,7 +839,7 @@ let User = Backbone.Model.extend({
side: roomSide
})
},
- getCardData: function(card) {
+ getCardData: function(card){
if(!card || !card.ability) return;
var abilities;
@@ -850,7 +851,7 @@ let User = Backbone.Model.extend({
abilities.push(card.ability);
}
- abilities = abilities.map((ability) => {
+ abilities = abilities.map((ability) =>{
return abilityData[ability].description;
})
@@ -938,7 +939,7 @@ let Preview = Backbone.View.extend({
this.abilities.push(this.card.ability);
}
- this.abilities = this.abilities.map((ability) => {
+ this.abilities = this.abilities.map((ability) =>{
return abilityData[ability].description;
})
diff --git a/client/scss/_effects.scss b/client/scss/_effects.scss
index fe35349..6a21279 100644
--- a/client/scss/_effects.scss
+++ b/client/scss/_effects.scss
@@ -1,8 +1,53 @@
+.card-wrap {
+ float: left;
+ cursor: pointer;
+ z-index: 10;
+ height: auto !important;
+ width: auto !important;
+ margin: 3px;
+}
+
+.card-wrap .shadow,
+.grave .shadow {
+ height: calc(100% - 40px);
+ left: 14px;
+ top: 20px;
+ width: calc(100% - 26px);
+}
+
+/*.card-wrap:hover {
+ z-index: 20;
+}*/
+
+.card {
+ border: none !important;
+ margin: 0 !important;
+ border-radius: 0 !important;
+ overflow: visible !important;
+ height: 93px !important;
+}
+
+.card {
+ float: left;
+ height: 93px;
+ width: 69px;
+ position: relative;
+ transition: margin .05s ease-in-out 0s;
+}
+
+.card i {
+ display: block;
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ height: 87px;
+ z-index: 10;
+}
+
.small-cards-modal {
-
.hand-wrap {
- background: rgba(0,0,0,.8);
+ background: rgba(0, 0, 0, .8);
width: 100%;
height: 130px;
position: absolute;
@@ -25,219 +70,253 @@
float: left;
}
- .card-wrap {
- float: left;
- cursor: pointer;
- z-index: 10;
- height: auto !important;
- width: auto !important;
- margin: 3px;
- }
+}
- .card-wrap .shadow,
- .grave .shadow {
- height: calc(100% - 40px);
- left: 14px;
- top: 20px;
- width: calc(100% - 26px);
- }
+.card-wrap {
+ float: left;
+ cursor: pointer;
+ z-index: 10;
+ height: auto !important;
+ width: auto !important;
+ margin: 3px;
+}
- .card-wrap:hover {
- z-index: 20;
- }
-
- .card {
- float: left;
- height: 93px;
- width: 69px;
+&.activeCard {
position: relative;
- transition: margin .05s ease-in-out 0s;
+ z-index: 19 !important;
+ transform: scale(1.1, 1.1) !important;
}
- .card i {
- display: block;
- position: absolute;
- top: 3px;
- left: 3px;
- height: 87px;
- z-index: 10;
+.card-wrap .shadow,
+.grave .shadow {
+ height: calc(100% - 40px);
+ left: 14px;
+ top: 20px;
+ width: calc(100% - 26px);
+}
+
+.card-wrap:hover, .activeCard {
+ z-index: 20;
+}
+
+.card {
+ float: left;
+ height: 93px;
+ width: 69px;
+ position: relative;
+ transition: margin .05s ease-in-out 0s;
+}
+
+.card i {
+ display: block;
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ height: 87px;
+ z-index: 10;
+}
+
+/** SHAME **/
+
+.card-wrap:hover .bla,
+.activeCard .bla,
+.grave:hover .bla,
+.leader-card:hover .bla {
+ box-shadow: 0 0 2px 0 orange;
+ opacity: 1;
+}
+
+.bla {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ opacity: 0;
+ border-radius: 0;
+}
+
+.shadow {
+ border-radius: 35%;
+ box-shadow: 0 0 15px 14px #ffa500;
+ content: "";
+ height: calc(100% - 50px);
+ left: 15px;
+ position: absolute;
+ width: calc(100% - 22px);
+ z-index: 1;
+ top: 30px;
+ transition: all 0.3s ease-in-out 0s;
+ opacity: 0;
+}
+
+.card-wrap:hover .shadow,
+.grave:hover .shadow,
+.activeCard .shadow,
+.leader-card:hover .shadow {
+ -webkit-animation: Shadow 4s ease-in-out infinite;
+ -moz-animation: Shadow 4s ease-in-out infinite;
+ animation: Shadow 4s ease-in-out infinite;
+}
+
+.ani {
+ background: linear-gradient(2deg, #000, #000, #000, #000);;
+ transition: all .05s ease-in-out 0s;
+}
+
+.card-wrap:hover .ani,
+.activeCard .ani,
+.grave:hover .ani,
+.leader-card:hover .ani {
+ background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
+ background-size: 800% 800%;
+
+ -webkit-animation: AnimationName 3s ease infinite;
+ -moz-animation: AnimationName 3s ease infinite;
+ animation: AnimationName 3s ease infinite;
+}
+
+@-webkit-keyframes Shadow {
+ 0% {
+ opacity: 0;
}
-
- /** SHAME **/
-
- .card-wrap:hover .bla,
- .grave:hover .bla,
- .leader-card:hover .bla {
- box-shadow: 0 0 2px 0 orange;
+ 25% {
+ opacity: .5;
+ }
+ 50% {
opacity: 1;
}
-
- .bla {
- width: 100%;
- height: 100%;
- position: absolute;
- opacity: 0;
- border-radius: 0;
+ 75% {
+ opacity: .5;
}
-
- .shadow {
- border-radius: 35%;
- box-shadow: 0 0 15px 14px #ffa500;
- content: "";
- height: calc(100% - 50px);
- left: 15px;
- position: absolute;
- width: calc(100% - 22px);
- z-index: 1;
- top: 30px;
- transition: all 0.3s ease-in-out 0s;
+ 100% {
opacity: 0;
}
+}
- .card-wrap:hover .shadow,
- .grave:hover .shadow,
- .leader-card:hover .shadow {
- -webkit-animation: Shadow 4s ease-in-out infinite;
- -moz-animation: Shadow 4s ease-in-out infinite;
- animation: Shadow 4s ease-in-out infinite;
- }
-
- .ani {
- background: linear-gradient(2deg, #000, #000, #000, #000);;
- transition: all .05s ease-in-out 0s;
- }
-
- .card-wrap:hover .ani,
- .grave:hover .ani,
- .leader-card:hover .ani {
- background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
- background-size: 800% 800%;
-
- -webkit-animation: AnimationName 3s ease infinite;
- -moz-animation: AnimationName 3s ease infinite;
- animation: AnimationName 3s ease infinite;
- }
-
- @-webkit-keyframes Shadow {
- 0% {
- opacity: 0;
- }
- 25% {
- opacity: .5;
- }
- 50%{
- opacity: 1;
- }
- 75% {
- opacity: .5;
- }
- 100%{ opacity: 0;
- }
- }
-
- @-webkit-keyframes Shadow {
- 0% {
- opacity: 0;
- }
- 25% {
- opacity: .5;
- }
- 50%{
- opacity: 1;
- }
- 75% {
- opacity: .5;
- }
- 100%{ opacity: 0;
- }
- }
-
- @keyframes Shadow {
- 0% {
- opacity: 0;
- }
- 25% {
- opacity: .5;
- }
- 50%{
- opacity: 1;
- }
- 75% {
- opacity: .5;
- }
- 100%{ opacity: 0;
- }
- }
-
- .overlay-card {
- background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05));
- background-size: 800% 800%;
- position: absolute;
- z-index: 20;
- top: 3px;
- left: 3px;
- width: calc(100% - 4px);
- height: calc(100% - 4px);
+@-webkit-keyframes Shadow {
+ 0% {
opacity: 0;
- cursor: pointer;
}
-
- .card-wrap:hover .overlay-card,
- .grave:hover .overlay-card,
- .leader-card:hover .overlay-card {
+ 25% {
+ opacity: .5;
+ }
+ 50% {
opacity: 1;
- -webkit-animation: AnimationName 10s ease infinite;
- -moz-animation: AnimationName 10s ease infinite;
- animation: AnimationName 10s ease infinite;
}
+ 75% {
+ opacity: .5;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
- @-webkit-keyframes AnimationName {
- 0%{background-position:51% 0%}
- 50%{background-position:50% 100%}
- 100%{background-position:51% 0%}
+@keyframes Shadow {
+ 0% {
+ opacity: 0;
}
- @-moz-keyframes AnimationName {
- 0%{background-position:51% 0%}
- 50%{background-position:50% 100%}
- 100%{background-position:51% 0%}
+ 25% {
+ opacity: .5;
}
- @keyframes AnimationName {
- 0%{background-position:51% 0%}
- 50%{background-position:50% 100%}
- 100%{background-position:51% 0%}
+ 50% {
+ opacity: 1;
}
+ 75% {
+ opacity: .5;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
- /** SUB HAND **/
+.overlay-card {
+ background: linear-gradient(2deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
+ background-size: 800% 800%;
+ position: absolute;
+ z-index: 20;
+ top: 3px;
+ left: 3px;
+ width: calc(100% - 4px);
+ height: calc(100% - 4px);
+ opacity: 0;
+ cursor: pointer;
+}
- .sub-hand {
- float: left;
- width: 150px;
- margin: 18px 0 0 0;
+.card-wrap:hover .overlay-card,
+.activeCard .overlay-card,
+.grave:hover .overlay-card,
+.leader-card:hover .overlay-card {
+ opacity: 1;
+ -webkit-animation: AnimationName 10s ease infinite;
+ -moz-animation: AnimationName 10s ease infinite;
+ animation: AnimationName 10s ease infinite;
+}
+
+@-webkit-keyframes AnimationName {
+ 0% {
+ background-position: 51% 0%
}
-
- .grave {
- position: relative;
- width: 69px;
- height: 93px;
- float: left;
+ 50% {
+ background-position: 50% 100%
}
-
- .grave-img {
- background: url(../grave.png) no-repeat;
- position: absolute;
- width: 63px;
- height: 87px;
- top: 3px;
- left: 3px;
- z-index: 10;
+ 100% {
+ background-position: 51% 0%
}
+}
- .deck-back {
- background: url(../back.png) no-repeat;
- float: left;
- width: 63px;
- height: 87px;
- margin: 3px 0 0 10px;
+@-moz-keyframes AnimationName {
+ 0% {
+ background-position: 51% 0%
}
+ 50% {
+ background-position: 50% 100%
+ }
+ 100% {
+ background-position: 51% 0%
+ }
+}
+
+@keyframes AnimationName {
+ 0% {
+ background-position: 51% 0%
+ }
+ 50% {
+ background-position: 50% 100%
+ }
+ 100% {
+ background-position: 51% 0%
+ }
+}
+
+/** SUB HAND **/
+
+.sub-hand {
+ float: left;
+ width: 150px;
+ margin: 18px 0 0 0;
+}
+
+.grave {
+ position: relative;
+ width: 69px;
+ height: 93px;
+ float: left;
+}
+
+.grave-img {
+ background: url(../grave.png) no-repeat;
+ position: absolute;
+ width: 63px;
+ height: 87px;
+ top: 3px;
+ left: 3px;
+ z-index: 10;
+}
+
+.deck-back {
+ background: url(../back.png) no-repeat;
+ float: left;
+ width: 63px;
+ height: 87px;
+ margin: 3px 0 0 10px;
+}
-}
\ No newline at end of file
diff --git a/client/scss/main.scss b/client/scss/main.scss
index 1c053bb..da99e06 100644
--- a/client/scss/main.scss
+++ b/client/scss/main.scss
@@ -49,7 +49,10 @@ $game-height: 800px;
margin-left: 0 !important;
}
&.active {
- box-shadow: 0px 0px 15px #ffbb0b;
+ box-shadow: 0px 0px 15px #ffbb0b !important;
+ &:hover {
+ box-shadow: 0px 0px 30px #ffd135 !important;
+ }
}
}
@@ -77,7 +80,7 @@ $game-height: 800px;
&:hover {
position: relative;
z-index: 10;
- transform: scale(1.25, 1.25);
+ transform: scale(1.1, 1.1);
}
}
}
@@ -122,16 +125,35 @@ $game-height: 800px;
height: $game-height/2;
}
+.field {
+ .card-wrap {/*
+ height: 90px;
+ width: 63px !important;*//*
+ float: left;
+ cursor: pointer;
+ z-index: 10;
+ height: auto !important;
+ width: auto !important;
+ margin: 3px;*/
+ }
+}
+
.card {
- border: 2px solid black;
+ /*border: 2px solid black;
float: left;
margin: 3px;
+ overflow: hidden;*//*
height: 90px;
- overflow: hidden;
+ overflow: hidden;*//*
+ border: none !important;
+ margin: 0 !important;
+ border-radius: 0 !important;
+ overflow: visible !important;
+ height: 93px !important;
+*/
-
- i {
- display: block;
+ i {/*
+ display: block;*/
//transform: scale(1);
}
@@ -155,11 +177,12 @@ $game-height: 800px;
margin-left: -4px;
//margin-top: 2px;
cursor: default;
- padding-top: 4px;
+ //padding-top: 3px;
//padding-left: -4px;
- height: 37px;
+ height: 30px;
width: 30px;
background: url("../../assets/card_strength_border.png") no-repeat;
+ z-index: 11;
span {
color: #ff2d00;
@@ -170,6 +193,8 @@ $game-height: 800px;
width: 30px;
display: block;
margin-left: -2px;
+ margin-top: -1px;
+ line-height: 30px;
}
}
@@ -177,11 +202,11 @@ $game-height: 800px;
opacity: 0.5;
}
- &.activeCard {
+ /*&.activeCard {
position: relative;
z-index: 11;
transform: scale(1.5, 1.5) !important;
- }
+ }*/
}
.card-preview {
diff --git a/client/templates/battle.handlebars b/client/templates/battle.handlebars
index 5b92686..6055237 100644
--- a/client/templates/battle.handlebars
+++ b/client/templates/battle.handlebars
@@ -59,7 +59,7 @@
</div>
</div>
<div class="row">
- <div class="col-xs-12 field field-hand">
+ <div class="col-xs-12 field field-hand {{#if isWaiting}}{{else}}active{{/if}}">
{{#each cards as |val key|}}
{{>card val}}
{{/each}}