mr-crocs-adventures/js/ui/TextLine.js

import TextAlignment from "./TextAlignment.js";

export default class TextLine
{
    constructor(text, paused)
    {
        this.text = text;
        this.paused = paused;
        this.estimatedTextWidth = null;
        this.colorText = 'red';
        this.colorShadow = 'black';
        this.colorBorder = 'black';
        this.font = 'sans-serif';
        this.alphaText = 1.0;
        this.size = 32;
        this.alignment = TextAlignment.LEFT;
        this.chars = this.text.length;
        this.hasShadow = false;
        this.hasBorder = false;
    }

    animate(msPerChar = 100)
    {
        this.chars = 0;

        let process = setInterval(
            () => {
                if (this.paused) {
                    return;
                }

                this.chars++;

                if (this.chars === this.text.length) {
                    clearInterval(process);
                }
            }, msPerChar
        );
    }

    draw(context, x, y)
    {
        context.font = this.size + 'px ' + this.font;
        context.globalAlpha = this.alphaText;

        if (this.estimatedTextWidth === null) {
            this.estimatedTextWidth = Math.ceil(context.measureText(this.text).width);
        }

        switch (this.alignment) {
            case TextAlignment.LEFT:
                break;
            case TextAlignment.CENTER:
                x -= this.estimatedTextWidth * 0.5;
                break;
            case TextAlignment.RIGHT:
                x -= this.estimatedTextWidth;
                break;
        }

        this.drawShadow(context, x, y);

        let text = this.text;

        if (this.chars !== null && this.chars < this.text.length) {
            text = this.text.substr(0, this.chars);
        }

        context.fillStyle = this.colorText;
        context.fillText(text, x, y + this.size);

        this.drawBorder(context, x, y, text);
    }

    drawBorder(context, x, y, text)
    {
        if (this.hasBorder) {
            context.strokeStyle = this.colorBorder;
            context.strokeWidth = '1px';
            context.strokeText(text, x, y + this.size);
        }
    }

    drawShadow(context, x, y)
    {
        if (this.hasShadow) {
            context.fillStyle = this.colorShadow;
            context.fillText(this.text.substr(0, this.chars), x + 2, y + this.size + 2);
        }
    }
}