diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index cd09e5c1..162b848d 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -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 { @@ -344,6 +347,7 @@ .skill-animation { opacity: 0; + stroke-width: 5px; } /* diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index a2101323..a6081fe4 100644 --- a/client/src/components/anims/block.jsx +++ b/client/src/components/anims/block.jsx @@ -13,27 +13,20 @@ class Block extends Component { render() { return ( - - - - ); @@ -47,16 +40,6 @@ class Block extends Component { delay: TIMES.TARGET_DELAY_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 diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index 4c23a041..f6661de8 100644 --- a/client/src/components/anims/buff.jsx +++ b/client/src/components/anims/buff.jsx @@ -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"> - - - - - + viewBox="0 0 200 200"> + @@ -44,7 +40,9 @@ 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.TARGET_DURATION_MS, })); @@ -52,6 +50,7 @@ class Buff extends Component { targets: ['#buff .buff-two'], points: '40,170 100,50 160,170', easing: 'easeOutExpo', + delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); @@ -59,19 +58,9 @@ class Buff extends Component { targets: ['#buff .buff-three'], points: '70,150 100,90 130,150', 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, duration: TIMES.TARGET_DURATION_MS, })); - } // this is necessary because diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 71472806..77f8af65 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -21,9 +21,20 @@ class Curse extends Component { version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198 200"> - - - + + + + + + + + + + + + + + ); } @@ -40,11 +51,13 @@ class Curse extends Component { this.animations.push(anime({ targets: ['#curse'], - scale: [0.5, 0.8], + scale: [0.5, 1], + stroke: [COLOURS.WHITE, COLOURS.BLUE], strokeWidth: [8, 0], - easing: 'easeInOutSine', - // delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, + filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], + easing: 'easeOutSine', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.START_SKILL, })); } diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index b03e1789..37741460 100644 --- a/client/src/components/anims/debuff.jsx +++ b/client/src/components/anims/debuff.jsx @@ -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"> - - - - - + viewBox="0 0 200 200"> + @@ -47,6 +43,7 @@ class Debuff extends Component { points: '0,190 100,10 190,190', easing: 'easeOutExpo', duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_MS, })); this.animations.push(anime({ @@ -54,21 +51,13 @@ class Debuff extends Component { points: '40,170 100,50 160,170', easing: 'easeOutExpo', duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_MS, })); this.animations.push(anime({ targets: ['#debuff .debuff-three'], points: '70,150 100,90 130,150', 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, duration: TIMES.TARGET_DURATION_MS, })); diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 0734329c..2d05d3de 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -2,7 +2,7 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; -const { TIMES } = require('../../constants'); +const { TIMES, COLOURS } = require('../../constants'); class Decay extends Component { constructor() { @@ -29,6 +29,10 @@ class Decay extends Component { + + + + ); @@ -46,9 +50,13 @@ 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)})`, - opacity: 0, - easing: 'linear', + x: () => anime.random(50, 250), + y: () => anime.random(50, 250), + 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, duration: TIMES.TARGET_DURATION_MS, })); diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index 54d13702..0df1bcf3 100644 --- a/client/src/components/anims/haste.jsx +++ b/client/src/components/anims/haste.jsx @@ -14,10 +14,10 @@ class Haste extends Component { return ( + viewBox="0 0 200 200"> - - - - - + + + + + + + + + + filter="url(#hexFilter)"> + + ); @@ -56,14 +63,24 @@ class Hex extends Component { })); this.animations.push(anime({ - targets: ['feTurbulence', 'feDisplacementMap'], - baseFrequency: 0, - scale: 1, - easing: 'easeOutSine', + targets: ['#hex polygon.white'], + strokeWidth: [2, 1], + easing: 'easeInOutSine', + direction: 'alternate', delay: TIMES.TARGET_DELAY_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 diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx new file mode 100644 index 00000000..812b32cb --- /dev/null +++ b/client/src/components/anims/red.block.jsx @@ -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 ( + + + + + + + + + + ); + } + + 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; diff --git a/client/src/constants.jsx b/client/src/constants.jsx index e30aa4c7..e8d0b929 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,5 +1,11 @@ module.exports = { TIMES: { +<<<<<<< HEAD +======= + RESOLUTION_TOTAL_MS: 2000, + // RESOLUTION_TOTAL_MS: 200000, + +>>>>>>> anims-change SOURCE_DURATION_MS: 1000, TARGET_DELAY_MS: 500, TARGET_DURATION_MS: 1000, @@ -10,6 +16,7 @@ module.exports = { GREEN: '#1FF01F', RED: '#a52a2a', BLUE: '#3498db', + WHITE: '#f5f5f5', // whitesmoke }, INFO: {