Combat turns working

client/src/events.js

@@ -16,6 +16,10 @@ function registerEvents(registry, events) {
         registry.set('account', account);
     }
 
+    function setActiveSkill(skill) {
+        registry.set('activeSkill', skill);
+    }
+
     function setItems(items) {
         registry.set('items', items);
     }
@@ -40,6 +44,7 @@ function registerEvents(registry, events) {
 
     return {
         setAccount,
+        setActiveSkill,
         setCryps,
         setGame,
         setItems,

client/src/scenes/combat.cryps.js

@@ -1,6 +1,6 @@
 const Phaser = require('phaser');
 
-const { TEXT, POSITIONS: { COMBAT } } = require('./constants');
+const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
 
 const calcMargin = () => {
     const CRYP_MARGIN = COMBAT.height() / 3.4;
@@ -12,23 +12,62 @@ const calcMargin = () => {
 };
 
 class CrypAvatar extends Phaser.GameObjects.Image {
-    constructor(scene, j, team, cryp, avatar) {
+    constructor(scene, j, team, avatar, cryp, teamId) {
         // Avatar will be a property of cryp
         const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
         super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar);
+        this.scene = scene;
         this.setScale(0.5);
         this.setInteractive();
-        this.cryp = cryp;
+        this.id = cryp.id;
+        this.teamId = teamId;
+    }
+
+    clickHandler() {
+        const activeSkill = this.scene.registry.get('activeSkill');
+        const game = this.scene.registry.get('game');
+        if (activeSkill) {
+            if (activeSkill.cryp.teamId !== this.teamId) {
+                const ws = this.scene.registry.get('ws');
+                if (game.phase === 'Skill') {
+                    ws.sendGameSkill(game.id, activeSkill.cryp.id, this.teamId, activeSkill.skill.skill);
+                } else if (game.phase === 'Target') {
+                    ws.sendGameTarget(game.id, this.id, activeSkill.skill.id);
+                }
+            }
+        }
     }
 }
 
 class CrypSkill extends Phaser.GameObjects.Text {
-    constructor(scene, i, j, team, skill) {
+    constructor(scene, i, j, team, skill, cryp) {
         // Avatar will be a property of cryp
         const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
-        super(scene, X_PADDING * 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL);
+        super(scene, X_PADDING * 2 + TEAM_MARGIN * team,
+            Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL);
         this.setInteractive();
+        this.scene = scene;
+        this.cryp = cryp;
         this.skill = skill;
+        this.checkActive();
+    }
+
+    checkActive() {
+        const activeSkill = this.scene.registry.get('activeSkill');
+        if (activeSkill) {
+            if (activeSkill.skill === this.skill && activeSkill.cryp.id === this.cryp.id) {
+                this.setTint(COLOURS.BLUE);
+            }
+        }
+    }
+
+    clickHandler() {
+        const activeSkill = this.scene.registry.get('activeSkill');
+        if (activeSkill) {
+            activeSkill.clearTint();
+        }
+        this.scene.registry.set('activeSkill', this);
+        this.setTint(COLOURS.BLUE);
     }
 }
 
@@ -36,29 +75,41 @@ class DrawCrypTeams extends Phaser.GameObjects.Group {
     constructor(scene, game) {
         super(scene);
         const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
-        // this.id = cryp.id;
+        const account = scene.registry.get('account');
-        this.scene = scene;
         this.ws = scene.registry.get('ws');
         let team = 0;
+
         // Cryp Avatar
         const renderCryp = (cryp, j) => {
             const avatar = team ? 'magmar' : 'alk';
-            this.add(scene.add.existing(new CrypAvatar(scene, j, team, cryp, avatar)));
+            const teamId = team
+                ? game.teams.filter(t => t.id !== account.id)[0].id
+                : game.teams.find(t => t.id === account.id).id;
+            const crypSpawn = new CrypAvatar(scene, j, team, avatar, cryp, teamId);
+            this.add(scene.add.existing(crypSpawn));
             // Cryp HP and Name
             const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`;
-            this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL));
+            this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
-            this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER));
+                Y_PADDING / 2 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL));
+            this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
+                Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER));
             // Cryp Skills
-            const knownSkill = (skill, i) => {
+            if (game.phase === 'Skill') {
-                this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill)));
+                cryp.skills.forEach((skill, i) => {
+                    this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill, crypSpawn)));
+                });
+            } else if (game.phase === 'Target') {
+                game.stack.forEach((skill) => {
+                    if (skill.source_cryp_id === cryp.id) {
+                        this.add(scene.add.existing(new CrypSkill(scene, 1, j, team, skill, crypSpawn)));
+                    }
+                });
+            }
         };
-            cryp.skills.forEach(knownSkill);
-        };
-        const account = scene.registry.get('account');
         game.teams.find(t => t.id === account.id).cryps.forEach(renderCryp);
         team = 1;
         game.teams.filter(t => t.id !== account.id)[0].cryps.forEach(renderCryp);
     }
 }
 
-module.exports = { DrawCrypTeams, CrypAvatar, CrypSkill };
+module.exports = { CrypAvatar, CrypSkill, DrawCrypTeams };

client/src/scenes/combat.js

@@ -1,7 +1,7 @@
 const Phaser = require('phaser');
 const fs = require('fs');
 
-const { POSITIONS, TEXT } = require('./constants');
+const { POSITIONS, TEXT, COLOURS } = require('./constants');
 const { DrawCrypTeams, CrypAvatar, CrypSkill } = require('./combat.cryps');
 
 class Combat extends Phaser.Scene {
@@ -33,14 +33,6 @@ class Combat extends Phaser.Scene {
         this.input.keyboard.on('keydown_S', () => {
             this.scene.switch('CrypList'); // Switch back to cryp list
         }, 0, this);
-        this.input.on('pointerup', (pointer, gameObjects) => {
-            if (gameObjects[0] instanceof CrypAvatar) {
-                console.log(gameObjects[0].cryp.id);
-            }
-            if (gameObjects[0] instanceof CrypSkill) {
-                console.log(gameObjects[0].skill.skill);
-            }
-        });
 
         this.input.keyboard.on('keydown_G', () => {
             this.skills('chargeBall', 'green', 400, -250);
@@ -50,6 +42,16 @@ class Combat extends Phaser.Scene {
             this.skills('spit', 'blue', 180, 250);
         }, 0, this);
 
+        this.input.on('pointerup', (pointer, obj) => {
+            const activeSkill = this.registry.get('activeSkill');
+            if (obj[0] instanceof CrypAvatar || obj[0] instanceof CrypSkill) {
+                obj[0].clickHandler();
+            } else if (activeSkill) {
+                activeSkill.clearTint();
+                this.registry.set(null);
+            }
+        });
+
         const logX = POSITIONS.COMBAT.LOG.x();
         const logY = POSITIONS.COMBAT.LOG.y();
         const logWidth = POSITIONS.COMBAT.LOG.width();
@@ -60,9 +62,11 @@ class Combat extends Phaser.Scene {
 
     updateData(parent, key, data) {
         if (key === 'game') {
+            if (!this.registry.get('activeSkill')) {
                 this.renderCryps(data);
                 this.renderCombat(data);
             }
+        }
         return true;
     }
 

client/src/scenes/passives.js

@@ -50,7 +50,7 @@ class PhaserPassives extends Phaser.Scene {
         this.input.on('pointerover', (pointer, gameObjects) => {
             if (gameObjects[0] instanceof PassiveNode) {
                 if (!gameObjects[0].alloc) {
-                    gameObjects[0].setTint(0xff00ff);
+                    gameObjects[0].setTint(0xffffff);
                 }
                 this.displayPassiveText(gameObjects[0], pointer);
             }

client/src/socket.js

@@ -175,7 +175,7 @@ function createSocket(events) {
 
     function sendGameTarget(gameId, crypId, skillId) {
         send({ method: 'game_target', params: { game_id: gameId, cryp_id: crypId, skill_id: skillId } });
-        events.setActiveIncoming(null);
+        events.setActiveSkill(null);
     }
 
     function sendItemUse(item, target) {