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'),