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

Refactor combat page

Browse Source
This commit is contained in:
Mashy 2018-11-23 15:07:22 +10:00
parent c4be86b59f
commit 1785877afe
2 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,51 +11,51 @@ const calcMargin = () => {
return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING }; return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
}; };
class CrypAvatar extends Phaser.GameObjects.Image {
constructor(scene, j, team, avatar, cryp, teamId) { class CrypImage extends Phaser.GameObjects.Image {
constructor(scene, j, team, avatar, cryp) {
// Avatar will be a property of cryp // Avatar will be a property of cryp
const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); const {
CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
} = calcMargin();
super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar); super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar);
this.scene = scene; this.scene = scene;
this.setScale(0.5); this.cryp = cryp;
this.setInteractive();
this.id = cryp.id;
this.teamId = teamId;
} }
clickHandler() { clickHandler() {
const activeSkill = this.scene.registry.get('activeSkill'); const activeSkill = this.scene.registry.get('activeSkill');
const game = this.scene.registry.get('game'); const game = this.scene.registry.get('game');
if (activeSkill) { if (activeSkill) {
if (activeSkill.cryp.teamId !== this.teamId) { if (activeSkill.cryp.account !== this.cryp.account) {
const ws = this.scene.registry.get('ws'); const ws = this.scene.registry.get('ws');
if (game.phase === 'Skill') { if (game.phase === 'Skill') {
ws.sendGameSkill(game.id, activeSkill.cryp.id, this.teamId, activeSkill.skill.skill); ws.sendGameSkill(game.id, activeSkill.cryp.id, this.cryp.account, activeSkill.skill.skill);
} else if (game.phase === 'Target') { } else if (game.phase === 'Target') {
ws.sendGameTarget(game.id, this.id, activeSkill.skill.id); ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id);
} }
} else {
activeSkill.clearTint();
this.scene.registry.set('activeSkill', null);
} }
} }
} }
} }
class CrypSkill extends Phaser.GameObjects.Text { class CrypSkill extends Phaser.GameObjects.Text {
constructor(scene, i, j, team, skill, cryp) { constructor(scene, row, iter, team, skill, cryp) {
// Avatar will be a property of cryp // Avatar will be a property of cryp
const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); const {
CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
} = calcMargin();
super(scene, X_PADDING * 2 + TEAM_MARGIN * team, super(scene, X_PADDING * 2 + TEAM_MARGIN * team,
Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL); Y_PADDING / 2 + TEXT_MARGIN * (row + 2) + CRYP_MARGIN * iter, skill.skill, TEXT.NORMAL);
this.setInteractive();
this.scene = scene;
this.cryp = cryp; this.cryp = cryp;
this.skill = skill; this.skill = skill;
this.checkActive(); this.setInteractive();
} const activeSkill = scene.registry.get('activeSkill');
checkActive() {
const activeSkill = this.scene.registry.get('activeSkill');
if (activeSkill) { if (activeSkill) {
if (activeSkill.skill === this.skill && activeSkill.cryp.id === this.cryp.id) { if (activeSkill.skill === skill && activeSkill.cryp.id === cryp.id) {
this.setTint(COLOURS.BLUE); this.setTint(COLOURS.BLUE);
} }
} }
@ -71,45 +71,48 @@ class CrypSkill extends Phaser.GameObjects.Text {
} }
} }
class DrawCrypTeams extends Phaser.GameObjects.Group { function renderCryp(scene, group, cryp, game, team, iter) {
constructor(scene, game) { const {
super(scene); CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); } = calcMargin();
const account = scene.registry.get('account'); // Add Image Avatar Class
this.ws = scene.registry.get('ws'); const avatar = team ? 'magmar' : 'alk';
let team = 0; const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp))
.setScale(0.5)
.setInteractive();
group.add(crypSpawn);
// Add cryp hp
const crypHp = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * iter,
`${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL);
group.add(crypHp);
// Add cryp name
const crypName = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER);
group.add(crypName);
}
// Cryp Avatar function renderSkills(scene, group, game, cryp, iter, team) {
const renderCryp = (cryp, j) => { if (game.phase === 'Skill') {
const avatar = team ? 'magmar' : 'alk'; cryp.skills.forEach((skill, i) => {
const teamId = team group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp)));
? game.teams.filter(t => t.id !== account.id)[0].id });
: game.teams.find(t => t.id === account.id).id; } else if (game.phase === 'Target') {
const crypSpawn = new CrypAvatar(scene, j, team, avatar, cryp, teamId); const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
this.add(scene.add.existing(crypSpawn)); group.add(scene.add.existing(new CrypSkill(scene, 1, iter, team, blockSkill, cryp)));
// Cryp HP and Name
const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`;
this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
Y_PADDING / 2 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL));
this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER));
// Cryp Skills
if (game.phase === 'Skill') {
cryp.skills.forEach((skill, i) => {
this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill, crypSpawn)));
});
} else if (game.phase === 'Target') {
game.stack.forEach((skill) => {
if (skill.source_cryp_id === cryp.id) {
this.add(scene.add.existing(new CrypSkill(scene, 1, j, team, skill, crypSpawn)));
}
});
}
};
game.teams.find(t => t.id === account.id).cryps.forEach(renderCryp);
team = 1;
game.teams.filter(t => t.id !== account.id)[0].cryps.forEach(renderCryp);
} }
} }
module.exports = { CrypAvatar, CrypSkill, DrawCrypTeams }; class DrawCrypTeams extends Phaser.GameObjects.Group {
constructor(scene, game) {
super(scene);
const account = scene.registry.get('account');
const renderTeam = (cryp, iter, team) => {
renderCryp(scene, this, cryp, game, team, iter);
renderSkills(scene, this, game, cryp, iter, team);
};
game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
}
}
module.exports = { CrypImage, CrypSkill, DrawCrypTeams };

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

@ -1,8 +1,8 @@
const Phaser = require('phaser'); const Phaser = require('phaser');
const fs = require('fs'); const fs = require('fs');
const { POSITIONS, TEXT, COLOURS } = require('./constants'); const { POSITIONS, TEXT } = require('./constants');
const { DrawCrypTeams, CrypAvatar, CrypSkill } = require('./combat.cryps'); const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
class Combat extends Phaser.Scene { class Combat extends Phaser.Scene {
constructor(props) { constructor(props) {
@ -43,12 +43,11 @@ class Combat extends Phaser.Scene {
}, 0, this); }, 0, this);
this.input.on('pointerup', (pointer, obj) => { this.input.on('pointerup', (pointer, obj) => {
const activeSkill = this.registry.get('activeSkill'); if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
if (obj[0] instanceof CrypAvatar || obj[0] instanceof CrypSkill) {
obj[0].clickHandler(); obj[0].clickHandler();
} else if (activeSkill) { } else if (this.registry.get('activeSkill')) {
activeSkill.clearTint(); this.registry.get('activeSkill').clearTint();
this.registry.set(null); this.registry.set('activeSkill', null);
} }
}); });