From 9ffd0f868e59871b3771076b34fa442466ca7836 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 10 Jul 2019 18:27:20 +1000 Subject: [PATCH] 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({