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="float:${this.float}; width:320px; margin:0 0 16px 16px;">
`;

        /* 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
};