Added keybinds

client/src/events.js

@@ -28,6 +28,14 @@ function registerEvents(registry, events) {
         registry.set('gameList', gameList);
     }
 
+    events.on('SET_ACTIVE_SKILL', function skillActive(skill) {
+        const activeSkill = registry.get('activeSkill');
+        if (activeSkill) {
+            activeSkill.clearTint();
+        } skill.setTint(0x00ff00);
+        return setActiveSkill(skill);
+    });
+
     events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
         const cryps = registry.get('cryps');
 

client/src/scenes/combat.cryps.js

@@ -37,16 +37,21 @@ const skillTextPosition = (crypIter, skillIter) => {
     return [skillTextX, skillTextY];
 };
 
+const crypPosition = (team, iter) => {
+    const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
+    const crypAvatarX = COMBAT.width() / 8 + TEAM_MARGIN * team;
+    const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter;
+    return { crypAvatarX, crypAvatarY };
+};
 
 class CrypImage extends Phaser.GameObjects.Image {
-    constructor(scene, j, team, avatar, cryp, healthbar) {
+    constructor(scene, team, iter, skills, avatar, cryp, healthbar) {
         // Avatar will be a property of cryp
-        const {
-            CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
-        } = calcMargin();
-        super(scene, COMBAT.width() / 8 + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar);
+        const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
+        super(scene, crypAvatarX, crypAvatarY, avatar);
         this.scene = scene;
         this.cryp = cryp;
+        this.skills = skills;
         this.healthbar = healthbar;
     }
 
@@ -61,28 +66,21 @@ class CrypImage extends Phaser.GameObjects.Image {
                 } else if (game.phase === 'Target') {
                     ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id);
                 }
-            } else {
-                activeSkill.clearTint();
-                this.scene.registry.set('activeSkill', null);
             }
+            activeSkill.clearTint();
+            this.scene.registry.set('activeSkill', null);
+            this.scene.registry.set('activeCryp', null);
         }
     }
 }
 
 class CrypSkill extends Phaser.GameObjects.Text {
     constructor(scene, x, y, team, skill, cryp) {
-        console.log(skill, cryp);
         // Avatar will be a property of cryp
         super(scene, x, y, skill.skill, TEXT.NORMAL);
         this.cryp = cryp;
         this.skill = skill;
         this.setInteractive();
-        const activeSkill = scene.registry.get('activeSkill');
-        if (activeSkill) {
-            if (activeSkill.skill === skill && activeSkill.cryp.id === cryp.id) {
-                this.setTint(COLOURS.BLUE);
-            }
-        }
     }
 
     clickHandler() {
@@ -135,7 +133,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
     }
 }
 
-function renderCryp(scene, group, cryp, game, team, iter) {
+function renderCryp(scene, group, cryp, skills, game, team, iter) {
     // Add Image Avatar Class
     const avatar = team ? 'magmar' : 'alk';
     // Add cryp hp
@@ -144,7 +142,7 @@ function renderCryp(scene, group, cryp, game, team, iter) {
     const crypHpText = scene.add.text(healthTextX, healthTextY, `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL);
     const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText));
     // Add cryp name
-    const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp, healthBar))
+    const crypSpawn = scene.add.existing(new CrypImage(scene, team, iter, skills, avatar, cryp, healthBar))
         .setScale(0.5)
         .setInteractive();
     group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
@@ -153,42 +151,50 @@ function renderCryp(scene, group, cryp, game, team, iter) {
 
 function renderSkills(scene, group, cryp, account, game, team, iter) {
     const nameTextPosition = skillTextPosition(iter, 0);
+    const skillList = [];
+    if (scene.registry.get('resolve')) return true;
     if (game.phase === 'Skill' && cryp.account === account.id) {
         if (cryp.hp.base === 0) return true;
         const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER);
-        group.add(crypName);
         crypName.text = cryp.name;
         cryp.skills.forEach((skill, i) => {
             const skillText = skillTextPosition(iter, i + 2);
-            group.add(scene.add.existing(new CrypSkill(scene, skillText[0], skillText[1], team, skill, cryp)));
+            const skillObj = new CrypSkill(scene, skillText[0], skillText[1], team, skill, cryp);
+            scene.add.existing(skillObj);
+            skillList.push(skillObj);
+            group.addMultiple([crypName, skillObj]);
         });
     } else if (game.phase === 'Target' && cryp.account !== account.id) {
         const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
         // cryp not casting this turn
         if (!blockSkill) return false;
         const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER);
-        group.add(crypName);
         const skillText = skillTextPosition(iter, 2);
-        group.add(scene.add.existing(new CrypSkill(scene, skillText[0], skillText[1], team, blockSkill, cryp)));
+        const skillObj = new CrypSkill(scene, skillText[0], skillText[1], team, blockSkill, cryp);
+        scene.add.existing(skillObj);
+        skillList.push(skillObj);
+        group.addMultiple([crypName, skillObj]);
     }
-    return true;
+    return skillList;
 }
 
-
 class DrawCrypTeams extends Phaser.GameObjects.Group {
     constructor(scene, game) {
         super(scene);
-        let allyCount = 0;
-        let enemyCount = 0;
+        this.scene = scene;
+        this.keyboard = scene.input.keyboard;
+        let allyCount = 0; let enemyCount = 0;
         const account = scene.registry.get('account');
         scene.cryps.forEach((cryp) => {
             const team = cryp.account === account.id ? 0 : 1;
             const iter = cryp.account === account.id ? allyCount : enemyCount;
-            renderCryp(scene, this, cryp, game, team, iter);
-            renderSkills(scene, this, cryp, account, game, team, iter);
+            const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter);
+            const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter);
             allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1;
+            const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
+            if (addKeys) scene.crypKeyHandler(crypObj, iter);
         });
     }
 }
 
-module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp};
+module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp };

client/src/scenes/combat.js

@@ -5,6 +5,9 @@ const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
 const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
 const combatRender = require('./combat.render');
 const CombatSkills = require('./combat.skills');
+const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
+    const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
+
 
 class Combat extends Phaser.Scene {
     constructor() {
@@ -74,7 +77,6 @@ class Combat extends Phaser.Scene {
         }
         this.cryps = [];
         game.teams.forEach(t => t.cryps.forEach(cryp => this.cryps.push(cryp)));
-        console.log(this.cryps);
         // If not animating render static skill / block phase
         if (this.crypTeamRender) {
             this.crypTeamRender.destroy(true);
@@ -90,6 +92,25 @@ class Combat extends Phaser.Scene {
         this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
         return this.resolvedIter === game.resolved.length;
     }
+
+    crypKeyHandler(cryp, iter) {
+        if (CRYP_KEY_MAP[iter]) {
+            this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]);
+            if (cryp.skills.length > 0) { // check there are cryp skills
+                this.input.keyboard.on(CRYP_KEY_MAP[iter], () => {
+                    this.registry.set('activeCryp', cryp);
+                    console.log(cryp.cryp.name);
+                    SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
+                    cryp.skills.forEach((skill, i) => {
+                        this.input.keyboard.on(SKILL_KEY_MAP[i], () => {
+                            this.game.events.emit('SET_ACTIVE_SKILL', skill);
+                            skill.setActive();
+                        }, this);
+                    });
+                }, this);
+            }
+        }
+    }
 }
 
 module.exports = Combat;