wip

client/src/components/animations.jsx

@@ -53,7 +53,7 @@ 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 getDirection = () => {
@@ -62,13 +62,12 @@ function animations(props) {
         if (!sameTeam) y = 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 };
     };
@@ -79,32 +78,32 @@ function animations(props) {
     // Play Source Animation
     if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
         if (!avatarAnimation.source) {
-            setAvatarAnimation(true, avatarAnimation.target, resolution.id, construct.id, 'sourceCast', getDirection());
+            setAvatarAnimation(true, avatarAnimation.target, resolution.id,
+                construct.id, 'sourceCast', getDirection());
         }
     }
     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;
 
     // 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={'#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={'#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 />;
@@ -120,7 +119,7 @@ function animations(props) {
         case 'Invert': {
             if (!avatarAnimation.target) {
                 setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null);
-            } break;
+            } return false;
         }
         case 'Purge': return <Purge />;
         case 'Silence': return <Silence />;
@@ -131,7 +130,7 @@ function animations(props) {
         case 'Banish': {
             if (!avatarAnimation.target) {
                 setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null);
-            } break;
+            } return false;
         }
         case 'Bash': return <Bash />;
         case 'Absorb': return <Absorb />;
@@ -152,7 +151,6 @@ function animations(props) {
 
         default: return false;
         }
-        return false;
     };
 
     const combatAnim = anim(event.skill);

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({