ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added block animations, misc ui fixes

Browse Source
This commit is contained in:
Mashy 2019-01-05 12:08:10 +10:00
parent 2ae764a3a3
commit bdd8997141
7 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/scenes/combat.animations.js
View File

@ -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;

1
client/src/scenes/combat.hitbox.js
View File

@ -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);

21
client/src/scenes/combat.js
View File

@ -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;

3
client/src/scenes/combat.log.js
View File

@ -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());

4
client/src/scenes/combat.render.resolutions.js
View File

@ -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, () => {

8
client/src/scenes/combat.skills.js
View File

@ -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));

4
client/src/scenes/constants.js
View File

@ -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 = {