good

client/src/components/animations.jsx

@@ -123,7 +123,6 @@ class ConstructAnimation extends Component {
         };
 
         const anim = chooseAnim(skill);
-        console.log(anim);
         if (!anim) return false;
 
         return (

client/src/components/anims/source.cast.jsx

@@ -6,8 +6,8 @@ function sourceCast(id, direction) {
     const { x, y } = direction;
     return anime({
         targets: [document.getElementById(id)],
-        translateX: x * 200,
-        translateY: y * 200,
+        translateX: [0, x * 200],
+        translateY: [0, y * 200],
         easing: 'easeInOutElastic',
         direction: 'alternate',
         duration: TIMES.SOURCE_DURATION_MS,

client/src/components/construct.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const { connect } = require('preact-redux');
 
-const { match } = require('./../utils');
+// const { match } = require('./../utils');
 
 const banish = require('./anims/banish');
 const idleAnimation = require('./anims/idle');
@@ -37,16 +37,15 @@ class ConstructAvatar extends Component {
     }
 
     componentDidMount() {
-        console.log(this.props.construct.name, 'mounted');
-        this.idle = idleAnimation(this.props.construct.id);
-        this.animations.push(this.idle);
-    }
-
-    componentDidUpdate(newProps) {
-        const { animSource, animTarget, construct } = newProps;
+        const { animSource, animTarget, construct } = this.props;
 
         // back to idle
-        if (!animTarget || !animSource) {
+        if (!animTarget && !animSource) {
+            if (!this.idle) {
+                this.idle = idleAnimation(this.props.construct.id);
+                this.animations.push(this.idle);
+            }
+
             return this.idle.play();
         }
 
@@ -54,7 +53,7 @@ class ConstructAvatar extends Component {
 
         const selectAnim = () => {
             if (isSource) {
-                console.log(construct.name, 'source anim');
+                console.warn(construct.name, animSource);
                 return sourceCast(animSource.constructId, animSource.direction);
             }
 
@@ -66,13 +65,41 @@ class ConstructAvatar extends Component {
         };
 
         const anim = selectAnim();
-        if (anim) {
-            this.idle.pause();
-            this.animations.push(anim);
-            return true;
+        if (!anim) return false;
+
+        this.idle.pause();
+        this.animations.push(anim);
+        return true;
+    }
+
+    componentDidUpdate(prevProps) {
+        const { animSource, animTarget, construct } = this.props;
+
+        // back to idle
+        if (!animTarget && !animSource) {
+            return this.idle.play();
         }
 
-        return false;
+        const isSource = animSource && animSource.constructId === construct.id;
+
+        const selectAnim = () => {
+            if (isSource) {
+                return sourceCast(animSource.constructId, animSource.direction);
+            }
+
+            switch (animTarget.skill) {
+            case 'banish': return banish(construct.id);
+            case 'invert': return invert(construct.id);
+            default: return null;
+            }
+        };
+
+        const anim = selectAnim();
+        if (!anim) return false;
+
+        this.idle.pause();
+        this.animations.push(anim);
+        return true;
     }
 
     resetAnimations() {
@@ -85,14 +112,31 @@ class ConstructAvatar extends Component {
         this.resetAnimations();
     }
 
-    shouldComponentUpdate({ animTarget, animSource, construct }) {
-        const updated = (animTarget !== this.props.animTarget) || (animSource !== this.props.animSource);
-        if (!updated) return false;
+    shouldComponentUpdate({ animSource, construct }) {
+        if (animSource === this.props.animSource) {
+            // console.warn(construct.name, 'thinks its same props')
+            return false;
+        }
 
-        const isSource = animSource && animSource.constructId === construct.id;
-        const isTarget = animTarget && animTarget.constructId === construct.id;
+        // something has changed
+        // what do?
 
-        return isSource || isTarget;
+        // this is the source
+        if (animSource && animSource.constructId === construct.id) {
+            // console.warn(construct.name, 'should update')
+            return true;
+        }
+
+        // this is the target
+        // if (animTarget && animTarget.constructId === construct.id) return true;
+
+        // we were previously doing src anim
+        const prevSrc = this.props.animSource && this.props.animSource.constructId === construct.id;
+        if (prevSrc && !animSource) return true;
+
+        // console.warn(construct.name, 'not updating');
+
+        return false;
     }
 }
 

client/src/components/targeting.arrows.jsx

@@ -6,8 +6,8 @@ const { connect } = require('preact-redux');
 const throttle = require('lodash/throttle');
 
 const addState = connect(
-    ({ game, account, animSource, animTarget }) =>
-        ({ game, account, animSource, animTarget })
+    ({ game, account, animTarget, animating }) =>
+        ({ game, account, animTarget, animating })
 );
 
 class TargetSvg extends Component {
@@ -24,12 +24,14 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animSource, animTarget } = props;
+        const { game, account, animating, animTarget } = props;
         const { width, height } = state;
 
         // resolutions happening
         // just put skill name up
-        if (animSource || animTarget) {
+        if (animating) {
+            if (!animTarget) return false;
+
             return (
                 <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
                     <text