From af3180379056aed31c9d96dcefb7bbe5514a8aab Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Jul 2019 15:50:38 +1000 Subject: [PATCH 1/5] cleanup --- client/assets/styles/game.css | 3 +++ client/src/components/anims/block.jsx | 21 ++------------------- client/src/components/anims/buff.jsx | 25 ++++++++----------------- client/src/components/anims/debuff.jsx | 21 +++++---------------- client/src/components/anims/decay.jsx | 9 ++++++++- client/src/components/anims/haste.jsx | 4 ++-- client/src/constants.jsx | 2 +- 7 files changed, 29 insertions(+), 56 deletions(-) diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index cd09e5c1..353f222f 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 { diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index 812b32cb..0bde891b 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_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 diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index beca0500..80e682f9 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,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 diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index bf7efe98..7d5a1fda 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"> + @@ -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, })); } diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 206457eb..317f3d08 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -29,6 +29,10 @@ class Decay extends Component { + + + + ); @@ -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, diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index 1ba65274..e89cf07f 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"> Date: Mon, 1 Jul 2019 17:03:45 +1000 Subject: [PATCH 2/5] red block --- client/src/components/anims/red.block.jsx | 73 +++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 client/src/components/anims/red.block.jsx 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; From 465595de5f794275d47089cb4310263d73b1bab3 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Jul 2019 17:46:01 +1000 Subject: [PATCH 3/5] some filters --- client/assets/styles/game.css | 1 + client/src/components/anims/curse.jsx | 20 ++++++++++++--- client/src/components/anims/decay.jsx | 19 ++++++++++----- client/src/components/anims/hex.jsx | 35 ++++++++++++++------------- 4 files changed, 48 insertions(+), 27 deletions(-) diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 353f222f..162b848d 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -347,6 +347,7 @@ .skill-animation { opacity: 0; + stroke-width: 5px; } /* diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index fd269ad1..478311ef 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,8 +51,9 @@ class Curse extends Component { this.animations.push(anime({ targets: ['#curse'], - scale: [0.5, 0.8], + scale: [0.5, 1], strokeWidth: [8, 0], + easing: 'easeInOutSine', // 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 317f3d08..571af765 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -18,7 +18,16 @@ class Decay extends Component { version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> - + + + + + + + + + + @@ -50,12 +59,10 @@ class Decay extends Component { this.animations.push(anime({ targets: ['#decay rect'], - x: () => anime.random(30, 270), - y: () => anime.random(30, 270), + x: () => anime.random(50, 250), + y: () => anime.random(50, 250), transform: `rotate(${anime.random(-15, 15)})`, - filter: ['brightness(1)', 'brightness(1.5)'], - opacity: 0, - easing: 'linear', + easing: 'easeOutSine', delay: TIMES.TARGET_DELAY_MS, duration: TIMES.START_SKILL, })); diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index aa206172..3e2174d0 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -22,16 +22,18 @@ class Hex extends Component { id="hex" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"> - - - - - + + + + + + + + + + filter="url(#hexFilter)"> ); @@ -54,16 +56,15 @@ class Hex extends Component { delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); + // this.animations.push(anime({ + // targets: ['feTurbulence', 'feDisplacementMap'], + // baseFrequency: 0, + // scale: 1, + // easing: 'easeOutSine', - this.animations.push(anime({ - targets: ['feTurbulence', 'feDisplacementMap'], - baseFrequency: 0, - scale: 1, - easing: 'easeOutSine', - - delay: TIMES.TARGET_DELAY_MS, - duration: TIMES.TARGET_DURATION_MS, - })); + // delay: TIMES.TARGET_DELAY_MS, + // duration: TIMES.TARGET_DURATION_MS, + // })); } // this is necessary because From 1f3c0ff196389c122224bbe2bcba5bbec738dd3b Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Jul 2019 18:33:50 +1000 Subject: [PATCH 4/5] hex and decay --- client/src/components/anims/decay.jsx | 16 +++++----------- client/src/components/anims/hex.jsx | 16 ++++++++++++++++ client/src/constants.jsx | 1 + 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 571af765..680a5f27 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() { @@ -18,16 +18,7 @@ class Decay extends Component { version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> - - - - - - - - - - + @@ -61,7 +52,10 @@ class Decay extends Component { targets: ['#decay rect'], 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.START_SKILL, diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index 3e2174d0..42932f3b 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -32,9 +32,14 @@ class Hex extends Component { + + ); } @@ -56,6 +61,17 @@ class Hex extends Component { delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, })); + + this.animations.push(anime({ + 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, diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 87e415ed..6b0b46a7 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -17,6 +17,7 @@ module.exports = { GREEN: '#1FF01F', RED: '#a52a2a', BLUE: '#3498db', + WHITE: '#f5f5f5', // whitesmoke }, INFO: { From 22bda3ab07db5993a36dfb8a64a84590c2099c24 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 1 Jul 2019 18:36:11 +1000 Subject: [PATCH 5/5] curse --- client/src/components/anims/curse.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 478311ef..c16d2980 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -52,11 +52,12 @@ class Curse extends Component { this.animations.push(anime({ targets: ['#curse'], 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, })); }