From c646c76e91e4cabf4bb159dea4860ad7962f4e8c Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 2 Jul 2019 15:14:46 +1000 Subject: [PATCH] remove fade constants --- client/src/components/anims/banish.jsx | 4 +- client/src/components/anims/bash.jsx | 13 +++--- 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 | 4 +- client/src/components/anims/decay.jsx | 6 +-- client/src/components/anims/electrify.jsx | 10 ++--- client/src/components/anims/electrocute.jsx | 8 ++-- client/src/components/anims/haste.jsx | 12 +++--- client/src/components/anims/hex.jsx | 4 +- client/src/components/anims/invert.jsx | 8 ++-- client/src/components/anims/stun.jsx | 9 ++--- client/src/constants.jsx | 45 +-------------------- 14 files changed, 50 insertions(+), 93 deletions(-) diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx index 3e6a8f08..a1466fc3 100644 --- a/client/src/components/anims/banish.jsx +++ b/client/src/components/anims/banish.jsx @@ -11,8 +11,8 @@ function banish(id) { fill: '#fff', easing: 'easeOutElastic', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS, }); } diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx index 80a17bff..cab746e4 100644 --- a/client/src/components/anims/bash.jsx +++ b/client/src/components/anims/bash.jsx @@ -39,9 +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 }, - // this is badly behaved, nfi why - { value: 0, delay: TIMES.FADE_DELAY_MS / 2, 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', })); @@ -50,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', }, @@ -67,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', })); @@ -79,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/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/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 0ef79d4d..b6e1031c 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_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 }, + { 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,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 37ac198d..fa24f0a9 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; @@ -52,8 +52,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', })); @@ -83,7 +83,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({ @@ -92,7 +92,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 4bf24bd8..a997be88 100644 --- a/client/src/components/anims/electrocute.jsx +++ b/client/src/components/anims/electrocute.jsx @@ -50,8 +50,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', })); @@ -75,7 +75,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({ @@ -84,7 +84,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/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 3827ff2d..3524fe60 100644 --- a/client/src/components/anims/invert.jsx +++ b/client/src/components/anims/invert.jsx @@ -7,12 +7,12 @@ const { TIMES } = require('../../constants'); function invert(id) { anime({ targets: [document.getElementById(id)], - rotate: 180, + rotate: [ + { value: 180, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.6 }, + { value: 0, duration: TIMES.POST_SKILL_DURATION_MS * 0.4 }, + ], easing: 'easeInOutElastic', - direction: 'alternate', - 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 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, },