From 8d8a79c712b150cbd0b5ba00943638f42069cbf4 Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 19 Jul 2019 18:24:46 +1000 Subject: [PATCH] good --- client/src/actions.jsx | 1 + client/src/animations.socket.jsx | 32 ++++---- client/src/animations.test.jsx | 4 +- client/src/animations.utils.jsx | 4 +- client/src/app.jsx | 3 +- client/src/components/animations.jsx | 1 - client/src/components/anims/source.cast.jsx | 4 +- client/src/components/construct.jsx | 86 ++++++++++++++++----- client/src/components/targeting.arrows.jsx | 10 ++- client/src/constants.jsx | 5 +- client/src/events.jsx | 30 ++++--- client/src/reducers.jsx | 1 + 12 files changed, 114 insertions(+), 67 deletions(-) diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 556b6643..8b23cfa1 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -1,5 +1,6 @@ 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 setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value }); export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value }); export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value }); diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index 215c71ba..231a54b6 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -24,7 +24,11 @@ function createSocket(store) { } function onDevResolutions(newRes) { - const { game: currentGame, account } = store.getState(); + const { game, account, animating } = store.getState(); + + if (animating) return false; + store.dispatch(actions.setAnimating(true)); + return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); @@ -32,28 +36,26 @@ function createSocket(store) { // todo make serersideonly const sequence = animations.getSequence(r); const timeout = animations.getTime(sequence); - const anims = animations.getObjects(r, sequence, currentGame, account); - - console.log(sequence, timeout, anims); + const anims = animations.getObjects(r, sequence, game, account); store.dispatch(actions.setAnimSource(anims.animSource)); store.dispatch(actions.setAnimTarget(anims.animTarget)); - return setTimeout(cb, timeout); - // return setTimeout(sCb, timeout); - // }, err => { - // if (err) console.error(err); - // // Clear the anim classes - // store.dispatch(actions.setResolution(null)); - // // store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false })); - // // Finished this resolution small delay for reset - // return setTimeout(cb, 5); - // }); + return setTimeout(() => { + store.dispatch(actions.setAnimSource(null)); + store.dispatch(actions.setAnimTarget(null)); + return setTimeout(cb, 50); + }, 3000); }, err => { if (err) return console.error(err); store.dispatch(actions.setAnimSource(null)); store.dispatch(actions.setAnimTarget(null)); - store.dispatch(actions.setGame(currentGame)); + store.dispatch(actions.setAnimating(false)); + + // stop skipping resolutions + store.dispatch(actions.setSkip(false)); + + // ws.sendGameState(currentGame.id); return true; }); } diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx index 203e3976..3704c4f6 100644 --- a/client/src/animations.test.jsx +++ b/client/src/animations.test.jsx @@ -20,10 +20,10 @@ const testAccount = { // Redux Store const store = createStore( - combineReducers(reducers) + combineReducers(reducers), + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), ); -store.subscribe(() => console.log(store.getState())); store.dispatch(actions.setAccount(testAccount)); store.dispatch(actions.setGame(testGame)); diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx index 06eb8225..49fe19ee 100644 --- a/client/src/animations.utils.jsx +++ b/client/src/animations.utils.jsx @@ -68,8 +68,8 @@ function getObjects(resolution, stages, game, account) { } function getSequence(resolution) { - if (!resolution.event) return false; - if (resolution.event[0] === 'Inversion') return false; + if (!resolution.event) return []; + if (resolution.event[0] === 'Inversion') return []; if (['Skill', 'AoeSkill'].includes(resolution.event[0])) return ['START_SKILL', 'END_SKILL']; if (resolution.event[0] === 'Ko') return ['POST_SKILL']; diff --git a/client/src/app.jsx b/client/src/app.jsx index 20586dc7..2e64724f 100644 --- a/client/src/app.jsx +++ b/client/src/app.jsx @@ -15,7 +15,8 @@ const Mnml = require('./components/mnml'); // Redux Store const store = createStore( - combineReducers(reducers) + combineReducers(reducers), + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), ); document.fonts.load('16pt "Jura"').then(() => { diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 7768812f..7e0ad94a 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -123,7 +123,6 @@ class ConstructAnimation extends Component { }; const anim = chooseAnim(skill); - console.log(anim); if (!anim) return false; return ( diff --git a/client/src/components/anims/source.cast.jsx b/client/src/components/anims/source.cast.jsx index deb96df1..25cb8ae8 100644 --- a/client/src/components/anims/source.cast.jsx +++ b/client/src/components/anims/source.cast.jsx @@ -6,8 +6,8 @@ function sourceCast(id, direction) { const { x, y } = direction; return anime({ targets: [document.getElementById(id)], - translateX: x * 200, - translateY: y * 200, + translateX: [0, x * 200], + translateY: [0, y * 200], easing: 'easeInOutElastic', direction: 'alternate', duration: TIMES.SOURCE_DURATION_MS, diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index 378e735d..7cd8899d 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -2,7 +2,7 @@ const preact = require('preact'); const { Component } = require('preact'); const { connect } = require('preact-redux'); -const { match } = require('./../utils'); +// const { match } = require('./../utils'); const banish = require('./anims/banish'); const idleAnimation = require('./anims/idle'); @@ -37,16 +37,15 @@ class ConstructAvatar extends Component { } componentDidMount() { - console.log(this.props.construct.name, 'mounted'); - this.idle = idleAnimation(this.props.construct.id); - this.animations.push(this.idle); - } - - componentDidUpdate(newProps) { - const { animSource, animTarget, construct } = newProps; + const { animSource, animTarget, construct } = this.props; // back to idle - if (!animTarget || !animSource) { + if (!animTarget && !animSource) { + if (!this.idle) { + this.idle = idleAnimation(this.props.construct.id); + this.animations.push(this.idle); + } + return this.idle.play(); } @@ -54,7 +53,7 @@ class ConstructAvatar extends Component { const selectAnim = () => { if (isSource) { - console.log(construct.name, 'source anim'); + console.warn(construct.name, animSource); return sourceCast(animSource.constructId, animSource.direction); } @@ -66,13 +65,41 @@ class ConstructAvatar extends Component { }; const anim = selectAnim(); - if (anim) { - this.idle.pause(); - this.animations.push(anim); - return true; + if (!anim) return false; + + this.idle.pause(); + this.animations.push(anim); + return true; + } + + componentDidUpdate(prevProps) { + const { animSource, animTarget, construct } = this.props; + + // back to idle + if (!animTarget && !animSource) { + return this.idle.play(); } - return false; + const isSource = animSource && animSource.constructId === construct.id; + + const selectAnim = () => { + if (isSource) { + return sourceCast(animSource.constructId, animSource.direction); + } + + switch (animTarget.skill) { + case 'banish': return banish(construct.id); + case 'invert': return invert(construct.id); + default: return null; + } + }; + + const anim = selectAnim(); + if (!anim) return false; + + this.idle.pause(); + this.animations.push(anim); + return true; } resetAnimations() { @@ -85,14 +112,31 @@ class ConstructAvatar extends Component { this.resetAnimations(); } - shouldComponentUpdate({ animTarget, animSource, construct }) { - const updated = (animTarget !== this.props.animTarget) || (animSource !== this.props.animSource); - if (!updated) return false; + shouldComponentUpdate({ animSource, construct }) { + if (animSource === this.props.animSource) { + // console.warn(construct.name, 'thinks its same props') + return false; + } - const isSource = animSource && animSource.constructId === construct.id; - const isTarget = animTarget && animTarget.constructId === construct.id; + // something has changed + // what do? - return isSource || isTarget; + // this is the source + if (animSource && animSource.constructId === construct.id) { + // console.warn(construct.name, 'should update') + return true; + } + + // this is the target + // if (animTarget && animTarget.constructId === construct.id) return true; + + // we were previously doing src anim + const prevSrc = this.props.animSource && this.props.animSource.constructId === construct.id; + if (prevSrc && !animSource) return true; + + // console.warn(construct.name, 'not updating'); + + return false; } } diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index 83041e46..d5bdd9eb 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -6,8 +6,8 @@ const { connect } = require('preact-redux'); const throttle = require('lodash/throttle'); const addState = connect( - ({ game, account, animSource, animTarget }) => - ({ game, account, animSource, animTarget }) + ({ game, account, animTarget, animating }) => + ({ game, account, animTarget, animating }) ); class TargetSvg extends Component { @@ -24,12 +24,14 @@ class TargetSvg extends Component { } render(props, state) { - const { game, account, animSource, animTarget } = props; + const { game, account, animating, animTarget } = props; const { width, height } = state; // resolutions happening // just put skill name up - if (animSource || animTarget) { + if (animating) { + if (!animTarget) return false; + return ( { @@ -57,30 +61,23 @@ function registerEvents(store) { const timeout = animations.getTime(sequence); const anims = animations.getObjects(r, sequence, game, account); - console.log(sequence, timeout, anims); - store.dispatch(actions.setAnimSource(anims.animSource)); store.dispatch(actions.setAnimTarget(anims.animTarget)); - return setTimeout(cb, timeout); - // return setTimeout(sCb, timeout); - // }, err => { - // if (err) console.error(err); - // // Clear the anim classes - // store.dispatch(actions.setResolution(null)); - // // store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false })); - // // Finished this resolution small delay for reset - // return setTimeout(cb, 5); - // }); + return setTimeout(() => { + store.dispatch(actions.setAnimSource(null)); + store.dispatch(actions.setAnimTarget(null)); + return setTimeout(cb, 50); + }, 3000); }, err => { if (err) return console.error(err); store.dispatch(actions.setAnimSource(null)); store.dispatch(actions.setAnimTarget(null)); + store.dispatch(actions.setAnimating(false)); + // 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); return true; }); @@ -88,7 +85,6 @@ function registerEvents(store) { } return store.dispatch(actions.setGame(game)); - return console.log('EVENT ->', 'game', game); } function setAccount(account) { diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index defd5e63..9a36cccf 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -15,6 +15,7 @@ module.exports = { activeConstruct: createReducer(null, 'SET_ACTIVE_CONSTRUCT'), activeItem: createReducer(null, 'SET_ACTIVE_VAR'), activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), + animating: createReducer(false, 'SET_ANIMATING'), animSource: createReducer(null, 'SET_ANIM_SOURCE'), animTarget: createReducer(null, 'SET_ANIM_TARGET'), combiner: createReducer([null, null, null], 'SET_COMBINER'),