From bdd89971415cbd2b4592a86d2b5b3a2ef96e89b7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 5 Jan 2019 12:08:10 +1000 Subject: [PATCH] Added block animations, misc ui fixes --- client/src/scenes/combat.animations.js | 27 +++++++------------ client/src/scenes/combat.hitbox.js | 1 + client/src/scenes/combat.js | 21 ++++++++++++--- client/src/scenes/combat.log.js | 3 ++- .../src/scenes/combat.render.resolutions.js | 4 +-- client/src/scenes/combat.skills.js | 8 ++++++ client/src/scenes/constants.js | 4 +-- 7 files changed, 41 insertions(+), 27 deletions(-) diff --git a/client/src/scenes/combat.animations.js b/client/src/scenes/combat.animations.js index 422b59eb..270844f0 100644 --- a/client/src/scenes/combat.animations.js +++ b/client/src/scenes/combat.animations.js @@ -15,7 +15,7 @@ const animationParams = (isAlly) => { return { spawnLocation, speed, img, angleMin, angleMax }; }; -const randomAnimation = () => { +const randomAttack = () => { const animations = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; return animations[Math.floor(Math.random() * 5)]; }; @@ -27,25 +27,18 @@ class CombatSkills extends Phaser.GameObjects.Group { } getSkill(type, isAlly, castLocation) { - if (type === 'attack') { - this[randomAnimation()](isAlly); + const genericHeal = ['Heal', 'Triage', 'TriageTick']; + const genericBlock = ['Block', 'Parry', 'Evasion', 'Shield']; + + if (genericHeal.includes(type)) { + this.genericHeal(isAlly, castLocation); + } else if (genericBlock.includes(type)) { + this.genericBlock(isAlly); } else { - this[type](isAlly, castLocation); + this[randomAttack()](isAlly); } } - Heal(isAlly, castLocation) { - this.genericHeal(isAlly, castLocation); - } - - Triage(isAlly, castLocation) { - this.genericHeal(isAlly, castLocation); - } - - TriageTick(isAlly, castLocation) { - this.genericHeal(isAlly, castLocation); - } - genericHeal(isAlly, castLocation) { // const { sourceX, sourceY } = getCrypPosition(sourcePos, 0); const lifespan = DELAYS.ANIMATION_DURATION; @@ -88,7 +81,7 @@ class CombatSkills extends Phaser.GameObjects.Group { this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this); } - Block(isAlly) { + genericBlock(isAlly) { const lifespan = DELAYS.ANIMATION_DURATION; const colour = randomColour(); const x = isAlly ? COMBAT.width() * 0.3 : COMBAT.width() * 0.7; diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js index 7a2e9b7f..b60736bd 100644 --- a/client/src/scenes/combat.hitbox.js +++ b/client/src/scenes/combat.hitbox.js @@ -66,6 +66,7 @@ class CombatHitBox extends Phaser.Scene { const cback = () => { const { activeSkill } = skillScene; if (activeSkill) { + this.scene.get('CombatSkills').clearCrypActive(activeSkill.cryp.id); activeSkill.activate(); skillScene.activeSkill = null; this.game.events.emit('SEND_SKILL', game.id, activeSkill.cryp.id, c.id, activeSkill.skill.skill); diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index c8a00546..5a44a710 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -1,6 +1,7 @@ const Phaser = require('phaser'); const { throttle } = require('lodash'); +const { POSITIONS: { COMBAT }, TEXT } = require('./constants'); const CombatLog = require('./combat.log'); const CombatCryps = require('./combat.cryps'); const CombatSkills = require('./combat.skills'); @@ -27,9 +28,21 @@ class Combat extends Phaser.Scene { console.log('creating game'); this.registry.events.off('changedata', this.updateData); this.registry.events.on('changedata', this.updateData, this); + this.input.keyboard.on('keydown_BACKSPACE', () => { this.cleanUp(); }, 0, this); + const leaveGame = this.add + .rectangle(COMBAT.width() * 0.8, COMBAT.height() * 0.8, COMBAT.width() * 0.1, COMBAT.height() * 0.1, 0xff9215) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + this.cleanUp(); + }); + this.add + .text(leaveGame.getCenter().x, leaveGame.getCenter().y, 'Leave Game', TEXT.HEADER) + .setOrigin(0.5, 0.5); + this.registry.set('gamePhase', false); this.registry.set('inGame', true); this.registry.set('gameAnimating', false); @@ -106,10 +119,10 @@ class Combat extends Phaser.Scene { this.registry.set('menu', true); this.registry.set('game', null); - this.scene.get('CombatLog').cleanUp(); - this.scene.get('CombatCryps').cleanUp(); - this.scene.get('CombatSkills').cleanUp(); - this.scene.get('CombatHitBox').cleanUp(); + const ACTIVE_SCENES = ['CombatLog', 'CombatCryps', 'CombatSkills', 'CombatHitBox']; + ACTIVE_SCENES.forEach((sKey) => { + if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp(); + }); this.scene.remove(); return true; diff --git a/client/src/scenes/combat.log.js b/client/src/scenes/combat.log.js index 221a0854..7b353ef4 100644 --- a/client/src/scenes/combat.log.js +++ b/client/src/scenes/combat.log.js @@ -8,7 +8,8 @@ class CombatLog extends Phaser.Scene { create(game) { this.registry.events.on('changedata', this.updateData, this); - this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL); + this.cameras.main.setViewport(COMBAT.LOG.x(), COMBAT.LOG.y(), COMBAT.LOG.width(), COMBAT.LOG.height()); + this.log = this.add.text(0, 0, '', TEXT.NORMAL); this.logIndex = game.log.length; this.logData = game.log; this.log.setWordWrapWidth(COMBAT.LOG.width()); diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index 16849042..11c5fbb2 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -77,9 +77,7 @@ function animatePhase(scene, game, resolution, cb) { const isAlly = sourceSpawn.cryp.account === account.id; // animate animation - const workingSkills = ['Heal', 'Block', 'Triage', 'TriageTick']; - if (workingSkills.includes(resolution.skill)) animations.getSkill(resolution.skill, isAlly, castLocation); - else animations.getSkill('attack', isAlly); + animations.getSkill(resolution.skill, isAlly, castLocation); // Target cryp takes damage scene.time.delayedCall(ANIMATION_DURATION, () => { diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 83aa2a04..3b3622e5 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -202,12 +202,14 @@ class CombatSkills extends Phaser.Scene { TARGET_KEY_MAP.forEach(k => keyboard.removeListener(k)); CRYP_KEY_MAP.forEach(k => keyboard.on(k, () => { + this.clearCrypActive(crypId); button.activate(); this.activeSkill = null; this.game.events.emit('SEND_SKILL', gameId, crypId, alliesId, button.skill.skill); })); TARGET_KEY_MAP.forEach(k => keyboard.on(k, () => { + this.clearCrypActive(crypId); button.activate(); this.activeSkill = null; this.game.events.emit('SEND_SKILL', gameId, crypId, enemyId, button.skill.skill); @@ -283,6 +285,12 @@ class CombatSkills extends Phaser.Scene { return true; } + clearCrypActive(crypId) { + this.scene.scene.children.list.forEach((s) => { + if (s.cryp.id === crypId && s.state === 'activate') s.deselect(); + }); + } + clearKeys() { TARGET_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey)); CRYP_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey)); diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index 80beefb1..86380ab0 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -43,10 +43,10 @@ const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2); const statsTextMargin = () => 24; const statsLearnableMargin = () => 12; -const logWidth = () => combatWidth(); +const logWidth = () => combatWidth() * 0.5; const logHeight = () => combatHeight() * 0.3; const logY = () => headerHeight() + (combatHeight() * 0.7); -const logX = () => combatWidth() * 0.6; +const logX = () => combatWidth() * 0.2; module.exports = {