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

import TextLine from "./TextLine.js";
import TextAlignment from "./TextAlignment.js";
import UserInterfaceElement from "./UserInterfaceElement.js";

export default class TextBox extends UserInterfaceElement
{
    constructor(text, width, context)
    {
        super();
        this.text = text;
        this.width = width;
        this.colorText = 'red';
        this.colorShadow = 'black';
        this.colorBorder = 'black';
        this.hasShadow = true;
        this.hasBorder = true;
        this.font = 'Silkscreen';
        this.textSize = 48;
        this.alignment = TextAlignment.CENTER;
        this.verticalAlignment = TextAlignment.BOTTOM;
        this.lines = [];

        this.updateLines(width, context);
    }

    updateLines(width, context)
    {
        context.font = this.textSize + 'px ' + this.font;
        this.lines = this.getLinesForWidth(this.text, context, width)
    }

    animate(msForChar = 100, timeoutMilliseconds = 0)
    {
        let milliseconds = 0;

        setTimeout(
            () => {
                for (let l = 0; l < this.lines.length; l++) {
                    this.lines[l].chars = 0;
                    setTimeout(
                        () => {
                            this.lines[l].animate(msForChar);
                        }, milliseconds
                    );

                    milliseconds += this.lines[l].text.length * msForChar;
                }
            }, timeoutMilliseconds
        );
    }

    draw(context, x = null, y = null)
    {
        if (x === null && y === null) {
            x = this.position.x;
            y = this.position.y;
        }

        if (this.verticalAlignment === TextAlignment.BOTTOM) {
            let currentHeight = y;

            for (let l = this.lines.length - 1; l >= 0; l--) {
                if (this.lines[l].chars > 0) {
                    this.lines[l].draw(context, x, currentHeight);
                    currentHeight -= this.textSize;
                }
            }

            return;
        }

        this.lines.forEach(
            (line, index) => {
                line.draw(context, x, y + this.textSize * index);
            }
        )
    }

    getLinesForWidth(text, context, width)
    {
        let words = text.split(' ');
        let lines = [];
        let buffer = words[0];

        for (let w = 1; w < words.length; w++) {
            let bufferNew = buffer === '' ? words[w] : buffer + ' ' + words[w];

            if (context.measureText(bufferNew).width > width) {
                lines.push(this.getLine(buffer));
                bufferNew = words[w];
            }

            buffer = bufferNew;
        }

        if (buffer !== '') {
            lines.push(this.getLine(buffer));
        }

        return lines;
    }

    getLine(text)
    {
        let line = new TextLine(text);

        line.font = this.font;
        line.size = this.textSize;
        line.colorText = this.colorText;
        line.colorShadow = this.colorShadow;
        line.alignment = this.alignment;
        line.hasShadow = this.hasShadow;
        line.hasBorder = this.hasBorder;
        line.colorBorder = this.colorBorder;

        return line;
    }
}