293 lines
10 KiB
JavaScript
293 lines
10 KiB
JavaScript
const Phaser = require('phaser');
|
|
const genAvatar = require('./avatar');
|
|
|
|
const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
|
|
|
|
const CRYP_MARGIN = COMBAT.height() / 4.5;
|
|
const TEXT_MARGIN = COMBAT.height() / 35;
|
|
|
|
const healthBarDimensions = (team, iter, margin) => {
|
|
const healthBarWidth = COMBAT.width() * 0.07;
|
|
const healthBarHeight = TEXT_MARGIN / 1.5;
|
|
const healthBarX = (COMBAT.width() - healthBarWidth) * team;
|
|
const healthBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
|
return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
|
|
};
|
|
|
|
const crypAvatarText = (team, iter) => {
|
|
const nameX = COMBAT.width() * team;
|
|
const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
|
const healthX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
|
|
const healthY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
|
const statusX = COMBAT.width() * team;
|
|
const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
|
return { statusX, statusY, nameX, nameY, healthX, healthY };
|
|
};
|
|
|
|
const crypEffects = (team, iter) => {
|
|
const crypEffectsX = team ? COMBAT.width() - COMBAT.width() / 6.5 : COMBAT.width() / 6.5;
|
|
const crypEffectsY = TEXT_MARGIN * 2 + CRYP_MARGIN * iter;
|
|
return { crypEffectsX, crypEffectsY };
|
|
};
|
|
|
|
const crypPosition = (team, iter) => {
|
|
const crypAvatarX = team ? COMBAT.width() - COMBAT.width() / 6 : COMBAT.width() / 6;
|
|
const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter;
|
|
return { crypAvatarX, crypAvatarY };
|
|
};
|
|
|
|
|
|
class StatBar extends Phaser.GameObjects.Graphics {
|
|
constructor(scene, cryp, crypStatText, type) {
|
|
super(scene);
|
|
this.crypObj = cryp;
|
|
this.type = type;
|
|
this.statText = crypStatText;
|
|
|
|
if (type === 'HP') {
|
|
this.val = this.crypObj.cryp.hp.base;
|
|
this.max = this.crypObj.cryp.stamina.base;
|
|
this.margin = 0;
|
|
} else if (type === 'Armour') {
|
|
this.val = this.crypObj.cryp.armour.base;
|
|
this.max = this.crypObj.cryp.armour.base;
|
|
this.margin = 1;
|
|
} else if (type === 'Evasion') {
|
|
this.val = this.crypObj.cryp.evasion.base;
|
|
this.max = this.crypObj.cryp.evasion.base;
|
|
this.margin = 2;
|
|
} else if (type === 'Spell Shield') {
|
|
this.val = this.crypObj.cryp.spell_shield.base;
|
|
this.max = this.crypObj.cryp.spell_shield.base;
|
|
this.margin = 3;
|
|
}
|
|
this.drawStatBar();
|
|
}
|
|
|
|
drawStatBar() {
|
|
this.clear();
|
|
const {
|
|
healthBarX, healthBarY, healthBarWidth, healthBarHeight,
|
|
} = healthBarDimensions(this.crypObj.team, this.crypObj.iter, this.margin);
|
|
this.statText.text = `${this.val.toString()} / ${this.max.toString()} ${this.type}`;
|
|
// Draw Black Border
|
|
this.fillStyle(COLOURS.BLACK);
|
|
this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight);
|
|
// White fill
|
|
this.fillStyle(COLOURS.WHITE);
|
|
this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4);
|
|
// Fill the health bar
|
|
const healthPercentage = this.val / this.max;
|
|
if (healthPercentage < 0.3) {
|
|
this.fillStyle(COLOURS.RED);
|
|
} else if (healthPercentage < 0.65) {
|
|
this.fillStyle(COLOURS.YELLOW);
|
|
} else {
|
|
this.fillStyle(0x00ff00); // str8 up green
|
|
}
|
|
const healthWidth = Math.floor(healthBarWidth * healthPercentage);
|
|
this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth - 4, healthBarHeight - 4);
|
|
}
|
|
|
|
takeDamage(value) {
|
|
if (value > 0) {
|
|
this.val = (value >= this.val) ? 0 : this.val -= value;
|
|
} else {
|
|
this.val = (this.val - value > this.max) ? this.max : this.val -= value;
|
|
}
|
|
if (this.val === 0) this.crypObj.setKo();
|
|
this.drawStatBar();
|
|
}
|
|
}
|
|
|
|
class Effects extends Phaser.GameObjects.Group {
|
|
constructor(scene, team, iter) {
|
|
super(scene);
|
|
this.scene = scene;
|
|
const { crypEffectsX, crypEffectsY } = crypEffects(team, iter);
|
|
this.x = crypEffectsX; this.y = crypEffectsY;
|
|
this.effectCount = 0;
|
|
}
|
|
|
|
addEffect(effect) {
|
|
const y = this.y + this.effectCount * TEXT_MARGIN;
|
|
const text = `${effect.effect} for ${effect.duration} turn`;
|
|
const e = this.scene.add.text(this.x, y, text, TEXT.NORMAL);
|
|
e.effect = effect.effect;
|
|
this.add(e);
|
|
this.effectCount += 1;
|
|
}
|
|
|
|
removeEffect(effect) {
|
|
this.children.entries.forEach((e) => {
|
|
if (e.effect === effect) e.destroy();
|
|
});
|
|
}
|
|
|
|
update(effects) {
|
|
this.effectCount = 0;
|
|
this.children.entries.forEach(e => e.destroy());
|
|
effects.forEach((effect) => {
|
|
this.addEffect(effect);
|
|
});
|
|
return true;
|
|
}
|
|
}
|
|
|
|
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, 'aztec', genAvatar(cryp.name));
|
|
this.setScale(0.5);
|
|
|
|
if (!team) this.flipX = true;
|
|
|
|
// Save position and cryp details
|
|
this.scene = scene;
|
|
this.iter = iter;
|
|
this.team = team;
|
|
this.cryp = cryp;
|
|
this.state = 'deselect';
|
|
// Add cryp name
|
|
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
|
|
// Add cryp hp
|
|
const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL).setOrigin(team, 0);
|
|
this.healthBar = scene.add.existing(new StatBar(scene, this, healthText, 'HP'));
|
|
const armourText = scene.add.text(healthX, healthY + TEXT_MARGIN, '', TEXT.NORMAL).setOrigin(team, 0);
|
|
this.armour = scene.add.existing(new StatBar(scene, this, armourText, 'Armour'));
|
|
const evasionText = scene.add.text(healthX, healthY + TEXT_MARGIN * 2, '', TEXT.NORMAL).setOrigin(team, 0);
|
|
this.evasion = scene.add.existing(new StatBar(scene, this, evasionText, 'Evasion'));
|
|
const ssText = scene.add.text(healthX, healthY + TEXT_MARGIN * 3, '', TEXT.NORMAL).setOrigin(team, 0);
|
|
this.spellShield = scene.add.existing(new StatBar(scene, this, ssText, 'Spell Shield'));
|
|
|
|
|
|
|
|
this.effects = scene.add.existing(new Effects(scene, team, iter));
|
|
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
|
|
}
|
|
|
|
select() {
|
|
this.setTint('0x00bb00');
|
|
this.state = 'select';
|
|
}
|
|
|
|
setKo() {
|
|
this.state = 'ko';
|
|
this.setTint('0x9d9ea0');
|
|
}
|
|
|
|
deselect() {
|
|
if (this.state !== 'ko') {
|
|
this.clearTint();
|
|
this.state = 'deselect';
|
|
}
|
|
}
|
|
|
|
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, () => {
|
|
if (this.state !== 'ko') this.clearTint();
|
|
});
|
|
}
|
|
}
|
|
|
|
class CombatCryps extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'CombatCryps' });
|
|
}
|
|
|
|
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('crypStatusUpdate', false);
|
|
}
|
|
|
|
updateData(parent, key, data) {
|
|
if (key === 'game' && data) {
|
|
const isAnimating = this.phase === 'animating';
|
|
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) {
|
|
this.updateCrypStatus(data);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
drawCryps(game) {
|
|
const renderCryp = (cryp, iter, team) => {
|
|
// Add Image Avatar Class
|
|
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
|
|
.find(c => c.cryp.id === cryp.id)
|
|
|| renderCryp(cryp, iter, team);
|
|
crypObj.healthBar.hp = cryp.hp.base;
|
|
crypObj.healthBar.drawStatBar();
|
|
crypObj.effects.update(cryp.effects);
|
|
};
|
|
|
|
const allyTeam = game.teams.find(t => t.id === this.account.id);
|
|
// in future there will be more than one
|
|
const [enemyTeam] = game.teams.filter(t => t.id !== this.account.id);
|
|
|
|
allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
|
|
if (!enemyTeam) return false;
|
|
enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
|
|
return true;
|
|
}
|
|
|
|
selectCryp(crypId) {
|
|
this.cryps.children.entries.forEach(c => c.deselect());
|
|
if (crypId) this.cryps.children.entries.find(c => c.cryp.id === crypId).select();
|
|
}
|
|
|
|
updateCrypStatus(status) {
|
|
const sourceCryp = this.cryps.children.entries
|
|
.find(c => c.cryp.id === status.id);
|
|
|
|
const targetCryp = this.cryps.children.entries
|
|
.find(c => c.cryp.id === status.target);
|
|
|
|
if (this.phase === 'Skill') {
|
|
sourceCryp.statusText.text = `${status.skill} on ${targetCryp.cryp.name}`;
|
|
}
|
|
}
|
|
|
|
cleanUp() {
|
|
this.registry.events.off('changedata', this.updateData);
|
|
this.scene.remove();
|
|
}
|
|
}
|
|
|
|
module.exports = CombatCryps;
|