/* global colors, Phaser */

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

var config = {
  type: Phaser.CANVAS,
  width: 800,
  height: 800,
  fps: {
    limit: 33,
    target: 30,
    min: 5
  },
  input: {
    mouse: false,
    touch: false
  },
  loader: {
    baseURL: 'https://labs.phaser.io',
    crossOrigin: 'anonymous'
  },
  scene: []
};

var FONT = '20px monospace';

var text;
var fpsTx;
var deltaTx;

function dot(ctx, x, y, color) {
  rect(ctx, x, y, 1, 1, color);
}

function rect(ctx, x, y, w, h, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h, color);
}

function percent(val, precision) {
  return String((100 * val).toFixed(precision)).padStart(3, ' ') + '%';
}

Object.assign(colors, {
  delta: colors.red,
  rawDelta: colors.yellow,
  actualFps: colors.blue,
  rawDeltaInverse: colors.lime,
  deltaInverse: colors.olive,
  fpsLimit: colors.fuchsia,
  targetFps: colors.gray,
  targetDelta: colors.gray,
  now: colors.gray,
  time: colors.gray,
  frame: colors.gray,
  default: colors.gray
});

var displayScene = {
  key: 'display',

  active: true,

  create: function() {
    var loop = this.sys.game.loop;

    this.cameras.main.setAlpha(0.8);

    deltaTx = this.textures.createCanvas('delta', 800, 200);
    fpsTx = this.textures.createCanvas('fps', 800, 200);

    this.add.image(0, 0, 'delta')
      .setOrigin(0, 0)
      .setFlipY(true)
      .setScale(1, 1);

    this.add.image(0, 200, 'fps')
      .setOrigin(0, 0)
      .setFlipY(true)
      .setScale(1, 1);

    text = {
      actualFps: this.add.text(0, 400, '', {
        fill: colors.actualFps,
        font: FONT
      }),
      delta: this.add.text(0, 425, '', {
        fill: colors.delta,
        font: FONT
      }),
      frame: this.add.text(0, 450, '', {
        fill: colors.frame,
        font: FONT
      }),
      rawDelta: this.add.text(0, 475, '', {
        fill: colors.rawDelta,
        font: FONT
      }),
      rawDeltaInverse: this.add.text(0, 500, '', {
        fill: colors.rawDeltaInverse,
        font: FONT
      }),
      fpsLimit: this.add.text(0, 525, '', {
        fill: colors.fpsLimit,
        font: FONT
      }),
      targetFps: this.add.text(0, 550, '', {
        fill: colors.targetFps,
        font: FONT
      }),
      now: this.add.text(0, 575, '', {
        fill: colors.now,
        font: FONT
      }),
      time: this.add.text(0, 600, '', {
        fill: colors.time,
        font: FONT
      }),
      startTime: this.add.text(0, 625, '', {
        fill: colors.default,
        font: FONT
      }),
      'getDuration()': this.add.text(0, 650, '', {
        fill: colors.default,
        font: FONT
      }),
      inFocus: this.add.text(0, 675, '', {
        fill: colors.default,
        font: FONT
      })
    };

    this.input.keyboard
      .on('keydown-R', function() {
        loop.resetDelta();
      })
      .on('keydown-C', function() {
        deltaTx.clear();
        fpsTx.clear();
      });
  },

  update: function() {
    var loop = this.sys.game.loop;
    var frame = loop.frame % 800;
    var x = frame;
    var fpsVsTarget = loop.actualFps / loop.targetFps;
    var deltaVsTarget = 0.001 * loop.delta * loop.targetFps;
    
    // Delta
    
    var ctx = deltaTx.getContext();

    rect(ctx, x, 0, 12, deltaTx.height, colors.black);
    rect(ctx, x, 0, 1, ~~loop.delta, colors.delta);
    dot(ctx, x, ~~(1000 / loop.targetFps), colors.targetDelta);
    dot(ctx, x, ~~loop.rawDelta, colors.rawDelta);

    // FPS
    
    ctx = fpsTx.getContext();

    rect(ctx, x, 0, 12, fpsTx.height, colors.black);
    rect(ctx, x, 0, 1, ~~loop.actualFps, colors.actualFps);
    dot(ctx, x, ~~loop.targetFps, colors.targetFps);
    dot(ctx, x, ~~(1000 / loop.rawDelta), colors.rawDeltaInverse);
    dot(ctx, x, loop.fpsLimit, colors.fpsLimit);
    
    var now = performance.now();

    text.actualFps       .setText('actualFps     ' + loop.actualFps.toFixed(1) + ` (${percent(fpsVsTarget)})`);
    text.delta           .setText('delta         ' + loop.delta.toFixed(1) + ` (${percent(deltaVsTarget)})`);
    text.frame           .setText('frame         ' + loop.frame);
    text.rawDelta        .setText('rawDelta      ' + loop.rawDelta.toFixed(1));
    text.rawDeltaInverse .setText('rawDelta⁻¹    ' + ~~(1000 / loop.rawDelta));
    text.fpsLimit        .setText('fpsLimit      ' + loop.fpsLimit);
    text.targetFps       .setText('targetFps     ' + loop.targetFps);
    text.now             .setText('now           ' + loop.now.toFixed(1));
    text.time            .setText('time          ' + loop.time.toFixed(1));
    text.startTime       .setText('startTime     ' + loop.startTime.toFixed(1));
    text['getDuration()'].setText('getDuration() ' + loop.getDuration().toFixed(1));
    text.inFocus         .setText('inFocus       ' + loop.inFocus);
  }
};

var playScene = {
  key: 'play',

  active: true,

  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 200 }
    }
  },

  preload: function() {
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    this.load.image('red', 'assets/particles/red.png');
  },

  create: function() {
    this.cameras.main.setAlpha(0.875);
    
    var particles = this.add.particles(0, 0, 'red', {
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: 'ADD'
    });

    var logo = this.physics.add.image(400, 300, 'logo');

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    particles.startFollow(logo);
  }
};

config.scene.push(playScene, displayScene);

new Phaser.Game(config);