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

Moved stat bar into components

Browse Source
This commit is contained in:
Mashy 2019-01-14 11:45:22 +10:00
parent e0660c31a3
commit 593a2da7b0
2 changed files with 95 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,27 +1,19 @@
const Phaser = require('phaser');
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 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 };
return { statusX, statusY, nameX, nameY };
};
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 {
constructor(scene, team, iter) {
super(scene);
@ -138,9 +67,7 @@ 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);
const { statusX, statusY, nameX, nameY } = crypAvatarText(team, iter);
// Cryp display
// const avatar = team ? 'magmar' : 'alk';
@ -157,17 +84,11 @@ class CrypImage extends Phaser.GameObjects.Image {
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'));
// Add cryp stat bars
this.healthBar = scene.add.existing(new StatBar(scene, this, 'HP'));
this.armour = scene.add.existing(new StatBar(scene, this, 'Armour'));
this.evasion = scene.add.existing(new StatBar(scene, this, 'Evasion'));
this.spellShield = scene.add.existing(new StatBar(scene, this, 'Spell Shield'));
this.effects = scene.add.existing(new Effects(scene, team, iter));
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);

86
client/src/scenes/elements/combat.statbar.js Normal file
View 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;