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

fix hex

Browse Source
This commit is contained in:
ntr 2019-07-02 22:10:37 +10:00
parent 3eb55463e6
commit 189cbea0bf
3 changed files with 39 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ const Reflect = require('./anims/reflect');
const Chaos = require('./anims/chaos'); const Chaos = require('./anims/chaos');
const Invert = require('./anims/invert'); const Invert = require('./anims/invert');
const Slay = require('./anims/slay'); const Slay = require('./anims/slay');
const Triage = require('./anims/triage');
const Siphon = require('./anims/siphon'); const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick'); const SiphonTick = require('./anims/siphon.tick');
@ -118,6 +119,7 @@ function animations(props) {
case 'Parry': return <Parry team={player} />; case 'Parry': return <Parry team={player} />;
case 'Recharge': return <Recharge team={player} />; case 'Recharge': return <Recharge team={player} />;
case 'Reflect': return <Reflect team={player} />; case 'Reflect': return <Reflect team={player} />;
case 'Triage': return <Triage />;
case 'Invert': return <Invert id={construct.id} />; case 'Invert': return <Invert id={construct.id} />;
case 'Siphon': return <Siphon id={construct.id} team={player} />; case 'Siphon': return <Siphon id={construct.id} team={player} />;
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />; case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;

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

@ -2,23 +2,17 @@ const preact = require('preact');
const { Component } = require('preact'); const { Component } = require('preact');
const anime = require('animejs').default; const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES, COLOURS } = require('../../constants');
const { randomPoints } = require('../../utils'); const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) { function projectile(x, y, radius, colour) {
return ( return (
<circle <circle
cx={x} cx={x}
cy={y} cy={y}
r={radius} r={radius}
fill="url(#grad1)" fill={colour}
stroke-width="2" stroke="none"
stroke={colour}
id="projectile"
filter="url(#explosion)"
/> />
); );
} }
@ -28,75 +22,60 @@ class Heal extends Component {
super(); super();
this.team = props.team; this.team = props.team;
this.animations = []; this.animations = [];
const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 }); const points = randomPoints(30, 10, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#1FF01F')); this.charges = points.map(coord => projectile(coord[0], coord[1], 12, COLOURS.GREEN));
} }
render() { render() {
return ( return (
<svg <svg
class={'skill-anim'} class='skill-animation'
id='heal'
version="1.1" version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400"> viewBox="0 0 300 400">
<defs> <defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%"> <filter id="healFilter">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" /> <feGaussianBlur stdDeviation="3"/>
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} /> <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"/>
</radialGradient> <feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter> </filter>
</defs>
<g filter="url(#healFilter)">
{this.charges} {this.charges}
</g>
</svg> </svg>
); );
} }
componentDidMount() { componentDidMount() {
anime.set('#explosion feDisplacementMap', {
scale: 100,
});
anime.set('.skill-anim', {
opacity: 0,
});
this.animations.push(anime({ this.animations.push(anime({
targets: '.skill-anim', targets: ['#heal'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 }, { 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 }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine',
})); }));
// this.animations.push(anime({
// targets: '.skill-anim',
// translateY: 0,
// translateX: 0,
// loop: false,
// delay: TIMES.TARGET_DELAY_MS,
// duration: (duration * 1 / 2),
// easing: 'easeInQuad',
// }));
this.animations.push(anime({ this.animations.push(anime({
targets: '.skill-anim', targets: ['#heal circle'],
translateY: 0,
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 1,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#projectile',
cx: 150, cx: 150,
cy: 200, cy: 200,
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2), delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: TIMES.TARGET_DURATION_MS * 1.5,
easing: 'easeInQuad', easing: 'easeInOutSine',
direction: 'reverse',
})); }));
} }
} }

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

@ -59,8 +59,8 @@ class Hex extends Component {
points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788', points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_MAIN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_MAIN_DURATION, duration: TIMES.TARGET_DURATION_MS,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -69,8 +69,8 @@ class Hex extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
direction: 'alternate', direction: 'alternate',
delay: TIMES.TARGET_MAIN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_MAIN_DURATION, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }