Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2025-03-08 03:24:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] Moved createElement into its own TS file

Browse Source 
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.
This commit is contained in:
Steven Evans
2018-07-05 00:38:00 -04:00
parent bdb935d104
commit 107f1de18d
16 changed files with 251 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/ActiveScriptsUI.js
View File

@ -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";

3
src/Augmentations.js
View File

@ -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

3
src/Bladeburner.js
View File

@ -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";

4
src/CinematicText.js
View File

@ -1,7 +1,7 @@
import {Engine} from "./engine";
import {removeChildrenFromElement,
createElement} from "../utils/HelperFunctions";
import {removeChildrenFromElement} from "../utils/HelperFunctions";
import {createElement} from "../utils/uiHelpers/createElement";
import {exceptionAlert} from "../utils/helpers/exceptionAlert";
import {isString} from "../utils/helpers/isString";

3
src/CompanyManagement.js
View File

@ -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";

2
src/CreateProgram.js
View File

@ -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.

3
src/Faction.js
View File

@ -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";

4
src/Gang.js
View File

@ -6,10 +6,10 @@ import {Player} from "./Player";
import {dialogBoxCreate} from "../utils/DialogBox";
import {Reviver, Generic_toJSON,
Generic_fromJSON} from "../utils/JSONReviver";
import {createElement,
removeChildrenFromElement,
import {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";

3
src/HacknetNode.js
View File

@ -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";
/**

2
src/Location.js
View File

@ -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";

4
src/Prestige.js
View File

@ -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,
removeElementById} from "../utils/HelperFunctions";
import {createPopup, removeElementById} from "../utils/HelperFunctions";
import {createElement} from "../utils/uiHelpers/createElement";
import {exceptionAlert} from "../utils/helpers/exceptionAlert";
import {yesNoBoxCreate, yesNoBoxGetYesButton,
yesNoBoxGetNoButton, yesNoBoxClose} from "../utils/YesNoBox";

3
src/SaveObject.js
View File

@ -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";

3
src/Script.js
View File

@ -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";

3
src/engine.js
View File

@ -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,

67
utils/HelperFunctions.js
View File

@ -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,

221
utils/uiHelpers/createElement.ts Normal file
View File

@ -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;
}