yo

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

client/scss/_effects.scss

@@ -1,5 +1,50 @@
-.small-cards-modal {
+.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);
@@ -25,6 +70,8 @@
     float: left;
   }
 
+}
+
 .card-wrap {
   float: left;
   cursor: pointer;
@@ -34,6 +81,12 @@
   margin: 3px;
 }
 
+&.activeCard {
+    position: relative;
+    z-index: 19 !important;
+    transform: scale(1.1, 1.1) !important;
+  }
+
 .card-wrap .shadow,
 .grave .shadow {
   height: calc(100% - 40px);
@@ -42,7 +95,7 @@
   width: calc(100% - 26px);
 }
 
-  .card-wrap:hover {
+.card-wrap:hover, .activeCard {
   z-index: 20;
 }
 
@@ -66,6 +119,7 @@
 /** SHAME **/
 
 .card-wrap:hover .bla,
+.activeCard .bla,
 .grave:hover .bla,
 .leader-card:hover .bla {
   box-shadow: 0 0 2px 0 orange;
@@ -96,6 +150,7 @@
 
 .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;
@@ -108,6 +163,7 @@
 }
 
 .card-wrap:hover .ani,
+.activeCard .ani,
 .grave:hover .ani,
 .leader-card:hover .ani {
   background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
@@ -131,7 +187,8 @@
   75% {
     opacity: .5;
   }
-    100%{      opacity: 0;
+  100% {
+    opacity: 0;
   }
 }
 
@@ -148,7 +205,8 @@
   75% {
     opacity: .5;
   }
-    100%{      opacity: 0;
+  100% {
+    opacity: 0;
   }
 }
 
@@ -165,7 +223,8 @@
   75% {
     opacity: .5;
   }
-    100%{      opacity: 0;
+  100% {
+    opacity: 0;
   }
 }
 
@@ -183,6 +242,7 @@
 }
 
 .card-wrap:hover .overlay-card,
+.activeCard .overlay-card,
 .grave:hover .overlay-card,
 .leader-card:hover .overlay-card {
   opacity: 1;
@@ -192,19 +252,39 @@
 }
 
 @-webkit-keyframes AnimationName {
-    0%{background-position:51% 0%}
+  0% {
-    50%{background-position:50% 100%}
+    background-position: 51% 0%
-    100%{background-position:51% 0%}
   }
+  50% {
+    background-position: 50% 100%
+  }
+  100% {
+    background-position: 51% 0%
+  }
+}
+
 @-moz-keyframes AnimationName {
-    0%{background-position:51% 0%}
+  0% {
-    50%{background-position:50% 100%}
+    background-position: 51% 0%
-    100%{background-position:51% 0%}
   }
+  50% {
+    background-position: 50% 100%
+  }
+  100% {
+    background-position: 51% 0%
+  }
+}
+
 @keyframes AnimationName {
-    0%{background-position:51% 0%}
+  0% {
-    50%{background-position:50% 100%}
+    background-position: 51% 0%
-    100%{background-position:51% 0%}
+  }
+  50% {
+    background-position: 50% 100%
+  }
+  100% {
+    background-position: 51% 0%
+  }
 }
 
 /** SUB HAND **/
@@ -240,4 +320,3 @@
   margin: 3px 0 0 10px;
 }
 
-}

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 {/*
-  i {
+    display: block;*/
-    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 {

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