blaze-2d/lib/src/ui/text.js

A fast and simple WebGL 2 2D game engine written in TypeScript

import Logger from "../logger";
import BlazeElement from "./element";

  const kyRGTQvLnCnE = document.createElement("style");
  kyRGTQvLnCnE.textContent = `.blzText {
  font-family: var(--blz-mono);
  color: var(--blz-text);
}

.blzText--primary {
  color: var(--blz-text);
}

.blzText--secondary {
  color: var(--blz-text-secondary);
}

.blzText--highlight {
  color: var(--blz-primary);
}

.blzText--success {
  color: var(--blz-success);
}

.blzText--error {
  color: var(--blz-error);
}

.blzText--warning {
  color: var(--blz-warning);
}
`;
  document.head.appendChild(kyRGTQvLnCnE);
  
export var TextStyle;
(function (TextStyle) {
    TextStyle[TextStyle["PRIMARY"] = 0] = "PRIMARY";
    TextStyle[TextStyle["SECONDARY"] = 1] = "SECONDARY";
    TextStyle[TextStyle["HIGHLIGHT"] = 2] = "HIGHLIGHT";
    TextStyle[TextStyle["SUCCESS"] = 3] = "SUCCESS";
    TextStyle[TextStyle["ERROR"] = 4] = "ERROR";
    TextStyle[TextStyle["WARNING"] = 5] = "WARNING";
})(TextStyle || (TextStyle = {}));
export default class BlazeText extends BlazeElement {
    constructor(text, level, size, bold, style) {
        let element = document.createElement("p");
        if (typeof size === "number") {
            // when heading constructor
            if (level < 1 || level > 6)
                throw Logger.error("BlazeText", "level must be between 1 and 6.");
            element = document.createElement(`h${level}`);
        }
        element.classList.add("blzText");
        element.textContent = text;
        super(element);
        if (typeof size === "number") {
            // when heading constructor
            this.size = size;
            this.bold = bold;
            this.style = style !== undefined ? style : TextStyle.PRIMARY;
        }
        else {
            this.size = level;
            this.bold = size;
            this.style = bold !== undefined ? bold : TextStyle.PRIMARY;
        }
        this.applyStyles();
    }
    /**
     * Applies the `size`, `bold`, and `style` variables to the text's dom element.
     */
    applyStyles() {
        this.element.style.fontSize = "";
        this.element.style.fontWeight = "";
        this.element.classList.remove("blzText--primary", "blzText--secondary", "blzText--highlight");
        if (this.size)
            this.element.style.fontSize = `${this.size}rem`;
        if (this.bold)
            this.element.style.fontWeight = "bold";
        switch (this.style) {
            case TextStyle.PRIMARY:
                this.element.classList.add("blzText--primary");
                break;
            case TextStyle.SECONDARY:
                this.element.classList.add("blzText--secondary");
                break;
            case TextStyle.HIGHLIGHT:
                this.element.classList.add("blzText--highlight");
                break;
            case TextStyle.SUCCESS:
                this.element.classList.add("blzText--success");
                break;
            case TextStyle.ERROR:
                this.element.classList.add("blzText--error");
                break;
            case TextStyle.WARNING:
                this.element.classList.add("blzText--warning");
                break;
            default:
                break;
        }
    }
    /**
     * Sets the element's text.
     *
     * @param text The element's text
     */
    setText(text) {
        this.text = text;
        this.element.textContent = text;
    }
    /**
     * Gets the element's text.
     *
     * @returns The element's text
     */
    getText() {
        return this.text;
    }
}
//# sourceMappingURL=text.js.map