From f1422e5322fe13dcbf398e2ff93df80666bf9c4d Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 2 Jul 2019 01:03:42 +1000 Subject: [PATCH] convert timings --- client/src/animations.socket.jsx | 2 +- client/src/components/anims/amplify.jsx | 8 ++++---- client/src/components/anims/banish.jsx | 2 +- client/src/components/anims/bash.jsx | 10 +++++----- client/src/components/anims/block.jsx | 4 ++-- client/src/components/anims/buff.jsx | 10 +++++----- client/src/components/anims/curse.jsx | 6 +++--- client/src/components/anims/debuff.jsx | 16 ++++++++-------- client/src/components/anims/decay.jsx | 6 +++--- client/src/components/anims/haste.jsx | 8 ++++---- client/src/components/anims/hex.jsx | 12 ++++++------ client/src/components/anims/invert.jsx | 2 +- client/src/components/anims/red.block.jsx | 6 +++--- client/src/components/anims/stun.jsx | 6 +++--- client/src/constants.jsx | 7 +++++-- 15 files changed, 54 insertions(+), 51 deletions(-) diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index ba3da1c4..bdf2915c 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -36,7 +36,7 @@ function createSocket(store) { let timeout = 0; if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { - timeout = (TIMES.TARGET_DURATION_MS + TIMES.TARGET_DELAY_MS); + timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION; } else if (stages.includes('START_SKILL')) timeout = TIMES.SOURCE_DURATION_MS; else if (stages.includes('END_SKILL')) timeout = TIMES.TARGET_DURATION_MS; else if (stages.includes('POST_SKILL')) timeout = TIMES.POST_SKILL_DURATION_MS; diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx index 404f6562..76517ea0 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -48,7 +48,7 @@ class Amplify extends Component { easing: 'easeInOutSine', duration: TIMES.TARGET_DURATION_MS, - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, })); this.animations.push(anime({ @@ -58,7 +58,7 @@ class Amplify extends Component { easing: 'easeInOutExpo', duration: TIMES.TARGET_DURATION_MS, - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, })); } diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx index 9ce922cb..3e6a8f08 100644 --- a/client/src/components/anims/banish.jsx +++ b/client/src/components/anims/banish.jsx @@ -11,7 +11,7 @@ function banish(id) { fill: '#fff', easing: 'easeOutElastic', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, }); } diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx index 3c346db3..80a17bff 100644 --- a/client/src/components/anims/bash.jsx +++ b/client/src/components/anims/bash.jsx @@ -39,9 +39,9 @@ class Bash extends Component { this.animations.push(anime({ targets: ['#bash'], opacity: [ - { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, + { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, // this is badly behaved, nfi why - { value: 0, delay: TIMES.FADE_DELAY_MS / 2, duration: TIMES.FADE_DURATION_MS }, + { value: 0, delay: TIMES.FADE_DELAY_MS / 2, duration: TIMES.FADE_OUT_DURATION }, ], easing: 'easeInOutSine', })); @@ -50,7 +50,7 @@ class Bash extends Component { targets: ['#bash'], scale: { value: 1, - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS * 0.2, easing: 'easeInExpo', }, @@ -67,7 +67,7 @@ class Bash extends Component { { translateX: 0, translateY: 2 }, ], - delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1, + delay: TIMES.TARGET_FADE_IN_DELAY + TIMES.TARGET_DURATION_MS * 0.1, duration: TIMES.TARGET_DURATION_MS * 0.2, easing: 'easeOutSine', })); @@ -79,7 +79,7 @@ class Bash extends Component { numOctaves: 5, easing: 'easeOutSine', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.RESOLUTION_TOTAL_MS, })); } diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index ea93b2a8..d8eeeaf2 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index babdc39c..bc522a02 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -42,7 +42,7 @@ class Buff extends Component { points: '0,190 100,10 190,190', easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, 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_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, 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_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 1f641ef3..f158c826 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], 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_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index 104b9d5c..7da5bb7b 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -42,24 +42,24 @@ class Debuff extends Component { targets: ['#debuff .debuff-one'], points: '0,190 100,10 190,190', easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_MAIN_DELAY, + duration: TIMES.TARGET_MAIN_DURATION, })); this.animations.push(anime({ targets: ['#debuff .debuff-two'], points: '40,170 100,50 160,170', easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_MAIN_DELAY, + duration: TIMES.TARGET_MAIN_DURATION, })); this.animations.push(anime({ targets: ['#debuff .debuff-three'], points: '70,150 100,90 130,150', easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_MAIN_DELAY, + duration: TIMES.TARGET_MAIN_DURATION, })); } diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 7364b30f..0ef79d4d 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -42,8 +42,8 @@ class Decay extends Component { this.animations.push(anime({ targets: ['#decay'], 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 }, + { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, + { value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY - TIMES.FADE_DURATION_MS, duration: TIMES.FADE_OUT_DURATION }, ], easing: 'easeInOutSine', })); @@ -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_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index 3056da06..33314d18 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -53,7 +53,7 @@ class Haste extends Component { targets: ['#haste g'], stroke: [COLOURS.GREEN, COLOURS.RED], easing: 'easeInOutSine', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, })); @@ -64,7 +64,7 @@ class Haste extends Component { numOctaves: 5, easing: 'easeInOutSine', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.RESOLUTION_TOTAL_MS, })); } diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index aaf6bdd8..647f030d 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -59,8 +59,8 @@ class Hex extends Component { points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788', easing: 'easeOutExpo', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_MAIN_DELAY, + duration: TIMES.TARGET_MAIN_DURATION, })); this.animations.push(anime({ @@ -69,8 +69,8 @@ class Hex extends Component { easing: 'easeInOutSine', direction: 'alternate', - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_MAIN_DELAY, + duration: TIMES.TARGET_MAIN_DURATION, })); } diff --git a/client/src/components/anims/invert.jsx b/client/src/components/anims/invert.jsx index ee4dd5b1..3827ff2d 100644 --- a/client/src/components/anims/invert.jsx +++ b/client/src/components/anims/invert.jsx @@ -11,7 +11,7 @@ function invert(id) { easing: 'easeInOutElastic', direction: 'alternate', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, }); } diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx index 49b78060..2008f6d9 100644 --- a/client/src/components/anims/red.block.jsx +++ b/client/src/components/anims/red.block.jsx @@ -43,8 +43,8 @@ class Block extends Component { this.animations.push(anime({ targets: ['#block'], 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 }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -55,7 +55,7 @@ class Block extends Component { scale: 1, easing: 'easeOutSine', - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx index 2aad8d85..ba60bace 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_DELAY_MS, duration: TIMES.TARGET_DELAY_MS }, - { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS }, + { 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 }, ], easing: 'easeInOutSine', })); @@ -59,7 +59,7 @@ class Stun extends Component { loop: true, duration: TIMES.RESOLUTION_TOTAL_MS, - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_FADE_IN_DELAY, })); } diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 9195dd75..02b336e8 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -12,7 +12,7 @@ const FADE_DELAY_MS = RESOLUTION_TOTAL_MS - FADE_DURATION_MS; const SOURCE_ANIMATION_DURATION = 850; // the target fades in -const TARGET_FADE_IN_DELAY = SOURCE_ANIMATION_DURATION; +const TARGET_FADE_IN_DELAY = 500; const TARGET_FADE_IN_DURATION = 500; // begins its main animation effect @@ -20,8 +20,10 @@ const TARGET_MAIN_DELAY = 500; const TARGET_MAIN_DURATION = 1500; // then fades out -const TARGET_FADE_OUT_DELAY = TARGET_MAIN_DELAY + TARGET_MAIN_DURATION; 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; @@ -50,6 +52,7 @@ module.exports = { TARGET_FADE_OUT_DELAY, TARGET_FADE_OUT_DURATION, + SOURCE_AND_TARGET_TOTAL_DURATION, }, COLOURS: {