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

amplify

Browse Source
This commit is contained in:
ntr 2019-06-29 15:58:48 +10:00
parent b8fb2a5901
commit 9120a1e92f
3 changed files with 6 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ const preact = require('preact');
const AttackCharge = require('./anims/attack.charge');
const Amplify = require('./anims/amplify');
const Blast = require('./anims/blast');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
@ -50,12 +51,13 @@ function animations(props) {
const skill = removeTier(text);
switch (skill) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Hex': return <Hex id={Date.now()} stage={stage} team={player} colour={colours.red}/>;
case 'Hex': return <Hex/>;
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
default: return false;

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

@ -9,28 +9,20 @@ const { TIMES } = require('../../constants');
// https://animejs.com/documentation/#svgAttr
class Hex extends Component {
render(props) {
const {
id,
// stage,
// team,
// colour,
} = props;
render() {
return (
<svg
class='hex-anim skill-animation blue'
version="1.1"
id={id}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<filter id={`filter${id}`}>
<filter id='hexFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<polygon
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
style={{ filter: `url("#filter${id}")` }}>
style={{ filter: 'url("#hexFilter")' }}>
</polygon>
</svg>
);

58
client/src/components/svgs/amplify.jsx
View File

@ -1,58 +0,0 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
class Amplify extends Component {
constructor() {
super();
this.id = Math.random();
}
render() {
const path = 'M0,100 C100,-200 100,400 200,100';
return (
<svg
class='skill-animation blue'
version="1.1"
id="amplify"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<filter id="ampFilter">
<feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<path filter='url("#ampFilter")' d={path} />
</svg>
);
}
componentDidMount() {
const altPath = 'M0,100 C100,400 100,-200 200,100';
anime({
targets: '#amplify path',
d: [{ value: altPath }],
stroke: ['#a52a2a', '#3498db'],
duration: 1000,
loop: true,
direction: 'alternate',
easing: 'easeInOutSine',
});
anime({
targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
baseFrequency: 0.15,
scale: 4,
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});
}
componentWillUnmount() {
}
}
module.exports = Amplify;