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

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.8);
  color: #eee;
}

var config = {
  width: 800,
  height: 600,
  pixelArt: true,
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var text;

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

function create() {
  var cam = this.cameras.main;
  var map = this.add.image(0, 0, "map").setOrigin(0, 0);

  // cam.setBounds(0, 0, map.displayWidth, map.displayHeight);
  cam.setZoom(2);

  text = this.add
    .text(400, 300, "", {
      font: "16px monospace",
      fill: "#0ff",
      backgroundColor: "#000c",
      fixedWidth: 200,
      fixedHeight: 300
    })
    .setScale(1 / cam.zoom)
    .setScrollFactor(0);

  this.input.on("pointermove", function (p) {
    if (!p.isDown) return;

    cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom;
    cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
  });
}

function update() {
  text.setText(
    JSON.stringify(
      this.input.activePointer,
      [
        "isDown",
        "downX",
        "downY",
        "worldX",
        "worldY",
        "x",
        "y",
        "position",
        "prevPosition"
      ],
      2
    )
  );
}

document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;

new Phaser.Game(config);