<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 colors, Phaser, PhaserPluginInspector, Tweakpane */

const {
  AddGameObject,
  AddFXComponent,
  AddFXController
} = PhaserPluginInspector;

class Example extends Phaser.Scene {
  preload() {
    this.load.image("bg", "assets/skies/space4.png");
    this.load.image("lollipop", "assets/sprites/lollipop.png");
    this.load.image("gingerbread", "assets/sprites/gingerbread.png");
    this.load.image("cake", "assets/sprites/strawberry-cake.png");
  }

  create() {
    const preMethods = [
      "addBarrel",
      'addBloom',
      "addBlur",
      "addBokeh",
      "addCircle",
      // 'addColorMatrix',
      "addDisplacement",
      'addGlow',
      "addGradient",
      "addPixelate",
      "addReveal",
      "addShadow",
      "addShine",
      "addTiltShift",
      "addVignette",
      "addWipe"
    ];

    this.add.image(400, 300, "bg").setName("night sky");

    const preFXFolder = this.inspectorGame.pane.addFolder({
      title: "Pre Effects"
    });
    const goFolder = this.inspectorGame.pane.addFolder({
      title: "Game Objects"
    });
    const cakes = [];

    for (const m of preMethods) {
      const cake = this.add.image(0, 0, "cake").setName(`cake ${m}`);
      cake.state = m;
      cake.preFX.setPadding(4);
      const fx = cake.preFX[m]();
      AddFXController(fx, preFXFolder, { title: m });
      cakes.push(cake);
    }

    Phaser.Actions.GridAlign(cakes, {
      y: 20,
      width: 6,
      cellWidth: 120,
      cellHeight: 150
    });

    const lollipop = this.add.image(500, 400, "lollipop").setName("lollipop with grayscale and shadow");
    lollipop.preFX.setPadding(8);
    lollipop.preFX.addColorMatrix().grayscale();
    lollipop.preFX.addShadow();

    AddGameObject(lollipop, goFolder);
  }
}

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

new Phaser.Game({
  width: 800,
  height: 600,
  pixelArt: true,
  scene: Example,
  plugins: PhaserPluginInspector.DefaultPluginsConfig,
  audio: { disableAudio: true },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  fps: { limit: 10 },
  title: "Phaser 3 Inspector Plugin",
  url: "https://github.com/samme/phaser-plugin-inspector"
});