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

Merge branch 'anims-change' into anims-fixed

Browse Source
This commit is contained in:
Mashy 2019-07-01 20:24:57 +10:00
commit 81970f5abf
10 changed files with 158 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -212,6 +212,7 @@
.combat-text svg { .combat-text svg {
height: 7em; height: 7em;
max-width: 100%;
} }
.combat-anim { .combat-anim {
@ -220,10 +221,12 @@
position: absolute; position: absolute;
object-fit: contain; object-fit: contain;
top: 15%; top: 15%;
max-width: 100%;
} }
.combat-anim svg { .combat-anim svg {
height: 7em; height: 7em;
width: 100%;
} }
.game-construct.active-skill { .game-construct.active-skill {
@ -344,6 +347,7 @@
.skill-animation { .skill-animation {
opacity: 0; opacity: 0;
stroke-width: 5px;
} }
/* /*

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

@ -13,27 +13,20 @@ class Block extends Component {
render() { render() {
return ( return (
<svg <svg
class='skill-animation red' class='skill-animation white'
version="1.1" version="1.1"
id="block" id="block"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'rotate(180deg)' }} transform="rotate(180)"
viewBox="0 0 256 256"> viewBox="0 0 256 256">
<filter id='blockFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<polygon <polygon
points='128,168 80,240 176,240' points='128,168 80,240 176,240'
style={{ filter: 'url("#blockFilter")' }}
id="charge"/> id="charge"/>
<polyline <polyline
points='176,240 212,216 128,96 44,216 80,240' points='176,240 212,216 128,96 44,216 80,240'
style={{ filter: 'url("#blockFilter")' }}
id="charge"/> id="charge"/>
<polyline <polyline
points='212,216 248,192 128,24 8,192 44,216' points='212,216 248,192 128,24 8,192 44,216'
style={{ filter: 'url("#blockFilter")' }}
id="charge"/> id="charge"/>
</svg> </svg>
); );
@ -47,16 +40,6 @@ class Block extends Component {
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
this.animations.push(anime({
targets: ['#blockFilter feTurbulence', ' #blockFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
} }
// this is necessary because // this is necessary because

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

@ -17,12 +17,8 @@ class Buff extends Component {
class="skill-animation" class="skill-animation"
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 200 200">
<filter id='buffFilter'> <g>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter='url("#buffFilter")'>
<polygon class='buff-one' points='0,190 100,300 190,190'/> <polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/> <polygon class='buff-two' points='40,170 100,300 160,170'/>
<polygon class='buff-three' points='70,150 100,300 130,150'/> <polygon class='buff-three' points='70,150 100,300 130,150'/>
@ -44,7 +40,9 @@ class Buff extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff .buff-one'], targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190', points: '0,190 100,10 190,190',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
@ -52,6 +50,7 @@ class Buff extends Component {
targets: ['#buff .buff-two'], targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170', points: '40,170 100,50 160,170',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
@ -59,19 +58,9 @@ class Buff extends Component {
targets: ['#buff .buff-three'], targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150', points: '70,150 100,90 130,150',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#buffFilter feTurbulence', ' #buffFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }
// this is necessary because // this is necessary because

27
client/src/components/anims/curse.jsx
View File

@ -21,9 +21,20 @@ class Curse extends Component {
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 198 200"> viewBox="0 0 198 200">
<ellipse cx="100" cy="100" rx="30" ry="30"/> <defs>
<ellipse cx="100" cy="100" rx="60" ry="60"/> <filter id="curseFilter">
<ellipse cx="100" cy="100" rx="90" ry="90"/> <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g filter="url(#curseFilter)">
<ellipse cx="100" cy="100" rx="30" ry="30"/>
<ellipse cx="100" cy="100" rx="60" ry="60"/>
<ellipse cx="100" cy="100" rx="90" ry="90"/>
</g>
</svg> </svg>
); );
} }
@ -40,11 +51,13 @@ class Curse extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#curse'], targets: ['#curse'],
scale: [0.5, 0.8], scale: [0.5, 1],
stroke: [COLOURS.WHITE, COLOURS.BLUE],
strokeWidth: [8, 0], strokeWidth: [8, 0],
easing: 'easeInOutSine', filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
// delay: TIMES.TARGET_DELAY_MS, easing: 'easeOutSine',
duration: TIMES.TARGET_DURATION_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
})); }));
} }

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

@ -18,12 +18,8 @@ class Debuff extends Component {
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'rotate(180deg)' }} style={{ transform: 'rotate(180deg)' }}
viewBox="0 0 300 300"> viewBox="0 0 200 200">
<filter id='debuffFilter'> <g>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter='url("#debuffFilter")'>
<polygon class='debuff-one' points='0,190 100,300 190,190'/> <polygon class='debuff-one' points='0,190 100,300 190,190'/>
<polygon class='debuff-two' points='40,170 100,300 160,170'/> <polygon class='debuff-two' points='40,170 100,300 160,170'/>
<polygon class='debuff-three' points='70,150 100,300 130,150'/> <polygon class='debuff-three' points='70,150 100,300 130,150'/>
@ -47,6 +43,7 @@ class Debuff extends Component {
points: '0,190 100,10 190,190', points: '0,190 100,10 190,190',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -54,21 +51,13 @@ class Debuff extends Component {
points: '40,170 100,50 160,170', points: '40,170 100,50 160,170',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS,
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#debuff .debuff-three'], targets: ['#debuff .debuff-three'],
points: '70,150 100,90 130,150', points: '70,150 100,90 130,150',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#debuffFilter feTurbulence', ' #debuffFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));

16
client/src/components/anims/decay.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 Decay extends Component { class Decay extends Component {
constructor() { constructor() {
@ -29,6 +29,10 @@ class Decay extends Component {
<rect x="135" y="135" width="30" height="30" /> <rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" /> <rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" /> <rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
</g> </g>
</svg> </svg>
); );
@ -46,9 +50,13 @@ class Decay extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#decay rect'], targets: ['#decay rect'],
transform: () => `translate(${anime.random(-100, 100)} ${anime.random(-100, 100)}) rotate(${anime.random(-15, 15)})`, x: () => anime.random(50, 250),
opacity: 0, y: () => anime.random(50, 250),
easing: 'linear', stroke: [COLOURS.WHITE, COLOURS.BLUE],
strokeWidth: [4, 2],
transform: `rotate(${anime.random(-15, 15)})`,
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));

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

@ -14,10 +14,10 @@ class Haste extends Component {
return ( return (
<svg <svg
id='haste' id='haste'
class="skill-animation white" class="skill-animation"
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 200 200">
<filter id='hasteFilter'> <filter id='hasteFilter'>
<feTurbulence type="turbulence" <feTurbulence type="turbulence"
baseFrequency="0" baseFrequency="0"

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

@ -22,16 +22,23 @@ class Hex extends Component {
id="hex" id="hex"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128"> viewBox="0 0 128 128">
<filter id='hexFilter'> <defs>
<feTurbulence type="turbulence" <filter id="hexFilter">
baseFrequency="0.10" <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
numOctaves="10" result="turbulence"> <feMerge>
</feTurbulence> <feMergeNode />
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feMergeNode in="SourceGraphic" />
</filter> </feMerge>
</filter>
</defs>
<polygon <polygon
class='blue'
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100" points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
style={{ filter: 'url("#hexFilter")' }}> filter="url(#hexFilter)">
</polygon>
<polygon
class='white'
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100">
</polygon> </polygon>
</svg> </svg>
); );
@ -56,14 +63,24 @@ class Hex extends Component {
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['feTurbulence', 'feDisplacementMap'], targets: ['#hex polygon.white'],
baseFrequency: 0, strokeWidth: [2, 1],
scale: 1, easing: 'easeInOutSine',
easing: 'easeOutSine', direction: 'alternate',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
// this.animations.push(anime({
// targets: ['feTurbulence', 'feDisplacementMap'],
// baseFrequency: 0,
// scale: 1,
// easing: 'easeOutSine',
// delay: TIMES.TARGET_DELAY_MS,
// duration: TIMES.TARGET_DURATION_MS,
// }));
} }
// this is necessary because // this is necessary because

73
client/src/components/anims/red.block.jsx Normal file
View File

@ -0,0 +1,73 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Block extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation red'
version="1.1"
id="block"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'rotate(180deg)' }}
viewBox="0 0 256 256">
<filter id='blockFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<polygon
points='128,168 80,240 176,240'
style={{ filter: 'url("#blockFilter")' }}
id="charge"/>
<polyline
points='176,240 212,216 128,96 44,216 80,240'
style={{ filter: 'url("#blockFilter")' }}
id="charge"/>
<polyline
points='212,216 248,192 128,24 8,192 44,216'
style={{ filter: 'url("#blockFilter")' }}
id="charge"/>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#block'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#blockFilter feTurbulence', ' #blockFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
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 = Block;

7
client/src/constants.jsx
View File

@ -1,5 +1,11 @@
module.exports = { module.exports = {
TIMES: { TIMES: {
<<<<<<< HEAD
=======
RESOLUTION_TOTAL_MS: 2000,
// RESOLUTION_TOTAL_MS: 200000,
>>>>>>> anims-change
SOURCE_DURATION_MS: 1000, SOURCE_DURATION_MS: 1000,
TARGET_DELAY_MS: 500, TARGET_DELAY_MS: 500,
TARGET_DURATION_MS: 1000, TARGET_DURATION_MS: 1000,
@ -10,6 +16,7 @@ module.exports = {
GREEN: '#1FF01F', GREEN: '#1FF01F',
RED: '#a52a2a', RED: '#a52a2a',
BLUE: '#3498db', BLUE: '#3498db',
WHITE: '#f5f5f5', // whitesmoke
}, },
INFO: { INFO: {