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

Added cryp status text for attacking and blocking

Browse Source
This commit is contained in:
Mashy 2018-12-11 15:29:22 +10:00
parent a24a64c811
commit 22dbf5f893
4 changed files with 92 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/events.js
View File

@ -31,14 +31,20 @@ function registerEvents(registry, events) {
registry.set('gameList', gameList);
}
function setCrypStatusUpdate(id, skill, target) {
registry.set('crypStatusUpdate', { id, skill, target });
}
events.on('SEND_SKILL', function skillActive(gameId, crypId, targetTeamId, skill) {
const ws = registry.get('ws');
ws.sendGameSkill(gameId, crypId, targetTeamId, skill);
setCrypStatusUpdate(crypId, skill, targetTeamId);
});
events.on('SEND_TARGET', function skillActive(gameId, crypId, skillId) {
events.on('SEND_TARGET', function skillActive(gameId, crypId, skill) {
const ws = registry.get('ws');
ws.sendGameTarget(gameId, crypId, skillId);
ws.sendGameTarget(gameId, crypId, skill.id);
setCrypStatusUpdate(crypId, skill, null);
});
events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {

132
client/src/scenes/combat.cryps.js
View File

@ -2,17 +2,11 @@ const Phaser = require('phaser');
const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
const calcMargin = () => {
const CRYP_MARGIN = COMBAT.height() / 5;
const TEXT_MARGIN = COMBAT.height() / 35;
const TEAM_MARGIN = COMBAT.width() * 0.7;
const X_PADDING = COMBAT.width() / 10;
const Y_PADDING = COMBAT.height() / 7;
return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
};
const CRYP_MARGIN = COMBAT.height() / 5;
const TEXT_MARGIN = COMBAT.height() / 35;
const TEAM_MARGIN = COMBAT.width() * 0.7;
const healthBarDimensions = (team, iter) => {
const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin();
const healthBarX = 1.25 * TEAM_MARGIN * team;
const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthBarWidth = TEAM_MARGIN / 10;
@ -21,41 +15,21 @@ const healthBarDimensions = (team, iter) => {
};
const crypAvatarText = (team, iter) => {
const { TEAM_MARGIN, CRYP_MARGIN, TEXT_MARGIN } = calcMargin();
const nameTextX = 1.25 * TEAM_MARGIN * team;
const nameTextY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthTextX = 1.25 * TEAM_MARGIN * team;
const healthTextY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
return { nameTextX, nameTextY, healthTextX, healthTextY };
const nameX = 1.25 * TEAM_MARGIN * team;
const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthX = 1.25 * TEAM_MARGIN * team;
const healthY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const statusX = 1.25 * TEAM_MARGIN * team;
const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
return { statusX, statusY, nameX, nameY, healthX, healthY };
};
const crypPosition = (team, iter) => {
const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter;
const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter;
return { crypAvatarX, crypAvatarY };
};
class CrypImage extends Phaser.GameObjects.Image {
constructor(scene, team, iter, avatar, cryp, healthBar) {
// Avatar will be a property of cryp
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
super(scene, crypAvatarX, crypAvatarY, avatar);
this.scene = scene;
this.cryp = cryp;
this.healthBar = healthBar;
this.iter = iter;
this.team = team;
}
takeDamage(damage) {
this.setTint(0xff0000);
this.healthBar.takeDamage(damage);
this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
this.clearTint();
});
}
}
class HealthBar extends Phaser.GameObjects.Graphics {
constructor(scene, cryp, team, iter, crypHpText) {
@ -100,6 +74,47 @@ class HealthBar extends Phaser.GameObjects.Graphics {
}
}
class CrypImage extends Phaser.GameObjects.Image {
constructor(scene, team, iter, cryp) {
// Get coords
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
const {
statusX, statusY, nameX, nameY, healthX, healthY,
} = crypAvatarText(team, iter);
// Cryp display
const avatar = team ? 'magmar' : 'alk';
super(scene, crypAvatarX, crypAvatarY, avatar);
this.setScale(0.5);
// Save position and cryp details
this.scene = scene;
this.iter = iter;
this.team = team;
this.cryp = cryp;
// Add cryp name
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL);
// Add cryp hp
const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL);
this.healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, healthText));
this.statusText = scene.add.text(statusX, statusY, 'grep', TEXT.NORMAL);
}
clearStatus() {
this.statusText.text = '';
}
takeDamage(damage) {
if (damage > 0) this.setTint(0xff0000);
else this.setTint(0x00bb00);
this.healthBar.takeDamage(damage);
this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
this.clearTint();
});
}
}
class CombatCryps extends Phaser.Scene {
constructor() {
super({ key: 'CombatCryps' });
@ -107,41 +122,58 @@ class CombatCryps extends Phaser.Scene {
create(game) {
this.cryps = this.add.group();
this.phase = game.phase;
this.account = this.registry.get('account');
this.drawCryps(game);
this.registry.events.on('changedata', this.updateData, this);
this.registry.set('crypLoaded', true);
this.registry.set('crypStatusUpdate', false);
}
updateData(parent, key, data) {
if (key === 'game') {
if (!data) return false;
if (key === 'game' && data) {
const isAnimating = this.registry.get('gameAnimating');
if (isAnimating) return false;
this.drawCryps(data);
}
if (key === 'gamePhase' && data) {
const shouldUpdate = data !== this.phase;
this.phase = data;
if (shouldUpdate) this.cryps.children.entries.forEach(c => c.clearStatus());
}
if (key === 'crypStatusUpdate' && data) {
const targetCryp = this.cryps.children.entries
.find(c => c.cryp.id === data.id);
if (this.phase === 'Skill') {
targetCryp.statusText.text = data.target === targetCryp.cryp.account
? `${data.skill} on ally team`
: `${data.skill} on enemy team`;
}
if (this.phase === 'Target') {
const sourceCryp = this.cryps.children.entries
.find(c => c.cryp.id === data.skill.source_cryp_id);
targetCryp.statusText.text = `${sourceCryp.cryp.name} ${data.skill.skill} ${targetCryp.cryp.name}`;
}
}
return true;
}
drawCryps(game) {
const renderCryp = (cryp, iter, team) => {
// Add Image Avatar Class
const avatar = team ? 'magmar' : 'alk';
// Add cryp hp
const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter);
this.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL);
const crypHpText = this.add.text(healthTextX, healthTextY, '', TEXT.NORMAL);
const healthBar = this.add.existing(new HealthBar(this, cryp, team, iter, crypHpText));
// Add cryp name
const crypObj = new CrypImage(this, team, iter, avatar, cryp, healthBar);
this.cryps.add(this.add.existing(crypObj)
.setScale(0.5));
const crypObj = new CrypImage(this, team, iter, cryp);
this.add.existing(crypObj);
this.cryps.add(crypObj);
return crypObj;
};
const renderTeam = (cryp, iter, team) => {
const crypObj = this.cryps.children.entries
.filter(obj => obj instanceof CrypImage)
.find(c => c.cryp.id === cryp.id)
|| renderCryp(cryp, iter, team);
crypObj.healthBar.hp = cryp.hp.base;

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

@ -105,7 +105,7 @@ class CombatHitBox extends Phaser.Scene {
if (activeTarget) {
activeTarget.activate();
skillScene.activeTarget = null;
this.game.events.emit('SEND_TARGET', game.id, c.id, activeTarget.skill.id);
this.game.events.emit('SEND_TARGET', game.id, c.id, activeTarget.skill);
}
};

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

@ -267,7 +267,7 @@ class CombatSkills extends Phaser.Scene {
keyboard.on(
CRYP_KEY_MAP[j],
() => {
this.game.events.emit('SEND_TARGET', gameId, cryp.id, button.skill.id);
this.game.events.emit('SEND_TARGET', gameId, cryp.id, button.skill);
button.activate();
this.activeTarget = null;
},