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

taunt / intercept

Browse Source
This commit is contained in:
ntr
2019-07-04 15:00:19 +10:00
parent 28abca3ed8
commit 34cfc19ae2
16 changed files with 234 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/animations.test.jsx
+1 -1
View File
@@ -110,7 +110,7 @@ const SKILLS = [
'SleepI',
'SnareI',
'StrikeI',
'TauntI',
'InterceptI',
'ThrowI',
'TriageI',
'TriageTickI',
client/src/components/animations.jsx
+3 -2
View File
@@ -27,6 +27,7 @@ const Reflect = require('./anims/reflect');
const Chaos = require('./anims/chaos');
const Invert = require('./anims/invert');
const Slay = require('./anims/slay');
const Intercept = require('./anims/intercept');
const Triage = require('./anims/triage');
const TriageTick = require('./anims/triage.tick');
const Siphon = require('./anims/siphon');
@@ -120,7 +121,7 @@ function animations(props) {
case 'TriageTick': return <TriageTick />;
case 'Scatter': return false;
case 'Hybrid': return <Hybrid />;
case 'Taunt': return false;
case 'Intercept': return <Intercept player={player} />;
// Debuff base
case 'Debuff': return <Debuff />;
@@ -146,7 +147,7 @@ function animations(props) {
case 'Clutch': return false;
case 'Electrify': return <Electrify />;
case 'Electrocute': return <Electrocute />;
case 'ElectrocuteTick': return false;
case 'ElectrocuteTick': return <Electrocute />;
case 'Parry': return <Parry team={player} />;
case 'Purify': return <Purify team={player} />;
case 'Recharge': return <Recharge team={player} />;
client/src/components/anims/intercept.jsx
+94
View File
@@ -0,0 +1,94 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const {
TIMES,
COLOURS,
} = require('../../constants');
class Intercept extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation'
version="1.1"
id="intercept"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<filter id='interceptFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter="url(#interceptFilter)" stroke="none" fill={COLOURS.RED} >
<rect x='32' y="64" width="64" height="2" />
<rect x='48' y="32" width="32" height="2" />
<rect x='56' y="16" width="16" height="2" />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#intercept'],
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',
}));
this.animations.push(anime({
targets: ['#intercept'],
transform: [
`scale(1) ${this.props.player ? 'rotate(180)' : ''}`,
`scale(3) ${this.props.player ? 'rotate(180)' : ''}`,
],
strokeWidth: 0,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInSine',
// direction: 'reverse',
}));
this.animations.push(anime({
targets: ['#intercept rect'],
y: 96,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInSine',
// direction: 'reverse',
}));
this.animations.push(anime({
targets: ['#interceptFilter feTurbulence', '#interceptFilter feDisplacementMap'],
baseFrequency: 2,
scale: 10,
numOctaves: 5,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
// 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 = Intercept;
client/src/components/anims/red.circles.js
+81
View File
@@ -0,0 +1,81 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Intercept extends Component {
constructor() {
super();
this.animations = [];
}
render({ player }) {
return (
<svg
class='skill-animation red'
version="1.1"
id="intercept"
xmlns="http://www.w3.org/2000/svg"
style={{
transform: player ? 'rotate3d(1, 0, 0, 180deg)' : '',
}}
viewBox="0 0 128 128">
<filter id='interceptFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter="url(#interceptFilter)">
<circle cx="64" cy="128" r="48" />
<circle cx="64" cy="128" r="32" />
<circle cx="64" cy="128" r="16" />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#intercept'],
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',
}));
this.animations.push(anime({
targets: ['#intercept'],
scale: 3,
strokeWidth: 0,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInOutCubic',
}));
this.animations.push(anime({
targets: ['#interceptFilter feTurbulence', '#interceptFilter feDisplacementMap'],
baseFrequency: 2,
scale: 10,
numOctaves: 5,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
// 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 = Intercept;
client/src/constants.jsx
+2 -1
View File
@@ -3,7 +3,8 @@ const SOURCE_DURATION_MS = 1000;
const TARGET_DELAY_MS = 500;
const TARGET_DURATION_MS = 1500;
const POST_SKILL_DURATION_MS = 1000;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
// const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
const SOURCE_AND_TARGET_TOTAL_DURATION = 100000;
module.exports = {
TIMES: {
client/src/test.instance.js
+1 -1
View File
@@ -1413,7 +1413,7 @@ function testInstance(uuid) {
"cd": null
},
{
"skill": "Taunt",
"skill": "Intercept",
"self_targeting": false,
"cd": 2
},
client/src/utils.jsx
+1 -1
View File
@@ -349,7 +349,7 @@ const removeTier = skill => {
if (skill.includes('Decay')) return 'Decay';
if (skill.includes('Invert')) return 'Invert';
if (skill.includes('Taunt')) return 'Taunt';
if (skill.includes('Intercept')) return 'Intercept';
if (skill.includes('Triage')) return 'Triage';
if (skill.includes('Scatter')) return 'Scatter';
if (skill.includes('Haste')) return 'Haste';