Refactor combat page
This commit is contained in:
Mashy
parent
c4be86b59f
commit
1785877afe
@ -11,51 +11,51 @@ const calcMargin = () => {
|
||||
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
|
||||
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);
|
||||
this.scene = scene;
|
||||
this.setScale(0.5);
|
||||
this.setInteractive();
|
||||
this.id = cryp.id;
|
||||
this.teamId = teamId;
|
||||
this.cryp = cryp;
|
||||
}
|
||||
|
||||
clickHandler() {
|
||||
const activeSkill = this.scene.registry.get('activeSkill');
|
||||
const game = this.scene.registry.get('game');
|
||||
if (activeSkill) {
|
||||
if (activeSkill.cryp.teamId !== this.teamId) {
|
||||
if (activeSkill.cryp.account !== this.cryp.account) {
|
||||
const ws = this.scene.registry.get('ws');
|
||||
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') {
|
||||
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 {
|
||||
constructor(scene, i, j, team, skill, cryp) {
|
||||
constructor(scene, row, iter, team, skill, 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,
|
||||
Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL);
|
||||
this.setInteractive();
|
||||
this.scene = scene;
|
||||
Y_PADDING / 2 + TEXT_MARGIN * (row + 2) + CRYP_MARGIN * iter, skill.skill, TEXT.NORMAL);
|
||||
this.cryp = cryp;
|
||||
this.skill = skill;
|
||||
this.checkActive();
|
||||
}
|
||||
|
||||
checkActive() {
|
||||
const activeSkill = this.scene.registry.get('activeSkill');
|
||||
this.setInteractive();
|
||||
const activeSkill = scene.registry.get('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);
|
||||
}
|
||||
}
|
||||
@ -71,45 +71,48 @@ class CrypSkill extends Phaser.GameObjects.Text {
|
||||
}
|
||||
}
|
||||
|
||||
function renderCryp(scene, group, cryp, game, team, iter) {
|
||||
const {
|
||||
CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
|
||||
} = calcMargin();
|
||||
// Add Image Avatar Class
|
||||
const avatar = team ? 'magmar' : 'alk';
|
||||
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);
|
||||
}
|
||||
|
||||
function renderSkills(scene, group, game, cryp, iter, team) {
|
||||
if (game.phase === 'Skill') {
|
||||
cryp.skills.forEach((skill, i) => {
|
||||
group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp)));
|
||||
});
|
||||
} else if (game.phase === 'Target') {
|
||||
const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
|
||||
group.add(scene.add.existing(new CrypSkill(scene, 1, iter, team, blockSkill, cryp)));
|
||||
}
|
||||
}
|
||||
|
||||
class DrawCrypTeams extends Phaser.GameObjects.Group {
|
||||
constructor(scene, game) {
|
||||
super(scene);
|
||||
const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
|
||||
const account = scene.registry.get('account');
|
||||
this.ws = scene.registry.get('ws');
|
||||
let team = 0;
|
||||
|
||||
// Cryp Avatar
|
||||
const renderCryp = (cryp, j) => {
|
||||
const avatar = team ? 'magmar' : 'alk';
|
||||
const teamId = team
|
||||
? game.teams.filter(t => t.id !== account.id)[0].id
|
||||
: game.teams.find(t => t.id === account.id).id;
|
||||
const crypSpawn = new CrypAvatar(scene, j, team, avatar, cryp, teamId);
|
||||
this.add(scene.add.existing(crypSpawn));
|
||||
// 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)));
|
||||
}
|
||||
});
|
||||
}
|
||||
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(renderCryp);
|
||||
team = 1;
|
||||
game.teams.filter(t => t.id !== account.id)[0].cryps.forEach(renderCryp);
|
||||
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 = { CrypAvatar, CrypSkill, DrawCrypTeams };
|
||||
module.exports = { CrypImage, CrypSkill, DrawCrypTeams };
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
const Phaser = require('phaser');
|
||||
const fs = require('fs');
|
||||
|
||||
const { POSITIONS, TEXT, COLOURS } = require('./constants');
|
||||
const { DrawCrypTeams, CrypAvatar, CrypSkill } = require('./combat.cryps');
|
||||
const { POSITIONS, TEXT } = require('./constants');
|
||||
const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
|
||||
|
||||
class Combat extends Phaser.Scene {
|
||||
constructor(props) {
|
||||
@ -43,12 +43,11 @@ class Combat extends Phaser.Scene {
|
||||
}, 0, this);
|
||||
|
||||
this.input.on('pointerup', (pointer, obj) => {
|
||||
const activeSkill = this.registry.get('activeSkill');
|
||||
if (obj[0] instanceof CrypAvatar || obj[0] instanceof CrypSkill) {
|
||||
if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
|
||||
obj[0].clickHandler();
|
||||
} else if (activeSkill) {
|
||||
activeSkill.clearTint();
|
||||
this.registry.set(null);
|
||||
} else if (this.registry.get('activeSkill')) {
|
||||
this.registry.get('activeSkill').clearTint();
|
||||
this.registry.set('activeSkill', null);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user