redraw games and join new ones

client/src/scenes/combat.cryps.js

@@ -165,29 +165,23 @@ function renderSkills(scene, group, cryp, game, iter) {
     return skillList;
 }
 
-class DrawCrypTeams extends Phaser.GameObjects.Group {
+class CombatCryps extends Phaser.GameObjects.Group {
-    constructor(scene, game) {
+    constructor(scene) {
         super(scene);
         this.scene = scene;
-        this.updateCryps(game, true);
     }
 
-    updateCryps(game, createCryps) {
+    update(game) {
         // Setting gamePhase will stop redraw unless phase changes again
         this.scene.registry.set('gamePhase', game.phase);
         // Destroy skills currently shown as the game state has changed
-        this.removeSkills();
         const account = this.scene.registry.get('account');
         const allyTeam = game.teams.find(t => t.id === account.id);
         // in future there will be more than one
         const [enemyTeam] = game.teams.filter(t => t.id !== account.id);
 
         const renderTeam = (cryp, iter, team) => {
-            const crypObj = createCryps
+            const crypObj = renderCryp(this.scene, this, cryp, game, team, iter);
-                ? renderCryp(this.scene, this, cryp, game, team, iter)
-                : this.children.entries
-                    .filter(obj => obj instanceof CrypImage)
-                    .find(c => c.cryp.id === cryp.id);
             // Update to health bars wont be needed when dmg taken is done properly
             crypObj.healthbar.hp = cryp.hp.base;
             crypObj.healthbar.drawHealthBar();
@@ -198,10 +192,6 @@ class DrawCrypTeams extends Phaser.GameObjects.Group {
         allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
         enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
     }
-
-    removeSkills() {
-        this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy());
-    }
 }
 
-module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp };
+module.exports = CombatCryps;

client/src/scenes/combat.js

@@ -1,8 +1,9 @@
 const Phaser = require('phaser');
 const fs = require('fs');
+const { throttle } = require('lodash');
 
 const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
-const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
+const CombatCryps = require('./combat.cryps');
 const renderResolutions = require('./combat.render.resolutions');
 
 const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
@@ -29,31 +30,46 @@ class Combat extends Phaser.Scene {
         this.registry.events.on('changedata', this.updateData, this);
         this.input.keyboard.on('keydown_S', () => {
             this.scene.switch('CrypList'); // Switch back to cryp list
+            this.registry.set('game', null);
         }, 0, this);
 
-        this.input.on('pointerup', (pointer, obj) => {
+        // this.input.on('pointerup', (pointer, obj) => {
-            if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
+        //     if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
-                obj[0].clickHandler();
+        //         obj[0].clickHandler();
-            } else if (this.registry.get('activeSkill')) {
+        //     } else if (this.registry.get('activeSkill')) {
-                this.registry.get('activeSkill').clearTint();
+        //         this.registry.get('activeSkill').clearTint();
-                this.registry.set('activeSkill', null);
+        //         this.registry.set('activeSkill', null);
-            }
+        //     }
-        });
+        // });
+
+        this.combatCryps = new CombatCryps(this);
+
         this.renderedResolves = 0;
         this.registry.set('gameAnimating', false);
         this.account = this.registry.get('account');
         this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL);
         this.log.setWordWrapWidth(COMBAT.LOG.width());
+
+        this.fetchGame = throttle(() => {
+            const game = this.registry.get('game');
+            if (game) {
+                const ws = this.registry.get('ws');
+                return ws.sendGameState(game.id);
+            }
+            return false;
+        }, 1000);
+
+        return true;
+    }
+
+    update() {
+        this.fetchGame();
         return true;
     }
 
     updateData(parent, key, data) {
         if (key === 'game') {
             if (!data) return false;
-            if (!this.registry.get('gamePhase')) { // Game hasn't started yet
-                this.crypTeamRender = new DrawCrypTeams(this, data);
-            }
-
             this.redrawGame(data);
         }
         return true;
@@ -61,22 +77,21 @@ class Combat extends Phaser.Scene {
 
     redrawGame(game) {
         // Only redraw if the game is animating or the phase has changed
-        const updatedNeeded = !this.registry.get('gameAnimating') && !(this.registry.get('gamePhase') === game.phase);
+        const updatedNeeded = !this.registry.get('gameAnimating');
         if (!updatedNeeded) return false;
 
         // do we need to render resolution animations?
         if (game.resolved.length !== this.renderedResolves) {
             // Turn skills off...in future we might get it to show something else instead
-            this.crypTeamRender.removeSkills();
+            this.combatCryps.removeSkills();
             const newResolutions = game.resolved.slice(this.renderedResolves);
-            renderResolutions(this, game, this.crypTeamRender, newResolutions);
+            renderResolutions(this, game, this.combatCryps, newResolutions);
             this.renderedResolves = game.resolved.length;
             return true;
         }
 
-        // If not animating resolutions render static skill / block phase
+        this.combatCryps.clear(true, true);
-        // Update relevant parts of the game state without redrawing it all
+        this.combatCryps.update(game);
-        this.crypTeamRender.updateCryps(game, false);
 
         // update log
         // shallow copy because reverse mutates

client/src/socket.js

@@ -74,8 +74,6 @@ function createSocket(events) {
 
     function gameState(response) {
         const [structName, game] = response;
-        clearInterval(gameStateTimeout);
-        gameStateTimeout = setTimeout(() => sendGameState(game.id), 1000);
         events.setGame(game);
     }