import Phaser from "phaser";
import Handler from "./scenes/handler.js";
import Game from "./scenes/game.js";

// 9:16 portrait
const MAX_SIZE_WIDTH_SCREEN = 1920
const MAX_SIZE_HEIGHT_SCREEN = 1080
const MIN_SIZE_WIDTH_SCREEN = 150
const MIN_SIZE_HEIGHT_SCREEN = 270
const SIZE_WIDTH_SCREEN = 450
const SIZE_HEIGHT_SCREEN = 800

const config = {
  type: Phaser.CANVAS,
  parent: "phaser-example",
  scale: {
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_VERTICALLY,
    width: SIZE_WIDTH_SCREEN,
    height: SIZE_HEIGHT_SCREEN,
    min: {
      width: MIN_SIZE_WIDTH_SCREEN,
      height: MIN_SIZE_HEIGHT_SCREEN
    },
    max: {
      width: MAX_SIZE_WIDTH_SCREEN,
      height: MAX_SIZE_HEIGHT_SCREEN
    }
  },
  scene: [Handler, Game],
  canvasStyle: "display: block;"
};

const game = new Phaser.Game(config);

game.screenBaseSize = {
  maxWidth: MAX_SIZE_WIDTH_SCREEN,
  maxHeight: MAX_SIZE_HEIGHT_SCREEN,
  minWidth: MIN_SIZE_WIDTH_SCREEN,
  minHeight: MIN_SIZE_HEIGHT_SCREEN,
  width: SIZE_WIDTH_SCREEN,
  height: SIZE_HEIGHT_SCREEN
};

/*game.scale.on('resize', (gameSize, baseSize, displaySize, previousWidth, previousHeight) => {
  console.log("resize", gameSize, baseSize, displaySize, previousWidth, previousHeight);
});*/