Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

client/assets/styles/colours.less

@@ -181,3 +181,12 @@ button {
         color: @blue;
     }
 }
+
+@keyframes target-ko {
+    0% {
+        opacity: 100%;
+    }
+    100% {
+        opacity: 20%;
+    }
+}

client/assets/styles/game.less

@@ -10,10 +10,6 @@
     //     "opponent"
     //     "target  "
     //     "player  ";
-
-    .skill-description {
-        font-size: 75%;
-    }
 }
 
 .game .team, .faceoff .team {
@@ -101,7 +97,7 @@
     justify-items: center;
 
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 2fr;
+    grid-template-rows: minmax(min-content, 1fr) min-content;
     grid-template-areas:
         "left"
          "right";
@@ -205,6 +201,10 @@
         font-size: 100%;
     }
 
+    &.ko-transition {
+        animation: target-ko 1s ease-in-out 0s 1;
+    }
+
     &.ko {
         animation: none;
         opacity: 0.20;

client/assets/styles/styles.mobile.less

@@ -40,7 +40,7 @@
                 }
 
                 svg {
-                    height: 1em;
+                    height: 1.5em;
                 }
             }
 
@@ -54,6 +54,13 @@
                 font-size: 1em;
             }
 
+            .skill-description {
+                font-size: 0.8em;
+                svg {
+                    height: 1em;
+                }
+            }
+
             .player {
                 .game-construct {
                     grid-template-areas:
@@ -85,7 +92,7 @@
                 }
 
                 .avatar {
-                    bottom: 0px;
+                    top: 3em;
                 }
             }
         }

client/src/animations.utils.jsx

@@ -111,7 +111,7 @@ function getText(resolution) {
     function generatePostSkill() {
         const [type, event] = resolution.event;
         if (type === 'Ko') {
-            return { text: 'KO!', css: 'ko' };
+            return { text: 'KO!', css: 'ko-transition' };
         }
 
         if (type === 'Disable') {

client/src/components/game.construct.jsx

@@ -117,7 +117,8 @@ class GameConstruct extends Component {
             setGameEffectInfo,
         } = this.props;
 
-        const ko = construct.green_life.value === 0 ? 'ko' : '';
+        const koEvent = animText ?  animText.text === 'KO!' && animText.constructId === construct.id : false;
+        const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : '';
         const classes = eventClasses(animating, animFocus, construct, animText);
 
         const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
@@ -146,11 +147,9 @@ class GameConstruct extends Component {
                 const speed = <span> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </span>;
                 return (
                     <div class="skill-description">
-                        <span>
-                            <h2> {gameSkillInfo.skill} </h2>
-                            {infoDescription}
-                            {speed}
-                        </span>
+                        <h2><span> {gameSkillInfo.skill} </span></h2>
+                        <span>{infoDescription} </span>
+                        {speed}
                     </div>);
             }
             const effects = construct.effects.length