ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Using the 3.16 scale manager

Browse Source
This commit is contained in:
Mashy 2019-01-22 11:44:49 +10:00
parent 607cb4de1c
commit 432a7eb6f6
5 changed files with 54 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json Executable file → Normal file
View File

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

36
client/src/scenes/cryps.js
View File

@ -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;
}

9
client/src/scenes/item.list.js
View File

@ -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);

60
client/src/scenes/menu.js
View File

@ -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();
}

1
client/src/scenes/specsheet.js
View File

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