praise it

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>
-                {crypSkills}
-                <div class="stats"> {stats} </div>
-                <ConstructAvatar construct={construct} />
-                <ConstructAnimation construct={construct} />
-                <ConstructText construct={construct} />
-                <div class="effects"> {effects} </div>
+                <div class="left">
+                    {crypSkills}
+                    <div class="effects"> {effects} </div>
+                </div>
+                <div class="right">
+                    <div class="stats"> {stats} </div>
+                    <ConstructAvatar construct={construct} />
+                    <ConstructText construct={construct} />
+                </div>
             </div>
         );
     }