pie indicator.js

/* eslint-disable @typescript-eslint/indent */
import { scene } from 'components/controllers/SceneController';
import Phaser from 'phaser';

export interface PieIndicatorConfig extends Phaser.GameObjects.Graphics {
    x: number;
    y: number;
    radius: number;
    alpha: number;
    borderThickness: number;
    bgColor: number;
    borderColor: number;
    indicatorColor: number;
    indicatorBorderColor: number;
    lifeSpan: number;
    targetValue: number;

}

export default class HealthBar extends Phaser.GameObjects.Graphics {
    x: number;
    y: number;
    radius: number;
    alpha: number;
    borderThickness: number;
    bgColor: number;
    borderColor: number;
    indicatorColor: number;
    indicatorBorderColor: number;
    lifeSpan: number;
    targetValue: number; // end - now
    currentValue: number;// current value
    container: Phaser.GameObjects.Container;
    graphics: Phaser.GameObjects.Graphics;

    constructor(pieConfig: PieIndicatorConfig) {
        super(scene);
        const { x, y, radius, alpha, borderThickness, bgColor, borderColor, indicatorColor, indicatorBorderColor, lifeSpan, targetValue } = pieConfig;
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.alpha = alpha;
        this.borderThickness = borderThickness;
        this.bgColor = bgColor;
        this.borderColor = borderColor;
        this.indicatorColor = indicatorColor;
        this.indicatorBorderColor = indicatorBorderColor;
        this.lifeSpan = lifeSpan;
        this.targetValue = targetValue;

        this.container = scene.add.container(this.x, this.y).setName('pie-indicator');
        this.container.setDataEnabled();
        this.container.setData('config', pieConfig);
        this.graphics = scene.add.graphics().setName('graphics');

        this.draw();
    }

    draw(tween?: Phaser.Tweens.Tween): void {
        // handle drawing pie indicator
        this.graphics.clear();
        this.graphics.fillStyle(this.bgColor, this.alpha); // background transparent or not?
        this.graphics.fillCircle(0, 0, this.radius);

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

        this.graphics.fillStyle(this.indicatorColor, 1);
        this.graphics.beginPath();

        // current pie value
        this.currentValue = (360 / this.lifeSpan) * this.targetValue;

        this.graphics.slice(0, 0, this.radius, Phaser.Math.DegToRad(0), tween ? Phaser.Math.DegToRad(-this.currentValue + tween.getValue()) : Phaser.Math.DegToRad(-this.currentValue), true);
        this.graphics.fillPath();
        this.graphics.lineStyle(this.borderThickness, this.indicatorBorderColor);
        this.graphics.strokePath();
        this.graphics.closePath();
    }

    getCurrentPieValue() {
        return this.currentValue;
    }

    getCurrentPieIndicatorContainer() {
        return this.container;
    }

    updatePieIndicator() {
        const pieTween = scene.tweens.addCounter({
            from: 0,
            to: this.currentValue, // modify here
            duration: this.targetValue, // milliseconds
            onUpdate: function (tween: Phaser.Tweens.Tween) {
                this.draw(tween);
                // console.log('graphics', -currentValue + tween.getValue());
            },
            onComplete: function () {
                // console.log('timer completed clear graphics');
                pieTween.stop();
            },
        });
    }
}