added sleep
This commit is contained in:
Mashy
parent
d455c68415
commit
686a346c9a
@ -23,10 +23,11 @@ const Strike = require('./anims/strike');
|
||||
const Parry = require('./anims/parry');
|
||||
const Purify = require('./anims/purify');
|
||||
const Recharge = require('./anims/recharge');
|
||||
const Reflect = require('./anims/reflect');
|
||||
const Refl = require('./anims/reflect');
|
||||
const Chaos = require('./anims/chaos');
|
||||
const Invert = require('./anims/invert');
|
||||
const Slay = require('./anims/slay');
|
||||
const Sleep = require('./anims/sleep');
|
||||
const Triage = require('./anims/triage');
|
||||
const TriageTick = require('./anims/triage.tick');
|
||||
const Siphon = require('./anims/siphon');
|
||||
@ -137,7 +138,7 @@ function animations(props) {
|
||||
case 'Banish': return <Banish id={construct.id} />;
|
||||
case 'Bash': return <Bash />;
|
||||
case 'Hex': return <Hex />;
|
||||
case 'Sleep': return false;
|
||||
case 'Sleep': return <Sleep />;
|
||||
case 'Throw': return false;
|
||||
case 'Ruin': return false;
|
||||
|
||||
@ -150,7 +151,7 @@ function animations(props) {
|
||||
case 'Parry': return <Parry team={player} />;
|
||||
case 'Purify': return <Purify team={player} />;
|
||||
case 'Recharge': return <Recharge team={player} />;
|
||||
case 'Reflect': return <Reflect team={player} />;
|
||||
case 'Reflect': return <Refl team={player} />;
|
||||
|
||||
default: return false;
|
||||
}
|
||||
|
||||
142
client/src/components/anims/sleep.jsx
Normal file
142
client/src/components/anims/sleep.jsx
Normal file
@ -0,0 +1,142 @@
|
||||
const preact = require('preact');
|
||||
const { Component } = require('preact');
|
||||
const anime = require('animejs').default;
|
||||
|
||||
const { TIMES, COLOURS } = require('../../constants');
|
||||
const { randomPoints } = require('../../utils');
|
||||
|
||||
// logarithmic spiral lifted from
|
||||
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
|
||||
|
||||
function projectile(x, y, radius, colour) {
|
||||
return (
|
||||
<circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={radius}
|
||||
fill={colour}
|
||||
stroke="none"
|
||||
id="charges"
|
||||
opacity="0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class Sleep extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.animations = [];
|
||||
const points = randomPoints(30, 30, { x: -250, y: -150, width: 600, height: 600 });
|
||||
this.charges = points.map(coord => projectile(coord[0], coord[1], 15, COLOURS.GREEN));
|
||||
}
|
||||
|
||||
render() {
|
||||
const path = 'M0,100 C100,100 100,100 200,100';
|
||||
|
||||
return (
|
||||
<svg
|
||||
class='skill-animation green'
|
||||
version="1.1"
|
||||
id="sleep"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-291 -191 582 582">
|
||||
<defs>
|
||||
<filter id="triageFilter">
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<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"/>
|
||||
<feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="stun">
|
||||
<path
|
||||
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
|
||||
/>
|
||||
<path
|
||||
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
|
||||
transform="rotate(120)"
|
||||
style="opacity: 0.75"
|
||||
/>
|
||||
<path
|
||||
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
|
||||
transform="rotate(240)"
|
||||
style="opacity: 0.5"
|
||||
/>
|
||||
</g>
|
||||
<g id="heal" filter="url(#triageFilter)">
|
||||
{this.charges}
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
anime.set('#sleep', {
|
||||
translateY: 75,
|
||||
});
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: ['#sleep'],
|
||||
opacity: [
|
||||
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
|
||||
],
|
||||
easing: 'easeInOutSine',
|
||||
}));
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: ['#sleep'],
|
||||
rotate: 180,
|
||||
easing: 'linear',
|
||||
loop: true,
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS,
|
||||
}));
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: ['#stun'],
|
||||
opacity: [
|
||||
{ value: 0, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
|
||||
],
|
||||
easing: 'easeInOutSine',
|
||||
}));
|
||||
|
||||
/* this.animations.push(anime({
|
||||
targets: ['#heal'],
|
||||
opacity: [
|
||||
{ value: 1, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.TARGET_DURATION_MS * 0.3 },
|
||||
{ value: 0, delay: TIMES.POST_SKILL_DURATION_MS * 0.6, duration: TIMES.POST_SKILL_DURATION_MS * 0.4 },
|
||||
],
|
||||
easing: 'easeInOutSine',
|
||||
}));
|
||||
*/
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: ['#charges'],
|
||||
opacity: 1,
|
||||
delay: anime.stagger(TIMES.TARGET_DURATION_MS * 0.015, { start: TIMES.TARGET_DELAY_MS }),
|
||||
easing: 'easeInOutSine',
|
||||
}));
|
||||
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: ['#charges'],
|
||||
cx: 0,
|
||||
cy: 0,
|
||||
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.75,
|
||||
duration: TIMES.POST_SKILL_DURATION_MS * 0.25,
|
||||
easing: 'easeInOutSine',
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
// 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 = Sleep;
|
||||
@ -334,6 +334,8 @@ const removeTier = skill => {
|
||||
|
||||
if (skill.includes('SiphonTick')) return 'SiphonTick';
|
||||
if (skill.includes('TriageTick')) return 'TriageTick';
|
||||
if (skill.includes('DecayTick')) return 'DecayTick';
|
||||
if (skill.includes('ElectrocuteTick')) return 'ElectrocuteTick';
|
||||
|
||||
if (skill.includes('Strike')) return 'Strike';
|
||||
if (skill.includes('Heal')) return 'Heal';
|
||||
@ -359,6 +361,7 @@ const removeTier = skill => {
|
||||
if (skill.includes('Parry')) return 'Parry';
|
||||
if (skill.includes('Purify')) return 'Purify';
|
||||
if (skill.includes('Electrify')) return 'Electrify';
|
||||
if (skill.includes('Electrocute')) return 'Electrocute';
|
||||
if (skill.includes('Clutch')) return 'Clutch';
|
||||
if (skill.includes('Reflect')) return 'Reflect';
|
||||
if (skill.includes('Recharge')) return 'Recharge';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user