pie indicator phaser.js

const x = this.cameras.main.centerX;
    const y = 500;
    const radius = 200;
    const borderThickness = 8;
    const bgColor = 0x3c3d3c;
    const borderColor = 0xf2501c;
    const indicatorColor = 0xe91646;
    const data = { x, y, radius, borderThickness, bgColor, borderColor, indicatorColor };

    const ttlContainer = this.addTtlIndicator(this, data);
    this.updateTTLIndicator(this, ttlContainer);
    
    
    
    addTtlIndicator(scene, config) {
    // console.log("add ttl indicator");
    const white = 0xe6e2e3;

    const { x, y, radius, borderThickness, bgColor, borderColor, indicatorColor } = config;
    const ttlContainer = scene.add.container(x, y);
    ttlContainer.setDataEnabled();
    ttlContainer.setData('config', config);

    const graphics = scene.add.graphics().setName('graphics');

    graphics.clear();
    graphics.lineStyle(borderThickness, borderColor);
    graphics.strokeCircle(0, 0, radius);

    graphics.fillStyle(bgColor, 1);
    graphics.fillCircle(0, 0, radius + 20);

    graphics.fillStyle(indicatorColor, 1);
    graphics.beginPath();
    graphics.slice(0, 0, radius, Phaser.Math.DegToRad(180), Phaser.Math.DegToRad(-160), true);
    graphics.fillPath();
    graphics.strokePath();
    graphics.closePath();
    // graphics.lineStyle(1, white);
    // graphics.lineStyle(12, 0x212221);
    // graphics.strokeCircle(0, 0, radius);

    ttlContainer.add(graphics);
    return ttlContainer;
  }

  updateTTLIndicator(scene, ttlContainer) {
    const graphics = ttlContainer.getByName('graphics');
    const config = ttlContainer.getData('config');

    const { radius, bgColor, borderColor, borderThickness, indicatorColor } = config;
    console.log('updateTTLIndicator', config);

    scene.tweens.addCounter({
      from: 0,
      to: 340, // modify here
      duration: 20000,
      onUpdate: function (tween) {
        // graphics.slice stuff
        graphics.clear();
        graphics.lineStyle(borderThickness, borderColor);
        graphics.strokeCircle(0, 0, radius);

        graphics.fillStyle(bgColor, 1);
        graphics.fillCircle(0, 0, radius - 4);

        graphics.fillStyle(indicatorColor, 1);
        // graphics.fillCircle(0, 0, radius);

        graphics.beginPath();
        graphics.slice(0, 0, radius, Phaser.Math.DegToRad(180), Phaser.Math.DegToRad(-160 + tween.getValue()), true);
        graphics.fillPath();
        graphics.strokePath();
        graphics.closePath();

        // console.log('graphics', tween.getValue());
        // graphics.slice(500,500,30,Phaser.Math.DegToRad(tween.getValue()),Phaser.Math.DegToRad(360))
      },
      onComplete: function () {
        console.log('timer empty');
      },
    });
  }