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

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,
+.card-wrap {
-  .grave .shadow {
+  float: left;
-    height: calc(100% - 40px);
+  cursor: pointer;
-    left: 14px;
+  z-index: 10;
-    top: 20px;
+  height: auto !important;
-    width: calc(100% - 26px);
+  width: auto !important;
-  }
+  margin: 3px;
+}
 
-  .card-wrap:hover {
+&.activeCard {
-    z-index: 20;
-  }
-
-  .card {
-    float: left;
-    height: 93px;
-    width: 69px;
     position: relative;
-    transition: margin .05s ease-in-out 0s;
+    z-index: 19 !important;
+    transform: scale(1.1, 1.1) !important;
   }
 
-  .card i {
+.card-wrap .shadow,
-    display: block;
+.grave .shadow {
-    position: absolute;
+  height: calc(100% - 40px);
-    top: 3px;
+  left: 14px;
-    left: 3px;
+  top: 20px;
-    height: 87px;
+  width: calc(100% - 26px);
-    z-index: 10;
+}
+
+.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;
   }
-
+  25% {
-  /** SHAME **/
+    opacity: .5;
-
+  }
-  .card-wrap:hover .bla,
+  50% {
-  .grave:hover .bla,
-  .leader-card:hover .bla {
-    box-shadow: 0 0 2px 0 orange;
     opacity: 1;
   }
-
+  75% {
-  .bla {
+    opacity: .5;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    opacity: 0;
-    border-radius: 0;
   }
-
+  100% {
-  .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,
+@-webkit-keyframes Shadow {
-  .grave:hover .shadow,
+  0% {
-  .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);
     opacity: 0;
-    cursor: pointer;
   }
-
+  25% {
-  .card-wrap:hover .overlay-card,
+    opacity: .5;
-  .grave:hover .overlay-card,
+  }
-  .leader-card:hover .overlay-card {
+  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 {
+@keyframes Shadow {
-    0%{background-position:51% 0%}
+  0% {
-    50%{background-position:50% 100%}
+    opacity: 0;
-    100%{background-position:51% 0%}
   }
-  @-moz-keyframes AnimationName {
+  25% {
-    0%{background-position:51% 0%}
+    opacity: .5;
-    50%{background-position:50% 100%}
-    100%{background-position:51% 0%}
   }
-  @keyframes AnimationName {
+  50% {
-    0%{background-position:51% 0%}
+    opacity: 1;
-    50%{background-position:50% 100%}
-    100%{background-position:51% 0%}
   }
+  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 {
+.card-wrap:hover .overlay-card,
-    float: left;
+.activeCard .overlay-card,
-    width: 150px;
+.grave:hover .overlay-card,
-    margin: 18px 0 0 0;
+.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%
   }
-
+  50% {
-  .grave {
+    background-position: 50% 100%
-    position: relative;
-    width: 69px;
-    height: 93px;
-    float: left;
   }
-
+  100% {
-  .grave-img {
+    background-position: 51% 0%
-    background: url(../grave.png) no-repeat;
-    position: absolute;
-    width: 63px;
-    height: 87px;
-    top: 3px;
-    left: 3px;
-    z-index: 10;
   }
+}
 
-  .deck-back {
+@-moz-keyframes AnimationName {
-    background: url(../back.png) no-repeat;
+  0% {
-    float: left;
+    background-position: 51% 0%
-    width: 63px;
-    height: 87px;
-    margin: 3px 0 0 10px;
   }
+  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;
+}
 
-}

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