html, body {
  height: 100%;
}

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

a:link, a:visited {
  color: #7FDBFF;
}

a:hover, a:focus {
  color: #01FF70;
}

/* global Phaser, PhaserSceneWatcherPlugin */

const eventsCenter = new Phaser.Events.EventEmitter();

class MyScene extends Phaser.Scene {
  preload() {
    this.load.image("face", "assets/pics/bw-face.png");
    this.load.image("bikkuriman", "assets/sprites/bikkuriman.png");
  }

  create() {
    this.add.image(400, 300, "face");

    const self = this;

    eventsCenter.on("battleSceneStart", function (data) {
      console.log("data", data);
      let key = { key: "handle" };
      let battle_scene = new Battle_Scene(key);
      self.scene.add("handle", battle_scene, true);
      console.log("battle_scene", battle_scene);
      console.log("scene.get('handle')", self.scene.get("handle"));
    });

    this.time.delayedCall(1000, function () {
      eventsCenter.emit("battleSceneStart", "data");
    });
  }
}

class Battle_Scene extends Phaser.Scene {
  constructor(handle) {
    super(handle);
  }
  create() {
    console.log("battle_scene created and started");

    this.add.image(400, 300, "bikkuriman");
  }
  update() {}
}

const config = {
  width: 800,
  height: 600,
  scene: new MyScene(),
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  plugins: {
    global: [
      {
        key: "SceneWatcher",
        plugin: PhaserSceneWatcherPlugin,
        start: true
      }
    ]
  }
};

new Phaser.Game(config);