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); 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) { events.on('SEND_SKILL', function skillActive(gameId, crypId, targetTeamId, skill) {
const ws = registry.get('ws'); const ws = registry.get('ws');
ws.sendGameSkill(gameId, crypId, targetTeamId, skill); 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'); 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) { 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 { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
const calcMargin = () => { const CRYP_MARGIN = COMBAT.height() / 5;
const CRYP_MARGIN = COMBAT.height() / 5; const TEXT_MARGIN = COMBAT.height() / 35;
const TEXT_MARGIN = COMBAT.height() / 35; const TEAM_MARGIN = COMBAT.width() * 0.7;
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 healthBarDimensions = (team, iter) => { const healthBarDimensions = (team, iter) => {
const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin();
const healthBarX = 1.25 * TEAM_MARGIN * team; const healthBarX = 1.25 * TEAM_MARGIN * team;
const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07; const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthBarWidth = TEAM_MARGIN / 10; const healthBarWidth = TEAM_MARGIN / 10;
@ -21,41 +15,21 @@ const healthBarDimensions = (team, iter) => {
}; };
const crypAvatarText = (team, iter) => { const crypAvatarText = (team, iter) => {
const { TEAM_MARGIN, CRYP_MARGIN, TEXT_MARGIN } = calcMargin(); const nameX = 1.25 * TEAM_MARGIN * team;
const nameTextX = 1.25 * TEAM_MARGIN * team; const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const nameTextY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07; const healthX = 1.25 * TEAM_MARGIN * team;
const healthTextX = 1.25 * TEAM_MARGIN * team; const healthY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthTextY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07; const statusX = 1.25 * TEAM_MARGIN * team;
return { nameTextX, nameTextY, healthTextX, healthTextY }; 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 crypPosition = (team, iter) => {
const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team; 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 }; 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 { class HealthBar extends Phaser.GameObjects.Graphics {
constructor(scene, cryp, team, iter, crypHpText) { 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 { class CombatCryps extends Phaser.Scene {
constructor() { constructor() {
super({ key: 'CombatCryps' }); super({ key: 'CombatCryps' });
@ -107,41 +122,58 @@ class CombatCryps extends Phaser.Scene {
create(game) { create(game) {
this.cryps = this.add.group(); this.cryps = this.add.group();
this.phase = game.phase;
this.account = this.registry.get('account'); this.account = this.registry.get('account');
this.drawCryps(game); this.drawCryps(game);
this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('changedata', this.updateData, this);
this.registry.set('crypLoaded', true); this.registry.set('crypLoaded', true);
this.registry.set('crypStatusUpdate', false);
} }
updateData(parent, key, data) { updateData(parent, key, data) {
if (key === 'game') { if (key === 'game' && data) {
if (!data) return false;
const isAnimating = this.registry.get('gameAnimating'); const isAnimating = this.registry.get('gameAnimating');
if (isAnimating) return false; if (isAnimating) return false;
this.drawCryps(data); 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; return true;
} }
drawCryps(game) { drawCryps(game) {
const renderCryp = (cryp, iter, team) => { const renderCryp = (cryp, iter, team) => {
// Add Image Avatar Class // Add Image Avatar Class
const avatar = team ? 'magmar' : 'alk'; const crypObj = new CrypImage(this, team, iter, cryp);
// Add cryp hp this.add.existing(crypObj);
const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter); this.cryps.add(crypObj);
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));
return crypObj; return crypObj;
}; };
const renderTeam = (cryp, iter, team) => { const renderTeam = (cryp, iter, team) => {
const crypObj = this.cryps.children.entries const crypObj = this.cryps.children.entries
.filter(obj => obj instanceof CrypImage)
.find(c => c.cryp.id === cryp.id) .find(c => c.cryp.id === cryp.id)
|| renderCryp(cryp, iter, team); || renderCryp(cryp, iter, team);
crypObj.healthBar.hp = cryp.hp.base; 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) { if (activeTarget) {
activeTarget.activate(); activeTarget.activate();
skillScene.activeTarget = null; 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( keyboard.on(
CRYP_KEY_MAP[j], 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(); button.activate();
this.activeTarget = null; this.activeTarget = null;
}, },