<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 { aqua, white } = colors.hexColors;

const { AddTimeline } = 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 timeline = this.add.timeline([
      {
        at: 0,
        target: image,
        set: {
          alpha: 0.5,
          tint: aqua,
          tintFill: true
        }
      },
      {
        at: 500,
        target: image,
        set: {
          alpha: 1,
          tint: white,
          tintFill: false
        }
      },
      {
        // A delay before repeating.
        at: 1000
      }
    ]);


    const folder = AddTimeline(timeline, pane);

    timeline.repeat(2).play();

    timeline.on("complete", () => {
      console.info("Usually you should destroy timelines once complete.");
      
      // timeline.destroy();
      // folder.dispose();
    });
  }
}

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);