RonaldoSetzer/GAME-Minesweeper

View on GitHub
src/minesweeper/views/components/CustomButton.ts

Summary

Maintainability
A
0 mins
Test Coverage
import { Container, Sprite, Texture } from "pixi.js";

import { AtlasKeys } from "./../../utils/AtlasKeys";
import { Colors } from "./../../utils/Colors";
import { PixiFactory } from "./../../utils/PixiFactory";

export class CustomButton extends Sprite {
    private _downState: Texture;
    private _overState: Texture;
    private _upState: Texture;

    private _isDown: boolean;
    private _isOver: boolean;

    private _ico: Sprite;
    private _labelText: Container;
    private _textValue: string;

    public get text(): string {
        return this._textValue;
    }

    constructor() {
        super(AtlasKeys.getTexture(AtlasKeys.BUTTON));

        const downStateTexture: Texture = AtlasKeys.getTexture(AtlasKeys.BUTTON);
        const upStateTexture: Texture = AtlasKeys.getTexture(AtlasKeys.BUTTON);

        this._downState = downStateTexture;
        this._overState = downStateTexture;
        this._upState = upStateTexture;

        this.setInitialValues();
        this.createInteractions();
    }
    public setIco(name: string): void {
        if (this._ico) {
            this.removeChild(this._ico);
        }

        this._ico = new Sprite(AtlasKeys.getTexture(name));
        this._ico.anchor.set(0.5);
        this._ico.tint = Colors.BUTTON_ICON;
        this.addChild(this._ico);
    }
    public setText(text: string): void {
        this._textValue = text;
        if (this._labelText) {
            this.removeChild(this._labelText);
        }

        this._labelText = PixiFactory.getButtonLabel(text);
        this.addChild(this._labelText);
    }
    private setInitialValues(): void {
        this.anchor.set(0.5);
        this.interactive = true;
        this.buttonMode = true;
    }
    private createInteractions(): void {
        this.on("pointerup", this.onButtonUp);
        this.on("pointerupoutside", this.onButtonUp);
        this.on("pointerdown", this.onButtonDown);
        this.on("pointerover", this.onButtonOver);
        this.on("pointerout", this.onButtonOut);
    }
    private onButtonDown(): void {
        this._isDown = true;
        this.texture = this._downState;
        this.scale.set(0.95, 0.95);
    }
    private onButtonOut(): void {
        this._isOver = false;
        this.texture = this._upState;
        this.scale.set(1, 1);
    }
    private onButtonOver(): void {
        this._isOver = true;
        this.texture = this._overState;
    }
    private onButtonUp(): void {
        this._isDown = false;
        this.scale.set(1, 1);

        if (this._isOver) {
            this.texture = this._overState;
        } else {
            this.texture = this._upState;
        }
    }
}