class Example extends Phaser.Scene {
  preload() {}

  create() {
    const style = { font: "15px Arial", fill: "#e2e4e9" };
    //    'Linear'
    const formulas = ["Quad"];

    const split = config.height / (formulas.length + 1);
    const yp = split / 3;
    let clr = Phaser.Display.Color.HSVToRGB(1, 0, 1).color;
    const graphics = this.add.graphics({
      lineStyle: { width: 2, color: 0xffffff, alpha: 0.1 }
    });

    this.add.text(20, split / 2.33, "Linear", style).setOrigin(0, 0.5);
    this.animate(split / 2.33, "Linear", clr);

    graphics.strokeLineShape(new Phaser.Geom.Line(200, 0, 200, 800)); // depart
    graphics.strokeLineShape(new Phaser.Geom.Line(700, 0, 700, 800)); // arrivée

    formulas.forEach((f, index) => {
      const y = split * (index + 1);

      clr = Phaser.Display.Color.HSVToRGB(0.2, 1, 1).color;
      this.add.text(20, y, "easeIn", style).setOrigin(0, 0.5);
      this.animate(y, f + ".easeIn", clr);

      clr = Phaser.Display.Color.HSVToRGB(0.4, 1, 1).color;
      this.add.text(20, y + yp, "easeOut", style).setOrigin(0, 0.5);
      this.animate(y + yp, f + ".easeOut", clr);

      clr = Phaser.Display.Color.HSVToRGB(0.6, 1, 1).color;
      this.add.text(20, y + yp + yp, "easeInOut", style).setOrigin(0, 0.5);
      this.animate(y + yp + yp, f + ".easeInOut", clr);
    });
  }

  animate(y, ease, clr) {
    const graphics = this.add.graphics({ fillStyle: { color: clr } });
    const shape = new Phaser.Geom.Circle(0, 0, 6);
    graphics.fillCircleShape(shape);
    graphics.x = 200;
    graphics.y = y;
    this.tweens.add({
      targets: graphics,
      x: 700,
      ease: ease,
      duration: 5000,
      repeat: -1,
      repeatDelay: 1000,
      hold: 1000,
      delay: 1000
    });
  }
}

const config = {
  type: Phaser.AUTO,
  transparent: true,
  width: 800,
  height: 200,
  scene: Example
};

const game = new Phaser.Game(config);