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

haste

Browse Source
This commit is contained in:
ntr 2019-07-01 14:04:17 +10:00
parent a5c149f2e7
commit da7c30032a
7 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/anims/amplify.jsx
View File

@ -21,7 +21,7 @@ class Amplify extends Component {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"> viewBox="0 0 200 200">
<filter id="amplifyFilter"> <filter id="amplifyFilter">
<feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence> <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<path filter='url("#amplifyFilter")' d={path} /> <path filter='url("#amplifyFilter")' d={path} />

2
client/src/components/anims/block.jsx
View File

@ -20,7 +20,7 @@ class Block extends Component {
style={{ transform: 'rotate(180deg)' }} style={{ transform: 'rotate(180deg)' }}
viewBox="0 0 256 256"> viewBox="0 0 256 256">
<filter id='blockFilter'> <filter id='blockFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<polygon <polygon

2
client/src/components/anims/buff.jsx
View File

@ -19,7 +19,7 @@ class Buff extends Component {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"> viewBox="0 0 300 300">
<filter id='buffFilter'> <filter id='buffFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<g filter='url("#buffFilter")'> <g filter='url("#buffFilter")'>

2
client/src/components/anims/debuff.jsx
View File

@ -20,7 +20,7 @@ class Debuff extends Component {
style={{ transform: 'rotate(180deg)' }} style={{ transform: 'rotate(180deg)' }}
viewBox="0 0 300 300"> viewBox="0 0 300 300">
<filter id='debuffFilter'> <filter id='debuffFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<g filter='url("#debuffFilter")'> <g filter='url("#debuffFilter")'>

32
client/src/components/anims/haste.jsx
View File

@ -2,7 +2,7 @@ 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');
class Haste extends Component { class Haste extends Component {
constructor() { constructor() {
@ -14,15 +14,21 @@ class Haste extends Component {
return ( return (
<svg <svg
id='haste' id='haste'
class="skill-animation" class="skill-animation white"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"> viewBox="0 0 300 300">
<filter id='hasteFilter'> <filter id='hasteFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence> <feTurbulence type="turbulence"
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> baseFrequency="0"
numOctaves="1"
result="turbulence">
</feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<g filter='url("#hasteFilter")'> <g
filter='url("#hasteFilter")'
>
<polygon points="10,190 100,10 190,190"/> <polygon points="10,190 100,10 190,190"/>
<polygon points="40,170 100,50 160,170"/> <polygon points="40,170 100,50 160,170"/>
<polygon points="70,150 100,90 130,150"/> <polygon points="70,150 100,90 130,150"/>
@ -42,17 +48,19 @@ class Haste extends Component {
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#haste'], targets: ['#haste g'],
transform: 'perspective(500px)', stroke: [COLOURS.GREEN, COLOURS.RED],
easing: 'easeOutExpo', easing: 'easeInCubic',
duration: TIMES.START_SKILL, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#hasteFilter feTurbulence', '#hasteFilter feDisplacementMap'], targets: ['#hasteFilter feTurbulence', '#hasteFilter feDisplacementMap'],
baseFrequency: 0, baseFrequency: 2,
scale: 1, scale: 10,
easing: 'easeOutSine', numOctaves: 5,
easing: 'easeInCubic',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,

3
client/src/components/anims/stun.jsx
View File

@ -24,9 +24,6 @@ class Stun extends Component {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="-291 -291 582 582"> viewBox="-291 -291 582 582">
<g> <g>
<circle r="288"
style="opacity: 0.25"
/>
<path <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" 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"
/> />

10
client/src/constants.jsx
View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
TIMES: { TIMES: {
RESOLUTION_TOTAL_MS: 2000, // RESOLUTION_TOTAL_MS: 2000,
// RESOLUTION_TOTAL_MS: 20000, RESOLUTION_TOTAL_MS: 20000,
SOURCE_DURATION_MS: 1000, SOURCE_DURATION_MS: 1000,
TARGET_DELAY_MS: 500, TARGET_DELAY_MS: 500,
@ -13,6 +13,12 @@ module.exports = {
DELAY: 150, DELAY: 150,
}, },
COLOURS: {
GREEN: '#1FF01F',
RED: '#a52a2a',
BLUE: '#3498db',
},
INFO: { INFO: {
vbox: { vbox: {
item: 'VBOX', item: 'VBOX',