From 6f44ada3d95e5b756e2ec4d4fd2e317f031672b0 Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 28 Nov 2018 22:18:44 +1100 Subject: [PATCH] redraw games and join new ones --- client/src/scenes/combat.cryps.js | 20 +++--------- client/src/scenes/combat.js | 53 ++++++++++++++++++++----------- client/src/socket.js | 2 -- 3 files changed, 39 insertions(+), 36 deletions(-) diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 09cd40e3..6186105f 100644 --- a/client/src/scenes/combat.cryps.js +++ b/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 { - constructor(scene, game) { +class CombatCryps extends Phaser.GameObjects.Group { + 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 - ? renderCryp(this.scene, this, cryp, game, team, iter) - : this.children.entries - .filter(obj => obj instanceof CrypImage) - .find(c => c.cryp.id === cryp.id); + const crypObj = renderCryp(this.scene, this, cryp, game, team, iter); // 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; diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 77d76b36..2e0c8ae3 100644 --- a/client/src/scenes/combat.js +++ b/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) => { - if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) { - obj[0].clickHandler(); - } else if (this.registry.get('activeSkill')) { - this.registry.get('activeSkill').clearTint(); - this.registry.set('activeSkill', null); - } - }); + // this.input.on('pointerup', (pointer, obj) => { + // if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) { + // obj[0].clickHandler(); + // } else if (this.registry.get('activeSkill')) { + // this.registry.get('activeSkill').clearTint(); + // 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 - // Update relevant parts of the game state without redrawing it all - this.crypTeamRender.updateCryps(game, false); + this.combatCryps.clear(true, true); + this.combatCryps.update(game); // update log // shallow copy because reverse mutates diff --git a/client/src/socket.js b/client/src/socket.js index de253799..483e4a4d 100644 --- a/client/src/socket.js +++ b/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); }