added ko

client/src/scenes/combat.cryps.js

@@ -38,10 +38,13 @@ const crypPosition = (team, iter) => {
 
 
 class HealthBar extends Phaser.GameObjects.Graphics {
-    constructor(scene, cryp, team, iter, crypHpText) {
+    constructor(scene, cryp, crypHpText) {
         super(scene);
-        this.team = team; this.iter = iter; this.hp = cryp.hp.base;
-        this.stam = cryp.stamina.base; this.hpText = crypHpText;
+        this.crypObj = cryp;
+        this.hpText = crypHpText;
+
+        this.hp = this.crypObj.cryp.hp.base;
+        this.stam = this.crypObj.cryp.stamina.base;
         this.drawHealthBar();
     }
 
@@ -49,7 +52,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
         this.clear();
         const {
             healthBarX, healthBarY, healthBarWidth, healthBarHeight,
-        } = healthBarDimensions(this.team, this.iter);
+        } = healthBarDimensions(this.crypObj.team, this.crypObj.iter);
         this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
         // Draw Black Border
         this.fillStyle(COLOURS.BLACK);
@@ -76,6 +79,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
         } else {
             this.hp = (this.hp - value > this.stam) ? this.stam : this.hp -= value;
         }
+        if (this.hp === 0) this.crypObj.setKo();
         this.drawHealthBar();
     }
 }
@@ -132,22 +136,32 @@ class CrypImage extends Phaser.GameObjects.Image {
         this.iter = iter;
         this.team = team;
         this.cryp = cryp;
+        this.state = 'deselect';
 
         // Add cryp name
         scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL);
         // Add cryp hp
         const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL);
-        this.healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, healthText));
+        this.healthBar = scene.add.existing(new HealthBar(scene, this, healthText));
         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() {
@@ -159,7 +173,7 @@ class CrypImage extends Phaser.GameObjects.Image {
         else this.setTint(0x00bb00);
         this.healthBar.takeDamage(damage);
         this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
-            this.clearTint();
+            if (this.state !== 'ko') this.clearTint();
         });
     }
 }

client/src/scenes/combat.skills.js

@@ -19,7 +19,7 @@ const skillPosition = (crypIter, skillIter) => {
 };
 
 const targetTextPosition = (crypIter, teamIter) => {
-    const skillTextX = COMBAT.width() / 5 + 0.7 * TEAM_MARGIN * teamIter;
+    const skillTextX = COMBAT.width() / 3.8 + 0.63 * TEAM_MARGIN * teamIter;
     const skillTextY = TEXT_MARGIN * 4 + CRYP_MARGIN * crypIter;
     return [ skillTextX, skillTextY ];
 };