From 3b115f82a4fdd08d7d2d6b8d6bdaebb6ee2b73ac Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 2 Jul 2019 23:11:48 +1000 Subject: [PATCH] fixed parry, added all skills to anims callback --- client/src/components/animations.jsx | 94 ++++++++++++++++---------- client/src/components/anims/parry.jsx | 10 +-- client/src/components/anims/purify.jsx | 76 +++++++++++++++++++++ 3 files changed, 139 insertions(+), 41 deletions(-) create mode 100644 client/src/components/anims/purify.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 9251f1be..861f3193 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -13,12 +13,14 @@ const Debuff = require('./anims/debuff'); const Decay = require('./anims/decay'); const Curse = require('./anims/curse'); const Electrify = require('./anims/electrify'); +const Electrocute = require('./anims/electrocute'); const Haste = require('./anims/haste'); const Stun = require('./anims/stun'); const Heal = require('./anims/heal'); const Hex = require('./anims/hex'); const Strike = require('./anims/strike'); const Parry = require('./anims/parry'); +const Purify = require('./anims/purify'); const Recharge = require('./anims/recharge'); const Reflect = require('./anims/reflect'); const Chaos = require('./anims/chaos'); @@ -97,48 +99,68 @@ function animations(props) { if (!text || !resolution.sequence[0].includes('END_SKILL')) return false; const skill = removeTier(text); - // if (skill === 'Bash' && type === 'Damage') return false; switch (skill) { - case 'Attack': return ; - case 'Amplify': return ; - case 'Banish': return ; - case 'Bash': return ; - case 'Block': return ; - case 'Buff': return ; - case 'Curse': return ; - case 'Electrify': return ; - case 'Blast': return ; - case 'Debuff': return ; - case 'Decay': return ; - case 'Strike': return ; - case 'Chaos': return ; - case 'Slay': return ; - case 'Heal': return ; - case 'Hex': return ; - case 'Haste': return ; - case 'Parry': return ; - case 'Recharge': return ; - case 'Reflect': return ; - case 'Triage': return ; - case 'Invert': return ; - case 'Siphon': return ; - case 'SiphonTick': return ; - case 'Stun': return ; - default: return false; + // Attack base + case 'Attack': return ; + case 'Blast': return ; + case 'Siphon': return ; + case 'SiphonTick': return ; + case 'Strike': return ; + case 'Chaos': return ; + case 'Slay': return ; + case 'Heal': return ; + + // Buff Base + case 'Buff': return ; + case 'Amplify': return ; + case 'Haste': return ; + case 'Triage': return ; + case 'TriageTick': return false; + case 'Scatter': return false; + case 'Hybrid': return false; + case 'Taunt': return false; + + // Debuff base + case 'Debuff': return ; + case 'Curse': return ; + case 'Decay': return ; + case 'DecayTick': return false; + case 'Invert': return ; + case 'Purge': return false; + case 'Silence': return false; + case 'Snare': return false; + + // Stun Base + case 'Stun': return ; + case 'Banish': return ; + case 'Bash': return ; + case 'Hex': return ; + case 'Sleep': return false; + case 'Throw': return false; + case 'Ruin': return false; + + // Block Base + case 'Block': return ; + case 'Electrify': return ; + case 'Electrocute': return ; + case 'ElectrocuteTick': return false; + case 'Parry': return ; + case 'Recharge': return ; + case 'Reflect': return ; + case 'Purify': return ; + case 'Clutch': return false; + + default: return false; } }; const combatAnim = anim(event.skill); - if (combatAnim) { - return ( -
- {combatAnim} -
- ); - } - + if (!combatAnim) return false; return ( -
); +
+ {combatAnim} +
+ ); } module.exports = animations; diff --git a/client/src/components/anims/parry.jsx b/client/src/components/anims/parry.jsx index 1ea1f29e..44d566b1 100644 --- a/client/src/components/anims/parry.jsx +++ b/client/src/components/anims/parry.jsx @@ -43,8 +43,8 @@ class Parry extends Component { this.animations.push(anime({ targets: ['#parry'], opacity: [ - { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, - { value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, + { 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.3 }, ], easing: 'easeInOutSine', })); @@ -52,7 +52,7 @@ class Parry extends Component { this.animations.push(anime({ targets: ['#parry'], rotateX: 180, - delay: TIMES.TARGET_FADE_IN_DELAY * 3, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS / 2, easing: 'easeOutSine', })); @@ -64,8 +64,8 @@ class Parry extends Component { numOctaves: 5, easing: 'easeOutSine', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.RESOLUTION_TOTAL_MS, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx new file mode 100644 index 00000000..33424399 --- /dev/null +++ b/client/src/components/anims/purify.jsx @@ -0,0 +1,76 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); + +class Purify extends Component { + constructor() { + super(); + this.animations = []; + } + + render({ team }) { + return ( + + + + + + + + + + ); + } + + componentDidMount() { + this.animations.push(anime({ + targets: ['#purify'], + 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.3 }, + ], + easing: 'easeInOutSine', + })); + + + this.animations.push(anime({ + targets: ['#purifyFilter feTurbulence', ' #purifyFilter feDisplacementMap'], + baseFrequency: 2, + scale: 10, + numOctaves: 5, + easing: 'easeOutSine', + + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, + })); + } + + // this is necessary because + // skipping / timing / unmounting race conditions + // can cause the animations to cut short, this will ensure the values are reset + // because preact will recycle all these components + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + } +} + +module.exports = Purify;