<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;
  padding: 1px 2px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

/* global Phaser, PhaserPluginInspector, Tweakpane */

const { AddFXController, AddGameObject, AddVideo } = PhaserPluginInspector;

const config = {
  plugins: PhaserPluginInspector.DefaultPluginsConfig,
  width: 854,
  height: 480,
  scene: { preload, create, update },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  title: "Phaser 3 Inspector Plugin",
  url: "https://github.com/samme/phaser-plugin-inspector"
};

function preload() {
  this.load.image("logo", "assets/sprites/phaser-large.png");
  this.load.video("retro", "assets/video/retro-outrun.mp4");
}

function create() {
  const video = this.add
    .video(427, 240, "retro")
    .setLoop(true)
    .setName("retro");

  const logo = this.add.image(427, 180, "logo");

  // const shine = logo.preFX.addShine();

  video.on("locked", () => {
    const message = this.add
      .text(427, 300, "👆 Click to play video", {
        font: "bold 48px sans-serif",
        fill: "hotpink",
        shadow: { color: "white", blur: 16, fill: true }
      })
      .setOrigin(0.5);

    video.on("unlocked", () => {
      message.destroy();
    });
  });

  video.on("play", () => {
    this.tweens.add({
      targets: logo,
      alpha: 0,
      duration: 1000,
      delay: 0,
      onComplete: () => {
        logo.destroy();
      }
    });
  });

  video.play();

  AddVideo(video, this.inspectorScene.pane);
  AddGameObject(video, this.inspectorScene.pane);
  // AddFXController(shine, this.inspectorScene.pane);
}

function update() {}

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

new Phaser.Game(config);