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

  create() {
    const style = { font: "18px Arial", fill: "#e2e4e9" };
    const graphics = this.add.graphics({
      lineStyle: { width: 1, color: 0xffffff, alpha: 0.5 }
    });
    const graphicCercle = this.add.graphics({
      lineStyle: { width: 1, color: 0xffffff, alpha: 0.5 }
    });
    this.singraph = this.add.graphics({
      lineStyle: { width: 2, color: 0x2fb170, alpha: 1 }
    });
    this.cosgraph = this.add.graphics({
      lineStyle: { width: 2, color: 0xf06090, alpha: 1 }
    });
    this.t = 0;

    // Barre horizontale
    graphics.strokeLineShape(
      new Phaser.Geom.Line(
        config.width / 2 - 100,
        config.height / 2,
        config.width / 2 + 100,
        config.height / 2
      )
    );
    // Barre vertical
    graphics.strokeLineShape(
      new Phaser.Geom.Line(
        config.width / 2,
        config.height / 2 - 100,
        config.width / 2,
        config.height / 2 + 100
      )
    );

    // axes
    this.add
      .text(config.width / 2 - 110, config.height / 2, "X -1", style)
      .setOrigin(1, 0.5);
    this.add
      .text(config.width / 2, config.height / 2 - 110, "Y\n-1", style)
      .setOrigin(0.5, 1);
    this.add
      .text(config.width / 2 + 110, config.height / 2, "1", style)
      .setOrigin(0, 0.5);
    this.add
      .text(config.width / 2, config.height / 2 + 110, "1", style)
      .setOrigin(0.5, 0);

    // Cercle
    this.graphicCercle = this.add.graphics();
    const centerX = config.width / 2;
    const centerY = config.height / 2;
    this.graphicCercle.lineStyle(2, 0xffffff, 0.1);
    this.graphicCercle.strokeCircle(centerX, centerY, 100);

    // Boule verte (sin)
    let color1 = Phaser.Display.Color.HexStringToColor("#2fb170");
    this.graphicSin = this.add.graphics({ fillStyle: { color: color1.color } });
    const shape = new Phaser.Geom.Circle(0, 0, 6);
    this.graphicSin.fillCircleShape(shape);
    this.graphicSin.x = 0;
    this.graphicSin.y = config.height / 2;

    // Boule rose (cos)
    let color2 = Phaser.Display.Color.HexStringToColor("#f06090");
    this.graphicCos = this.add.graphics({ fillStyle: { color: color2.color } });
    const shapex = new Phaser.Geom.Circle(0, 0, 6);
    this.graphicCos.fillCircleShape(shapex);
    this.graphicCos.x = config.width / 2;
    this.graphicCos.y = 0;

    // Boule blanche (sin + cos)
    let color3 = Phaser.Display.Color.HexStringToColor("#ffffff");
    this.graphicSinCos = this.add.graphics({
      fillStyle: { color: color3.color }
    });
    const shapexy = new Phaser.Geom.Circle(0, 0, 6);
    this.graphicSinCos.fillCircleShape(shapexy);

    // Log Sin
    const styleSin = {
      font: "15px Arial",
      fill: Phaser.Display.Color.RGBToString(
        color1.r,
        color1.g,
        color1.b,
        color1.a,
        "#"
      )
    };
    this.tText = this.add
      .text(config.width - 20, config.height - 40, "t: 0", styleSin)
      .setOrigin(1, 1);

    // Log Cos
    const styleCos = {
      font: "15px Arial",
      fill: Phaser.Display.Color.RGBToString(
        color2.r,
        color2.g,
        color2.b,
        color2.a,
        "#"
      )
    };
    this.tText2 = this.add
      .text(config.width - 20, config.height - 20, "t: 0", styleCos)
      .setOrigin(1, 1);

    // Log white
    const stylewhite = {
      font: "15px Arial",
      fill: Phaser.Display.Color.RGBToString(
        color3.r,
        color3.g,
        color3.b,
        color3.a,
        "#"
      )
    };
    this.tText3 = this.add
      .text(config.width - 20, config.height - 60, "t: 0", stylewhite)
      .setOrigin(1, 1);
  }

  update(time, delta) {
    this.t += delta / 5000;
    let d = this.t * Math.PI;
    let rag = config.width / 2 - 100 - 200;

    let s = Math.sin(d);
    this.graphicSin.x = s * rag + config.width / 2;

    let c = Math.cos(d);
    this.graphicCos.y = c * rag + config.height / 2;

    this.tText.setText("Math.sin(" + d.toFixed(2) + ") = " + s.toFixed(2));
    this.tText2.setText("Math.cos(" + d.toFixed(2) + ") = " + c.toFixed(2));
    this.tText3.setText("x = " + s.toFixed(2) + " y = " + c.toFixed(2));

    this.singraph.clear();
    this.singraph.strokeLineShape(
      new Phaser.Geom.Line(
        this.graphicSin.x,
        0,
        this.graphicSin.x,
        config.height
      )
    );
    this.cosgraph.clear();
    this.cosgraph.strokeLineShape(
      new Phaser.Geom.Line(
        0,
        this.graphicCos.y,
        config.width,
        this.graphicCos.y
      )
    );

    this.graphicSinCos.x = s * rag + config.width / 2;
    this.graphicSinCos.y = c * rag + config.height / 2;
  }
}

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

const game = new Phaser.Game(config);