From 6f83f57bd41f63a058915c6124e226131e785120 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 10 Jul 2019 12:48:04 +1000 Subject: [PATCH 1/2] refactor --- client/src/components/animations.jsx | 69 ++++++------------------ client/src/components/game.construct.jsx | 4 +- 2 files changed, 18 insertions(+), 55 deletions(-) diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 1a715313..760b5bbe 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -1,11 +1,7 @@ const preact = require('preact'); -const anime = require('animejs').default; - -const AttackCharge = require('./anims/attack.charge'); const Amplify = require('./anims/amplify'); const Absorb = require('./anims/absorb'); -const Banish = require('./anims/banish'); const Bash = require('./anims/bash'); const Blast = require('./anims/blast'); const Block = require('./anims/block'); @@ -23,7 +19,6 @@ const Haste = require('./anims/haste'); const Heal = require('./anims/heal'); const Hybrid = require('./anims/hybrid'); const Intercept = require('./anims/intercept'); -const Invert = require('./anims/invert'); const Link = require('./anims/link'); const Purify = require('./anims/purify'); const Purge = require('./anims/purge'); @@ -45,18 +40,6 @@ const TriageTick = require('./anims/triage.tick'); const { removeTier } = require('../utils'); -const colours = { - red: '#a52a2a', - green: '#1FF01F', - blue: '#3498db', - purple: '#A25AC1', - yellow: '#d1c86a', - cyan: '#6AD1BF', - white: '#FFFFFF', -}; - -const { TIMES } = require('../constants'); - function animations(props) { const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props; if (!resolution || resolution === 'clear') return false; @@ -73,21 +56,11 @@ function animations(props) { const sourceIsPlayer = playerTeamIds.includes(construct.id); const targetIsPlayer = playerTeamIds.includes(resolution.target.id); - const skipSource = (resolution.source.id === resolution.target.id - && ['Invert', 'Banish'].includes(removeTier(event.skill))); - - if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) { + const getDirection = () => { const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer); - let y = 0; if (!sameTeam) y = targetIsPlayer ? 1 : -1; - // const y = sameTeam - // ? 0 - // : targetIsPlayer - // ? 1 - // : -1; - const i = sourceIsPlayer ? playerTeamIds.findIndex(c => c === construct.id) : otherTeamIds.findIndex(c => c === construct.id); @@ -97,33 +70,34 @@ function animations(props) { : otherTeamIds.findIndex(c => c === resolution.target.id); const x = j - i; + return { x, y }; + }; + + const skipSource = (resolution.source.id === resolution.target.id + && ['Invert', 'Banish'].includes(removeTier(event.skill))); + + // Play Source Animation + if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) { if (!avatarAnimation.source) { - setAvatarAnimation({ - source: true, - target: avatarAnimation.target, - id: resolution.id, - animTargetId: construct.id, - type: 'sourceCast', - params: { x, y }, - }); + setAvatarAnimation(true, avatarAnimation.target, resolution.id, construct.id, 'sourceCast', getDirection()); } } const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds; if (!((resolution.target.id === construct.id) || (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false; - // target animation + // Play Target animation const anim = text => { if (!text || !resolution.sequence[0].includes('END_SKILL')) return false; const skill = removeTier(text); switch (skill) { // Attack base - case 'Attack': return ; + case 'Attack': return ; case 'Blast': return ; case 'Siphon': return ; case 'SiphonTick': return ; - case 'Strike': return ; + case 'Strike': return ; case 'Chaos': return ; case 'Slay': return ; case 'Heal': return ; @@ -145,13 +119,7 @@ function animations(props) { case 'DecayTick': return ; case 'Invert': { if (!avatarAnimation.target) { - setAvatarAnimation({ - source: avatarAnimation.source, - target: true, - id: resolution.id, - animTargetId: construct.id, - type: 'invert', - }); + setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null); } break; } case 'Purge': return ; @@ -162,13 +130,7 @@ function animations(props) { case 'Stun': return ; case 'Banish': { if (!avatarAnimation.target) { - setAvatarAnimation({ - source: avatarAnimation.source, - target: true, - id: resolution.id, - animTargetId: construct.id, - type: 'banish', - }); + setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null); } break; } case 'Bash': return ; @@ -190,6 +152,7 @@ function animations(props) { default: return false; } + return false; }; const combatAnim = anim(event.skill); diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index dfb91861..c62e04c6 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -46,8 +46,8 @@ const addState = connect( }, function receiveDispatch(dispatch) { - function setAvatarAnimation(c) { - return dispatch(actions.setAvatarAnimation(c)); + function setAvatarAnimation(source, target, id, animTargetId, type, params) { + return dispatch(actions.setAvatarAnimation({ source, target, id, animTargetId, type, params })); } return { From 9ffd0f868e59871b3771076b34fa442466ca7836 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 10 Jul 2019 18:27:20 +1000 Subject: [PATCH 2/2] wip --- client/src/components/animations.jsx | 28 ++++++++++++-------------- client/src/components/anims/blast.jsx | 13 +++--------- client/src/components/anims/chaos.jsx | 18 ++++------------- client/src/components/anims/slay.jsx | 18 +++++++++++++---- client/src/components/anims/strike.jsx | 20 +++++++++++------- 5 files changed, 47 insertions(+), 50 deletions(-) diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 760b5bbe..bab9c2a6 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -53,7 +53,7 @@ function animations(props) { const otherTeam = game.players.find(t => t.id !== account.id); const otherTeamIds = otherTeam.constructs.map(c => c.id); - const sourceIsPlayer = playerTeamIds.includes(construct.id); + const sourceIsPlayer = playerTeamIds.includes(resolution.source.id); const targetIsPlayer = playerTeamIds.includes(resolution.target.id); const getDirection = () => { @@ -62,13 +62,12 @@ function animations(props) { if (!sameTeam) y = targetIsPlayer ? 1 : -1; const i = sourceIsPlayer - ? playerTeamIds.findIndex(c => c === construct.id) - : otherTeamIds.findIndex(c => c === construct.id); + ? playerTeamIds.findIndex(c => c === resolution.source.id) + : otherTeamIds.findIndex(c => c === resolution.source.id); const j = targetIsPlayer ? playerTeamIds.findIndex(c => c === resolution.target.id) : otherTeamIds.findIndex(c => c === resolution.target.id); - const x = j - i; return { x, y }; }; @@ -79,32 +78,32 @@ function animations(props) { // Play Source Animation if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) { if (!avatarAnimation.source) { - setAvatarAnimation(true, avatarAnimation.target, resolution.id, construct.id, 'sourceCast', getDirection()); + setAvatarAnimation(true, avatarAnimation.target, resolution.id, + construct.id, 'sourceCast', getDirection()); } } const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds; - if (!((resolution.target.id === construct.id) - || (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false; + if (!(resolution.target.id === construct.id) + && !(resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id))) return false; // Play Target animation const anim = text => { if (!text || !resolution.sequence[0].includes('END_SKILL')) return false; const skill = removeTier(text); - switch (skill) { // Attack base case 'Attack': return ; - case 'Blast': return ; + case 'Blast': return ; case 'Siphon': return ; case 'SiphonTick': return ; case 'Strike': return ; - case 'Chaos': return ; - case 'Slay': return ; + case 'Chaos': return ; + case 'Slay': return ; case 'Heal': return ; // Buff Base case 'Buff': return ; - case 'Amplify': return ; + case 'Amplify': return ; case 'Haste': return ; case 'Triage': return ; case 'TriageTick': return ; @@ -120,7 +119,7 @@ function animations(props) { case 'Invert': { if (!avatarAnimation.target) { setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null); - } break; + } return false; } case 'Purge': return ; case 'Silence': return ; @@ -131,7 +130,7 @@ function animations(props) { case 'Banish': { if (!avatarAnimation.target) { setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null); - } break; + } return false; } case 'Bash': return ; case 'Absorb': return ; @@ -152,7 +151,6 @@ function animations(props) { default: return false; } - return false; }; const combatAnim = anim(event.skill); diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index ce30fbae..b72e8c69 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -59,17 +59,9 @@ class AttackCharge extends Component { } componentDidMount() { - if (!this.props.team) { - anime.set('.skill-anim', { - rotate: Math.random() * 180 + 90, - }); - } else { - anime.set('.skill-anim', { - rotate: Math.random() * 180 + 270, - }); - } anime.set('.skill-anim', { - translateY: -200, + translateY: -300 * this.props.direction.y, + translateX: -200 * this.props.direction.x, opacity: 0, }); @@ -88,6 +80,7 @@ class AttackCharge extends Component { anime({ targets: '.skill-anim', translateY: 0, + translateX: 0, loop: false, delay: TIMES.TARGET_DELAY_MS, duration: (duration * 1 / 2), diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 4b1735b8..9ac68516 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -16,7 +16,6 @@ function projectile(x, y, radius, colour) { fill="url(#grad1)" stroke-width="2" stroke={colour} - id="projectile" filter="url(#explosion)" /> ); @@ -42,7 +41,7 @@ class AttackCharge extends Component { - + @@ -57,16 +56,7 @@ class AttackCharge extends Component { } componentDidMount() { - if (!this.props.team) { - anime.set('.skill-anim', { - rotate: Math.random() * 180 + 90, - }); - } else { - anime.set('.skill-anim', { - rotate: Math.random() * 180 + 270, - }); - } - const projectiles = document.querySelectorAll('#projectile'); + const projectiles = document.querySelectorAll('.skill-anim circle'); projectiles.forEach(proj => { const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db'; anime.set(proj, { @@ -75,8 +65,8 @@ class AttackCharge extends Component { }); anime.set('.skill-anim', { - translateY: -200, - translateX: 0, + translateY: -300 * this.props.direction.y, + translateX: -200 * this.props.direction.x, opacity: 0, }); anime.set('#explosion feDisplacementMap', { diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index e4916117..54a2eae5 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -17,7 +17,6 @@ function projectile(x, y, radius, colour) { fill="url(#grad1)" stroke-width="2" stroke={colour} - id="projectile" /> ); } @@ -68,7 +67,18 @@ class AttackCharge extends Component { } componentDidMount() { - if (!this.props.team) { + if (this.props.direction.y) { + anime.set('#strike', { + rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI, + }); + console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI); + } else { + anime.set('#strike', { + rotate: 90, + }); + } + +/* if (!this.props.team) { anime.set('.skill-anim', { rotate: Math.random() * 180 + 90, }); @@ -77,7 +87,7 @@ class AttackCharge extends Component { rotate: Math.random() * 180 + 270, }); } - anime.set('.skill-anim', { +*/ anime.set('.skill-anim', { translateY: -400, translateX: 0, opacity: 0, @@ -123,7 +133,7 @@ class AttackCharge extends Component { delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7), })); - const projectiles = document.querySelectorAll('#projectile'); + const projectiles = document.querySelectorAll('.skill-anim circle'); projectiles.forEach(proj => { this.animations.push(anime({ targets: proj, diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 3389f8ff..1d1d8a0c 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -44,7 +44,6 @@ class Strike extends Component { id="strike" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> - // {this.charges} @@ -62,19 +61,26 @@ class Strike extends Component { } componentDidMount() { - if (!this.props.team) { + console.log(this.props.direction); +/* if (this.props.direction.y) { anime.set('#strike', { - rotate: Math.random() * 180 + 90, + rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI, }); + console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI); } else { anime.set('#strike', { - rotate: Math.random() * 180 + 270, + rotate: 90, }); } - +*/ + let rotate = 90; + if (this.props.direction.y) { + if (!this.props.direction.x) rotate = 0; + } anime.set('#strike', { - translateY: -200, - translateX: 0, + translateY: -300 * this.props.direction.y, + translateX: -150 * this.props.direction.x, + rotate, }); this.animations.push(anime({