ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

convert timings

Browse Source
This commit is contained in:
ntr 2019-07-02 01:03:42 +10:00
parent 471f277b4e
commit f1422e5322
15 changed files with 54 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/animations.socket.jsx
View File

@ -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;

8
client/src/components/anims/amplify.jsx
View File

@ -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,
}));
}

2
client/src/components/anims/banish.jsx
View File

@ -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,
});
}

10
client/src/components/anims/bash.jsx
View File

@ -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,
}));
}

4
client/src/components/anims/block.jsx
View File

@ -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',
}));

10
client/src/components/anims/buff.jsx
View File

@ -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,
}));
}

6
client/src/components/anims/curse.jsx
View File

@ -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,
}));
}

16
client/src/components/anims/debuff.jsx
View File

@ -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,
}));
}

6
client/src/components/anims/decay.jsx
View File

@ -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,
}));
}

8
client/src/components/anims/haste.jsx
View File

@ -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,
}));
}

12
client/src/components/anims/hex.jsx
View File

@ -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,
}));
}

2
client/src/components/anims/invert.jsx
View File

@ -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,
});
}

6
client/src/components/anims/red.block.jsx
View File

@ -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,
}));
}

6
client/src/components/anims/stun.jsx
View File

@ -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,
}));
}

7
client/src/constants.jsx
View File

@ -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: {