Using the 3.16 scale manager

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": {

client/src/scenes/cryps.js

@@ -10,9 +10,17 @@ function renderCryps() {
         type: Phaser.AUTO,
         // backgroundColor: '#181818',
         resolution: window.devicePixelRatio,
-        // antialias: true,
+        scale: {
+            mode: Phaser.DOM.WIDTH_CONTROLS_HEIGHT,
             width: 1600,
             height: 1000,
+            max: {
+                width: window.innerHeight * 1.6,
+                height: window.innerHeight,
+            },
+
+        },
+        // antialias: true,
         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;
 }

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() {
+    create(itemList) {
-        const itemList = this.registry.get('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);

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 false;
-            if (data) return this.cleanUp();
+        // 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'];
+        // List of scenes which could be occupying the main section of the menu
-        ACTIVE_MAIN_SCENES.forEach((sKey) => {
+        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);
-
+        // Delete scenes which could be showing before switching to battle scene
-        const ACTIVE_SCENES = ['MenuCrypList', 'MenuNavigation', 'GameList', 'StatSheet', 'ItemList', 'Zones'];
+        const removeScenes = (sKey) => {
-        ACTIVE_SCENES.forEach((sKey) => {
             if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
-        });
+        };
+        FIXED_MENU_SCENES.forEach(removeScenes);
+        MAIN_MENU_SCENES.forEach(removeScenes);
 
         this.scene.remove();
     }

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) {