[refactor] Moved createElement into its own TS file

This is the start at separating out UI related work from potentially backend
related work. This distinction will help when Web Workers can be
introduced to get around the background tab limitation for scripts.

src/ActiveScriptsUI.js

@@ -5,9 +5,10 @@ import {workerScripts,
 import {Player}                                     from "./Player";
 import {getServer}                                  from "./Server";
 import {dialogBoxCreate}                            from "../utils/DialogBox";
-import {printArray, createElement,
+import {printArray,
         createAccordionElement, removeElement,
         removeChildrenFromElement}                  from "../utils/HelperFunctions";
+import {createElement}                              from "../utils/uiHelpers/createElement";
 import {exceptionAlert}                             from "../utils/helpers/exceptionAlert";
 import {logBoxCreate}                               from "../utils/LogBox";
 import numeral                                      from "numeral/min/numeral.min";

src/Augmentations.js

@@ -12,10 +12,11 @@ import {Script, RunningScript}                          from "./Script";
 import {Server}                                         from "./Server";
 import {SourceFiles}                                    from "./SourceFile";
 import {dialogBoxCreate}                                from "../utils/DialogBox";
-import {createElement, createAccordionElement,
+import {createAccordionElement,
         removeChildrenFromElement, clearObject}         from "../utils/HelperFunctions";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                               from "../utils/JSONReviver";
+import {createElement}                                  from "../utils/uiHelpers/createElement";
 import {isString}                                       from "../utils/helpers/isString";
 
 //Augmentations

src/Bladeburner.js

@@ -12,12 +12,13 @@ import {KEY}                                        from "./Terminal";
 import {createProgressBarText}                      from "../utils/helpers/createProgressBarText";
 import {dialogBoxCreate}                            from "../utils/DialogBox";
 import {addOffset, clearObject,
-        createElement, removeChildrenFromElement,
+        removeChildrenFromElement,
         createPopup, appendLineBreaks,
         removeElementById, removeElement}           from "../utils/HelperFunctions";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                           from "../utils/JSONReviver";
 import numeral                                      from "numeral/min/numeral.min";
+import {createElement}                              from "../utils/uiHelpers/createElement";
 import {exceptionAlert}                             from "../utils/helpers/exceptionAlert";
 import {formatNumber}                               from "../utils/StringHelperFunctions";
 import {getRandomInt}                               from "../utils/helpers/getRandomInt";

src/CinematicText.js

@@ -1,9 +1,9 @@
-import {Engine}                             from "./engine";
+import {Engine}                    from "./engine";
 
-import {removeChildrenFromElement,
+import {removeChildrenFromElement} from "../utils/HelperFunctions";
-        createElement}                      from "../utils/HelperFunctions";
+import {createElement}             from "../utils/uiHelpers/createElement";
-import {exceptionAlert}                     from "../utils/helpers/exceptionAlert";
+import {exceptionAlert}            from "../utils/helpers/exceptionAlert";
-import {isString}                           from "../utils/helpers/isString";
+import {isString}                  from "../utils/helpers/isString";
 
 var cinematicTextFlag = false;
 

src/CompanyManagement.js

@@ -8,12 +8,13 @@ import {Player}                                         from "./Player";
 import Decimal                                          from "decimal.js";
 import {dialogBoxCreate}                                from "../utils/DialogBox";
 import {removeElementById,
-        createElement, createAccordionElement,
+        createAccordionElement,
         removeChildrenFromElement, createPopup,
         clearSelector}                                  from "../utils/HelperFunctions";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                               from "../utils/JSONReviver";
 import numeral                                          from "numeral/min/numeral.min";
+import {createElement}                                  from "../utils/uiHelpers/createElement";
 import {formatNumber, generateRandomString}             from "../utils/StringHelperFunctions";
 import {getRandomInt}                                   from "../utils/helpers/getRandomInt";
 import {isString}                                       from "../utils/helpers/isString";

src/CreateProgram.js

@@ -1,6 +1,6 @@
 import {CONSTANTS}          from "./Constants";
 import {Player}             from "./Player";
-import {createElement}      from "../utils/HelperFunctions";
+import {createElement}      from "../utils/uiHelpers/createElement";
 
 // a function that returns a requirement for a program that requires only that
 // the player has at least the given skill level.

src/Faction.js

@@ -11,8 +11,9 @@ import {Settings}                               from "./Settings";
 
 import {dialogBoxCreate}                        from "../utils/DialogBox";
 import {factionInvitationBoxCreate}             from "../utils/FactionInvitationBox";
-import {clearEventListeners, createElement,
+import {clearEventListeners,
         removeChildrenFromElement}              from "../utils/HelperFunctions";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                       from "../utils/JSONReviver";
 import numeral                                  from "numeral/min/numeral.min";

src/Gang.js

@@ -6,10 +6,10 @@ import {Player}                                 from "./Player";
 import {dialogBoxCreate}                        from "../utils/DialogBox";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                       from "../utils/JSONReviver";
-import {createElement,
+import {removeChildrenFromElement,
-        removeChildrenFromElement,
         createAccordionElement, createPopup,
         removeElementById, removeElement}       from "../utils/HelperFunctions";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import  numeral                                 from "numeral/min/numeral.min";
 import {formatNumber}                           from "../utils/StringHelperFunctions";
 import {getRandomInt}                           from "../utils/helpers/getRandomInt";

src/HacknetNode.js

@@ -5,10 +5,11 @@ import {iTutorialSteps, iTutorialNextStep,
         iTutorialIsRunning, currITutorialStep}  from "./InteractiveTutorial";
 import {Player}                                 from "./Player";
 import {dialogBoxCreate}                        from "../utils/DialogBox";
-import {clearEventListeners, createElement,
+import {clearEventListeners,
         getElementById}                         from "../utils/HelperFunctions";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                       from "../utils/JSONReviver";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import {formatNumber}                           from "../utils/StringHelperFunctions";
 
 /**

src/Location.js

@@ -15,7 +15,7 @@ import {Settings}                               from "./Settings";
 import {SpecialServerNames, SpecialServerIps}   from "./SpecialServerIps";
 
 import {dialogBoxCreate}                        from "../utils/DialogBox";
-import {clearEventListeners, createElement}     from "../utils/HelperFunctions";
+import {clearEventListeners}                    from "../utils/HelperFunctions";
 import {createRandomIp}                         from "../utils/IPAddress";
 import numeral                                  from "numeral/min/numeral.min";
 import {formatNumber}                           from "../utils/StringHelperFunctions";

src/Prestige.js

@@ -30,8 +30,8 @@ import {initStockMarket, initSymbolToStockMap,
 import {Terminal, postNetburnerText}            from "./Terminal";
 import Decimal                                  from "decimal.js";
 import {dialogBoxCreate}                        from "../utils/DialogBox";
-import {createPopup, createElement,
+import {createPopup, removeElementById}         from "../utils/HelperFunctions";
-        removeElementById}                      from "../utils/HelperFunctions";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import {exceptionAlert}                         from "../utils/helpers/exceptionAlert";
 import {yesNoBoxCreate, yesNoBoxGetYesButton,
         yesNoBoxGetNoButton, yesNoBoxClose}     from "../utils/YesNoBox";

src/SaveObject.js

@@ -19,10 +19,11 @@ import {loadSpecialServerIps, SpecialServerIps} from "./SpecialServerIps";
 import {loadStockMarket, StockMarket}           from "./StockMarket";
 import {dialogBoxCreate}                        from "../utils/DialogBox";
 import {gameOptionsBoxClose}                    from "../utils/GameOptions";
-import {clearEventListeners, createElement,
+import {clearEventListeners,
         createPopup, removeElementById}         from "../utils/HelperFunctions";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                       from "../utils/JSONReviver";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import {formatNumber}                           from "../utils/StringHelperFunctions";
 
 import Decimal                                  from "decimal.js";

src/Script.js

@@ -36,7 +36,8 @@ import {parse, Node}                            from "../utils/acorn";
 import {dialogBoxCreate}                        from "../utils/DialogBox";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                       from "../utils/JSONReviver";
-import {compareArrays, createElement}           from "../utils/HelperFunctions";
+import {compareArrays}                          from "../utils/HelperFunctions";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import {formatNumber}                           from "../utils/StringHelperFunctions";
 import {roundToTwo}                             from "../utils/helpers/roundToTwo";
 

src/engine.js

@@ -1,7 +1,8 @@
 import {dialogBoxCreate}                        from "../utils/DialogBox";
 import {gameOptionsBoxOpen, gameOptionsBoxClose}from "../utils/GameOptions";
-import {clearEventListeners, createElement,
+import {clearEventListeners,
         removeChildrenFromElement}              from "../utils/HelperFunctions";
+import {createElement}                          from "../utils/uiHelpers/createElement";
 import {exceptionAlert}                         from "../utils/helpers/exceptionAlert";
 import numeral                                  from "numeral/min/numeral.min";
 import {formatNumber,

utils/HelperFunctions.js

@@ -1,5 +1,6 @@
 //General helper functions
 import {isString}           from "./helpers/isString";
+import { createElement } from "./uiHelpers/createElement";
 
 //Returns the size (number of keys) of an object
 function sizeOfObject(obj) {
@@ -88,71 +89,6 @@ function getElementById(elementId) {
     return el;
 }
 
-function createElement(type, params={}) {
-    var el = document.createElement(type);
-    if (params.id)          {el.id = params.id;}
-    if (params.class)       {el.className = params.class;}
-    if (params.name)        {el.name = params.name;}
-    if (params.innerHTML)   {el.innerHTML = params.innerHTML;}
-    if (params.innerText)   {el.innerText = params.innerText;}
-    if (params.value)       {el.value = params.value;}
-    if (params.text)        {el.text = params.text;}
-    if (params.display)     {el.style.display = params.display;}
-    if (params.visibility)  {el.style.visibility = params.visibility;}
-    if (params.margin)      {el.style.margin = params.margin;}
-    if (params.marginLeft)  {el.style.marginLeft = params.marginLeft;}
-    if (params.marginTop)   {el.style.marginTop = params.marginTop;}
-    if (params.padding)     {el.style.padding = params.padding;}
-    if (params.color)       {el.style.color = params.color;}
-    if (params.border)      {el.style.border = params.border;}
-    if (params.float)       {el.style.cssFloat = params.float;}
-    if (params.fontSize)    {el.style.fontSize = params.fontSize;}
-    if (params.whiteSpace)  {el.style.whiteSpace = params.whiteSpace;}
-    if (params.width)       {el.style.width = params.width;}
-    if (params.backgroundColor) {
-        el.style.backgroundColor = params.backgroundColor
-    }
-    if (params.position)    {el.style.position = params.position;}
-    if (params.type)        {el.type = params.type;}
-    if (params.checked)     {el.checked = params.checked;}
-    if (params.for)         {el.htmlFor = params.for;}
-    if (params.pattern)     {el.pattern = params.pattern;}
-    if (params.maxLength)   {el.maxLength = params.maxLength;}
-    if (params.placeholder) {el.placeholder = params.placeholder;}
-    if (params.tooltip && params.tooltip !== "")     {
-        el.className += " tooltip";
-        el.appendChild(createElement("span", {
-            class:"tooltiptext",
-            innerHTML:params.tooltip
-        }));
-    } else if (params.tooltipleft) {
-        el.className += " tooltip";
-        el.appendChild(createElement("span", {
-            class:"tooltiptextleft",
-            innerHTML:params.tooltipleft
-        }));
-    }
-    if (params.href)        {el.href = params.href;}
-    if (params.target)      {el.target = params.target;}
-    if (params.tabIndex)    {el.tabIndex = params.tabIndex;}
-    if (params.clickListener) {
-        el.addEventListener("click", params.clickListener);
-    }
-    if (params.inputListener) {
-        el.addEventListener("input", params.inputListener);
-    }
-    if (params.changeListener) {
-        el.addEventListener("change", params.changeListener);
-    }
-    if (params.onkeyup) {
-        el.addEventListener("keyup", params.onkeyup);
-    }
-    if (params.onfocus) {
-        el.addEventListener("focus", params.onfocus);
-    }
-    return el;
-}
-
 function createPopup(id, elems) {
     var container = createElement("div", {
             class:"popup-box-container",
@@ -247,7 +183,6 @@ export {sizeOfObject,
         clearEventListenersEl,
         removeElementById,
         removeElement,
-        createElement,
         createAccordionElement,
         appendLineBreaks,
         removeChildrenFromElement,

utils/uiHelpers/createElement.ts

@@ -0,0 +1,221 @@
+interface ICreateElementAnchorOptions {
+    href?: string;
+    target?: string;
+    text?: string;
+}
+
+interface ICreateElementInputOptions {
+    checked?: boolean;
+    maxLength?: number;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    type?: string;
+    value?: string;
+}
+
+interface ICreateElementLabelOptions {
+    for?: string;
+}
+
+interface ICreateElementListenerOptions {
+    changeListener?(this: HTMLElement, ev: Event): any;
+    clickListener?(this: HTMLElement, ev: MouseEvent): any;
+    inputListener?(this: HTMLElement, ev: Event): any;
+    onfocus?(this: HTMLElement, ev: FocusEvent): any;
+    onkeyup?(this: HTMLElement, ev: KeyboardEvent): any;
+}
+
+interface ICreateElementStyleOptions {
+    backgroundColor?: string;
+    border?: string;
+    color?: string;
+    display?: string;
+    float?: string;
+    fontSize?: string;
+    margin?: string;
+    marginLeft?: string;
+    marginTop?: string;
+    padding?: string;
+    position?: string;
+    visibility?: string;
+    whiteSpace?: string;
+    width?: string;
+}
+
+interface ICreateElementTooltipOptions {
+    tooltip?: string;
+    tooltipleft?: string;
+}
+
+interface ICreateElementOptions extends
+    ICreateElementStyleOptions,
+    ICreateElementListenerOptions,
+    ICreateElementInputOptions,
+    ICreateElementAnchorOptions,
+    ICreateElementLabelOptions,
+    ICreateElementTooltipOptions {
+    /**
+     * CSS Class(es) to initially set.
+     */
+    class?: string;
+
+    /**
+     * A (hopefully) unique identifier for the element.
+     */
+    id?: string;
+
+    innerHTML?: string;
+    innerText?: string;
+    tabIndex?: number;
+}
+
+function setElementAnchor(el: HTMLAnchorElement, params: ICreateElementAnchorOptions) {
+    if (params.text) {
+        el.text = params.text;
+    }
+    if (params.href) {
+        el.href = params.href;
+    }
+    if (params.target) {
+        el.target = params.target;
+    }
+}
+
+function setElementInput(el: HTMLInputElement, params: ICreateElementInputOptions) {
+    if (params.name) {
+        el.name = params.name;
+    }
+    if (params.value) {
+        el.value = params.value;
+    }
+    if (params.type) {
+        el.type = params.type;
+    }
+    if (params.checked) {
+        el.checked = params.checked;
+    }
+    if (params.pattern) {
+        el.pattern = params.pattern;
+    }
+    if (params.maxLength) {
+        el.maxLength = params.maxLength;
+    }
+    if (params.placeholder) {
+        el.placeholder = params.placeholder;
+    }
+}
+
+function setElementLabel(el: HTMLLabelElement, params: ICreateElementLabelOptions) {
+    if (params.for) {
+        el.htmlFor = params.for;
+    }
+}
+
+function setElementListeners(el: HTMLElement, params: ICreateElementListenerOptions) {
+    if (params.clickListener) {
+        el.addEventListener("click", params.clickListener);
+    }
+    if (params.inputListener) {
+        el.addEventListener("input", params.inputListener);
+    }
+    if (params.changeListener) {
+        el.addEventListener("change", params.changeListener);
+    }
+    if (params.onkeyup) {
+        el.addEventListener("keyup", params.onkeyup);
+    }
+    if (params.onfocus) {
+        el.addEventListener("focus", params.onfocus);
+    }
+}
+
+function setElementStyle(el: HTMLElement, params: ICreateElementStyleOptions) {
+    if (params.display) {
+        el.style.display = params.display;
+    }
+    if (params.visibility) {
+        el.style.visibility = params.visibility;
+    }
+    if (params.margin) {
+        el.style.margin = params.margin;
+    }
+    if (params.marginLeft) {
+        el.style.marginLeft = params.marginLeft;
+    }
+    if (params.marginTop) {
+        el.style.marginTop = params.marginTop;
+    }
+    if (params.padding) {
+        el.style.padding = params.padding;
+    }
+    if (params.color) {
+        el.style.color = params.color;
+    }
+    if (params.border) {
+        el.style.border = params.border;
+    }
+    if (params.float) {
+        el.style.cssFloat = params.float;
+    }
+    if (params.fontSize) {
+        el.style.fontSize = params.fontSize;
+    }
+    if (params.whiteSpace) {
+        el.style.whiteSpace = params.whiteSpace;
+    }
+    if (params.width) {
+        el.style.width = params.width;
+    }
+    if (params.backgroundColor) {
+        el.style.backgroundColor = params.backgroundColor;
+    }
+    if (params.position) {
+        el.style.position = params.position;
+    }
+}
+
+function setElementTooltip(el: HTMLElement, params: ICreateElementTooltipOptions) {
+    if (params.tooltip && params.tooltip !== "")     {
+        el.className += " tooltip";
+        el.appendChild(createElement("span", {
+            class: "tooltiptext",
+            innerHTML: params.tooltip,
+        }));
+    } else if (params.tooltipleft) {
+        el.className += " tooltip";
+        el.appendChild(createElement("span", {
+            class: "tooltiptextleft",
+            innerHTML: params.tooltipleft,
+        }));
+    }
+}
+
+export function createElement(tagName: string, params: ICreateElementOptions = {}) {
+    const el: HTMLElement = document.createElement(tagName);
+
+    if (params.id) {
+        el.id = params.id;
+    }
+    if (params.class) {
+        el.className = params.class;
+    }
+    if (params.innerHTML) {
+        el.innerHTML = params.innerHTML;
+    }
+    if (params.innerText) {
+        el.innerText = params.innerText;
+    }
+    if (params.tabIndex) {
+        el.tabIndex = params.tabIndex;
+    }
+
+    setElementAnchor(el as HTMLAnchorElement, params);
+    setElementInput(el as HTMLInputElement, params);
+    setElementLabel(el as HTMLLabelElement, params);
+    setElementListeners(el, params);
+    setElementStyle(el, params);
+    setElementTooltip(el, params);
+
+    return el;
+}