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

hex

Browse Source
This commit is contained in:
ntr 2019-06-29 15:38:56 +10:00
parent 214214e838
commit b3cae863d1
5 changed files with 70 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/assets/styles/game.css
View File

@ -72,7 +72,7 @@
"name "
"stats ";
transition-property: translate;
transition-property: translate, opacity;
transition-duration: 0.25s;
transition-delay: 0;
transition-timing-function: ease;

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

@ -4,6 +4,7 @@ const AttackCharge = require('./anims/attack.charge');
const Blast = require('./anims/blast');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Strike = require('./anims/strike');
const Chaos = require('./anims/chaos');
const Slay = require('./anims/slay');
@ -54,6 +55,7 @@ function animations(props) {
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 '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;

1
client/src/components/anims/heal.jsx
View File

@ -41,7 +41,6 @@ class Heal extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />

67
client/src/components/anims/hex.jsx Normal file
View File

@ -0,0 +1,67 @@
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 Hex extends Component {
render(props) {
const {
id,
// stage,
// team,
// colour,
} = props;
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}`}>
<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}")` }}>
</polygon>
</svg>
);
}
componentDidMount() {
anime({
targets: ['.hex-anim polygon'],
points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
direction: 'alternate',
easing: 'easeInOutExpo',
duration: TIMES.START_SKILL,
});
anime({
targets: ['feTurbulence', 'feDisplacementMap'],
baseFrequency: 0,
scale: 1,
direction: 'alternate',
easing: 'easeInOutExpo',
duration: TIMES.START_SKILL,
});
}
// reset hexagon
componentWillUnmount() {
anime.set({
targets: ['.hex-anim polygon'],
points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
});
}
}
module.exports = Hex;

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

@ -1,58 +0,0 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
class Hex extends Component {
render() {
return (
<svg
class='hex-anim skill-animation blue'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<filter id="hexFilter">
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<polygon
points="64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788 " style="filter: url(&quot;#hexFilter&quot;); transform: scale(1);"
fill="currentColor"
></polygon>
</svg>
);
}
componentDidMount() {
anime({
targets: ['.hex-anim'],
scale: [1, 2],
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});
anime({
targets: ['.hex-anim polygon'],
points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568',
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});
anime({
targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'],
baseFrequency: 0.05,
scale: 15,
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});
}
}
module.exports = Hex;