From 8263f274bcd7178d7e07ae5a74544b88642cbd57 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 2 Jul 2019 19:27:32 +1000 Subject: [PATCH] reflect --- client/.eslintrc.js | 39 +++++------ client/src/components/animations.jsx | 4 +- client/src/components/anims/recharge.jsx | 14 ++-- client/src/components/anims/reflect.jsx | 82 ++++++++++++++++++++++++ 4 files changed, 112 insertions(+), 27 deletions(-) create mode 100644 client/src/components/anims/reflect.jsx diff --git a/client/.eslintrc.js b/client/.eslintrc.js index 6d563030..6fde25f3 100644 --- a/client/.eslintrc.js +++ b/client/.eslintrc.js @@ -35,25 +35,6 @@ module.exports = { ], }, rules: { - // prevents stupid complaints a la - // (req) { - // req.something = x; - // } - 'no-param-reassign': [2, { props: false }], - 'no-multi-spaces': [0], - 'max-len': ['error', 120], - 'import/no-extraneous-dependencies': [0], - 'prefer-arrow-callback': [0], - 'arrow-body-style': [0], - 'no-return-assign': 0, - 'no-console': [0], - // i like loops - 'no-plusplus': [0], - 'no-await-in-loop': [0], - 'indent': ['error', 4], - 'keyword-spacing': ['error'], - 'key-spacing': ['error'], - // for preact "react/react-in-jsx-scope": [0], "react/jsx-indent": [2, 4], @@ -1499,5 +1480,25 @@ module.exports = { // https://github.com/benmosher/eslint-plugin-import/blob/c34f14f67f077acd5a61b3da9c0b0de298d20059/docs/rules/no-relative-parent-imports.md 'import/no-relative-parent-imports': 'off', + + // prevents stupid complaints a la + // (req) { + // req.something = x; + // } + 'no-param-reassign': [2, { props: false }], + 'no-multi-spaces': [0], + 'max-len': ['error', 120], + 'import/no-extraneous-dependencies': [0], + 'prefer-arrow-callback': [0], + 'arrow-body-style': [0], + 'no-return-assign': 0, + 'no-console': [0], + // i like loops + 'no-plusplus': [0], + + 'no-await-in-loop': [0], + 'indent': ['error', 4], + 'keyword-spacing': ['error'], + 'key-spacing': ['error'], }, }; \ No newline at end of file diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index ca64be48..19af3209 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -20,6 +20,7 @@ const Hex = require('./anims/hex'); const Strike = require('./anims/strike'); const Parry = require('./anims/parry'); const Recharge = require('./anims/recharge'); +const Reflect = require('./anims/reflect'); const Chaos = require('./anims/chaos'); const Invert = require('./anims/invert'); const Slay = require('./anims/slay'); @@ -116,7 +117,8 @@ function animations(props) { case 'Haste': return ; case 'Parry': return ; case 'Recharge': return ; - case 'Invert': return + case 'Reflect': return ; + case 'Invert': return ; case 'Siphon': return ; case 'SiphonTick': return ; case 'Stun': return ; diff --git a/client/src/components/anims/recharge.jsx b/client/src/components/anims/recharge.jsx index f5ffacbd..d37aaa56 100644 --- a/client/src/components/anims/recharge.jsx +++ b/client/src/components/anims/recharge.jsx @@ -51,8 +51,8 @@ class Recharge extends Component { this.animations.push(anime({ targets: ['#recharge'], 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', })); @@ -63,8 +63,8 @@ class Recharge extends Component { easing: 'easeInOutSine', direction: 'alternate', - delay: TIMES.TARGET_MAIN_DELAY, - duration: TIMES.TARGET_MAIN_DURATION, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, })); this.animations.push(anime({ @@ -72,10 +72,10 @@ class Recharge extends Component { baseFrequency: 2, scale: 10, numOctaves: 5, - easing: 'easeOutSine', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.RESOLUTION_TOTAL_MS, + easing: 'easeOutSine', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx new file mode 100644 index 00000000..89a774a9 --- /dev/null +++ b/client/src/components/anims/reflect.jsx @@ -0,0 +1,82 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES, COLOURS } = require('../../constants'); + +class Reflect extends Component { + constructor() { + super(); + this.animations = []; + } + + render({ team }) { + let redX = anime.random(32, 128); + let blueX = anime.random(128, 224); + + return ( + + + + + + + + + + + + + + + ); + } + + componentDidMount() { + this.animations.push(anime({ + targets: ['#reflect'], + opacity: [ + { 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', + })); + + this.animations.push(anime({ + targets: ['#reflect path'], + strokeDashoffset: [anime.setDashoffset, 0], + easing: 'linear', + loop: true, + duration: TIMES.TARGET_DURATION_MS / 5, + })); + + // this.animations.push(anime({ + // targets: ['#reflectFilter feTurbulence', ' #reflectFilter feDisplacementMap'], + // baseFrequency: 2, + // scale: 10, + // numOctaves: 5, + // easing: 'easeOutSine', + + // delay: TIMES.TARGET_FADE_IN_DELAY, + // duration: TIMES.RESOLUTION_TOTAL_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(); + } + } +} + +module.exports = Reflect;