Moved stat bar into components
This commit is contained in:
Mashy
parent
e0660c31a3
commit
593a2da7b0
@ -1,27 +1,19 @@
|
|||||||
const Phaser = require('phaser');
|
const Phaser = require('phaser');
|
||||||
const genAvatar = require('./avatar');
|
const genAvatar = require('./avatar');
|
||||||
|
const StatBar = require('./elements/statbar');
|
||||||
|
|
||||||
const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
|
const { DELAYS, TEXT, POSITIONS: { COMBAT } } = require('./constants');
|
||||||
|
|
||||||
const CRYP_MARGIN = COMBAT.height() / 4.5;
|
const CRYP_MARGIN = COMBAT.height() / 4.5;
|
||||||
const TEXT_MARGIN = COMBAT.height() / 35;
|
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 crypAvatarText = (team, iter) => {
|
||||||
const nameX = COMBAT.width() * team;
|
const nameX = COMBAT.width() * team;
|
||||||
const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
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 statusX = COMBAT.width() * team;
|
||||||
const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||||
return { statusX, statusY, nameX, nameY, healthX, healthY };
|
return { statusX, statusY, nameX, nameY };
|
||||||
};
|
};
|
||||||
|
|
||||||
const crypEffects = (team, iter) => {
|
const crypEffects = (team, iter) => {
|
||||||
@ -37,69 +29,6 @@ const crypPosition = (team, iter) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
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 {
|
class Effects extends Phaser.GameObjects.Group {
|
||||||
constructor(scene, team, iter) {
|
constructor(scene, team, iter) {
|
||||||
super(scene);
|
super(scene);
|
||||||
@ -138,9 +67,7 @@ class CrypImage extends Phaser.GameObjects.Image {
|
|||||||
constructor(scene, team, iter, cryp) {
|
constructor(scene, team, iter, cryp) {
|
||||||
// Get coords
|
// Get coords
|
||||||
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
|
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
|
||||||
const {
|
const { statusX, statusY, nameX, nameY } = crypAvatarText(team, iter);
|
||||||
statusX, statusY, nameX, nameY, healthX, healthY,
|
|
||||||
} = crypAvatarText(team, iter);
|
|
||||||
|
|
||||||
// Cryp display
|
// Cryp display
|
||||||
// const avatar = team ? 'magmar' : 'alk';
|
// const avatar = team ? 'magmar' : 'alk';
|
||||||
@ -157,17 +84,11 @@ class CrypImage extends Phaser.GameObjects.Image {
|
|||||||
this.state = 'deselect';
|
this.state = 'deselect';
|
||||||
// Add cryp name
|
// Add cryp name
|
||||||
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
|
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL).setOrigin(team, 0);
|
||||||
// Add cryp hp
|
// Add cryp stat bars
|
||||||
const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL).setOrigin(team, 0);
|
this.healthBar = scene.add.existing(new StatBar(scene, this, 'HP'));
|
||||||
this.healthBar = scene.add.existing(new StatBar(scene, this, healthText, 'HP'));
|
this.armour = scene.add.existing(new StatBar(scene, this, 'Armour'));
|
||||||
const armourText = scene.add.text(healthX, healthY + TEXT_MARGIN, '', TEXT.NORMAL).setOrigin(team, 0);
|
this.evasion = scene.add.existing(new StatBar(scene, this, 'Evasion'));
|
||||||
this.armour = scene.add.existing(new StatBar(scene, this, armourText, 'Armour'));
|
this.spellShield = scene.add.existing(new StatBar(scene, this, 'Spell Shield'));
|
||||||
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.effects = scene.add.existing(new Effects(scene, team, iter));
|
||||||
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
|
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
|
||||||
|
|||||||
86
client/src/scenes/elements/combat.statbar.js
Normal file
86
client/src/scenes/elements/combat.statbar.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('.././constants');
|
||||||
|
|
||||||
|
const CRYP_MARGIN = COMBAT.height() / 4.5;
|
||||||
|
const TEXT_MARGIN = COMBAT.height() / 35;
|
||||||
|
|
||||||
|
const statBarDimensions = (team, iter, margin) => {
|
||||||
|
const statBarWidth = COMBAT.width() * 0.07;
|
||||||
|
const statBarHeight = TEXT_MARGIN / 1.5;
|
||||||
|
const statBarX = (COMBAT.width() - statBarWidth) * team;
|
||||||
|
const statBarY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||||
|
return { statBarX, statBarY, statBarWidth, statBarHeight };
|
||||||
|
};
|
||||||
|
|
||||||
|
const statTextCoord = (team, iter, margin) => {
|
||||||
|
const statTextX = team ? COMBAT.width() - COMBAT.width() * 0.075 : COMBAT.width() * 0.075;
|
||||||
|
const statTextY = COMBAT.y() + TEXT_MARGIN * (margin + 1) + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
|
||||||
|
return { statTextX, statTextY };
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
class StatBar extends Phaser.GameObjects.Graphics {
|
||||||
|
constructor(scene, cryp, type) {
|
||||||
|
super(scene);
|
||||||
|
this.crypObj = cryp;
|
||||||
|
this.type = type;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
const { statTextX, statTextY } = statTextCoord(cryp.team, cryp.iter, this.margin);
|
||||||
|
this.statText = scene.add.text(statTextX, statTextY, '', TEXT.NORMAL).setOrigin(cryp.team, 0);
|
||||||
|
this.drawStatBar();
|
||||||
|
}
|
||||||
|
|
||||||
|
drawStatBar() {
|
||||||
|
this.clear();
|
||||||
|
const {
|
||||||
|
statBarX, statBarY, statBarWidth, statBarHeight,
|
||||||
|
} = statBarDimensions(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(statBarX, statBarY, statBarWidth, statBarHeight);
|
||||||
|
// White fill
|
||||||
|
this.fillStyle(COLOURS.WHITE);
|
||||||
|
this.fillRect(statBarX + 2, statBarY + 2, statBarWidth - 4, statBarHeight - 4);
|
||||||
|
// Fill the health bar
|
||||||
|
const statPercentage = this.val / this.max;
|
||||||
|
if (statPercentage < 0.3) {
|
||||||
|
this.fillStyle(COLOURS.RED);
|
||||||
|
} else if (statPercentage < 0.65) {
|
||||||
|
this.fillStyle(COLOURS.YELLOW);
|
||||||
|
} else {
|
||||||
|
this.fillStyle(0x00ff00); // str8 up green
|
||||||
|
}
|
||||||
|
const statWidth = Math.floor(statBarWidth * statPercentage);
|
||||||
|
this.fillRect(statBarX + 2, statBarY + 2, statWidth, statBarHeight - 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = StatBar;
|
||||||
Loading…
x
Reference in New Issue
Block a user