praise it

client/assets/styles/game.less

@@ -29,24 +29,20 @@
 .opponent {
     grid-area: opponent;
 
-    .combat-text {
-        top: 75%;
-        left: 50%;
-    }
-
-    .combat-anim {
-        top: 25%;
-        left: 50%;
-    }
-
     .game-construct {
         align-items: flex-start;
-        grid-template-rows: min-content min-content 1fr;
         grid-template-columns: 1fr 2fr;
+        grid-template-rows: 1fr;
+
+        .right {
+            height: 100%;
+            display: grid;
+            grid-template-rows: min-content min-content 1fr;
             grid-template-areas:
-            "effects stats"
-            "effects name"
-            "effects avatar";
+                "stats"
+                "name"
+                "avatar";
+        }
 
         .effects {
             align-self: flex-start;
@@ -70,12 +66,24 @@
 
     justify-items: center;
 
-    grid-template-rows: minmax(min-content, 1fr) min-content min-content;
-    grid-template-columns: 1fr 4fr;
+    grid-template-columns: 1fr 3fr;
+
+    .left {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
         grid-template-areas:
-        "skills avatar"
-        "effects name"
-        "effects stats";
+            "skills "
+            "effects"
+    }
+
+    .right {
+        display: grid;
+        grid-template-rows: minmax(min-content, 1fr) min-content min-content;
+        grid-template-areas:
+            "avatar"
+            "name"
+            "stats";
+    }
 
     transition-property: translate, opacity;
     transition-duration: 0.25s;
@@ -117,23 +125,6 @@
         font-size: 1.5em;
     }
 
-    .ko {
-        animation: none;
-        opacity: 0.20;
-    }
-
-    .ko button:hover {
-        color: #333;
-    }
-
-    .unfocus {
-        opacity: 0.35;
-    }
-
-    .unfocus.ko {
-        opacity: 0.20;
-    }
-
     .stats {
         grid-area: stats;
         display: flex;
@@ -157,6 +148,23 @@
         white-space: nowrap;
         font-size: 100%;
     }
+
+    &.ko {
+        animation: none;
+        opacity: 0.20;
+    }
+
+    &.ko button:hover {
+        color: #333;
+    }
+
+    &.unfocus {
+        opacity: 0.35;
+    }
+
+    &.unfocus.ko {
+        opacity: 0.20;
+    }
 }
 
 @media (max-width: 1500px) {
@@ -187,29 +195,12 @@
     }
 }
 
-.combat-text {
-    font-size: 2em;
-    font-family: 'Jura';
-    position: absolute;
-    top: 5%;
-}
-
-.combat-text svg {
-    height: 7em;
-    max-width: 100%;
-}
-
 .combat-anim {
-    font-size: 2em;
-    font-family: 'Jura';
-    position: absolute;
-    object-fit: contain;
-    top: 15%;
     max-width: 100%;
 }
 
 .combat-anim svg {
-    height: 7em;
+    height: 100%;
     width: 100%;
 }
 

client/src/components/construct.jsx

@@ -8,6 +8,7 @@ const banish = require('./anims/banish');
 const idleAnimation = require('./anims/idle');
 const invert = require('./anims/invert');
 const sourceCast = require('./anims/source.cast');
+const { ConstructAnimation } = require('./animations');
 
 const addState = connect(
     function receiveState(state) {
@@ -27,12 +28,14 @@ class ConstructAvatar extends Component {
     }
 
     render() {
+        const { construct } = this.props;
         return (
             <div
                 class="avatar"
-                id={this.props.construct.id}
-                style={{ 'background-image': `url(/imgs/${this.props.construct.img}.svg)` }}
-            />
+                id={construct.id}
+                style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
+                <ConstructAnimation construct={construct} />
+            </div>
         );
     }
 
@@ -94,13 +97,13 @@ const addStateText = connect(
 
 function constructText(props) {
     const { construct, animText } = props;
-    if (!construct || !animText) return false;
+    if (!construct) return false;
 
-    const text = animText.constructId === construct.id
+    const text = animText && animText.constructId === construct.id
         ? animText.text
-        : null;
+        : construct.name;
 
-    return <div class={'combat-text'}>{text}</div>;
+    return <h3 class={'name'}>{text}</h3>;
 }
 
 module.exports = {

client/src/components/game.construct.jsx

@@ -5,7 +5,6 @@ const range = require('lodash/range');
 
 const { STATS } = require('../utils');
 const { ConstructAvatar, ConstructText } = require('./construct');
-const { ConstructAnimation } = require('./animations');
 const shapes = require('./shapes');
 
 const SkillBtn = require('./skill.btn');
@@ -106,13 +105,15 @@ class GameConstruct extends Component {
                 onClick={() => selectSkillTarget(construct.id)}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 class={`game-construct ${ko} ${classes}`} >
-                <h3 class="name"> {construct.name} </h3>
+                <div class="left">
                     {crypSkills}
+                    <div class="effects"> {effects} </div>
+                </div>
+                <div class="right">
                     <div class="stats"> {stats} </div>
                     <ConstructAvatar construct={construct} />
-                <ConstructAnimation construct={construct} />
                     <ConstructText construct={construct} />
-                <div class="effects"> {effects} </div>
+                </div>
             </div>
         );
     }