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

recharge

Browse Source
This commit is contained in:
ntr 2019-07-02 15:25:47 +10:00
parent 9f6cd43bb9
commit c6b39fef8f
6 changed files with 95 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Strike = require('./anims/strike');
const Parry = require('./anims/parry');
const Recharge = require('./anims/recharge');
const Chaos = require('./anims/chaos');
const invert = require('./anims/invert');
const Slay = require('./anims/slay');
@ -114,6 +115,7 @@ function animations(props) {
case 'Hex': return <Hex />;
case 'Haste': return <Haste />;
case 'Parry': return <Parry team={player} />;
case 'Recharge': return <Recharge team={player} />;
case 'Invert': return invert(construct.id);
case 'Siphon': return <Siphon id={construct.id} team={player} />;
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;

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

@ -1,9 +1,6 @@
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
function banish(id) {
anime({
targets: [document.getElementById(id)],

3
client/src/components/anims/electrify.jsx
View File

@ -6,9 +6,6 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
class Electrify extends Component {
constructor() {
super();

3
client/src/components/anims/electrocute.jsx
View File

@ -6,9 +6,6 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
class Electrify extends Component {
constructor() {
super();

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

@ -1,9 +1,6 @@
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
function invert(id) {
anime({
targets: [document.getElementById(id)],

93
client/src/components/anims/recharge.jsx Normal file
View File

@ -0,0 +1,93 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Recharge extends Component {
constructor() {
super();
this.animations = [];
}
render({ team }) {
return (
<svg
class='skill-animation red'
version="1.1"
id="recharge"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<filter id='rechargeFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<filter id="rechargeBlueFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<path
class='red'
filter='url("#rechargeFilter")'
d='M64,128 h-50 M64,128 h50 M64,128 v50 M64,128 v-50'
/>
<path
class='blue'
filter='url("#rechargeBlueFilter")'
d='M192,128 h-50 M192,128 h50 M192,128 v50 M192,128 v-50'
/>
<path
class='white'
d='M192,128 h-50 M192,128 h50 M192,128 v50 M192,128 v-50'
/>
</svg>
);
}
componentDidMount() {
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 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#recharge path.white'],
strokeWidth: [2, 1],
easing: 'easeInOutSine',
direction: 'alternate',
delay: TIMES.TARGET_MAIN_DELAY,
duration: TIMES.TARGET_MAIN_DURATION,
}));
this.animations.push(anime({
targets: ['#rechargeFilter feTurbulence', ' #rechargeFilter 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 = Recharge;