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

html, body {
  height: 100%;
}

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

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

/* global colors, Phaser */

function preload() {
  this.load.image("block", "assets/sprites/block.png");
  this.load.image("platform", "assets/sprites/platform.png");
  this.load.bitmapFont(
    "gem",
    "assets/fonts/bitmap/gem.png",
    "assets/fonts/bitmap/gem.xml"
  );
}

function create() {
  this.accum = 0;

  this.matter.add.image(325, -100, "block");
  this.matter.add.image(400, 300, "block");
  this.matter.add.image(450, 50, "block");

  this.matter.add.image(400, 550, "platform", null, { isStatic: true });

  this.text = this.add.bitmapText(0, 0, "gem");
}

function update(time, delta) {
  const { deltaMin } = this.matter.world.runner;

  this.accum += delta;

  while (this.accum >= deltaMin) {
    this.matter.step(deltaMin);

    this.accum -= deltaMin;
  }

  //

  this.text.setText(
    JSON.stringify(
      {
        "this.matter.world.engine.timing": this.matter.world.engine.timing,
        "this.game.loop": Phaser.Utils.Objects.Pick(this.game.loop, ["delta"]),
        "this.accum": this.accum
      },
      null,
      2
    )
  );
}

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

new Phaser.Game({
  width: 800,
  height: 600,
  scene: { preload, create, update },
  fps: {
    // panicMax: 0
  },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  physics: {
    default: "matter",
    matter: {
      autoUpdate: false
    }
  }
});