reflect
This commit is contained in:
ntr
parent
8afc760eb3
commit
8263f274bc
@ -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'],
|
||||
},
|
||||
};
|
||||
@ -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 <Haste />;
|
||||
case 'Parry': return <Parry team={player} />;
|
||||
case 'Recharge': return <Recharge team={player} />;
|
||||
case 'Invert': return <Invert id={construct.id} />
|
||||
case 'Reflect': return <Reflect team={player} />;
|
||||
case 'Invert': return <Invert id={construct.id} />;
|
||||
case 'Siphon': return <Siphon id={construct.id} team={player} />;
|
||||
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
|
||||
case 'Stun': return <Stun />;
|
||||
|
||||
@ -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,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
82
client/src/components/anims/reflect.jsx
Normal file
82
client/src/components/anims/reflect.jsx
Normal file
@ -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 (
|
||||
<svg
|
||||
class='skill-animation'
|
||||
version="1.1"
|
||||
id="reflect"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ transform: team ? '' : 'rotate3d(1, 0, 0, 180deg)' }}
|
||||
viewBox="0 0 256 256">
|
||||
<defs>
|
||||
<filter id="reflectFilterGreen">
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="cutoff"/>
|
||||
<feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#reflectFilterGreen)">
|
||||
<rect class="green" fill={COLOURS.GREEN} x="32" y="64" width="192" height="4" />
|
||||
<path class="red" d={`M${redX},20 L${redX * 1.5},64 L${redX * 2},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} />
|
||||
<path class="blue" d={`M${blueX},20 L${blueX * 0.75},64 L${blueX * 0.5},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
Loading…
x
Reference in New Issue
Block a user