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

hatred -> absorb, clutch -> sustain

Browse Source
This commit is contained in:
ntr
2019-07-05 14:11:00 +10:00
parent 640938827d
commit 3f974cb0fa
14 changed files with 221 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/animations.jsx
+2 -2
View File
@@ -10,7 +10,7 @@ const Blast = require('./anims/blast');
const Block = require('./anims/block');
const Buff = require('./anims/buff');
const Chaos = require('./anims/chaos');
const Clutch = require('./anims/clutch');
const Sustain = require('./anims/sustain');
const Counter = require('./anims/counter');
const Curse = require('./anims/curse');
const Debuff = require('./anims/debuff');
@@ -147,7 +147,7 @@ function animations(props) {
// Block Base
case 'Block': return <Block />;
case 'Clutch': return <Clutch team={player} />;
case 'Sustain': return <Sustain team={player} />;
case 'Electrify': return <Electrify />;
case 'Electrocute': return <Electrocute />;
case 'ElectrocuteTick': return <Electrocute />;
client/src/components/anims/absorb.jsx
+74
View File
@@ -0,0 +1,74 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
class Absorb extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation blue'
version="1.1"
id="absorb"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<defs>
<filter id="absorbFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g class='blue' filter='url(#absorbFilter)'>
<path d= "
M 64 4
L 64 96
"/>
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#absorb'],
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',
}));
anime({
targets: ['#absorb path'],
strokeDashoffset: [anime.setDashoffset, 0],
duration: 2000,
easing: 'linear',
loop: true,
});
}
// 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 = Absorb;
client/src/components/anims/clutch.jsx
+12 -12
View File
@@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES, COLOURS } = require('../../constants');
class Clutch extends Component {
class Sustain extends Component {
constructor() {
super();
this.animations = [];
@@ -15,28 +15,28 @@ class Clutch extends Component {
<svg
class='skill-animation green'
version="1.1"
id="clutch"
id="sustain"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: team ? 'rotate3d(1, 0, 0, 180deg)' : '' }}
viewBox="0 0 300 300">
<filter id='clutchFilter'>
<filter id='sustainFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<polyline
id="stageOne"
points='0 0'
style={{ filter: 'url("#clutchFilter")' }}
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
id="stageTwo"
points='0 0'
style={{ filter: 'url("#clutchFilter")' }}
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
id="stageThree"
points='0 0'
style={{ filter: 'url("#clutchFilter")' }}
style={{ filter: 'url("#sustainFilter")' }}
/>
</svg>
);
@@ -44,7 +44,7 @@ class Clutch extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#clutch'],
targets: ['#sustain'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
@@ -101,7 +101,7 @@ class Clutch extends Component {
}));
this.animations.push(anime({
targets: ['#clutchFilter feTurbulence', '#clutchFilter feDisplacementMap'],
targets: ['#sustainFilter feTurbulence', '#sustainFilter feDisplacementMap'],
baseFrequency: 2,
scale: 10,
numOctaves: 5,
@@ -122,19 +122,19 @@ class Clutch extends Component {
}
}
module.exports = Clutch;
module.exports = Sustain;
/* <polyline
points='128,168 80,240 176,240 128,168'
style={{ filter: 'url("#clutchFilter")' }}
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
points='176,240 212,216 128,96 44,216 80,240'
style={{ filter: 'url("#clutchFilter")' }}
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
points='212,216 248,192 128,24 8,192 44,216'
style={{ filter: 'url("#clutchFilter")' }}
style={{ filter: 'url("#sustainFilter")' }}
/>
*/