From 432a7eb6f6109b6983877f73d9817f1558a2844d Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 22 Jan 2019 11:44:49 +1000 Subject: [PATCH] Using the 3.16 scale manager --- client/package.json | 2 +- client/src/scenes/cryps.js | 38 ++++++++------------- client/src/scenes/item.list.js | 9 +++-- client/src/scenes/menu.js | 60 +++++++++++++++++++--------------- client/src/scenes/specsheet.js | 3 +- 5 files changed, 54 insertions(+), 58 deletions(-) mode change 100755 => 100644 client/package.json diff --git a/client/package.json b/client/package.json old mode 100755 new mode 100644 index f8622ce1..51d1aa57 --- a/client/package.json +++ b/client/package.json @@ -21,7 +21,7 @@ "keymaster": "^1.6.2", "lodash": "^4.17.11", "parcel": "^1.9.7", - "phaser": "^3.15.1", + "phaser": "github:photonstorm/phaser#master", "redux": "^4.0.0" }, "devDependencies": { diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index 350c2753..30994e5f 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -10,9 +10,17 @@ function renderCryps() { type: Phaser.AUTO, // backgroundColor: '#181818', resolution: window.devicePixelRatio, + scale: { + mode: Phaser.DOM.WIDTH_CONTROLS_HEIGHT, + width: 1600, + height: 1000, + max: { + width: window.innerHeight * 1.6, + height: window.innerHeight, + }, + + }, // antialias: true, - width: 1600, - height: 1000, physics: { default: 'arcade', arcade: { @@ -48,31 +56,13 @@ function renderCryps() { game.registry.events.on('changedata', changeData); game.registry.events.on('setdata', changeData); - function resize() { - const canvas = document.querySelector('canvas'); - - if (!canvas) return setTimeout(resize, 50); - - const windowWidth = window.innerWidth; - const windowHeight = window.innerHeight; - const windowRatio = windowWidth / windowHeight; - const gameRatio = game.config.width / game.config.height; - if (windowRatio < gameRatio) { - canvas.style.width = `${windowWidth}px`; - canvas.style.height = `${(windowWidth / gameRatio)}px`; - } else { - canvas.style.width = `${(windowHeight * gameRatio)}px`; - canvas.style.height = `${windowHeight}px`; - } - - return true; - } - window.addEventListener('mouseup', () => game.registry.set('pan', false)); window.addEventListener('mousedown', () => game.registry.set('pan', true)); - window.addEventListener('resize', resize, true); + window.addEventListener('resize', () => { + game.scale.displaySize.maxWidth = window.innerHeight * 1.6; + game.scale.displaySize.maxHeight = window.innerHeight; + }); - resize(); return game; } diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index 2a8894ac..dd72785a 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -89,18 +89,17 @@ class ItemList extends Phaser.Scene { super({ key: 'ItemList', active: true }); } - updateData(parent, key) { + updateData(parent, key, data) { if (key === 'itemList') { this.registry.events.off('changedata', this.updateData, this); this.registry.events.off('setdata', this.updateData, this); - this.scene.restart(); + this.scene.restart(data); } } - create() { - const itemList = this.registry.get('itemList'); + create(itemList) { + if (!itemList) return false; const ws = this.registry.get('ws'); - this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); this.registry.events.on('changedata', this.updateData, this); diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 95e25aa2..3d99bd26 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -1,13 +1,29 @@ const Phaser = require('phaser'); +// Scenes constantly showing const MenuCrypList = require('./menu.cryps.list'); const MenuNavigation = require('./menu.navigation'); const ItemList = require('./item.list'); +// Scenes which change depending on menu context const Zones = require('./zones'); const GameList = require('./game.list'); const StatSheet = require('./statsheet'); const SpecSheet = require('./specsheet'); +const FIXED_MENU_SCENES = [ + 'MenuCrypList', + 'MenuNavigation', + 'ItemList', +]; + +const MAIN_MENU_SCENES = [ + 'Zones', + 'GameList', + 'StatSheet', + 'SpecSheet', +]; + + class Menu extends Phaser.Scene { constructor() { super({ key: 'Menu', active: true }); @@ -29,38 +45,29 @@ class Menu extends Phaser.Scene { } updateData(parent, key, data) { - if (key === 'game') { - if (data) return this.cleanUp(); + if (!data) return false; + // Controls which scene shows in the main top right section + switch (key) { + case 'game': return this.cleanUp(); + case 'zone': return this.newMainScene('Zones', Zones, data); + case 'gameList': return this.newMainScene('GameList', GameList, data); + case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data); + case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data); + default: return false; } - - if (key === 'zone') { - this.newMainScene('Zones', Zones, data); - } - - if (key === 'gameList') { - this.newMainScene('GameList', GameList, data); - } - - if (key === 'crypStats') { - this.newMainScene('StatSheet', StatSheet, data); - } - - if (key === 'crypSpec') { - this.newMainScene('SpecSheet', SpecSheet, data); - } - - return true; } newMainScene(key, scene, data) { let addScene = true; - const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet', 'SpecSheet']; - ACTIVE_MAIN_SCENES.forEach((sKey) => { + // List of scenes which could be occupying the main section of the menu + MAIN_MENU_SCENES.forEach((sKey) => { if (this.scene.manager.keys[sKey]) { if (key === sKey) { + // If there is new data for the current scene restart this.scene.manager.keys[sKey].scene.restart(data); addScene = false; } else { + // Delete the old scene this.scene.manager.keys[sKey].cleanUp(); } } @@ -71,11 +78,12 @@ class Menu extends Phaser.Scene { cleanUp() { this.registry.events.off('changedata', this.updateData, this); this.registry.events.off('setdata', this.updateData, this); - - const ACTIVE_SCENES = ['MenuCrypList', 'MenuNavigation', 'GameList', 'StatSheet', 'ItemList', 'Zones']; - ACTIVE_SCENES.forEach((sKey) => { + // Delete scenes which could be showing before switching to battle scene + const removeScenes = (sKey) => { if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp(); - }); + }; + FIXED_MENU_SCENES.forEach(removeScenes); + MAIN_MENU_SCENES.forEach(removeScenes); this.scene.remove(); } diff --git a/client/src/scenes/specsheet.js b/client/src/scenes/specsheet.js index 2ee5f445..f987764e 100644 --- a/client/src/scenes/specsheet.js +++ b/client/src/scenes/specsheet.js @@ -12,7 +12,7 @@ const menuY = HEIGHT * 0.8; const menuWidth = WIDTH / 10; const menuHeight = HEIGHT * 0.2; -const X_MARGIN= WIDTH * 1 / 4; +const X_MARGIN = WIDTH * 1 / 4; function addButton(scene, x, y, cback, name) { const button = scene.add @@ -77,7 +77,6 @@ class StatSheet extends Phaser.Scene { this.specs.add(this.add.text(X_MARGIN * 3, 0, 'Rare Specs', TEXT.HEADER)); cryp.specs.rare.forEach((specInfo, i) => listSpecs(3, specInfo, i)); - } displayText(x, y, description, pointer) {