Merge branch 'anims-change' into develop

client/src/components/animations.jsx

@@ -1,11 +1,7 @@
 const preact = require('preact');
-const anime = require('animejs').default;
-
-const AttackCharge = require('./anims/attack.charge');
 
 const Amplify = require('./anims/amplify');
 const Absorb = require('./anims/absorb');
-const Banish = require('./anims/banish');
 const Bash = require('./anims/bash');
 const Blast = require('./anims/blast');
 const Block = require('./anims/block');
@@ -23,7 +19,6 @@ const Haste = require('./anims/haste');
 const Heal = require('./anims/heal');
 const Hybrid = require('./anims/hybrid');
 const Intercept = require('./anims/intercept');
-const Invert = require('./anims/invert');
 const Link = require('./anims/link');
 const Purify = require('./anims/purify');
 const Purge = require('./anims/purge');
@@ -45,18 +40,6 @@ const TriageTick = require('./anims/triage.tick');
 
 const { removeTier } = require('../utils');
 
-const colours = {
-    red: '#a52a2a',
-    green: '#1FF01F',
-    blue: '#3498db',
-    purple: '#A25AC1',
-    yellow: '#d1c86a',
-    cyan: '#6AD1BF',
-    white: '#FFFFFF',
-};
-
-const { TIMES } = require('../constants');
-
 function animations(props) {
     const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
     if (!resolution || resolution === 'clear') return false;
@@ -70,67 +53,57 @@ function animations(props) {
     const otherTeam = game.players.find(t => t.id !== account.id);
     const otherTeamIds = otherTeam.constructs.map(c => c.id);
 
-    const sourceIsPlayer = playerTeamIds.includes(construct.id);
+    const sourceIsPlayer = playerTeamIds.includes(resolution.source.id);
     const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
 
-    const skipSource = (resolution.source.id === resolution.target.id
+    const getDirection = () => {
-        && ['Invert', 'Banish'].includes(removeTier(event.skill)));
-
-    if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
         const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
-
         let y = 0;
         if (!sameTeam) y = targetIsPlayer ? 1 : -1;
 
-        //    const y = sameTeam
-        //      ? 0
-        //      : targetIsPlayer
-        //          ? 1
-        //          : -1;
-
         const i = sourceIsPlayer
-            ? playerTeamIds.findIndex(c => c === construct.id)
+            ? playerTeamIds.findIndex(c => c === resolution.source.id)
-            : otherTeamIds.findIndex(c => c === construct.id);
+            : otherTeamIds.findIndex(c => c === resolution.source.id);
 
         const j = targetIsPlayer
             ? playerTeamIds.findIndex(c => c === resolution.target.id)
             : otherTeamIds.findIndex(c => c === resolution.target.id);
-
         const x = j - i;
+        return { x, y };
+    };
+
+    const skipSource = (resolution.source.id === resolution.target.id
+        && ['Invert', 'Banish'].includes(removeTier(event.skill)));
+
+    // Play Source Animation
+    if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
         if (!avatarAnimation.source) {
-            setAvatarAnimation({
+            setAvatarAnimation(true, avatarAnimation.target, resolution.id,
-                source: true,
+                construct.id, 'sourceCast', getDirection());
-                target: avatarAnimation.target,
-                id: resolution.id,
-                animTargetId: construct.id,
-                type: 'sourceCast',
-                params: { x, y },
-            });
         }
     }
     const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
-    if (!((resolution.target.id === construct.id)
+    if (!(resolution.target.id === construct.id)
-        || (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false;
+        && !(resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id))) return false;
 
-    // target animation
+    // Play Target animation
     const anim = text => {
         if (!text || !resolution.sequence[0].includes('END_SKILL')) return false;
         const skill = removeTier(text);
-
         switch (skill) {
         // Attack base
-        case 'Attack': return <Strike colour={colours.white}/>;
+        case 'Attack': return <Strike colour={'#f5f5f5'} direction={getDirection()}/>;
-        case 'Blast': return <Blast />;
+        case 'Blast': return <Blast direction={getDirection()}/>;
         case 'Siphon': return <Siphon />;
         case 'SiphonTick': return <SiphonTick />;
-        case 'Strike': return <Strike colour={colours.red} id={resolution.id}/>;
+        case 'Strike': return <Strike colour={'#a52a2a'} direction={getDirection()}/>;
-        case 'Chaos': return <Chaos />;
+        case 'Chaos': return <Chaos direction={getDirection()}/>;
-        case 'Slay': return <Slay />;
+        case 'Slay': return <Slay direction={getDirection()}/>;
         case 'Heal': return <Heal />;
 
         // Buff Base
         case 'Buff': return <Buff />;
-        case 'Amplify': return <Amplify/>;
+        case 'Amplify': return <Amplify />;
         case 'Haste': return <Haste />;
         case 'Triage': return <Triage />;
         case 'TriageTick': return <TriageTick />;
@@ -145,14 +118,8 @@ function animations(props) {
         case 'DecayTick': return <Decay />;
         case 'Invert': {
             if (!avatarAnimation.target) {
-                setAvatarAnimation({
+                setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null);
-                    source: avatarAnimation.source,
+            } return false;
-                    target: true,
-                    id: resolution.id,
-                    animTargetId: construct.id,
-                    type: 'invert',
-                });
-            } break;
         }
         case 'Purge': return <Purge />;
         case 'Silence': return <Silence />;
@@ -162,14 +129,8 @@ function animations(props) {
         case 'Stun': return <Stun />;
         case 'Banish': {
             if (!avatarAnimation.target) {
-                setAvatarAnimation({
+                setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null);
-                    source: avatarAnimation.source,
+            } return false;
-                    target: true,
-                    id: resolution.id,
-                    animTargetId: construct.id,
-                    type: 'banish',
-                });
-            } break;
         }
         case 'Bash': return <Bash />;
         case 'Absorb': return <Absorb />;

client/src/components/anims/blast.jsx

@@ -59,17 +59,9 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
         anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 90,
+            translateY: -300 * this.props.direction.y,
-            });
+            translateX: -200 * this.props.direction.x,
-        } else {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
-            });
-        }
-        anime.set('.skill-anim', {
-            translateY: -200,
             opacity: 0,
         });
 
@@ -88,6 +80,7 @@ class AttackCharge extends Component {
         anime({
             targets: '.skill-anim',
             translateY: 0,
+            translateX: 0,
             loop: false,
             delay: TIMES.TARGET_DELAY_MS,
             duration: (duration * 1 / 2),

client/src/components/anims/chaos.jsx

@@ -16,7 +16,6 @@ function projectile(x, y, radius, colour) {
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            id="projectile"
             filter="url(#explosion)"
         />
     );
@@ -42,7 +41,7 @@ class AttackCharge extends Component {
                 <defs>
                     <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
                         <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
-                        <stop offset="100%" style={`stop-color:#A25AC1;stop-opacity:1`} />
+                        <stop offset="100%" style={'stop-color:#A25AC1;stop-opacity:1'} />
                     </radialGradient>
                 </defs>
                 <filter id="explosion">
@@ -57,16 +56,7 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+        const projectiles = document.querySelectorAll('.skill-anim circle');
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 90,
-            });
-        } else {
-            anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
-            });
-        }
-        const projectiles = document.querySelectorAll('#projectile');
         projectiles.forEach(proj => {
             const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db';
             anime.set(proj, {
@@ -75,8 +65,8 @@ class AttackCharge extends Component {
         });
 
         anime.set('.skill-anim', {
-            translateY: -200,
+            translateY: -300 * this.props.direction.y,
-            translateX: 0,
+            translateX: -200 * this.props.direction.x,
             opacity: 0,
         });
         anime.set('#explosion feDisplacementMap', {

client/src/components/anims/slay.jsx

@@ -17,7 +17,6 @@ function projectile(x, y, radius, colour) {
             fill="url(#grad1)"
             stroke-width="2"
             stroke={colour}
-            id="projectile"
         />
     );
 }
@@ -68,7 +67,18 @@ class AttackCharge extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+        if (this.props.direction.y) {
+            anime.set('#strike', {
+                rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
+            });
+            console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
+        } else {
+            anime.set('#strike', {
+                rotate: 90,
+            });
+        }
+
+/*        if (!this.props.team) {
             anime.set('.skill-anim', {
                 rotate: Math.random() * 180 + 90,
             });
@@ -77,7 +87,7 @@ class AttackCharge extends Component {
                 rotate: Math.random() * 180 + 270,
             });
         }
-        anime.set('.skill-anim', {
+*/        anime.set('.skill-anim', {
             translateY: -400,
             translateX: 0,
             opacity: 0,
@@ -123,7 +133,7 @@ class AttackCharge extends Component {
             delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
         }));
 
-        const projectiles = document.querySelectorAll('#projectile');
+        const projectiles = document.querySelectorAll('.skill-anim circle');
         projectiles.forEach(proj => {
             this.animations.push(anime({
                 targets: proj,

client/src/components/anims/strike.jsx

@@ -44,7 +44,6 @@ class Strike extends Component {
                 id="strike"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                // {this.charges}
                 <defs>
                     <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
                         <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
@@ -62,19 +61,26 @@ class Strike extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+        console.log(this.props.direction);
+/*        if (this.props.direction.y) {
             anime.set('#strike', {
-                rotate: Math.random() * 180 + 90,
+                rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
             });
+            console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
         } else {
             anime.set('#strike', {
-                rotate: Math.random() * 180 + 270,
+                rotate: 90,
             });
         }
-
+*/
+        let rotate = 90;
+        if (this.props.direction.y) {
+            if (!this.props.direction.x) rotate = 0;
+        }
         anime.set('#strike', {
-            translateY: -200,
+            translateY: -300 * this.props.direction.y,
-            translateX: 0,
+            translateX: -150 * this.props.direction.x,
+            rotate,
         });
 
         this.animations.push(anime({

client/src/components/game.construct.jsx

@@ -46,8 +46,8 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setAvatarAnimation(c) {
+        function setAvatarAnimation(source, target, id, animTargetId, type, params) {
-            return dispatch(actions.setAvatarAnimation(c));
+            return dispatch(actions.setAvatarAnimation({ source, target, id, animTargetId, type, params }));
         }
 
         return {