From 47c1cffc7f5c80dbeedfaa8857ede3c1ea362528 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 5 Jul 2019 18:21:44 +1000 Subject: [PATCH 1/2] strike fixes --- client/src/components/anims/reflect.jsx | 4 +- client/src/components/anims/strike.jsx | 54 +++++++++++++++---------- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx index ca6d966b..afb00f2d 100644 --- a/client/src/components/anims/reflect.jsx +++ b/client/src/components/anims/reflect.jsx @@ -4,7 +4,7 @@ const anime = require('animejs').default; const { TIMES, COLOURS } = require('../../constants'); -class Reflect extends Component { +class Refl extends Component { constructor() { super(); this.animations = []; @@ -72,4 +72,4 @@ class Reflect extends Component { } } -module.exports = Reflect; +module.exports = Refl; diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 8e3a22ea..188cc043 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -4,21 +4,18 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -const duration = TIMES.TARGET_DURATION_MS; - - function laser(dimensions, colour) { const { x, y, length } = dimensions; return ( ); } @@ -27,14 +24,14 @@ class Strike extends Component { constructor(props) { super(); this.team = props.team; - // this.colour = props.colour; + this.animations = []; this.colour = props.colour; - const coord = [0, 100, 200]; + const coord = [0, 50, 100, 150, 200]; const points = coord.map(pos => ({ - x: pos + Math.random() * 80, + x: pos + Math.random() * 40, y: 50 + Math.random() * 100, - length: 150 + Math.random() * 100, + length: 150 + Math.random() * 150, })); this.charges = points.map(pos => laser(pos, this.colour)); } @@ -42,9 +39,9 @@ class Strike extends Component { render() { return ( // {this.charges} @@ -54,7 +51,7 @@ class Strike extends Component { - + @@ -66,40 +63,55 @@ class Strike extends Component { } componentDidMount() { + this.animations.push(anime({ + targets: ['#strike'], + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 }, + ], + easing: 'easeInOutSine', + })); + if (!this.props.team) { - anime.set('.skill-anim', { + anime.set('#strike', { rotate: Math.random() * 180 + 90, }); } else { - anime.set('.skill-anim', { + anime.set('#strike', { rotate: Math.random() * 180 + 270, }); } - anime.set('.skill-anim', { + anime.set('#strike', { translateY: -200, translateX: 0, }); - anime.set('#explosion feDisplacementMap', { + anime.set('#strikeFilter feDisplacementMap', { scale: 1, }); anime({ - targets: '.skill-anim', + targets: '#strike', translateY: 0, translateX: 0, loop: false, - duration: (duration * 1 / 2), + delay: TIMES.TARGET_DELAY_MS, + duration: (TIMES.TARGET_DURATION_MS * 1 / 2), easing: 'easeInQuad', }); anime({ - targets: '#explosion feDisplacementMap', + targets: '#strikeFilter feDisplacementMap', scale: 200, loop: false, - delay: (duration * 1 / 4), - duration, + delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4), easing: 'easeInQuad', }); } + + componentWillUnmount() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + } } module.exports = Strike; From 5542efd62e26e7ae8a0db846aba4c4af079c9301 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 5 Jul 2019 18:28:00 +1000 Subject: [PATCH 2/2] fixed event --- client/src/animations.socket.jsx | 1 - client/src/events.jsx | 20 ++++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index bdf2915c..424114b1 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -57,7 +57,6 @@ function createSocket(store) { store.dispatch(actions.setGame(currentGame)); return true; }); - } const handlers = { diff --git a/client/src/events.jsx b/client/src/events.jsx index 88f1f1b6..2c6119d0 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -60,14 +60,20 @@ function registerEvents(store) { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); // Create sub events for combat animations const sequence = getCombatSequence(r); - return eachSeries(sequence, (stage, sCb) => { - const { skip } = store.getState(); - if (skip) return sCb('skip'); + return eachSeries(sequence, (stages, sCb) => { const stagedR = Object.create(r); - stagedR.stage = stage; + stagedR.sequence = sequence; + stagedR.stages = stages; + + let timeout = 0; + if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { + timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION; + } else if (stages.includes('START_SKILL')) timeout = TIMES.SOURCE_DURATION_MS; + else if (stages.includes('END_SKILL')) timeout = TIMES.TARGET_DURATION_MS; + else if (stages.includes('POST_SKILL')) timeout = TIMES.POST_SKILL_DURATION_MS; store.dispatch(actions.setResolution(stagedR)); - return setTimeout(sCb, TIMES[stage]); + return setTimeout(sCb, timeout); }, err => { if (err) console.error(err); // Finished this resolution @@ -79,9 +85,7 @@ function registerEvents(store) { // stop skipping resolutions store.dispatch(actions.setSkip(false)); // update the game - store.dispatch(actions.setGame(game)); - // get the latest state and restart polling - ws.sendGameState(currentGame.id); + store.dispatch(actions.setGame(currentGame)); return true; }); }