Minor refactor to UI building

src/config.ts

@@ -11,7 +11,7 @@ export class AppConfig {
     public readonly RELEASE_MODE = true;
     public readonly MAJOR_VERSION = 0;
     public readonly MINOR_VERSION = 7;
-    public readonly HOTFIX_VERSION = 9;
+    public readonly HOTFIX_VERSION = 10;
     public readonly VERSION_TYPE: 'd' | 'a' | 'r' = 'r'; // dev, alpha, or release build
     public readonly MINECRAFT_VERSION = '1.19.3';
 

src/ui/elements/config_element.ts

@@ -92,9 +92,11 @@ export abstract class ConfigUIElement<T, F> extends BaseUIElement<F> {
 
     public override generateHTML() {
         return `
-            ${this._labelElement.generateHTML()}
-            <div class="prop-value-container">
-                ${this._generateInnerHTML()}
+            <div class="property">
+                ${this._labelElement.generateHTML()}
+                <div class="prop-value-container">
+                    ${this._generateInnerHTML()}
+                </div>
             </div>
         `;
     }

src/ui/layout.ts

@@ -23,6 +23,7 @@ import { SliderElement } from './elements/slider';
 import { ToolbarItemElement } from './elements/toolbar_item';
 import { VectorSpinboxElement } from './elements/vector_spinbox';
 import { AppIcons } from './icons';
+import { HTMLBuilder } from './misc';
 
 export interface Group {
     label: string;
@@ -436,63 +437,56 @@ export class UI {
     }
 
     public build() {
-        const groupHTML: { [key: string]: string } = {};
-        for (const groupName in this._ui) {
-            const group = this._uiDull[groupName];
-            groupHTML[groupName] = `
-            <div class="property">
-                <div style="flex-grow: 1">
-                    <div class="h-div">
-                    </div>
-                </div>
-                <div class="group-heading">
-                    ${group.label.toUpperCase()}
-                </div>
-                <div style="flex-grow: 1">
-                    <div class="h-div">
-                    </div>
-                </div>
-            </div>
-            `;
-            groupHTML[groupName] += this._getGroupHTML(group);
-        }
+        // Build properties
+        {
+            const sidebarHTML = new HTMLBuilder();
 
-        let itemHTML = '';
-        for (const groupName of this.uiOrder) {
-            itemHTML += groupHTML[groupName];
-        }
+            sidebarHTML.add(`<div class="container">`);
+            {
+                sidebarHTML.add(HeaderUIElement.Get.generateHTML());
 
-        document.getElementById('properties')!.innerHTML = `<div class="container">
-        ` + HeaderUIElement.Get.generateHTML() + itemHTML + `</div>`;
+                for (const groupName of this.uiOrder) {
+                    const group = this._uiDull[groupName];
+                    sidebarHTML.add(this._getGroupHTML(group));
+                }
+            }
+            sidebarHTML.add(`</div>`);
+
+            sidebarHTML.placeInto('properties');
+        }
 
         // Build toolbar
-        let toolbarHTML = '';
-        // Left
-        toolbarHTML += '<div class="toolbar-column">';
-        for (const toolbarGroupName of this._toolbarLeft.groupsOrder) {
-            toolbarHTML += '<div class="toolbar-group">';
-            const toolbarGroup = this._toolbarLeftDull[toolbarGroupName];
-            for (const groupElementName of toolbarGroup.elementsOrder) {
-                const groupElement = toolbarGroup.elements[groupElementName];
-                toolbarHTML += groupElement.generateHTML();
-            }
-            toolbarHTML += '</div>';
-        }
-        toolbarHTML += '</div>';
-        // Right
-        toolbarHTML += '<div class="toolbar-column">';
-        for (const toolbarGroupName of this._toolbarRight.groupsOrder) {
-            toolbarHTML += '<div class="toolbar-group">';
-            const toolbarGroup = this._toolbarRightDull[toolbarGroupName];
-            for (const groupElementName of toolbarGroup.elementsOrder) {
-                const groupElement = toolbarGroup.elements[groupElementName];
-                toolbarHTML += groupElement.generateHTML();
-            }
-            toolbarHTML += '</div>';
-        }
-        toolbarHTML += '</div>';
+        {
+            const toolbarHTML = new HTMLBuilder();
 
-        document.getElementById('toolbar')!.innerHTML = toolbarHTML;
+            // Left
+            toolbarHTML.add('<div class="toolbar-column">');
+            for (const toolbarGroupName of this._toolbarLeft.groupsOrder) {
+                toolbarHTML.add('<div class="toolbar-group">');
+                const toolbarGroup = this._toolbarLeftDull[toolbarGroupName];
+                for (const groupElementName of toolbarGroup.elementsOrder) {
+                    const groupElement = toolbarGroup.elements[groupElementName];
+                    toolbarHTML.add(groupElement.generateHTML());
+                }
+                toolbarHTML.add('</div>');
+            }
+            toolbarHTML.add('</div>');
+
+            // Right
+            toolbarHTML.add('<div class="toolbar-column">');
+            for (const toolbarGroupName of this._toolbarRight.groupsOrder) {
+                toolbarHTML.add('<div class="toolbar-group">');
+                const toolbarGroup = this._toolbarRightDull[toolbarGroupName];
+                for (const groupElementName of toolbarGroup.elementsOrder) {
+                    const groupElement = toolbarGroup.elements[groupElementName];
+                    toolbarHTML.add(groupElement.generateHTML());
+                }
+                toolbarHTML.add('</div>');
+            }
+            toolbarHTML.add('</div>');
+
+            toolbarHTML.placeInto('toolbar');
+        }
     }
 
     public cacheValues(action: EAction) {
@@ -522,20 +516,31 @@ export class UI {
         for (const elementName of group.elementsOrder) {
             const element = group.elements[elementName];
             ASSERT(element !== undefined, `No element for: ${elementName}`);
-            groupHTML += this._buildSubcomponent(element, group.label === 'Materials');
+            groupHTML += element.generateHTML();
         }
         return groupHTML;
     }
 
     private _getGroupHTML(group: Group) {
         return `
+            <div class="property">
+                <div style="flex-grow: 1">
+                    <div class="h-div">
+                    </div>
+                </div>
+                <div class="group-heading">
+                    ${group.label.toUpperCase()}
+                </div>
+                <div style="flex-grow: 1">
+                    <div class="h-div">
+                    </div>
+                </div>
+            </div>
             <div id="subcomponents_${group.label}">
                 ${this._getGroupSubcomponentsHTML(group)}
             </div>
             <div class="property">
-                <div class="prop-value-container">
-                    ${group.submitButton.generateHTML()}
-                </div>
+                ${group.submitButton.generateHTML()}
             </div>
             <div class="property">
                 ${group.output.generateHTML()}
@@ -543,14 +548,6 @@ export class UI {
         `;
     }
 
-    private _buildSubcomponent(element: ConfigUIElement<any, any>, bigPadding: boolean) {
-        return `
-            <div class="property ${bigPadding ? 'big-padding' : ''}">
-                ${element.generateHTML()}
-            </div>
-        `;
-    }
-
     public getActionOutput(action: EAction) {
         const group = this._getEActionGroup(action);
         return group.output;

src/ui/misc.ts

@@ -1,3 +1,4 @@
+import { ASSERT } from '../util/error_util';
 import { OutputStyle } from './elements/output';
 
 type TMessage = {
@@ -9,6 +10,29 @@ interface IUIOutputElement {
     buildHTML(): string;
 }
 
+export class HTMLBuilder {
+    private _html: string;
+
+    public constructor() {
+        this._html = '';
+    }
+
+    public add(html: string) {
+        this._html += html;
+        return this;
+    }
+
+    public toString() {
+        return this._html;
+    }
+
+    public placeInto(elementId: string) {
+        const element = document.getElementById(elementId);
+        ASSERT(element !== null, `Could not place HTML into element with id '${elementId}'`);
+        element.innerHTML = this._html;
+    }
+}
+
 export class UITreeBuilder implements IUIOutputElement {
     private _rootLabel: string;
     private _children: Array<{ html: string, warning: boolean } | UITreeBuilder>;