ATLYSS TechPendium

class InfoboxBuilder {
    constructor() {
        this.float = "right";
        this.title = null;
        this.subtitle = null;
        this.image = null;
        this.rarity = null;
        this.description = null;
        this.sections = [];
        this.currentSection = null;
    }

    /* ============================= */
    /* Core Settings                 */
    /* ============================= */

    setFloat(value) {
        this.float = value === "left" ? "left" : "right";
        return this;
    }

    setTitle(title) {
        this.title = title;
        return this;
    }

    setSubtitle(subtitle) {
        this.subtitle = subtitle;
        return this;
    }

    setImage(imageText) {
        this.image = imageText;
        return this;
    }

    setRarity(rarity) {
        this.rarity = rarity;
        return this;
    }

    setDescription(text) {
        this.description = text;
        return this;
    }

    /* ============================= */
    /* Sections & Rows               */
    /* ============================= */

    startSection(title = null) {
        const section = {
            title,
            rows: []
        };

        this.sections.push(section);
        this.currentSection = section;

        return this;
    }

    addRow(label, value) {
        if (!this.currentSection) {
            this.startSection();
        }

        this.currentSection.rows.push({ label, value });
        return this;
    }

    /* ============================= */
    /* Render                        */
    /* ============================= */

    build() {
        const rarityClass = this.rarity
            ? ` rarity-${this.rarity}`
            : "";

        let html = `<div class="lg-infobox${rarityClass}" style="width:320px;">`;

        /* Header */
        if (this.title || this.subtitle) {
            html += `<div class="lg-infobox-header">`;

            if (this.title) {
                html += `<div class="lg-infobox-title">${this.title}</div>`;
            }

            if (this.subtitle) {
                html += `<div class="lg-infobox-subtitle">${this.subtitle}</div>`;
            }

            html += `</div>`;
        }

        /* Image */
        if (this.image) {
            html += `<div class="lg-infobox-image">${this.image}</div>`;
        }

        /* Sections */
        for (const section of this.sections) {
            html += `<div class="lg-infobox-section">`;

            if (section.title) {
                html += `<div class="lg-infobox-section-title">${section.title}</div>`;
            }

            for (const row of section.rows) {
                html += `<div class="lg-infobox-row"><span class="lg-infobox-label">${row.label}</span><span class="lg-infobox-value">${row.value}</span></div>`;
            }

            html += `</div>`;
        }

        /* Description */
        if (this.description) {
            html += `<div class="lg-infobox-description">${this.description}</div>`;
        }

        html += `</div>`;

        return html;
    }
}

exports = {
    InfoboxBuilder
};