combat text init

client/assets/styles/game.less

@@ -37,6 +37,11 @@
         height: 100%;
         width: 100%;
     }
+
+    .combat-text {
+        left: 15%;
+        top: 60%;
+    }
 }
 
 .opponent {
@@ -72,6 +77,11 @@
                 "avatar"
         }
 
+        .combat-text {
+            left: 15%;
+            top: 40%;
+        }
+
         .effects {
             align-self: flex-start;
         }
@@ -145,6 +155,14 @@
         }
     }
 
+    .combat-text {
+        position: absolute;
+        z-index: 10;
+        span {
+            background-color: black;
+        }
+    }
+
     .skills {
         z-index: 2;
         button {

client/src/components/construct.jsx

@@ -96,26 +96,16 @@ class ConstructAvatar extends Component {
     }
 }
 
-
+function ConstructText(props) {
-const addStateText = connect(
+    const { construct } = props;
-    function receiveState(state) {
-        const { animText } = state;
-        return { animText };
-    }
-);
-
-function constructText(props) {
-    const { construct, animText } = props;
     if (!construct) return false;
 
-    const text = animText && animText.constructId === construct.id
+    const text = construct.name;
-        ? animText.text
-        : construct.name;
 
     return <h3 class={'name'}><span>{text}</span></h3>;
 }
 
 module.exports = {
     ConstructAvatar: addState(ConstructAvatar),
-    ConstructText: addStateText(constructText),
+    ConstructText,
 };

client/src/components/game.construct.jsx

@@ -12,6 +12,23 @@ const actions = require('../actions');
 
 const SkillBtn = require('./skill.btn');
 
+const addStateText = connect(
+    function receiveState(state) {
+        const { animText } = state;
+        return { animText };
+    }
+);
+
+function combatText(props) {
+    const { construct, animText } = props;
+    const text = animText && animText.constructId === construct.id
+        ? <h1 class="combat-text"><span>{animText.text}</span></h1>
+        : null;
+    return text;
+}
+
+const ConstructAnimationText = addStateText(combatText);
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -179,6 +196,7 @@ class GameConstruct extends Component {
                     <div class="stats"> {stats} </div>
                     <ConstructAvatar construct={construct} />
                     <ConstructText construct={construct} />
+                    <ConstructAnimationText construct={construct} />
                 </div>
             </div>
         );

client/src/events.jsx

@@ -85,7 +85,7 @@ function registerEvents(store) {
                 const newRes = game.resolved.slice(currentGame.resolved.length);
                 return eachSeries(newRes, (r, cb) => {
                     if (!r.event) return cb();
-                    const timeout = animations.getTime(r.stages);
+                    let timeout = animations.getTime(r.stages);
                     const anims = animations.getObjects(r, game, account);
                     const text = animations.getText(r);
                     store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
@@ -107,8 +107,9 @@ function registerEvents(store) {
                         } else {
                             setTimeout(
                                 () => store.dispatch(actions.setAnimText(text)),
-                                timeout - TIMES.POST_SKILL_DURATION_MS
+                                timeout - TIMES.POST_SKILL_DURATION_MS - 500
                             );
+                            timeout -= 500;
                         }
                     }