<footer><div id=version></div></footer>

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: #111 url(https://labs.phaser.io/assets/sprites/phaser3-logo.png) no-repeat left top;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.5)
}

/* global colors, Phaser */

const pane = new Tweakpane.Pane({ title: "Main Camera" });

class Example extends Phaser.Scene {
  init() {
    this.scale.on("resize", this.resize, this);

    const cam = this.cameras.main;
    const { worldView } = cam;
    const { gameSize } = this.scale;

    for (let k of "x y width height centerX centerY zoom".split(" ")) {
      pane.addMonitor(cam, k);
    }

    const fWorldView = pane.addFolder({ title: "World View" });
    for (let k of "x y width height left top right bottom".split(" ")) {
      fWorldView.addMonitor(worldView, k);
    }

    const fGame = pane.addFolder({ title: "Game" });
    fGame.addMonitor(gameSize, "width");
    fGame.addMonitor(gameSize, "height");
  }

  preload() {
    this.load.image("map", "assets/tests/camera/earthbound-scarab.png");
    this.load.image("ship", "assets/sprites/fmship.png");
  }

  create() {
    const cam = this.cameras.main;

    this.add.image(0, 0, "map").setOrigin(0).setScrollFactor(1);

    this.add.grid(0, 0, 1024, 2048, 256, 256, 0, 0.5).setOrigin(0, 0);

    this.cursors = this.input.keyboard.createCursorKeys();

    this.ship = this.add.image(512, 512, "ship");

    this.range = this.add
      .circle(0, 0, 256)
      .setStrokeStyle(2, colors.hexColors.red, 0.5);

    cam.setBounds(0, 0, 1024, 2048);
    cam.startFollow(this.ship);

    this.resize();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.ship.setAngle(-90);
      this.ship.x -= 4;
    } else if (this.cursors.right.isDown) {
      this.ship.setAngle(90);
      this.ship.x += 4;
    }

    if (this.cursors.up.isDown) {
      this.ship.setAngle(0);
      this.ship.y -= 4;
    } else if (this.cursors.down.isDown) {
      this.ship.setAngle(-180);
      this.ship.y += 4;
    }

    this.range.copyPosition(this.ship);
  }

  resize() {
    const cam = this.cameras.main;
    const { width, height } = cam;

    // Zoom to fill (scale to larger axis)
    cam.setZoom(Math.max(width / 512, height / 512));

    // Zoom to fit (scale to smaller axis)
    // cam.setZoom(Math.min(width / 512, height / 512));
  }
}

document.getElementById("version").textContent = `Phaser v${Phaser.VERSION}`;

new Phaser.Game({
  scaleMode: Phaser.Scale.RESIZE,
  pixelArt: true,
  scene: [Example],
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
});