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

const config = {
  width: 800,
  height: 600,
  scene: { preload, create, update },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
};

const A = 0;
const B = 0.2;
const C = 0.625;
const D = 1;

const targets = [ B, C, D, B, C, A, D ];

const followConfig = {
  positionOnPath: true,
  rotateToPath: true
};

const { red, white, yellow, blue } = colors.hexColors;

function preload() {
  this.load.image("lemming", "assets/sprites/lemming.png");
}

function create() {
  curve = new Phaser.Curves.Spline([
    50,
    400,
    200,
    200,
    350,
    300,
    500,
    500,
    700,
    400
  ]);

  const graphics1 = this.add.graphics().lineStyle(1, white, 0.5);

  curve.draw(graphics1);

  graphics1
    .fillStyle(red, 0.5)
    .fillPointShape(curve.getPoint(A), 16)
    .fillPointShape(curve.getPoint(B), 16)
    .fillPointShape(curve.getPoint(C), 16)
    .fillPointShape(curve.getPoint(D), 16);

  const graphics2 = this.add.graphics();

  const lemming = this.add.follower(curve, 50, 400, "lemming");

  const caption = this.add.text(60, 80, "👆 Click to change destination");

  this.input.on("pointerdown", function () {
    const to = targets.shift();

    if (to === undefined) {
      caption.setVisible(false);

      return;
    }
    
    const from = lemming.pathTween ? lemming.pathTween.getValue() : A;

    // Merge.
    Object.assign(followConfig, {
      from: from,
      to: to,
      duration: Math.abs(5000 * (from - to))
    });

    console.log(to, followConfig);

    lemming.stopFollow().startFollow(followConfig);
    
    // Drawing:

    const points = [];

    let i = 0;
    let t = from;
    const n = 32;
    const dt = (to - from) / n;

    while (i < n) {
      points.push(curve.getPoint(t));
      t += dt;
      i += 1;
    }

    points.push(curve.getPoint(to));

    graphics2
      .clear()
      .fillStyle(blue, 0.5)
      .fillPointShape(curve.getPoint(from), 16)
      .lineStyle(5, yellow, 0.5)
      .strokePoints(points);
  });
}

function update() {}

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

new Phaser.Game(config);