wip set avatar animation in construct class

client/src/components/animations.jsx

@@ -90,17 +90,8 @@ function animations(props) {
             : otherTeamIds.findIndex(c => c === resolution.target.id);
 
         const x = j - i;
-        if (avatarAnimation !== resolution.id) {
-            console.log(avatarAnimation);
-            setAvatarAnimation(resolution.id);
-            anime({
-                targets: [document.getElementById(construct.id)],
-                translateY: y * 200,
-                translateX: x * 200,
-                easing: 'easeInOutElastic',
-                direction: 'alternate',
-                duration: TIMES.SOURCE_DURATION_MS,
-            });
+        if (avatarAnimation.id !== resolution.id) {
+            setAvatarAnimation({ id: resolution.id, animTargetId: construct.id, x, y });
         }
     }
     const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;

client/src/components/construct.jsx

@@ -1,9 +1,10 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const { connect } = require('preact-redux');
-
 const anime = require('animejs').default;
 
+const { TIMES } = require('../constants');
+
 const genAvatar = name => {
     let hash = 0;
     if (name.length === 0) return hash;
@@ -47,6 +48,12 @@ const addState = connect(
 );
 
 class ConstructAvatar extends Component {
+    constructor() {
+        super();
+        this.animId = 0;
+        this.animations = [];
+    }
+
     render() {
         return (
             <div
@@ -62,6 +69,17 @@ class ConstructAvatar extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
+        if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.id) {
+            this.animId = nextProps.avatarAnimation.id;
+            anime({
+                targets: [document.getElementById(this.props.id)],
+                translateY: nextProps.avatarAnimation.y * 200,
+                translateX: nextProps.avatarAnimation.x * 200,
+                easing: 'easeInOutElastic',
+                direction: 'alternate',
+                duration: TIMES.SOURCE_DURATION_MS,
+            });
+        }
         // console.log(this.props);
         // console.log(nextProps);
     }