wip fixed source cast

client/src/components/animations.jsx

@@ -58,7 +58,7 @@ const colours = {
 const { TIMES } = require('../constants');
 
 function animations(props) {
-    const { game, account, resolution, player, construct } = props;
+    const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
     if (!resolution) return false;
     const [, event] = resolution.event;
     if (!event || !event.skill) return false;
@@ -90,15 +90,18 @@ function animations(props) {
             : otherTeamIds.findIndex(c => c === resolution.target.id);
 
         const x = j - i;
-        anime({
-            targets: [document.getElementById(construct.id)],
-            translateY: y * 200,
-            translateX: x * 200,
-            easing: 'easeInOutElastic',
-            direction: 'alternate',
-            duration: TIMES.SOURCE_DURATION_MS,
-
-        });
+        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,
+            });
+        }
     }
     const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
     if (!((resolution.target.id === construct.id)
@@ -116,7 +119,7 @@ function animations(props) {
         case 'Blast': return <Blast />;
         case 'Siphon': return <Siphon />;
         case 'SiphonTick': return <SiphonTick />;
-        case 'Strike': return <Strike colour={colours.red}/>;
+        case 'Strike': return <Strike colour={colours.red} id={resolution.id}/>;
         case 'Chaos': return <Chaos />;
         case 'Slay': return <Slay />;
         case 'Heal': return <Heal />;

client/src/components/anims/strike.jsx

@@ -63,15 +63,6 @@ class Strike extends Component {
     }
 
     componentDidMount() {
-        this.animations.push(anime({
-            targets: ['#strike'],
-            opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-            ],
-            easing: 'easeInOutSine',
-        }));
-
         if (!this.props.team) {
             anime.set('#strike', {
                 rotate: Math.random() * 180 + 90,
@@ -81,15 +72,22 @@ class Strike extends Component {
                 rotate: Math.random() * 180 + 270,
             });
         }
+
         anime.set('#strike', {
             translateY: -200,
             translateX: 0,
         });
-        anime.set('#strikeFilter feDisplacementMap', {
-            scale: 1,
-        });
 
-        anime({
+        this.animations.push(anime({
+            targets: '#strike',
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+        this.animations.push(anime({
             targets: '#strike',
             translateY: 0,
             translateX: 0,
@@ -97,14 +95,14 @@ class Strike extends Component {
             delay: TIMES.TARGET_DELAY_MS,
             duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
             easing: 'easeInQuad',
-        });
-        anime({
+        }));
+        this.animations.push(anime({
             targets: '#strikeFilter feDisplacementMap',
             scale: 200,
             loop: false,
             delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
             easing: 'easeInQuad',
-        });
+        }));
     }
 
     componentWillUnmount() {

client/src/components/construct.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const { Component } = require('preact');
+const { connect } = require('preact-redux');
 
 const anime = require('animejs').default;
 
@@ -38,6 +39,13 @@ function clearAnimation(id) {
     animations[id] = false;
 }
 
+const addState = connect(
+    function receiveState(state) {
+        const { avatarAnimation } = state;
+        return { avatarAnimation };
+    }
+);
+
 class ConstructAvatar extends Component {
     render() {
         return (
@@ -53,6 +61,11 @@ class ConstructAvatar extends Component {
         animateConstruct(this.props.id);
     }
 
+    componentWillReceiveProps(nextProps) {
+        // console.log(this.props);
+        // console.log(nextProps);
+    }
+
     componentWillUnmount() {
         clearAnimation(this.props.id);
     }
@@ -81,6 +94,6 @@ class ConstructImg extends Component {
 }
 
 module.exports = {
-    ConstructAvatar,
+    ConstructAvatar: addState(ConstructAvatar),
     ConstructImg,
 };

client/src/components/game.construct.jsx

@@ -10,6 +10,9 @@ const shapes = require('./shapes');
 
 const SkillBtn = require('./skill.btn');
 
+
+const actions = require('../actions');
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -18,6 +21,7 @@ const addState = connect(
             account,
             resolution,
             activeSkill,
+            avatarAnimation,
         } = state;
 
         function selectSkillTarget(targetConstructId) {
@@ -31,15 +35,26 @@ const addState = connect(
         if (activeSkill && activeSkill.skill.self_targeting) {
             ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
         }
-
         return {
             game,
             account,
             resolution,
             activeSkill,
+            avatarAnimation,
             selectSkillTarget,
         };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setAvatarAnimation(c) {
+            return dispatch(actions.setAvatarAnimation(c));
+        }
+
+        return {
+            setAvatarAnimation,
+        };
     }
+
 );
 
 
@@ -52,7 +67,8 @@ function GameConstruct(props) {
         player,
         resolution,
         activeSkill,
-        setActiveConstruct,
+        avatarAnimation,
+        setAvatarAnimation,
         selectSkillTarget,
     } = props;
 
@@ -77,8 +93,7 @@ function GameConstruct(props) {
     const effects = construct.effects.length
         ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
         : <div>&nbsp;</div>;
-
-    const combatAnim = animations({ game, account, resolution, player, construct });
+    const combatAnim = animations({ game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation });
     const combatText = getCombatText(resolution, construct);
     return (
         <div