From 51a1b734f3a2d12298a95e943c6966d066421452 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 7 Jul 2019 16:26:44 +1000 Subject: [PATCH 1/5] aoe test fix monkaS --- server/src/game.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/game.rs b/server/src/game.rs index 428f819c..3a5e3835 100644 --- a/server/src/game.rs +++ b/server/src/game.rs @@ -1259,7 +1259,7 @@ mod tests { assert!(*duration == 1); true }, - Event::Skill { skill: _ } => false, + Event::AoeSkill { skill: _ } => false, _ => panic!("ruin result not effect {:?}", event), } false => false, From 41eb476c31e9ba6b008822a766e2aa11ab741df7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 8 Jul 2019 13:46:43 +1000 Subject: [PATCH 2/5] wip fixed source cast --- client/src/actions.jsx | 35 ++++++++++++------------ client/src/app.jsx | 2 +- client/src/components/animations.jsx | 25 +++++++++-------- client/src/components/anims/strike.jsx | 30 ++++++++++---------- client/src/components/construct.jsx | 15 +++++++++- client/src/components/game.construct.jsx | 23 +++++++++++++--- client/src/events.jsx | 3 ++ client/src/reducers.jsx | 1 + 8 files changed, 84 insertions(+), 50 deletions(-) diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 58a30438..f6c0c2ee 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -1,26 +1,27 @@ export const setAccount = value => ({ type: 'SET_ACCOUNT', value }); -export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value }); -export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value }); -export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value }); -export const setSkip = value => ({ type: 'SET_SKIP', value }); -export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value }); -export const setInstances = value => ({ type: 'SET_INSTANCES', value }); -export const setNav = value => ({ type: 'SET_NAV', value }); -export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value }); -export const setInstance = value => ({ type: 'SET_INSTANCE', value }); -export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value }); -export const setPing = value => ({ type: 'SET_PING', value }); -export const setPlayer = value => ({ type: 'SET_PLAYER', value }); -export const setGame = value => ({ type: 'SET_GAME', value }); -export const setResolution = value => ({ type: 'SET_RESOLUTION', value }); -export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value }); -export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) }); -export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) }); export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null }); export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value }); export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value }); +export const setAvatarAnimation = value => ({ type: 'SET_AVATAR_ANIMATION', value }); +export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) }); +export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value }); +export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value }); +export const setGame = value => ({ type: 'SET_GAME', value }); export const setInfo = value => ({ type: 'SET_INFO', value }); +export const setInstance = value => ({ type: 'SET_INSTANCE', value }); +export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value }); +export const setInstances = value => ({ type: 'SET_INSTANCES', value }); export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value }); +export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value }); export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value }); +export const setNav = value => ({ type: 'SET_NAV', value }); +export const setPing = value => ({ type: 'SET_PING', value }); +export const setPlayer = value => ({ type: 'SET_PLAYER', value }); export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value }); +export const setResolution = value => ({ type: 'SET_RESOLUTION', value }); +export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value }); +export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value }); +export const setSkip = value => ({ type: 'SET_SKIP', value }); +export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) }); +export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value }); export const setWs = value => ({ type: 'SET_WS', value }); diff --git a/client/src/app.jsx b/client/src/app.jsx index 9245495b..20586dc7 100644 --- a/client/src/app.jsx +++ b/client/src/app.jsx @@ -20,7 +20,7 @@ const store = createStore( document.fonts.load('16pt "Jura"').then(() => { const events = registerEvents(store); - store.subscribe(() => console.log(store.getState())); + // store.subscribe(() => console.log(store.getState())); setupKeys(store); const ws = createSocket(events); diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 86f93010..b13fb8b0 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -58,7 +58,7 @@ const colours = { const { TIMES } = require('../constants'); function animations(props) { - const { game, account, resolution, player, construct } = props; + const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props; if (!resolution) return false; const [, event] = resolution.event; if (!event || !event.skill) return false; @@ -90,15 +90,18 @@ function animations(props) { : otherTeamIds.findIndex(c => c === resolution.target.id); const x = j - i; - anime({ - targets: [document.getElementById(construct.id)], - translateY: y * 200, - translateX: x * 200, - easing: 'easeInOutElastic', - direction: 'alternate', - duration: TIMES.SOURCE_DURATION_MS, - - }); + if (avatarAnimation !== resolution.id) { + console.log(avatarAnimation); + setAvatarAnimation(resolution.id); + anime({ + targets: [document.getElementById(construct.id)], + translateY: y * 200, + translateX: x * 200, + easing: 'easeInOutElastic', + direction: 'alternate', + duration: TIMES.SOURCE_DURATION_MS, + }); + } } const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds; if (!((resolution.target.id === construct.id) @@ -116,7 +119,7 @@ function animations(props) { case 'Blast': return ; case 'Siphon': return ; case 'SiphonTick': return ; - case 'Strike': return ; + case 'Strike': return ; case 'Chaos': return ; case 'Slay': return ; case 'Heal': return ; diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 188cc043..61623e76 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -63,15 +63,6 @@ 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('#strike', { rotate: Math.random() * 180 + 90, @@ -81,15 +72,22 @@ class Strike extends Component { rotate: Math.random() * 180 + 270, }); } + anime.set('#strike', { translateY: -200, translateX: 0, }); - anime.set('#strikeFilter feDisplacementMap', { - scale: 1, - }); - anime({ + 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', + })); + + this.animations.push(anime({ targets: '#strike', translateY: 0, translateX: 0, @@ -97,14 +95,14 @@ class Strike extends Component { delay: TIMES.TARGET_DELAY_MS, duration: (TIMES.TARGET_DURATION_MS * 1 / 2), easing: 'easeInQuad', - }); - anime({ + })); + this.animations.push(anime({ targets: '#strikeFilter feDisplacementMap', scale: 200, loop: false, delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4), easing: 'easeInQuad', - }); + })); } componentWillUnmount() { diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index 410c04d2..2a16c0ae 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -1,5 +1,6 @@ const preact = require('preact'); const { Component } = require('preact'); +const { connect } = require('preact-redux'); const anime = require('animejs').default; @@ -38,6 +39,13 @@ function clearAnimation(id) { animations[id] = false; } +const addState = connect( + function receiveState(state) { + const { avatarAnimation } = state; + return { avatarAnimation }; + } +); + class ConstructAvatar extends Component { render() { return ( @@ -53,6 +61,11 @@ class ConstructAvatar extends Component { animateConstruct(this.props.id); } + componentWillReceiveProps(nextProps) { + // console.log(this.props); + // console.log(nextProps); + } + componentWillUnmount() { clearAnimation(this.props.id); } @@ -81,6 +94,6 @@ class ConstructImg extends Component { } module.exports = { - ConstructAvatar, + ConstructAvatar: addState(ConstructAvatar), ConstructImg, }; diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index e89cc7d0..dfb91861 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -10,6 +10,9 @@ const shapes = require('./shapes'); const SkillBtn = require('./skill.btn'); + +const actions = require('../actions'); + const addState = connect( function receiveState(state) { const { @@ -18,6 +21,7 @@ const addState = connect( account, resolution, activeSkill, + avatarAnimation, } = state; function selectSkillTarget(targetConstructId) { @@ -31,15 +35,26 @@ const addState = connect( if (activeSkill && activeSkill.skill.self_targeting) { ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill); } - return { game, account, resolution, activeSkill, + avatarAnimation, selectSkillTarget, }; + }, + + function receiveDispatch(dispatch) { + function setAvatarAnimation(c) { + return dispatch(actions.setAvatarAnimation(c)); + } + + return { + setAvatarAnimation, + }; } + ); @@ -52,7 +67,8 @@ function GameConstruct(props) { player, resolution, activeSkill, - setActiveConstruct, + avatarAnimation, + setAvatarAnimation, selectSkillTarget, } = props; @@ -77,8 +93,7 @@ function GameConstruct(props) { const effects = construct.effects.length ? construct.effects.map(c =>
{c.effect} - {c.duration}T
) :
 
; - - const combatAnim = animations({ game, account, resolution, player, construct }); + const combatAnim = animations({ game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation }); const combatText = getCombatText(resolution, construct); return (
{ if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); // Create sub events for combat animations const sequence = getCombatSequence(r); + id += 1; return eachSeries(sequence, (stages, sCb) => { const stagedR = Object.create(r); stagedR.sequence = sequence; stagedR.stages = stages; + stagedR.id = id; let timeout = 0; if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 2498963b..f2cc8cae 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'), + avatarAnimation: createReducer(null, 'SET_AVATAR_ANIMATION'), combiner: createReducer([null, null, null], 'SET_COMBINER'), constructs: createReducer([], 'SET_CONSTRUCTS'), constructDeleteId: createReducer(null, 'SET_CONSTRUCT_DELETE_ID'), From 2acb4d276f1307e702b70f7d31b239a253f9adf9 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 8 Jul 2019 15:29:45 +1000 Subject: [PATCH 3/5] clear dom anim classes with small delay between resolutions --- client/src/components/animations.jsx | 2 +- client/src/components/anims/strike.jsx | 1 - client/src/components/targeting.arrows.jsx | 32 +++++++++++++--------- client/src/events.jsx | 7 +++-- client/src/utils.jsx | 4 +-- 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index b13fb8b0..a7cb291e 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -59,7 +59,7 @@ const { TIMES } = require('../constants'); function animations(props) { const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props; - if (!resolution) return false; + if (!resolution || resolution === 'clear') return false; const [, event] = resolution.event; if (!event || !event.skill) return false; if (!resolution.target) return false; diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 61623e76..3389f8ff 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -55,7 +55,6 @@ class Strike extends Component { - {this.charges} diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index eabbd530..33a49f92 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -81,23 +81,29 @@ class TargetSvg extends Component { return ; } - - const arrows = resolution - ? null - : outgoing.map(getPath); + if (resolution === 'clear') return false; + if (!resolution) { + return ( + + {outgoing.map(getPath)} + + ); + } let skill = ''; - if (resolution) { - if (resolution.event[1]) ([, { skill }] = resolution.event); - } - const resolutionText = resolution - ? {skill} - : null; - + if (resolution.event[1]) ([, { skill }] = resolution.event); return ( - {arrows} - {resolutionText} + + {skill} + ); } diff --git a/client/src/events.jsx b/client/src/events.jsx index 930fb44f..45b897d7 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -71,7 +71,6 @@ function registerEvents(store) { stagedR.sequence = sequence; stagedR.stages = stages; stagedR.id = id; - let timeout = 0; if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION; @@ -83,8 +82,10 @@ function registerEvents(store) { return setTimeout(sCb, timeout); }, err => { if (err) console.error(err); - // Finished this resolution - return cb(); + // Clear the anim classes + store.dispatch(actions.setResolution('clear')); + // Finished this resolution small delay for reset + return setTimeout(cb, 5); }); }, err => { if (err) return console.error(err); diff --git a/client/src/utils.jsx b/client/src/utils.jsx index c610f0dd..da74c26d 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -74,7 +74,7 @@ const STATS = { }; function eventClasses(game, account, resolution, construct) { - if (!resolution) return ''; + if (!resolution || resolution === 'clear') return ''; const postSkill = resolution.stages.includes('POST_SKILL'); const source = construct.id === resolution.source.id; const target = construct.id === resolution.target.id; @@ -176,7 +176,7 @@ function getCombatSequence(resolution) { } function getCombatText(resolution, construct) { - if (!resolution) return false; + if (!resolution || resolution === 'clear') return false; if (!resolution.stages.includes('POST_SKILL')) return false; if (construct.id !== resolution.target.id) return false; From 538e0a9c31b51914b2221b57e42a8694e2a5fd57 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 8 Jul 2019 20:43:31 +1000 Subject: [PATCH 4/5] wip set avatar animation in construct class --- client/src/components/animations.jsx | 13 ++----------- client/src/components/construct.jsx | 20 +++++++++++++++++++- client/src/events.jsx | 1 + client/src/reducers.jsx | 2 +- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index a7cb291e..564070fc 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -90,17 +90,8 @@ function animations(props) { : otherTeamIds.findIndex(c => c === resolution.target.id); const x = j - i; - if (avatarAnimation !== resolution.id) { - console.log(avatarAnimation); - setAvatarAnimation(resolution.id); - anime({ - targets: [document.getElementById(construct.id)], - translateY: y * 200, - translateX: x * 200, - easing: 'easeInOutElastic', - direction: 'alternate', - duration: TIMES.SOURCE_DURATION_MS, - }); + if (avatarAnimation.id !== resolution.id) { + setAvatarAnimation({ id: resolution.id, animTargetId: construct.id, x, y }); } } const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds; diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index 2a16c0ae..030c7583 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -1,9 +1,10 @@ const preact = require('preact'); const { Component } = require('preact'); const { connect } = require('preact-redux'); - const anime = require('animejs').default; +const { TIMES } = require('../constants'); + const genAvatar = name => { let hash = 0; if (name.length === 0) return hash; @@ -47,6 +48,12 @@ const addState = connect( ); class ConstructAvatar extends Component { + constructor() { + super(); + this.animId = 0; + this.animations = []; + } + render() { return (
{ if (err) return console.error(err); + store.dispatch(actions.setAvatarAnimation({ id: -1 })); store.dispatch(actions.setResolution(null)); // stop skipping resolutions store.dispatch(actions.setSkip(false)); diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index f2cc8cae..abd7ad03 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -15,7 +15,7 @@ module.exports = { activeConstruct: createReducer(null, 'SET_ACTIVE_CONSTRUCT'), activeItem: createReducer(null, 'SET_ACTIVE_VAR'), activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), - avatarAnimation: createReducer(null, 'SET_AVATAR_ANIMATION'), + avatarAnimation: createReducer({ id: -1 }, 'SET_AVATAR_ANIMATION'), combiner: createReducer([null, null, null], 'SET_COMBINER'), constructs: createReducer([], 'SET_CONSTRUCTS'), constructDeleteId: createReducer(null, 'SET_CONSTRUCT_DELETE_ID'), From 089ff4e27479dc8305f9cd67ce85b7bf4503c3f3 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 8 Jul 2019 20:58:27 +1000 Subject: [PATCH 5/5] smooth as butter --- client/src/components/construct.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index 030c7583..b70f0161 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -65,13 +65,14 @@ class ConstructAvatar extends Component { } componentDidMount() { - animateConstruct(this.props.id); + this.idle = animateConstruct(this.props.id); } componentWillReceiveProps(nextProps) { if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.id) { this.animId = nextProps.avatarAnimation.id; - anime({ + this.idle.pause(); + const anim = anime({ targets: [document.getElementById(this.props.id)], translateY: nextProps.avatarAnimation.y * 200, translateX: nextProps.avatarAnimation.x * 200, @@ -79,6 +80,7 @@ class ConstructAvatar extends Component { direction: 'alternate', duration: TIMES.SOURCE_DURATION_MS, }); + anim.finished.then(this.idle.play); } // console.log(this.props); // console.log(nextProps);