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

cleanup

Browse Source
This commit is contained in:
ntr 2019-07-01 15:50:38 +10:00
parent c7120d795f
commit af31803790
7 changed files with 29 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -212,6 +212,7 @@
.combat-text svg {
height: 7em;
max-width: 100%;
}
.combat-anim {
@ -220,10 +221,12 @@
position: absolute;
object-fit: contain;
top: 15%;
max-width: 100%;
}
.combat-anim svg {
height: 7em;
width: 100%;
}
.game-construct.active-skill {

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

@ -13,27 +13,20 @@ class Block extends Component {
render() {
return (
<svg
class='skill-animation red'
class='skill-animation white'
version="1.1"
id="block"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'rotate(180deg)' }}
transform="rotate(180)"
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>
);
@ -47,16 +40,6 @@ class Block extends Component {
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

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

@ -17,12 +17,8 @@ class Buff extends Component {
class="skill-animation"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<filter id='buffFilter'>
<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")'>
viewBox="0 0 200 200">
<g>
<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-three' points='70,150 100,300 130,150'/>
@ -44,34 +40,29 @@ class Buff extends Component {
this.animations.push(anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
}));
this.animations.push(anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
}));
this.animations.push(anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
}));
this.animations.push(anime({
targets: ['#buffFilter feTurbulence', ' #buffFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
// this is necessary because

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

@ -18,12 +18,8 @@ class Debuff extends Component {
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'rotate(180deg)' }}
viewBox="0 0 300 300">
<filter id='debuffFilter'>
<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")'>
viewBox="0 0 200 200">
<g>
<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-three' points='70,150 100,300 130,150'/>
@ -46,6 +42,7 @@ class Debuff extends Component {
targets: ['#debuff .debuff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
}));
@ -53,6 +50,7 @@ class Debuff extends Component {
targets: ['#debuff .debuff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
}));
@ -60,17 +58,8 @@ class Debuff extends Component {
targets: ['#debuff .debuff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
}));
this.animations.push(anime({
targets: ['#debuffFilter feTurbulence', ' #debuffFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
duration: TIMES.START_SKILL,
}));
}

9
client/src/components/anims/decay.jsx
View File

@ -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" />
</g>
</svg>
);
@ -46,7 +50,10 @@ class Decay extends Component {
this.animations.push(anime({
targets: ['#decay rect'],
transform: () => `translate(${anime.random(-100, 100)} ${anime.random(-100, 100)}) rotate(${anime.random(-15, 15)})`,
x: () => anime.random(30, 270),
y: () => anime.random(30, 270),
transform: `rotate(${anime.random(-15, 15)})`,
filter: ['brightness(1)', 'brightness(1.5)'],
opacity: 0,
easing: 'linear',
delay: TIMES.TARGET_DELAY_MS,

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

@ -14,10 +14,10 @@ class Haste extends Component {
return (
<svg
id='haste'
class="skill-animation white"
class="skill-animation"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
viewBox="0 0 200 200">
<filter id='hasteFilter'>
<feTurbulence type="turbulence"
baseFrequency="0"

2
client/src/constants.jsx
View File

@ -1,7 +1,7 @@
module.exports = {
TIMES: {
RESOLUTION_TOTAL_MS: 2000,
// RESOLUTION_TOTAL_MS: 20000,
// RESOLUTION_TOTAL_MS: 200000,
SOURCE_DURATION_MS: 1000,
TARGET_DELAY_MS: 500,