diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 910d3be5..b4f09823 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -1,11 +1,12 @@ export const setAccount = value => ({ type: 'SET_ACCOUNT', value }); export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value }); -export const setAnimating = value => ({ type: 'SET_ANIMATING', value }); -export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value }); +export const setAnimating = value => ({ type: 'SET_ANIMATING', value }); +export const setAnimCb = value => ({ type: 'SET_ANIM_CB', value }); +export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value }); export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value }); export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value }); -export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value }); +export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value }); export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value }); export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null }); diff --git a/client/src/components/anims/absorb.jsx b/client/src/components/anims/absorb.jsx index 107ff911..f32f47b6 100644 --- a/client/src/components/anims/absorb.jsx +++ b/client/src/components/anims/absorb.jsx @@ -1,10 +1,18 @@ const preact = require('preact'); const { Component } = require('preact'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + // shamelessly lifted from teh anime docs // https://animejs.com/documentation/#svgAttr @@ -82,7 +90,8 @@ class Absorb extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Absorb; +module.exports = addState(Absorb); diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx index abc1b139..76d0eb81 100644 --- a/client/src/components/anims/amplify.jsx +++ b/client/src/components/anims/amplify.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Amplify extends Component { constructor() { super(); @@ -70,7 +78,8 @@ class Amplify extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Amplify; +module.exports = addState(Amplify); diff --git a/client/src/components/anims/attack.charge.jsx b/client/src/components/anims/attack.charge.jsx deleted file mode 100644 index 263d35a3..00000000 --- a/client/src/components/anims/attack.charge.jsx +++ /dev/null @@ -1,60 +0,0 @@ -const preact = require('preact'); -const { Component } = require('preact'); -const anime = require('animejs').default; - -const charge = require('../svgs/charge'); -const { TIMES } = require('../../constants'); -const { randomPoints } = require('../../utils'); - -class AttackCharge extends Component { - constructor(props) { - super(); - this.team = props.team; - this.colour = props.colour; - const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 }); - this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour)); - } - - render() { - return ( - - {this.charges} - - ); - } - - componentDidMount() { - const charges = document.querySelectorAll('#charge'); - anime.set(charges, { fill: 'none' }); - if (!this.team) { - anime.set('.skill-anim', { - rotate: 180, - }); - } else { - anime.set('.skill-anim', { - rotate: 0, - }); - } - - this.anim = anime({ - targets: charges, - fill: this.colour, - delay: anime.stagger(5, { - start: 100, - easing: 'linear', - }), - loop: false, - easing: 'easeInQuad', - }); - } - - componentWillUnmount() { - } -} - -module.exports = AttackCharge; diff --git a/client/src/components/anims/bash.circle.jsx b/client/src/components/anims/bash.circle.jsx index eb8974e3..c202e664 100644 --- a/client/src/components/anims/bash.circle.jsx +++ b/client/src/components/anims/bash.circle.jsx @@ -1,10 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); - +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Bash extends Component { constructor() { super(); @@ -93,7 +100,8 @@ class Bash extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Bash; +module.exports = addState(Bash); diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx index df6417b1..81e43d6f 100644 --- a/client/src/components/anims/bash.jsx +++ b/client/src/components/anims/bash.jsx @@ -1,10 +1,18 @@ const preact = require('preact'); const { Component } = require('preact'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Bash extends Component { constructor() { super(); @@ -95,7 +103,8 @@ class Bash extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Bash; +module.exports = addState(Bash); diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index f8c66715..73e6e237 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -1,12 +1,34 @@ const preact = require('preact'); const { Component } = require('preact'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; const times = require('lodash/times'); const { TIMES, COLOURS } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + +function projectile(x, y, radius, colour) { + return ( + + ); +} + class Blast extends Component { - constructor() { + constructor(props) { super(); this.animations = []; } @@ -71,7 +93,8 @@ class Blast extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Blast; +module.exports = addState(Blast); diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index dd0e6fe7..42f98bb6 100644 --- a/client/src/components/anims/block.jsx +++ b/client/src/components/anims/block.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Block extends Component { constructor() { super(); @@ -51,7 +59,8 @@ class Block extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Block; +module.exports = addState(Block); diff --git a/client/src/components/anims/break.jsx b/client/src/components/anims/break.jsx index 44eeede5..598d5379 100644 --- a/client/src/components/anims/break.jsx +++ b/client/src/components/anims/break.jsx @@ -1,12 +1,20 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); // logarithmic spiral lifted from // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Break extends Component { constructor() { super(); @@ -102,4 +110,4 @@ class Break extends Component { } } -module.exports = Break; +module.exports = addState(Break); diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index e1b81258..b43a3726 100644 --- a/client/src/components/anims/buff.jsx +++ b/client/src/components/anims/buff.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Buff extends Component { constructor() { super(); @@ -73,7 +81,8 @@ class Buff extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Buff; +module.exports = addState(Buff); diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 9ac68516..87e44808 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -1,11 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); -const duration = TIMES.TARGET_DURATION_MS; +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); function projectile(x, y, radius, colour) { return ( @@ -21,7 +27,7 @@ function projectile(x, y, radius, colour) { ); } -class AttackCharge extends Component { +class Chaos extends Component { constructor() { super(); this.animations = []; @@ -88,15 +94,15 @@ class AttackCharge extends Component { translateX: 0, loop: false, delay: TIMES.TARGET_DELAY_MS, - duration: (duration * 1 / 2), + duration: (TIMES.TARGET_DURATION_MS * 1 / 2), easing: 'easeInQuad', })); this.animations.push(anime({ targets: '#explosion feDisplacementMap', scale: 75, loop: false, - delay: (TIMES.TARGET_DELAY_MS + duration * 2 / 3), - duration: (duration * 1 / 3), + delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3), + duration: (TIMES.TARGET_DURATION_MS * 1 / 3), easing: 'easeInQuad', })); @@ -105,7 +111,7 @@ class AttackCharge extends Component { cx: Math.random() * 250 + 25, cy: Math.random() * 300 + 50, delay: TIMES.TARGET_DELAY_MS, - duration: (duration * 2 / 3), + duration: (TIMES.TARGET_DURATION_MS * 2 / 3), easing: 'easeInQuad', })); } @@ -114,8 +120,8 @@ class AttackCharge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } - } -module.exports = AttackCharge; +module.exports = addState(Chaos); diff --git a/client/src/components/anims/counter.jsx b/client/src/components/anims/counter.jsx index f44ba138..0815f974 100644 --- a/client/src/components/anims/counter.jsx +++ b/client/src/components/anims/counter.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Counter extends Component { constructor() { super(); @@ -77,7 +85,8 @@ class Counter extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Counter; +module.exports = addState(Counter); diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index ec043bdd..8ccfb2b7 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -1,11 +1,16 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); -const { - TIMES, - COLOURS, -} = require('../../constants'); +const { TIMES } = require('../../constants'); + +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); class Curse extends Component { constructor() { @@ -73,7 +78,8 @@ class Curse extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Curse; +module.exports = addState(Curse); diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index dfe2ae45..a71a1d7e 100644 --- a/client/src/components/anims/debuff.jsx +++ b/client/src/components/anims/debuff.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Debuff extends Component { constructor() { super(); @@ -75,7 +83,8 @@ class Debuff extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Debuff; +module.exports = addState(Debuff); diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index c7898d8a..3af2ab0c 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -2,9 +2,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; const times = require('lodash/times'); +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Decay extends Component { constructor() { super(); @@ -69,7 +77,8 @@ class Decay extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Decay; +module.exports = addState(Decay); diff --git a/client/src/components/anims/electrify.jsx b/client/src/components/anims/electrify.jsx index 5d310c63..2e9a51cc 100644 --- a/client/src/components/anims/electrify.jsx +++ b/client/src/components/anims/electrify.jsx @@ -1,11 +1,19 @@ const preact = require('preact'); const { Component } = require('preact'); const times = require('lodash/times'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Electrify extends Component { constructor() { super(); @@ -101,7 +109,8 @@ class Electrify extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Electrify; +module.exports = addState(Electrify); diff --git a/client/src/components/anims/electrocute.jsx b/client/src/components/anims/electrocute.jsx index 87a12406..f33432e9 100644 --- a/client/src/components/anims/electrocute.jsx +++ b/client/src/components/anims/electrocute.jsx @@ -1,12 +1,20 @@ const preact = require('preact'); const { Component } = require('preact'); const times = require('lodash/times') +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); -class Electrify extends Component { +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + +class Electrocute extends Component { constructor() { super(); this.animations = []; @@ -93,7 +101,8 @@ class Electrify extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Electrify; +module.exports = addState(Electrocute); diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index 3f08a983..8438d8f7 100644 --- a/client/src/components/anims/haste.jsx +++ b/client/src/components/anims/haste.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Haste extends Component { constructor() { super(); @@ -26,9 +34,7 @@ class Haste extends Component { - + @@ -77,7 +83,8 @@ class Haste extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Haste; +module.exports = addState(Haste); diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx index 4af06c00..78684aa0 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -1,10 +1,18 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); const { randomPoints } = require('../../utils'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + function projectile(x, y, radius, colour) { return ( = 0; i--) { + this.animations[i].reset(); + } + this.props.animCb(); + } } -module.exports = Heal; +module.exports = addState(Heal); diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index 86cf757c..4be435b1 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -1,10 +1,16 @@ const preact = require('preact'); const { Component } = require('preact'); - +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); // shamelessly lifted from teh anime docs // https://animejs.com/documentation/#svgAttr @@ -82,7 +88,8 @@ class Hex extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Hex; +module.exports = addState(Hex); diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx index ddcb8a9e..0b369d7b 100644 --- a/client/src/components/anims/hybrid.jsx +++ b/client/src/components/anims/hybrid.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Hybrid extends Component { constructor() { super(); @@ -139,9 +147,14 @@ class Hybrid extends Component { easing: 'easeInOutSine', loop: true, })); + } - + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + this.props.animCb(); } } -module.exports = Hybrid; +module.exports = addState(Hybrid); diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx index 5bc179a4..745f67f3 100644 --- a/client/src/components/anims/intercept.jsx +++ b/client/src/components/anims/intercept.jsx @@ -1,5 +1,6 @@ const preact = require('preact'); const { Component } = require('preact'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; @@ -8,6 +9,13 @@ const { COLOURS, } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Intercept extends Component { constructor() { super(); @@ -88,7 +96,8 @@ class Intercept extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Intercept; +module.exports = addState(Intercept); diff --git a/client/src/components/anims/link.jsx b/client/src/components/anims/link.jsx index dc9e7ec9..6f6ebf32 100644 --- a/client/src/components/anims/link.jsx +++ b/client/src/components/anims/link.jsx @@ -1,10 +1,18 @@ const preact = require('preact'); const { Component } = require('preact'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Link extends Component { constructor() { super(); @@ -83,7 +91,8 @@ class Link extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Link; +module.exports = addState(Link); diff --git a/client/src/components/anims/purge.jsx b/client/src/components/anims/purge.jsx index e0757829..da072286 100644 --- a/client/src/components/anims/purge.jsx +++ b/client/src/components/anims/purge.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Purge extends Component { constructor() { super(); @@ -73,7 +81,8 @@ class Purge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Purge; +module.exports = addState(Purge); diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx index ea2397a2..732a6180 100644 --- a/client/src/components/anims/purify.jsx +++ b/client/src/components/anims/purify.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + function projectile(x, y, radius, colour) { return ( = 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Purify; +module.exports = addState(Purify); diff --git a/client/src/components/anims/recharge.jsx b/client/src/components/anims/recharge.jsx index d37aaa56..169f884e 100644 --- a/client/src/components/anims/recharge.jsx +++ b/client/src/components/anims/recharge.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Recharge extends Component { constructor() { super(); @@ -87,7 +95,8 @@ class Recharge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Recharge; +module.exports = addState(Recharge); diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx index 2008f6d9..9961344c 100644 --- a/client/src/components/anims/red.block.jsx +++ b/client/src/components/anims/red.block.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Block extends Component { constructor() { super(); @@ -68,7 +76,8 @@ class Block extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Block; +module.exports = addState(Block); diff --git a/client/src/components/anims/red.circles.js b/client/src/components/anims/red.circles.jsx similarity index 91% rename from client/src/components/anims/red.circles.js rename to client/src/components/anims/red.circles.jsx index 7463afa3..74ff44ce 100644 --- a/client/src/components/anims/red.circles.js +++ b/client/src/components/anims/red.circles.jsx @@ -1,10 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); - const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Intercept extends Component { constructor() { super(); @@ -75,7 +82,8 @@ class Intercept extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Intercept; +module.exports = addState(Intercept); diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx index afb00f2d..8ca7215a 100644 --- a/client/src/components/anims/reflect.jsx +++ b/client/src/components/anims/reflect.jsx @@ -1,8 +1,16 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); -const { TIMES, COLOURS } = require('../../constants'); +const { TIMES } = require('../../constants'); + +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); class Refl extends Component { constructor() { @@ -69,7 +77,8 @@ class Refl extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Refl; +module.exports = addState(Refl); diff --git a/client/src/components/anims/restrict.jsx b/client/src/components/anims/restrict.jsx index 376bdd0b..42d27113 100644 --- a/client/src/components/anims/restrict.jsx +++ b/client/src/components/anims/restrict.jsx @@ -1,10 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); - const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Restrict extends Component { constructor() { super(); @@ -96,7 +103,8 @@ class Restrict extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Restrict; +module.exports = addState(Restrict); diff --git a/client/src/components/anims/ruin.jsx b/client/src/components/anims/ruin.jsx index fd365cab..2216b04f 100644 --- a/client/src/components/anims/ruin.jsx +++ b/client/src/components/anims/ruin.jsx @@ -1,11 +1,16 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); -// logarithmic spiral lifted from -// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); class Ruin extends Component { constructor() { @@ -93,8 +98,8 @@ class Ruin extends Component { componentWillUnmount() { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); - } + } this.props.animCb(); } } -module.exports = Ruin; +module.exports = addState(Ruin); diff --git a/client/src/components/anims/silence.jsx b/client/src/components/anims/silence.jsx index 11f21b99..bbd40c34 100644 --- a/client/src/components/anims/silence.jsx +++ b/client/src/components/anims/silence.jsx @@ -1,10 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); - +const { connect } = require('preact-redux'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Silence extends Component { constructor() { super(); @@ -90,7 +97,8 @@ class Silence extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Silence; +module.exports = addState(Silence); diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx index e52e527b..d8aca826 100644 --- a/client/src/components/anims/siphon.jsx +++ b/client/src/components/anims/siphon.jsx @@ -1,12 +1,20 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); const duration = TIMES.TARGET_DURATION_MS; -class AttackCharge extends Component { +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + +class Siphon extends Component { constructor() { super(); this.animations = []; @@ -61,8 +69,9 @@ class AttackCharge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = AttackCharge; +module.exports = addState(Siphon); diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index 9d881968..5614f2bb 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/client/src/components/anims/siphon.tick.jsx @@ -1,11 +1,18 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); const duration = TIMES.TARGET_DURATION_MS; +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); function projectile(x, y, radius, colour) { return ( @@ -24,7 +31,7 @@ class SiphonTick extends Component { constructor(props) { super(); this.team = props.team; - // this.colour = props.colour; + this.animations = []; this.colour = '#3498db'; const points = new Array(15).fill(0); this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F')); @@ -104,6 +111,13 @@ class SiphonTick extends Component { }); }); } + + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + this.props.animCb(); + } } -module.exports = SiphonTick; +module.exports = addState(SiphonTick); diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index eb4418b0..2713a569 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -1,12 +1,19 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); const duration = TIMES.TARGET_DURATION_MS; +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); function projectile(x, y, radius, colour) { return ( @@ -31,8 +38,8 @@ function sword(colour) { ); } -class AttackCharge extends Component { - constructor(props) { +class Slay extends Component { + constructor() { super(); this.animations = []; this.colour = '#a52a2a'; @@ -145,7 +152,8 @@ class AttackCharge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = AttackCharge; +module.exports = addState(Slay); diff --git a/client/src/components/anims/sleep.jsx b/client/src/components/anims/sleep.jsx index a7d6be6b..a9af121b 100644 --- a/client/src/components/anims/sleep.jsx +++ b/client/src/components/anims/sleep.jsx @@ -1,6 +1,7 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); const { randomPoints } = require('../../utils'); @@ -8,6 +9,13 @@ const { randomPoints } = require('../../utils'); // logarithmic spiral lifted from // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + function projectile(x, y, radius, colour) { return ( = 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Sleep; +module.exports = addState(Sleep); diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 86f61dd0..5aca4fbc 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + function laser(dimensions, colour) { const { x, y, length } = dimensions; return ( @@ -112,7 +120,8 @@ class Strike extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Strike; +module.exports = addState(Strike); diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx index e1114f1d..5a8eadce 100644 --- a/client/src/components/anims/stun.jsx +++ b/client/src/components/anims/stun.jsx @@ -1,12 +1,20 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); // logarithmic spiral lifted from // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Stun extends Component { constructor() { super(); @@ -70,7 +78,8 @@ class Stun extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Stun; +module.exports = addState(Stun); diff --git a/client/src/components/anims/sustain.jsx b/client/src/components/anims/sustain.jsx index 21e56ac9..dca163cb 100644 --- a/client/src/components/anims/sustain.jsx +++ b/client/src/components/anims/sustain.jsx @@ -1,9 +1,17 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class Sustain extends Component { constructor() { super(); @@ -119,7 +127,8 @@ class Sustain extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = Sustain; +module.exports = addState(Sustain); diff --git a/client/src/components/anims/triage.jsx b/client/src/components/anims/triage.jsx index 7aa49fc0..cf7edc15 100644 --- a/client/src/components/anims/triage.jsx +++ b/client/src/components/anims/triage.jsx @@ -1,10 +1,18 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); const { randomPoints } = require('../../utils'); +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + function projectile(x, y, radius, colour) { return ( = 0; i--) { + this.animations[i].reset(); + } + this.props.animCb(); + } } -module.exports = Triage; +module.exports = addState(Triage); diff --git a/client/src/components/anims/triage.tick.jsx b/client/src/components/anims/triage.tick.jsx index 01f3a44d..06878d18 100644 --- a/client/src/components/anims/triage.tick.jsx +++ b/client/src/components/anims/triage.tick.jsx @@ -1,6 +1,7 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const { connect } = require('preact-redux'); const { TIMES, COLOURS } = require('../../constants'); const { randomPoints } = require('../../utils'); @@ -17,6 +18,13 @@ function projectile(x, y, radius, colour) { ); } +const addState = connect( + function receiveState(state) { + const { animCb } = state; + return { animCb }; + } +); + class TriageTick extends Component { constructor(props) { super(); @@ -71,7 +79,8 @@ class TriageTick extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } + this.props.animCb(); } } -module.exports = TriageTick; +module.exports = addState(TriageTick); diff --git a/client/src/components/svgs/dagger.jsx b/client/src/components/svgs/dagger.jsx deleted file mode 100644 index 94640132..00000000 --- a/client/src/components/svgs/dagger.jsx +++ /dev/null @@ -1,43 +0,0 @@ -const preact = require('preact'); - - -//style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" -module.exports = function dagger(x, y, width, height) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/client/src/events.jsx b/client/src/events.jsx index 8870bde8..7c02a7b0 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -65,7 +65,10 @@ function registerEvents(store) { store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r))); if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource)); - if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget)); + if (sequence.includes('END_SKILL')) { + store.dispatch(actions.setAnimTarget(anims.animTarget)); + if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb)); + } if (sequence.includes('POST_SKILL')) { // timeout to prevent text classes from being added too soon setTimeout( @@ -73,15 +76,14 @@ function registerEvents(store) { timeout - TIMES.POST_SKILL_DURATION_MS ); } - return setTimeout(() => { store.dispatch(actions.setAnimSource(null)); store.dispatch(actions.setAnimTarget(null)); store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setAnimFocus([])); - // We currently need another small timeout so that everything can properly dismount / unload - // Otherwise 3 x Attack on same target will only render the first time - return setTimeout(cb, 200); + if (!sequence.includes('END_SKILL') + || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb(); + return true; }, timeout); }, err => { if (err) return console.error(err); diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 123fa806..b7521e6c 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -17,6 +17,7 @@ module.exports = { activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), animating: createReducer(false, 'SET_ANIMATING'), + animCb: createReducer(null, 'SET_ANIM_CB'), animSource: createReducer(null, 'SET_ANIM_SOURCE'), animFocus: createReducer(null, 'SET_ANIM_FOCUS'), animTarget: createReducer(null, 'SET_ANIM_TARGET'),