Moved stat bar into components

2019-01-14 11:45:22 +10:00
parent e0660c31a3
commit 593a2da7b0
2 changed files with 95 additions and 88 deletions
@@ -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;