113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
const Phaser = require('phaser');
|
|
|
|
const Header = require('./header');
|
|
const Menu = require('./menu');
|
|
const Combat = require('./combat');
|
|
const Zones = require('./zones');
|
|
const Background = require('./background');
|
|
const GameList = require('./game.list');
|
|
const StatSheet = require('./statsheet');
|
|
|
|
|
|
function renderCryps() {
|
|
const config = {
|
|
type: Phaser.AUTO,
|
|
// backgroundColor: '#181818',
|
|
resolution: window.devicePixelRatio,
|
|
// antialias: true,
|
|
width: 1600,
|
|
height: 1000,
|
|
physics: {
|
|
default: 'arcade',
|
|
arcade: {
|
|
debug: false,
|
|
gravity: { y: 0 },
|
|
},
|
|
},
|
|
scene: [
|
|
Background,
|
|
Header,
|
|
],
|
|
};
|
|
|
|
const game = new Phaser.Game(config);
|
|
|
|
function newMainScene(key, scene, data) {
|
|
let addScene = true;
|
|
const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet'];
|
|
ACTIVE_MAIN_SCENES.forEach((sKey) => {
|
|
if (game.scene.keys[sKey]) {
|
|
if (key === sKey) {
|
|
game.scene.keys[sKey].scene.restart(data);
|
|
addScene = false;
|
|
} else {
|
|
game.scene.keys[sKey].cleanUp();
|
|
}
|
|
}
|
|
});
|
|
if (addScene) game.scene.add(key, scene, true, data);
|
|
return true;
|
|
}
|
|
|
|
function changeData(parent, key, data) {
|
|
// Don't load other scenes if you're not logged in
|
|
if (!game.registry.get('account')) return false;
|
|
|
|
if (key === 'menu') {
|
|
if (data) return game.scene.add('Menu', Menu, true);
|
|
}
|
|
|
|
if (key === 'game') {
|
|
if (!data || game.registry.get('inGame')) return false;
|
|
return game.scene.add('Combat', Combat, true);
|
|
}
|
|
|
|
if (key === 'zone') {
|
|
newMainScene('Zones', Zones, data);
|
|
}
|
|
|
|
if (key === 'gameList') {
|
|
newMainScene('GameList', GameList, data);
|
|
}
|
|
|
|
if (key === 'crypStats') {
|
|
newMainScene('StatSheet', StatSheet, data);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
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);
|
|
|
|
resize();
|
|
|
|
return game;
|
|
}
|
|
|
|
module.exports = renderCryps;
|