209 lines
8.6 KiB
JavaScript
209 lines
8.6 KiB
JavaScript
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 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;
|
|
const healthBarHeight = TEXT_MARGIN / 1.5;
|
|
return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
|
|
};
|
|
|
|
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 skillTextPosition = (crypIter, skillIter) => {
|
|
const { TEXT_MARGIN } = calcMargin();
|
|
const skillTextX = 0.15 * COMBAT.width() * crypIter;
|
|
const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter;
|
|
return [skillTextX, skillTextY];
|
|
};
|
|
|
|
const crypPosition = (team, iter) => {
|
|
const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
|
|
const crypAvatarX = COMBAT.width() / 8 + TEAM_MARGIN * team;
|
|
const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter;
|
|
return { crypAvatarX, crypAvatarY };
|
|
};
|
|
|
|
class CrypImage extends Phaser.GameObjects.Image {
|
|
constructor(scene, team, iter, skills, 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.skills = skills;
|
|
this.healthbar = healthbar;
|
|
}
|
|
|
|
clickHandler() {
|
|
const activeSkill = this.scene.registry.get('activeSkill');
|
|
const game = this.scene.registry.get('game');
|
|
if (activeSkill) {
|
|
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.cryp.account, activeSkill.skill.skill);
|
|
} else if (game.phase === 'Target') {
|
|
ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id);
|
|
}
|
|
}
|
|
activeSkill.clearTint();
|
|
this.scene.registry.set('activeSkill', null);
|
|
this.scene.registry.set('activeCryp', null);
|
|
}
|
|
}
|
|
|
|
takeDamage(damage) {
|
|
this.setTint(0xff0000);
|
|
this.healthbar.takeDamage(damage);
|
|
this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
|
|
this.clearTint();
|
|
});
|
|
}
|
|
}
|
|
|
|
class CrypSkill extends Phaser.GameObjects.Text {
|
|
constructor(scene, x, y, team, skill, cryp) {
|
|
// Avatar will be a property of cryp
|
|
super(scene, x, y, skill.skill, TEXT.NORMAL);
|
|
this.cryp = cryp;
|
|
this.skill = skill;
|
|
this.setInteractive();
|
|
}
|
|
|
|
clickHandler() {
|
|
const activeSkill = this.scene.registry.get('activeSkill');
|
|
if (activeSkill) {
|
|
activeSkill.clearTint();
|
|
}
|
|
this.scene.registry.set('activeSkill', this);
|
|
this.setTint(COLOURS.BLUE);
|
|
}
|
|
}
|
|
|
|
class HealthBar extends Phaser.GameObjects.Graphics {
|
|
constructor(scene, cryp, team, iter, crypHpText) {
|
|
super(scene);
|
|
this.team = team;
|
|
this.iter = iter;
|
|
this.hp = cryp.hp.base;
|
|
this.stam = cryp.stamina.base;
|
|
this.hpText = crypHpText;
|
|
this.drawHealthBar();
|
|
}
|
|
|
|
drawHealthBar() {
|
|
const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(this.team, this.iter);
|
|
// 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);
|
|
|
|
const healthPercentage = this.hp / this.stam;
|
|
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, healthBarHeight - 4);
|
|
}
|
|
|
|
takeDamage(damage) {
|
|
this.hp -= damage;
|
|
this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
|
|
this.clear();
|
|
this.drawHealthBar();
|
|
}
|
|
}
|
|
|
|
function renderCryp(scene, group, cryp, skills, game, team, iter) {
|
|
// Add Image Avatar Class
|
|
const avatar = team ? 'magmar' : 'alk';
|
|
// Add cryp hp
|
|
const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter);
|
|
const crypName = scene.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL);
|
|
const crypHpText = scene.add.text(healthTextX, healthTextY, `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL);
|
|
const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText));
|
|
// Add cryp name
|
|
const crypSpawn = scene.add.existing(new CrypImage(scene, team, iter, skills, avatar, cryp, healthBar))
|
|
.setScale(0.5)
|
|
.setInteractive();
|
|
group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
|
|
return crypSpawn;
|
|
}
|
|
|
|
function renderSkills(scene, group, cryp, account, game, team, iter) {
|
|
const nameTextPosition = skillTextPosition(iter, 0);
|
|
const skillList = [];
|
|
if (scene.registry.get('resolve')) return true;
|
|
if (game.phase === 'Skill' && cryp.account === account.id) {
|
|
if (cryp.hp.base === 0) return true;
|
|
const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER);
|
|
crypName.text = cryp.name;
|
|
cryp.skills.forEach((skill, i) => {
|
|
const skillText = skillTextPosition(iter, i + 2);
|
|
const skillObj = new CrypSkill(scene, skillText[0], skillText[1], team, skill, cryp);
|
|
scene.add.existing(skillObj);
|
|
skillList.push(skillObj);
|
|
group.addMultiple([crypName, skillObj]);
|
|
});
|
|
} else if (game.phase === 'Target' && cryp.account !== account.id) {
|
|
const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
|
|
// cryp not casting this turn
|
|
if (!blockSkill) return false;
|
|
const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER);
|
|
const skillText = skillTextPosition(iter, 2);
|
|
const skillObj = new CrypSkill(scene, skillText[0], skillText[1], team, blockSkill, cryp);
|
|
scene.add.existing(skillObj);
|
|
skillList.push(skillObj);
|
|
group.addMultiple([crypName, skillObj]);
|
|
}
|
|
return skillList;
|
|
}
|
|
|
|
class DrawCrypTeams extends Phaser.GameObjects.Group {
|
|
constructor(scene, game) {
|
|
super(scene);
|
|
this.scene = scene;
|
|
this.keyboard = scene.input.keyboard;
|
|
let allyCount = 0; let enemyCount = 0;
|
|
const account = scene.registry.get('account');
|
|
scene.cryps.forEach((cryp) => {
|
|
const team = cryp.account === account.id ? 0 : 1;
|
|
const iter = cryp.account === account.id ? allyCount : enemyCount;
|
|
const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter);
|
|
const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter);
|
|
allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1;
|
|
const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
|
|
if (addKeys) scene.crypKeyHandler(crypObj, iter);
|
|
});
|
|
}
|
|
}
|
|
|
|
module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp };
|