diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index e4612aa6..ca64be48 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -5,7 +5,7 @@ const AttackCharge = require('./anims/attack.charge'); const Amplify = require('./anims/amplify'); const Blast = require('./anims/blast'); -const banish = require('./anims/banish'); +const Banish = require('./anims/banish'); const Bash = require('./anims/bash'); const Block = require('./anims/block'); const Buff = require('./anims/buff'); @@ -21,14 +21,14 @@ const Strike = require('./anims/strike'); const Parry = require('./anims/parry'); const Recharge = require('./anims/recharge'); const Chaos = require('./anims/chaos'); -const invert = require('./anims/invert'); +const Invert = require('./anims/invert'); const Slay = require('./anims/slay'); const Siphon = require('./anims/siphon'); const SiphonTick = require('./anims/siphon.tick'); // const Test = require('./anims/test'); -const { removeTier, getCombatText } = require('../utils'); +const { removeTier } = require('../utils'); const colours = { red: '#a52a2a', @@ -99,7 +99,7 @@ function animations(props) { switch (skill) { case 'Attack': return ; case 'Amplify': return ; - case 'Banish': return banish(construct.id); + case 'Banish': return ; case 'Bash': return ; case 'Block': return ; case 'Buff': return ; @@ -116,7 +116,7 @@ function animations(props) { case 'Haste': return ; case 'Parry': return ; case 'Recharge': return ; - case 'Invert': return invert(construct.id); + case 'Invert': return 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 76517ea0..abc1b139 100644 --- a/client/src/components/anims/amplify.jsx +++ b/client/src/components/anims/amplify.jsx @@ -35,8 +35,8 @@ class Amplify extends Component { this.animations.push(anime({ targets: ['#amplify'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -47,8 +47,8 @@ class Amplify extends Component { stroke: ['#3498db', '#a52a2a'], easing: 'easeInOutSine', + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, - delay: TIMES.TARGET_FADE_IN_DELAY, })); this.animations.push(anime({ @@ -57,8 +57,8 @@ class Amplify extends Component { scale: 4, easing: 'easeInOutExpo', + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, - delay: TIMES.TARGET_FADE_IN_DELAY, })); } diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx index 4ccd76fa..081b5537 100644 --- a/client/src/components/anims/banish.jsx +++ b/client/src/components/anims/banish.jsx @@ -1,16 +1,42 @@ +const preact = require('preact'); +const { Component } = require('preact'); + const anime = require('animejs').default; const { TIMES } = require('../../constants'); -function banish(id) { - anime({ - targets: [document.getElementById(id)], - scaleY: 0, - fill: '#fff', +class Banish extends Component { + constructor(props) { + super(); + this.id = props.id; + this.animations = []; + } - easing: 'easeOutElastic', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.TARGET_DURATION_MS, - }); + render() { + // Need this so unmount triggers + return ; + } + + componentDidMount() { + this.animations.push(anime({ + targets: [document.getElementById(this.id)], + scaleY: 0, + fill: '#fff', + easing: 'easeOutElastic', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS * 0.5, + direction: 'alternate', + })); + } + + // 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 = banish; +module.exports = Banish; diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx index f9accc83..cab746e4 100644 --- a/client/src/components/anims/bash.jsx +++ b/client/src/components/anims/bash.jsx @@ -39,8 +39,8 @@ class Bash extends Component { this.animations.push(anime({ targets: ['#bash'], opacity: [ - { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, - { value: 0, delay: TIMES.TARGET_MAIN_DURATION - 500, 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.2 }, ], easing: 'easeInOutSine', })); @@ -49,7 +49,7 @@ class Bash extends Component { targets: ['#bash'], scale: { value: 1, - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2, easing: 'easeInExpo', }, @@ -66,7 +66,7 @@ class Bash extends Component { { translateX: 0, translateY: 2 }, ], - delay: TIMES.TARGET_FADE_IN_DELAY + TIMES.TARGET_DURATION_MS * 0.1, + delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1, duration: TIMES.TARGET_DURATION_MS * 0.2, easing: 'easeOutSine', })); @@ -78,8 +78,8 @@ class Bash 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/blast.jsx b/client/src/components/anims/blast.jsx index 9900626e..ce30fbae 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -27,10 +27,9 @@ class AttackCharge extends Component { constructor(props) { super(); this.team = props.team; - // this.colour = props.colour; - this.colour = '#00aabb'; + this.animations = []; const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 }); - this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour)); + this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb')); } render() { @@ -45,7 +44,7 @@ class AttackCharge extends Component { - + @@ -71,8 +70,17 @@ class AttackCharge extends Component { } anime.set('.skill-anim', { translateY: -200, + opacity: 0, }); + this.animations.push(anime({ + targets: '.skill-anim', + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS }, + ], + })); + anime.set('#explosion feDisplacementMap', { scale: 1, }); @@ -81,6 +89,7 @@ class AttackCharge extends Component { targets: '.skill-anim', translateY: 0, loop: false, + delay: TIMES.TARGET_DELAY_MS, duration: (duration * 1 / 2), easing: 'easeInQuad', }); @@ -88,10 +97,17 @@ class AttackCharge extends Component { targets: '#explosion feDisplacementMap', scale: 100, loop: false, + delay: TIMES.TARGET_DELAY_MS, duration, easing: 'easeInQuad', }); } + + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + } } module.exports = AttackCharge; diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index d8eeeaf2..dd0e6fe7 100644 --- a/client/src/components/anims/block.jsx +++ b/client/src/components/anims/block.jsx @@ -36,8 +36,8 @@ class Block extends Component { this.animations.push(anime({ targets: ['#block'], 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.2 }, ], easing: 'easeInOutSine', })); diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index bc522a02..e1b81258 100644 --- a/client/src/components/anims/buff.jsx +++ b/client/src/components/anims/buff.jsx @@ -31,8 +31,8 @@ class Buff extends Component { this.animations.push(anime({ targets: ['#buff'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -42,7 +42,7 @@ class Buff extends Component { points: '0,190 100,10 190,190', easing: 'easeOutExpo', - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); @@ -51,7 +51,7 @@ class Buff extends Component { points: '40,170 100,50 160,170', easing: 'easeOutExpo', - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); @@ -60,7 +60,7 @@ class Buff extends Component { points: '70,150 100,90 130,150', easing: 'easeOutExpo', - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 472b8b82..75dd1dbf 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -25,11 +25,9 @@ function projectile(x, y, radius, colour) { class AttackCharge extends Component { constructor(props) { super(); - this.team = props.team; - // this.colour = props.colour; - this.colour = '#A25AC1'; + this.animations = []; const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); - this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour)); + this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1')); } render() { @@ -44,7 +42,7 @@ class AttackCharge extends Component { - + @@ -79,36 +77,55 @@ class AttackCharge extends Component { anime.set('.skill-anim', { translateY: -200, translateX: 0, + opacity: 0, }); anime.set('#explosion feDisplacementMap', { scale: 1, }); - anime({ + this.animations.push(anime({ + targets: '.skill-anim', + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS }, + ], + })); + + + this.animations.push(anime({ targets: '.skill-anim', translateY: 0, translateX: 0, loop: false, + delay: TIMES.TARGET_DELAY_MS, duration: (duration * 1 / 2), easing: 'easeInQuad', - }); - anime({ + })); + this.animations.push(anime({ targets: '#explosion feDisplacementMap', scale: 75, loop: false, - delay: (duration * 2 / 3), + delay: (TIMES.TARGET_DELAY_MS + duration * 2 / 3), duration: (duration * 1 / 3), easing: 'easeInQuad', - }); + })); projectiles.forEach(proj => anime({ targets: proj, cx: Math.random() * 250 + 25, cy: Math.random() * 300 + 50, + delay: TIMES.TARGET_DELAY_MS, duration: (duration * 2 / 3), easing: 'easeInQuad', })); } + + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + } + } module.exports = AttackCharge; diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index f158c826..8926bfae 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -43,8 +43,8 @@ class Curse extends Component { this.animations.push(anime({ targets: ['#curse'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -56,7 +56,7 @@ class Curse extends Component { strokeWidth: [8, 0], filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], easing: 'easeOutSine', - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index 7da5bb7b..8d4a30ed 100644 --- a/client/src/components/anims/debuff.jsx +++ b/client/src/components/anims/debuff.jsx @@ -32,8 +32,8 @@ class Debuff extends Component { this.animations.push(anime({ targets: ['#debuff'], 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.2 }, ], easing: 'easeInOutSine', })); diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index e4a9166c..9fe63ed3 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -57,7 +57,7 @@ class Decay extends Component { transform: () => `rotate(${anime.random(-15, 15)})`, filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], easing: 'easeOutSine', - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/electrify.jsx b/client/src/components/anims/electrify.jsx index 05e8a4f3..5d310c63 100644 --- a/client/src/components/anims/electrify.jsx +++ b/client/src/components/anims/electrify.jsx @@ -1,6 +1,6 @@ const preact = require('preact'); const { Component } = require('preact'); -const times = require('lodash/times') +const times = require('lodash/times'); const anime = require('animejs').default; @@ -49,8 +49,8 @@ class Electrify extends Component { this.animations.push(anime({ targets: ['#electrify'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -80,7 +80,7 @@ class Electrify extends Component { d: times(10, path), easing: 'easeInOutSine', loop: true, - duration: TIMES.TARGET_MAIN_DURATION / 5, + duration: TIMES.TARGET_DURATION_MS / 5, })); this.animations.push(anime({ @@ -89,7 +89,7 @@ class Electrify extends Component { easing: 'easeInOutSine', direction: 'alternate', loop: true, - duration: TIMES.TARGET_MAIN_DURATION, + duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/electrocute.jsx b/client/src/components/anims/electrocute.jsx index d28198d7..87a12406 100644 --- a/client/src/components/anims/electrocute.jsx +++ b/client/src/components/anims/electrocute.jsx @@ -47,8 +47,8 @@ class Electrify extends Component { this.animations.push(anime({ targets: ['#electrify'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -72,7 +72,7 @@ class Electrify extends Component { d: times(10, path), easing: 'easeInOutSine', loop: true, - duration: TIMES.TARGET_MAIN_DURATION / 5, + duration: TIMES.TARGET_DURATION_MS / 5, })); this.animations.push(anime({ @@ -81,7 +81,7 @@ class Electrify extends Component { easing: 'easeInOutSine', direction: 'alternate', loop: true, - duration: TIMES.TARGET_MAIN_DURATION, + duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index 33314d18..3f08a983 100644 --- a/client/src/components/anims/haste.jsx +++ b/client/src/components/anims/haste.jsx @@ -43,8 +43,8 @@ class Haste extends Component { this.animations.push(anime({ targets: ['#haste'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -53,8 +53,8 @@ class Haste extends Component { targets: ['#haste g'], stroke: [COLOURS.GREEN, COLOURS.RED], easing: 'easeInOutSine', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS * 0.75, })); this.animations.push(anime({ @@ -64,8 +64,8 @@ class Haste extends Component { numOctaves: 5, easing: 'easeInOutSine', - 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/heal.jsx b/client/src/components/anims/heal.jsx index 038ced26..4f0ad3b4 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -27,10 +27,9 @@ class Heal extends Component { constructor(props) { super(); this.team = props.team; - // this.colour = props.colour; - this.colour = '#1FF01F'; + this.animations = []; const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 }); - this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour)); + this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#1FF01F')); } render() { @@ -44,7 +43,7 @@ class Heal extends Component { - + @@ -59,46 +58,46 @@ class Heal extends Component { } componentDidMount() { - // if (!this.props.team) { - // anime.set('.skill-anim', { - // rotate: Math.random() * 180 + 90, - // }); - // } else { - // anime.set('.skill-anim', { - // rotate: Math.random() * 180 + 270, - // }); - // } - // anime.set('.skill-anim', { - // translateY: -200, - // translateX: 0, - // }); anime.set('#explosion feDisplacementMap', { scale: 100, }); + anime.set('.skill-anim', { + opacity: 0, + }); - anime({ + this.animations.push(anime({ + targets: '.skill-anim', + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 }, + ], + })); + + this.animations.push(anime({ targets: '.skill-anim', translateY: 0, translateX: 0, loop: false, + delay: TIMES.TARGET_DELAY_MS, duration: (duration * 1 / 2), easing: 'easeInQuad', - }); - anime({ + })); + this.animations.push(anime({ targets: '#explosion feDisplacementMap', scale: 1, loop: false, + delay: TIMES.TARGET_DELAY_MS, duration: (duration * 1 / 2), easing: 'easeInQuad', - }); - anime({ + })); + this.animations.push(anime({ targets: '#projectile', cx: 150, cy: 200, - delay: (duration * 1 / 2), + delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2), duration: (duration * 1 / 2), easing: 'easeInQuad', - }); + })); } } diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index 647f030d..842464cb 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -48,8 +48,8 @@ class Hex extends Component { this.animations.push(anime({ targets: ['#hex'], 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.2 }, ], easing: 'easeInOutSine', })); diff --git a/client/src/components/anims/invert.jsx b/client/src/components/anims/invert.jsx index d1736fc4..34d383cc 100644 --- a/client/src/components/anims/invert.jsx +++ b/client/src/components/anims/invert.jsx @@ -1,16 +1,41 @@ +const preact = require('preact'); +const { Component } = require('preact'); + const anime = require('animejs').default; const { TIMES } = require('../../constants'); -function invert(id) { - anime({ - targets: [document.getElementById(id)], - rotate: 180, - easing: 'easeInOutElastic', +class Invert extends Component { + constructor(props) { + super(); + this.id = props.id; + this.animations = []; + } - direction: 'alternate', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.TARGET_DURATION_MS, - }); + render() { + // Need this so unmount triggers + return ; + } + + componentDidMount() { + this.animations.push(anime({ + targets: [document.getElementById(this.id)], + rotate: 180, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS * 0.45, + easing: 'easeInOutElastic', + direction: 'alternate', + })); + } + + // 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 = invert; +module.exports = Invert; diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx index ec0bb7ea..e52e527b 100644 --- a/client/src/components/anims/siphon.jsx +++ b/client/src/components/anims/siphon.jsx @@ -7,6 +7,11 @@ const { TIMES } = require('../../constants'); const duration = TIMES.TARGET_DURATION_MS; class AttackCharge extends Component { + constructor() { + super(); + this.animations = []; + } + render() { return ( + viewBox="0 0 300 400" + opacity="0"> @@ -28,6 +34,15 @@ class AttackCharge extends Component { r: '140', stroke: '#3498db', }); + + this.animations.push(anime({ + targets: '.skill-anim', + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS }, + ], + })); + anime({ targets: '#siphon', keyframes: [ @@ -36,10 +51,18 @@ class AttackCharge extends Component { { r: '50', stroke: '#3498db' }, { r: '20', stroke: '#3498db' }, ], + delay: TIMES.TARGET_DELAY_MS, duration, easing: 'easeInCubic', }); } + + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + } + } module.exports = AttackCharge; diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx index ba60bace..e1114f1d 100644 --- a/client/src/components/anims/stun.jsx +++ b/client/src/components/anims/stun.jsx @@ -46,8 +46,8 @@ class Stun extends Component { this.animations.push(anime({ targets: ['#stun'], 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.2 }, ], easing: 'easeInOutSine', })); @@ -57,9 +57,8 @@ class Stun extends Component { rotate: 180, easing: 'linear', loop: true, - - duration: TIMES.RESOLUTION_TOTAL_MS, - delay: TIMES.TARGET_FADE_IN_DELAY, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 02b336e8..3e6ff11b 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,57 +1,16 @@ + 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; - -// first the source does an activation animation -const SOURCE_ANIMATION_DURATION = 850; - -// the target fades in -const TARGET_FADE_IN_DELAY = 500; -const TARGET_FADE_IN_DURATION = 500; - -// begins its main animation effect -const TARGET_MAIN_DELAY = 500; -const TARGET_MAIN_DURATION = 1500; - -// then fades out -const TARGET_FADE_OUT_DURATION = 500; -const TARGET_FADE_OUT_DELAY = TARGET_MAIN_DELAY + TARGET_MAIN_DURATION; - -const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_FADE_OUT_DELAY + TARGET_FADE_OUT_DURATION; - -// combat text shows const POST_SKILL_DURATION_MS = 1000; +const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS; module.exports = { TIMES: { SOURCE_DURATION_MS, TARGET_DELAY_MS, TARGET_DURATION_MS, - - FADE_DELAY_MS, - FADE_DURATION_MS, - - RESOLUTION_TOTAL_MS, POST_SKILL_DURATION_MS, - - - SOURCE_ANIMATION_DURATION, - - TARGET_FADE_IN_DELAY, - TARGET_FADE_IN_DURATION, - - TARGET_MAIN_DELAY, - TARGET_MAIN_DURATION, - - TARGET_FADE_OUT_DELAY, - TARGET_FADE_OUT_DURATION, - SOURCE_AND_TARGET_TOTAL_DURATION, },