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

  create() {
    const style = { font: "18px Arial", fill: "#e2e4e9" };

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

    let color1 = Phaser.Display.Color.HexStringToColor("#2fb170");
    this.graphicSin = this.add.graphics({ fillStyle: { color: color1.color } });
    const shape = new Phaser.Geom.Circle(0, 0, 10);
    this.graphicSin.fillCircleShape(shape);
    this.graphicSin.x = Math.sin(0) * 300 + config.width / 2;
    this.graphicSin.y = config.height / 2 - 30;

    let color2 = Phaser.Display.Color.HexStringToColor("#f06090");
    this.graphicCos = this.add.graphics({ fillStyle: { color: color2.color } });
    const shapex = new Phaser.Geom.Circle(0, 0, 10);
    this.graphicCos.fillCircleShape(shapex);
    this.graphicCos.x = Math.cos(0) * 300 + config.width / 2;
    this.graphicCos.y = config.height / 2 - 30;

    this.t = 0;
    const styleSin = {
      font: "15px Arial",
      fill: Phaser.Display.Color.RGBToString(
        color1.r,
        color1.g,
        color1.b,
        color1.a,
        "#"
      )
    };
    const styleCos = {
      font: "15px Arial",
      fill: Phaser.Display.Color.RGBToString(
        color2.r,
        color2.g,
        color2.b,
        color2.a,
        "#"
      )
    };
    this.tText = this.add
      .text(config.width / 2, config.height / 1.25, "t: 0", styleSin)
      .setOrigin(0.5, 0.5);

    this.tText2 = this.add
      .text(config.width / 2, config.height / 1.125, "t: 0", styleCos)
      .setOrigin(0.5, 0.5);
  }

  update(time, delta) {
    this.t += delta / 4000;
    let d = this.t * Math.PI;

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

    let c = Math.cos(d);
    this.graphicCos.x = c * 300 + config.width / 2;

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

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

const game = new Phaser.Game(config);