PogU

client/assets/styles/game.less

@@ -40,7 +40,7 @@
 
     .combat-text {
         left: 15%;
-        top: 40%;
+        top: 0%;
     }
 }
 
@@ -79,7 +79,7 @@
 
         .combat-text {
             left: 15%;
-            top: 40%;
+            top: 100%;
         }
 
         .effects {

client/src/components/game.construct.jsx

@@ -1,13 +1,13 @@
-const { connect } = require('preact-redux');
-const { Component } = require('preact');
 const preact = require('preact');
+const { connect } = require('preact-redux');
+const anime = require('animejs').default;
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
 const { STATS, removeTier } = require('../utils');
 const { ConstructAvatar, ConstructText } = require('./construct');
 const shapes = require('./shapes');
-const { INFO } = require('./../constants');
+const { INFO, TIMES } = require('./../constants');
 const actions = require('../actions');
 
 const SkillBtn = require('./skill.btn');
@@ -20,6 +20,19 @@ class combatText extends preact.Component {
         return false;
     }
 
+    componentDidUpdate(prevProps) {
+        const { animText, construct } = this.props;
+        if (animText && animText !== prevProps.animText && animText.constructId === construct.id) {
+            anime({
+                targets: '.combat-text',
+                top: '40%',
+                duration: TIMES.POST_SKILL_DURATION_MS,
+            });
+
+            console.log('grep');
+        }
+    }
+
     render(props) {
         const { construct, animText, itemInfo } = props;
         if (animText && animText.constructId === construct.id) {
@@ -132,7 +145,7 @@ const eventClasses = (animating, animFocus, construct, postSkill) => {
     return postSkill.css;
 };
 
-class GameConstruct extends Component {
+class GameConstruct extends preact.Component {
     constructor() {
         super();
         this.resolvedLength = 0;