From ee331230ceea7aa23c50ad3752aecd07db7c5621 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 30 Jun 2019 13:22:59 +1000 Subject: [PATCH] resets --- client/assets/styles/game.css | 9 +++++ client/src/animations.socket.jsx | 2 +- client/src/components/animations.jsx | 2 +- client/src/components/anims/amplify.jsx | 42 +++++++++++++++------ client/src/components/anims/buff.jsx | 27 ++++++++++--- client/src/components/anims/debuff.jsx | 34 ++++++++++++----- client/src/components/anims/hex.jsx | 50 +++++++++++++++++++------ client/src/constants.jsx | 6 +++ 8 files changed, 131 insertions(+), 41 deletions(-) diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 7e2a31f1..a03f7f9f 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -342,6 +342,15 @@ opacity: 0; } +.skill-animation { + opacity: 0; + + transition-property: opacity; + transition-duration: 0.5s; + transition-delay: 0; + transition-timing-function: ease; +} + /* COMBAT ANIMATIONS */ diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index 2108b137..ce2c1eda 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -37,7 +37,7 @@ function createSocket(store) { // store.dispatch(actions.setResolution(stagedR)); // }); - setTimeout(cb, 2000); + setTimeout(cb, TIMES.RESOLUTION_TOTAL_MS); }, err => { if (err) return console.error(err); store.dispatch(actions.setResolution(null)); diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 8a45f553..6cc40600 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -99,7 +99,7 @@ function animations(props) { case 'Chaos': return ; case 'Slay': return ; case 'Heal': return ; - case 'Hex': return ; + case 'Hex': return ; case 'Siphon': return ; case 'SiphonTick': return ; default: return false; diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx index 174891f4..984257ee 100644 --- a/client/src/components/anims/amplify.jsx +++ b/client/src/components/anims/amplify.jsx @@ -1,12 +1,13 @@ const preact = require('preact'); const { Component } = require('preact'); - const anime = require('animejs').default; +const { TIMES } = require('../../constants'); + class Amplify extends Component { constructor() { super(); - this.id = Math.random(); + this.animations = []; } render() { @@ -30,24 +31,41 @@ class Amplify extends Component { componentDidMount() { const altPath = 'M0,100 C100,400 100,-200 200,100'; - anime({ - targets: '#amplify path', + + this.animations.push(anime({ + targets: ['#amplify'], + opacity: 1, + })); + + this.animations.push(anime({ + targets: ['#amplify path'], d: [{ value: altPath }], stroke: ['#3498db', '#a52a2a'], - duration: 1000, - direction: 'alternate', easing: 'easeInOutSine', - delay: 500, - }); - anime({ + duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_MS, + })); + + this.animations.push(anime({ targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'], baseFrequency: 0.15, scale: 4, - direction: 'alternate', easing: 'easeInOutExpo', - delay: 500, - }); + + duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_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(); + } } } diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index e056c2cb..a366252f 100644 --- a/client/src/components/anims/buff.jsx +++ b/client/src/components/anims/buff.jsx @@ -5,6 +5,11 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); class Buff extends Component { + constructor() { + super(); + this.animations = []; + } + render() { return ( anim.reset(), - }); + })); - anime({ + this.animations.push(anime({ targets: ['#buff .buff-two'], points: '40,170 100,50 160,170', easing: 'easeOutExpo', duration: TIMES.START_SKILL, complete: anim => anim.reset(), - }); + })); - anime({ + this.animations.push(anime({ targets: ['#buff .buff-three'], points: '70,150 100,90 130,150', easing: 'easeOutExpo', duration: TIMES.START_SKILL, complete: anim => anim.reset(), - }); + })); + } + + // 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(); + } } } diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index 5c33047a..3538c9f7 100644 --- a/client/src/components/anims/debuff.jsx +++ b/client/src/components/anims/debuff.jsx @@ -4,16 +4,20 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -class Buff extends Component { +class Debuff extends Component { + constructor() { + super(); + this.animations = []; + } + render() { return ( + viewBox="0 0 300 300"> @@ -24,30 +28,40 @@ class Buff extends Component { } componentDidMount() { - anime({ + this.animations.push(anime({ targets: ['#buff .buff-one'], points: '0,190 100,10 190,190', easing: 'easeOutExpo', duration: TIMES.START_SKILL, complete: anim => anim.reset(), - }); + })); - anime({ + this.animations.push(anime({ targets: ['#buff .buff-two'], points: '40,170 100,50 160,170', easing: 'easeOutExpo', duration: TIMES.START_SKILL, complete: anim => anim.reset(), - }); + })); - anime({ + this.animations.push(anime({ targets: ['#buff .buff-three'], points: '70,150 100,90 130,150', easing: 'easeOutExpo', duration: TIMES.START_SKILL, complete: anim => anim.reset(), - }); + })); + } + + // 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 = Buff; +module.exports = Debuff; diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index 536e5615..2ac3f878 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -9,18 +9,26 @@ const { TIMES } = require('../../constants'); // https://animejs.com/documentation/#svgAttr class Hex extends Component { + constructor() { + super(); + this.animations = []; + } + render() { return ( - + @@ -29,22 +37,42 @@ class Hex extends Component { } componentDidMount() { - anime({ - targets: ['.hex-anim polygon'], + this.animations.push(anime({ + targets: ['#hex'], + opacity: 1, + + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DELAY_MS, + })); + + this.animations.push(anime({ + targets: ['#hex polygon'], points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788', easing: 'easeOutExpo', - duration: TIMES.START_SKILL, - complete: anim => anim.reset(), - }); - anime({ + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, + })); + + this.animations.push(anime({ targets: ['feTurbulence', 'feDisplacementMap'], baseFrequency: 0, scale: 1, easing: 'easeOutSine', - duration: TIMES.START_SKILL, - complete: anim => anim.reset(), - }); + + 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(); + } } } diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 56b054e4..fb348f62 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,5 +1,11 @@ module.exports = { TIMES: { + RESOLUTION_TOTAL_MS: 2000, + + SOURCE_DURATION_MS: 1000, + TARGET_DELAY_MS: 500, + TARGET_DURATION_MS: 1500, + START_SKILL: 2000, END_SKILL: 2000, POST_SKILL: 2000,