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 */

var Preloader = new Phaser.Class({
  Extends: Phaser.Scene,

  initialize: function Preloader() {
    Phaser.Scene.call(this, "preloader");
  },

  preload: function () {
    this.load.image("raster", "assets/demoscene/raster-bw-64.png");
    this.load.image("planet", "assets/tests/space/purple-planet.png");
    this.load.atlas(
      "flares",
      "assets/particles/flares.png",
      "assets/particles/flares.json"
    );
  },

  create: function () {
    this.scene.start("rainbow");
  }
});

var Demo1 = new Phaser.Class({
  Extends: Phaser.Scene,

  initialize: function Demo1() {
    Phaser.Scene.call(this, "rainbow");
  },

  create: function () {
    var group = this.add.group();

    group.createMultiple({ key: "raster", repeat: 8 });

    var ci = 0;
    var colors = [
      0xef658c,
      0xff9a52,
      0xffdf00,
      0x31ef8c,
      0x21dfff,
      0x31aade,
      0x5275de,
      0x9c55ad,
      0xbd208c
    ];

    var _this = this;

    group.children.iterate(function (child) {
      child.x = 100;
      child.y = 300;
      child.depth = 9 - ci;

      child.tint = colors[ci];

      ci++;

      _this.tweens.add({
        targets: child,
        x: 700,
        yoyo: true,
        repeat: -1,
        ease: "Sine.easeInOut",
        duration: 1500,
        delay: 100 * ci
      });
    });

    this.input.once(
      "pointerup",
      function () {
        this.scene.transition({
          target: "space",
          duration: 3000,
          moveAbove: true
        });
      },
      this
    );
  }
});

var Demo2 = new Phaser.Class({
  Extends: Phaser.Scene,

  initialize: function Demo2() {
    Phaser.Scene.call(this, "space");
  },

  create: function () {
    var planet = this.add.image(400, 300, "planet").setScale(0);

    this.events.on(
      "transitionstart",
      function (fromScene, duration) {
        this.tweens.add({
          targets: planet,
          scaleX: 1,
          scaleY: 1,
          duration: duration
        });
      },
      this
    );

    this.events.on(
      "transitioncomplete",
      function () {
        var particles = this.add.particles(0, 0, "flares", {
          frame: ["red", "blue", "green", "yellow"],
          x: 400,
          y: 300,
          speed: 200,
          lifespan: 3000,
          blendMode: "ADD"
        });
      },
      this
    );

    this.events.on(
      "transitionout",
      function (toScene, duration) {
        this.tweens.add({
          targets: planet,
          scaleX: 0,
          scaleY: 0,
          duration: duration
        });
      },
      this
    );

    this.input.once(
      "pointerup",
      function () {
        this.scene.transition({
          target: "pac",
          duration: 5000,
          moveBehind: true
        });
      },
      this
    );
  }
});

var Demo3 = new Phaser.Class({
  Extends: Phaser.Scene,

  initialize: function Demo3() {
    Phaser.Scene.call(this, "pac");

    this.pacX = 260;
    this.pacY = 300;
  },

  create: function () {
    this.pacX = 260;
    this.pacY = 300;

    var graphics = this.add.graphics();

    var _this = this;

    this.tweens.addCounter({
      from: 0,
      to: 30,
      duration: 200,
      yoyo: true,
      repeat: -1,
      onUpdate: function (tween) {
        var t = tween.getValue();

        graphics.clear();

        graphics.fillStyle(0xffffff, 1);

        if (this.pacX < 700) {
          graphics.fillCircle(580, this.pacY, 30);
          graphics.fillCircle(740, this.pacY, 30);
        }

        graphics.fillStyle(0xffff00, 1);
        graphics.slice(
          this.pacX,
          this.pacY,
          200,
          Phaser.Math.DegToRad(330 + t),
          Phaser.Math.DegToRad(30 - t),
          true
        );
        graphics.fillPath();

        graphics.fillStyle(0x000000, 1);
        graphics.fillEllipse(this.pacX, this.pacY - 120, 30, 90);
      },
      callbackScope: _this
    });

    this.input.once(
      "pointerup",
      function () {
        this.scene.transition({
          target: "rainbow",
          duration: 5000,
          moveBelow: true,
          onUpdate: this.transitionOut
        });
      },
      this
    );
  },

  transitionOut: function (progress) {
    this.pacX = 260 + 900 * progress;
  }
});

var config = {
  type: Phaser.WEBGL,
  width: 800,
  height: 600,
  backgroundColor: "#000000",
  parent: "phaser-example",
  scene: [Preloader, Demo1, Demo2, Demo3],
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  plugins: {
    global: [
      {
        key: "SceneWatcher",
        plugin: PhaserSceneWatcherPlugin,
        start: true
      }
    ]
  },
  callbacks: {
    postBoot: function (game) {
      // See Console
      game.plugins.get("SceneWatcher").watchAll();
    }
  }
};

window.game = new Phaser.Game(config);