diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index a2b19e62..fcae22a9 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -18,6 +18,7 @@ const Heal = require('./anims/heal'); const Hex = require('./anims/hex'); const Strike = require('./anims/strike'); const Chaos = require('./anims/chaos'); +const invert = require('./anims/invert'); const Slay = require('./anims/slay'); const Siphon = require('./anims/siphon'); const SiphonTick = require('./anims/siphon.tick'); @@ -115,6 +116,7 @@ function animations(props) { case 'Heal': return ; case 'Hex': return ; case 'Haste': return ; + case 'Invert': return invert(construct.id); case 'Siphon': return ; case 'SiphonTick': return ; case 'Stun': return ; diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx index adf51c93..404f6562 100644 --- a/client/src/components/anims/amplify.jsx +++ b/client/src/components/anims/amplify.jsx @@ -34,11 +34,11 @@ class Amplify extends Component { this.animations.push(anime({ targets: ['#amplify'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx index 53d31eac..9ce922cb 100644 --- a/client/src/components/anims/banish.jsx +++ b/client/src/components/anims/banish.jsx @@ -9,8 +9,10 @@ function banish(id) { targets: [document.getElementById(id)], scaleY: 0, fill: '#fff', - easing: 'easeInOutElastic', - duration: TIMES.START_SKILL, + + easing: 'easeOutElastic', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, }); } diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx index b02ef747..3c346db3 100644 --- a/client/src/components/anims/bash.jsx +++ b/client/src/components/anims/bash.jsx @@ -38,10 +38,12 @@ class Bash extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#bash'], - opacity: 1, - - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + // this is badly behaved, nfi why + { value: 0, delay: TIMES.FADE_DELAY_MS / 2, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ @@ -49,8 +51,7 @@ class Bash extends Component { scale: { value: 1, delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS * 0.1, - endDelay: TIMES.TARGET_DURATION_MS * 0.9, + duration: TIMES.TARGET_DURATION_MS * 0.2, easing: 'easeInExpo', }, @@ -79,7 +80,7 @@ class Bash extends Component { easing: 'easeOutSine', delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + duration: TIMES.RESOLUTION_TOTAL_MS, })); } diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index 0bde891b..ea93b2a8 100644 --- a/client/src/components/anims/block.jsx +++ b/client/src/components/anims/block.jsx @@ -35,10 +35,11 @@ class Block extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#block'], - opacity: 1, - - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); } diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index 80e682f9..c2ec279a 100644 --- a/client/src/components/anims/buff.jsx +++ b/client/src/components/anims/buff.jsx @@ -30,11 +30,11 @@ class Buff extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#buff'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index c16d2980..54597932 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -42,11 +42,11 @@ class Curse extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#curse'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index 7d5a1fda..172858b6 100644 --- a/client/src/components/anims/debuff.jsx +++ b/client/src/components/anims/debuff.jsx @@ -31,11 +31,11 @@ class Debuff extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#debuff'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 3bfd9486..41cf4c64 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -41,11 +41,11 @@ class Decay extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#decay'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS - TIMES.FADE_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index e89cf07f..3056da06 100644 --- a/client/src/components/anims/haste.jsx +++ b/client/src/components/anims/haste.jsx @@ -42,11 +42,11 @@ class Haste extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#haste'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ @@ -65,7 +65,7 @@ class Haste extends Component { easing: 'easeInOutSine', delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + duration: TIMES.RESOLUTION_TOTAL_MS, })); } diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index 42932f3b..ee1a193d 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -47,10 +47,11 @@ class Hex extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#hex'], - opacity: 1, - - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/invert.jsx b/client/src/components/anims/invert.jsx new file mode 100644 index 00000000..ee4dd5b1 --- /dev/null +++ b/client/src/components/anims/invert.jsx @@ -0,0 +1,19 @@ +const anime = require('animejs').default; +const { TIMES } = require('../../constants'); + +// shamelessly lifted from teh anime docs +// https://animejs.com/documentation/#svgAttr + +function invert(id) { + anime({ + targets: [document.getElementById(id)], + rotate: 180, + easing: 'easeInOutElastic', + + direction: 'alternate', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, + }); +} + +module.exports = invert; diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx index 812b32cb..49b78060 100644 --- a/client/src/components/anims/red.block.jsx +++ b/client/src/components/anims/red.block.jsx @@ -42,10 +42,11 @@ class Block extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#block'], - opacity: 1, - - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx index ce89b69d..2aad8d85 100644 --- a/client/src/components/anims/stun.jsx +++ b/client/src/components/anims/stun.jsx @@ -45,30 +45,22 @@ class Stun extends Component { componentDidMount() { this.animations.push(anime({ targets: ['#stun'], - opacity: 1, - - easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DELAY_MS, + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + ], + easing: 'easeInOutSine', })); this.animations.push(anime({ targets: ['#stun'], rotate: 180, easing: 'linear', + loop: true, - duration: TIMES.TARGET_DURATION_MS, + duration: TIMES.RESOLUTION_TOTAL_MS, delay: TIMES.TARGET_DELAY_MS, })); - - this.animations.push(anime({ - targets: ['#stun'], - scale: [1, 0.8], - strokeWidth: 0, - easing: 'easeInOutSine', - direction: 'alternate', - duration: TIMES.START_SKILL, - })); } // this is necessary because diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 6b0b46a7..3b2590c2 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,11 +1,23 @@ +const SOURCE_DURATION_MS = 1000; +const TARGET_DELAY_MS = 500; +const TARGET_DURATION_MS = 1500; + +const FADE_DURATION_MS = 500; + +const RESOLUTION_TOTAL_MS = SOURCE_DURATION_MS + TARGET_DURATION_MS + FADE_DURATION_MS; +const FADE_DELAY_MS = RESOLUTION_TOTAL_MS - FADE_DURATION_MS; +// const RESOLUTION_TOTAL_MS = 20000; + module.exports = { TIMES: { - RESOLUTION_TOTAL_MS: 2000, - // RESOLUTION_TOTAL_MS: 200000, + SOURCE_DURATION_MS, + TARGET_DELAY_MS, + TARGET_DURATION_MS, - SOURCE_DURATION_MS: 1000, - TARGET_DELAY_MS: 500, - TARGET_DURATION_MS: 1500, + FADE_DELAY_MS, + FADE_DURATION_MS, + + RESOLUTION_TOTAL_MS, START_SKILL: 2000, END_SKILL: 2000,