Moved skills and they disappear when animation starts

client/src/scenes/combat.cryps.js

@@ -43,8 +43,9 @@ class CrypImage extends Phaser.GameObjects.Image {
         super(scene, crypAvatarX, crypAvatarY, avatar);
         this.scene = scene;
         this.cryp = cryp;
-        this.iter = iter;
         this.healthbar = healthbar;
+        this.iter = iter;
+        this.team = team;
     }
 
     clickHandler() {
@@ -113,8 +114,6 @@ class HealthBar extends Phaser.GameObjects.Graphics {
     }
 }
 
-const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
-
 class CombatCryps extends Phaser.Scene {
     constructor() {
         super({ key: 'CombatCryps' });

client/src/scenes/combat.js

@@ -92,12 +92,14 @@ class Combat extends Phaser.Scene {
         const cantAnimate = this.registry.get('gameAnimating') || !this.registry.get('crypLoaded');
         if (cantAnimate) return false;
         if (game.resolved.length !== this.renderedResolves) {
+            this.registry.set('gamePhase', 'animating');
             this.registry.set('gameLog', this.registry.get('gameLog') + 1);
             const newResolutions = game.resolved.slice(this.renderedResolves);
             renderResolutions(this, game, newResolutions);
             this.renderedResolves = game.resolved.length;
             return true;
         }
+        this.registry.set('gamePhase', game.phase);
         if (this.registry.get('gameLog') !== game.log.length) {
             this.registry.set('gameLog', game.log.length);
         }

client/src/scenes/combat.skills.js

@@ -22,6 +22,13 @@ const skillTextPosition = (crypIter, skillIter) => {
     return [skillTextX, skillTextY];
 };
 
+const targetTextPosition = (crypIter, teamIter) => {
+    const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
+    const skillTextX = COMBAT.width() / 5 + 0.7 * TEAM_MARGIN * teamIter;
+    const skillTextY = Y_PADDING * 1.25 + CRYP_MARGIN * crypIter;
+    return [ skillTextX, skillTextY ];
+};
+
 class CrypName extends Phaser.GameObjects.Text {
     constructor(scene, x, y, cryp) {
         super(scene, x, y, cryp.name, TEXT.HEADER);
@@ -70,17 +77,23 @@ class CombatSkills extends Phaser.Scene {
         this.registry.events.on('changedata', this.updateData, this);
         this.account = this.registry.get('account');
 
+        this.input.on('pointerup', (pointer, obj) => {
+            if (obj[0] instanceof CrypSkill) {
+                obj[0].clickHandler();
+            }
+        });
+
         // can't set this.game cause of phaser class named the same
         const game = this.registry.get('game');
-        this.phase = game.phase;
+        this.phase = this.registry.get('gamePhase');
         this.renderSkills(game);
 
         return true;
     }
 
     updateData(parent, key, data) {
-        if (key === 'game' && data) {
+        if (key === 'gamePhase' && data) {
-            const shouldUpdate = data.phase !== this.phase;
+            const shouldUpdate = data !== this.phase;
             if (shouldUpdate) return this.scene.restart();
             return false;
         }
@@ -88,14 +101,14 @@ class CombatSkills extends Phaser.Scene {
     }
 
     renderSkills(game) {
-        if (game.phase === 'Skill') return this.renderSkillPhase(game);
+        if (this.phase === 'Skill') return this.renderSkillPhase(game);
-        if (game.phase === 'Target') return this.renderTargetPhase(game);
+        if (this.phase === 'Target') return this.renderTargetPhase(game);
 
         return false;
     }
 
     renderSkillPhase(game) {
-        const { account, scene } = this;
+        const { account } = this;
         const { keyboard } = this.input;
         const { events } = this.game;
 
@@ -180,7 +193,7 @@ class CombatSkills extends Phaser.Scene {
     }
 
     renderTargetPhase(game) {
-        const { account, scene } = this;
+        const { account } = this;
         const { keyboard } = this.input;
 
         const skills = game.stack.filter(skill => skill.target_team_id === account.id);
@@ -191,10 +204,12 @@ class CombatSkills extends Phaser.Scene {
             const cryp = crypTeam.cryps.find(c => c.id === skill.source_cryp_id);
 
             // Draw the cryp name
-            const namePos = skillTextPosition(i, 0);
+            // const namePos = skillTextPosition(i, 0);
-            this.add.existing(new CrypName(this, namePos[0], namePos[1], cryp));
+            // this.add.existing(new CrypName(this, namePos[0], namePos[1], cryp));
+            const sourceCryp = this.scene.get('CombatCryps').cryps.children.entries
+                .find(c => c.cryp.id === cryp.id);
 
-            const skillPos = skillTextPosition(i, 2);
+            const skillPos = targetTextPosition(sourceCryp.iter, sourceCryp.team);
             const skillObj = new CrypSkill(this, skillPos[0], skillPos[1], skill, cryp);
             this.add.existing(skillObj);