html, body {
  height: 100%;
}

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

.dg {
  font: caption !important;
  text-shadow: none !important;
}

.dg .property-name {
  font: small-caption !important;
  line-height: 27px !important;
}

const { blue, teal, yellow } = window.colors;

const game = new Phaser.Game({
  renderer: Phaser.CANVAS,

  state: {
    init() {},

    preload() {
      this.load.baseURL =
        "https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/";
      this.load.crossOrigin = "anonymous";
      this.load.image("atari", "sprites/atari800xl.png");
      this.load.image("box", "tests/320x200.png");
    },

    create() {
      this.box = this.add.sprite(100, 100, "box");
      this.box.name = "box";

      this.sprite = this.add.sprite(0, 0, "atari");
      this.sprite.inputEnabled = true;
      this.sprite.input.enableDrag(false);
      this.sprite.name = "atari";

      this.sprite.events.onDragStart.add(function (draggedSprite) {
        draggedSprite.parent.removeChild(draggedSprite);

        this.world.add(draggedSprite);
      }, this);

      this.box.addChild(this.sprite);
    },

    update() {},

    render() {
      const { debug } = this.game;

      debug.spriteInfo(this.box, 20, 320, teal);
      debug.spriteInfo(this.sprite, 420, 320, yellow);

      debug.phaser(420, 580);
    },

    shutdown() {}
  }
});