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

html,
body {
  height: 100%;
}

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

.tp-dfwv {
  width: 320px !important;
}

#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 { red, orange, yellow, green, aqua, blue, fuchsia } = colors.hexColors;

const { AddTimerEvent } = PhaserPluginInspector;

class Example extends Phaser.Scene {
  preload() {
    this.load.image("bg", "assets/pics/swirl1.jpg");
    this.load.image("morty", "assets/pics/morty.png");
  }

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

    const image = this.add.image(400, 300, "morty");

    const timerEvent = this.time.addEvent({
      delay: 500,
      startAt: 500,
      repeat: 5,
      args: [image],
      callback: function (image) {
        if (this.repeatCount % 2 === 0) {
          image.clearAlpha().clearTint();
        } else {
          image.setAlpha(0.5).setTintFill(aqua);
        }
      }
    });

    AddTimerEvent(timerEvent, pane);
  }
}

const gameConfig = {
  type: Phaser.WEBGL,
  width: 800,
  height: 600,
  scaleMode: Phaser.Scale.FIT,
  max: { width: 800, height: 600 },
  scene: Example,
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

const pane = new Tweakpane.Pane({ title: "Blink Inspector" });

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

new Phaser.Game(gameConfig);