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

  create() {
    this.graphics = this.add.graphics({ fillStyle: { color: 0xffffff } });
    this.object = new Phaser.Geom.Circle(0, config.height / 2, 10);
    this.graphics.fillCircleShape(this.object);
    this.objectX = 100;
    this.speed = 1;
    this.inc = 0;
    this.diviseur = 7;

    const g = this.add.graphics({
      lineStyle: { width: 2, color: 0xffffff, alpha: 1 }
    });
    g.strokeLineShape(
      new Phaser.Geom.Line(
        100,
        config.height / 2 - 10,
        100,
        config.height / 2 + 10
      )
    );
    g.strokeLineShape(
      new Phaser.Geom.Line(
        100,
        config.height / 2,
        config.width - 100,
        config.height / 2
      )
    );
    g.strokeLineShape(
      new Phaser.Geom.Line(
        config.width - 100,
        config.height / 2 - 10,
        config.width - 100,
        config.height / 2 + 10
      )
    );

    const styleSin = {
      font: "24px Arial",
      fill: "#ffffff"
    };

    this.tText = this.add
      .text(config.width / 2, config.height / 1.75, "", styleSin)
      .setOrigin(0.5, 0.5);
  }

  update(time, delta) {
    let mod = this.inc % this.diviseur;

    this.objectX = ((config.width - 100 * 2) / this.diviseur) * mod;
    this.graphics.clear();
    this.graphics.fillStyle(0xffffff, 1.0);
    this.graphics.fillCircle(
      this.objectX + 100,
      this.object.y,
      this.object.radius
    );

    this.tText.setText(this.inc + " % " + this.diviseur + " = " + mod);

    this.inc += this.speed;
  }
}

const config = {
  type: Phaser.AUTO,
  transparent: true,
  width: 800,
  height: 600,
  scene: Example,
  fps: {
    target: 0.75,
    forceSetTimeOut: true
  }
};

const game = new Phaser.Game(config);