From e5caee458749db026948b4491a5a1634530a6272 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Sun, 23 Feb 2020 10:40:45 +0100
Subject: [PATCH] phase out App.UI.DOM.makeSpan
---
devNotes/colorCSS.txt | 2 +-
src/004-base/arcologyBuilding.js | 2 +-
src/arcologyBuilding/manufacturing.js | 4 ++--
src/arcologyBuilding/markets.js | 2 +-
src/arcologyBuilding/penthouse.js | 4 ++--
src/arcologyBuilding/shops.js | 10 +++++-----
src/js/main.js | 2 +-
src/js/slaveListing.js | 12 ++++++------
src/js/utilsDOM.js | 25 ++++---------------------
9 files changed, 23 insertions(+), 40 deletions(-)
diff --git a/devNotes/colorCSS.txt b/devNotes/colorCSS.txt
index b0f4d786f71..64f6398d673 100644
--- a/devNotes/colorCSS.txt
+++ b/devNotes/colorCSS.txt
@@ -3,7 +3,7 @@ class names that are not final are marked, this list is NOT exhaustive and subje
Note for mass replacing: The following cases have to be checked:
@@.trust.inc;
<span class="trust inc">
- App.UI.DOM.makeSpan('string', ['trust', 'inc']);
+ App.UI.DOM.makeElement('string', 'string', ['trust', 'inc']);
CLASS - COLOR
diff --git a/src/004-base/arcologyBuilding.js b/src/004-base/arcologyBuilding.js
index c9999c606da..262d9d94a57 100644
--- a/src/004-base/arcologyBuilding.js
+++ b/src/004-base/arcologyBuilding.js
@@ -155,7 +155,7 @@ App.Arcology.Cell.BaseCell = class extends App.Entity.Serializable {
if (cost > 0 || note === undefined) {
note = ` Costs ${cashFormat(cost)}${note !== undefined ? ` ${note}` : ""}.`;
}
- div.append(App.UI.DOM.makeSpan(note, "detail"));
+ App.UI.DOM.appendNewElement("span", note, div, "detail");
if (domNote !== undefined) {
div.append(domNote); // this only exists for the farmyard, remove once that is out of alpha
diff --git a/src/arcologyBuilding/manufacturing.js b/src/arcologyBuilding/manufacturing.js
index 5b8eba047b2..2d78e9dae99 100644
--- a/src/arcologyBuilding/manufacturing.js
+++ b/src/arcologyBuilding/manufacturing.js
@@ -65,7 +65,7 @@ App.Arcology.Cell.Manufacturing = class extends App.Arcology.Cell.BaseCell {
case "Weapon Manufacturing":
return App.UI.DOM.passageLink("Weapons Manufacturing", "weaponsManufacturing");
default:
- return App.UI.DOM.makeSpan(`ERROR: invalid type: ${this.type}`, "error");
+ return App.UI.DOM.makeElement("span", `ERROR: invalid type: ${this.type}`, "error");
}
}
@@ -205,7 +205,7 @@ App.Arcology.Cell.Manufacturing = class extends App.Arcology.Cell.BaseCell {
thisCell.type = "Farmyard";
}, cost, "and will incur upkeep costs",
// this only exists for the farmyard, remove feature once that is out of alpha
- App.UI.DOM.makeSpan("Alpha Content!", "warning")
+ App.UI.DOM.makeElement("span", "Alpha Content!", "warning")
));
}
}
diff --git a/src/arcologyBuilding/markets.js b/src/arcologyBuilding/markets.js
index 35bb94ba69f..ac6c74bb9ed 100644
--- a/src/arcologyBuilding/markets.js
+++ b/src/arcologyBuilding/markets.js
@@ -53,7 +53,7 @@ App.Arcology.Cell.Market = class extends App.Arcology.Cell.BaseCell {
case "Corporate Market":
return App.UI.DOM.passageLink("Corporate Market", "Corporate Market");
default:
- return App.UI.DOM.makeSpan("ERROR: invalid type: " + this.type, "error");
+ return App.UI.DOM.makeElement("span", "ERROR: invalid type: " + this.type, "error");
}
}
diff --git a/src/arcologyBuilding/penthouse.js b/src/arcologyBuilding/penthouse.js
index bf7fb1923ea..458774aa974 100644
--- a/src/arcologyBuilding/penthouse.js
+++ b/src/arcologyBuilding/penthouse.js
@@ -25,7 +25,7 @@ App.Arcology.Cell.Penthouse = class extends App.Arcology.Cell.BaseCell {
const fragment = document.createDocumentFragment();
const link = App.UI.DOM.passageLink("Penthouse", "Manage Penthouse");
- const hotkey = App.UI.DOM.makeSpan("[P]", "hotkey");
+ const hotkey = App.UI.DOM.makeElement("span", "[P]", "hotkey");
if (V.verticalizeArcologyLinks === 0) {
const div = document.createElement("div");
div.append(link, " ", hotkey);
@@ -96,7 +96,7 @@ App.Arcology.Cell.Penthouse = class extends App.Arcology.Cell.BaseCell {
const desc = `(${numberWithPluralOne(V.incubator - V.tanks.length, "empty tank")})`;
if (V.readySlaves > 0) {
- wrapper.append(createFacilityDiv(link, desc, App.UI.DOM.makeSpan("[!]", "noteworthy")));
+ wrapper.append(createFacilityDiv(link, desc, App.UI.DOM.makeElement("span", "[!]", "noteworthy")));
} else {
wrapper.append(createFacilityDiv(link, desc));
}
diff --git a/src/arcologyBuilding/shops.js b/src/arcologyBuilding/shops.js
index b420082edde..3d2d7cd3da8 100644
--- a/src/arcologyBuilding/shops.js
+++ b/src/arcologyBuilding/shops.js
@@ -188,7 +188,7 @@ App.Arcology.Cell.Shop = class extends App.Arcology.Cell.BaseCell {
break;
case "Roman Revivalist":
fragment.append("dedicated to Roman Revivalism. Since the forums are out on the arcology's plazas, there are fewer stores here. There are eateries, from which the sharp smell of ",
- App.UI.DOM.makeSpan("garum", "note"),
+ App.UI.DOM.makeElement("span", "garum", "note"),
" is distinctly identifiable, but most of the space is occupied by hypocaust baths, which are free to enter but include various concession stands run by slaves.",
App.UI.DOM.linkReplace("Clean yourself",
"A good Roman trip to the baths serves to cleanse, but it's a social experience, too. After being oiled down by a skilled slave, you work out in the proper nude, and then have the oil and any dirt scraped off your skin with by another slave. Then you make your way across the heated floor through a set of baths of varying temperatures, ending in a large and egalitarian space where many naked citizens of the new Rome are sharing the news of the day. You're welcomed with surprise, but also with comradeship, and made to feel welcome."));
@@ -205,11 +205,11 @@ App.Arcology.Cell.Shop = class extends App.Arcology.Cell.BaseCell {
break;
case "Edo Revivalist":
fragment.append("dedicated to Edo Revivalism. There are strict restrictions on the establishments' décor here, so ",
- App.UI.DOM.makeSpan("tatami", "note"),
+ App.UI.DOM.makeElement("span", "tatami", "note"),
" mats and paper partitions are ubiquitous. There are handsome ",
- App.UI.DOM.makeSpan("sake", "note"),
+ App.UI.DOM.makeElement("span", "sake", "note"),
" shops and tea rooms offering the traditional ceremony, and ",
- App.UI.DOM.makeSpan("kabuki", "note"),
+ App.UI.DOM.makeElement("span", "kabuki", "note"),
" theaters offering the traditional performance, with modern plots and themes. ",
App.UI.DOM.linkReplace("See a show",
"As soon as you enter a theater, the play stops, and refined slave attendants usher you forward to the place of honor. None of the citizens present resent the interruption; having you here is a great addition to the performance. The actors bow deeply to you and resume. The classical dance drama is almost impenetrable to outsiders, and the modernity of the characters and events would not be at all decipherable. Once you catch the thread, though, the richness of the allegory towards Free Cities personages and events is quite enjoyable."));
@@ -293,7 +293,7 @@ App.Arcology.Cell.Shop = class extends App.Arcology.Cell.BaseCell {
}
break;
default:
- fragment.append(App.UI.DOM.makeSpan(`ERROR: bad shop type: ${this.type}`, "error"));
+ App.UI.DOM.appendNewElement("span", `ERROR: bad shop type: ${this.type}`, fragment, "error");
}
if (this.owner === 1 && this.type === "Shops") {
diff --git a/src/js/main.js b/src/js/main.js
index c817c75707e..99f8ed023c0 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -25,7 +25,7 @@ App.MainView.useGuard = function() {
return outerDiv;
}
- outerDiv.append(App.UI.DOM.makeSpan(App.Interact.guardPose(guard), "scene-intro"));
+ App.UI.DOM.appendNewElement("span", App.Interact.guardPose(guard), outerDiv, "scene-intro");
function setEnvironment() {
V.activeSlave = guard;
diff --git a/src/js/slaveListing.js b/src/js/slaveListing.js
index 4c9bd8e53b6..9e67529d96a 100644
--- a/src/js/slaveListing.js
+++ b/src/js/slaveListing.js
@@ -462,16 +462,16 @@ App.UI.SlaveList.Decoration = {};
*/
App.UI.SlaveList.Decoration.penthousePositions = (slave) => {
if (App.Data.Facilities.headGirlSuite.manager.assignment === slave.assignment) {
- return App.UI.DOM.makeSpan('HG', ['lightcoral', 'strong']);
+ return App.UI.DOM.makeElement("span", 'HG', ['lightcoral', 'strong']);
}
if (App.Data.Facilities.penthouse.manager.assignment === slave.assignment) {
- return App.UI.DOM.makeSpan('RC', ['lightcoral', 'strong']);
+ return App.UI.DOM.makeElement("span", 'RC', ['lightcoral', 'strong']);
}
if (App.Data.Facilities.armory.manager.assignment === slave.assignment) {
- return App.UI.DOM.makeSpan('BG', ['lightcoral', 'strong']);
+ return App.UI.DOM.makeElement("span", 'BG', ['lightcoral', 'strong']);
}
if (Array.isArray(State.variables.personalAttention) && State.variables.personalAttention.findIndex(s => s.ID === slave.ID) !== -1) {
- return App.UI.DOM.makeSpan('PA', ['lightcoral', 'strong']);
+ return App.UI.DOM.makeElement("span", 'PA', ['lightcoral', 'strong']);
}
return null;
};
@@ -1187,11 +1187,11 @@ App.UI.SlaveList.slaveSelectionList = function() {
const listPostNote = options.expCheck ?
(options.postNote ?
(s, i) => options.expCheck(s) ? App.UI.DOM.combineNodes(
- App.UI.DOM.makeSpan("Has applicable career experience.", "lime"),
+ App.UI.DOM.makeElement("span", "Has applicable career experience.", "lime"),
document.createElement("br"),
options.postNote(s, i)
) : options.postNote(s, i) :
- (s) => options.expCheck(s) ? App.UI.DOM.makeSpan("Has applicable career experience.", "lime") : null) :
+ (s) => options.expCheck(s) ? App.UI.DOM.makeElement("span", "Has applicable career experience.", "lime") : null) :
options.postNote ?
(s, i) => options.postNote(s, i) :
() => null;
diff --git a/src/js/utilsDOM.js b/src/js/utilsDOM.js
index 9fde22c6757..5588aa9ff23 100644
--- a/src/js/utilsDOM.js
+++ b/src/js/utilsDOM.js
@@ -126,15 +126,15 @@ App.UI.DOM.disabledLink = function(link, reasons) {
* @param {string} tag - valid HTML tag
* @param {string|Node} content
* @param {string|Array<string>} [classNames]
- * @returns {Node}
+ * @returns {HTMLElement}
*/
App.UI.DOM.makeElement = function(tag, content, classNames) {
const element = document.createElement(tag);
if (classNames !== undefined) {
if (Array.isArray(classNames)) {
- r.classList.add(...classNames);
+ element.classList.add(...classNames);
} else {
- r.classList.add(classNames);
+ element.classList.add(classNames);
}
}
element.append(content);
@@ -146,7 +146,7 @@ App.UI.DOM.makeElement = function(tag, content, classNames) {
* @param {string|Node} content
* @param {ParentNode} parent
* @param {string|Array<string>} [classNames]
- * @returns {Node}
+ * @returns {HTMLElement}
*/
App.UI.DOM.appendNewElement = function(tag, content, parent, classNames) {
const element = App.UI.DOM.makeElement(tag, content, classNames);
@@ -154,23 +154,6 @@ App.UI.DOM.appendNewElement = function(tag, content, parent, classNames) {
return element;
};
-/**
- * @param {string} text
- * @param {string|string[]} [classNames]
- */
-App.UI.DOM.makeSpan = function makeSpan(text, classNames) {
- let r = document.createElement("span");
- if (classNames !== undefined) {
- if (Array.isArray(classNames)) {
- r.classList.add(...classNames);
- } else {
- r.classList.add(classNames);
- }
- }
- r.innerHTML = text;
- return r;
-};
-
/**
* @param {string} linkText
* @param {string|Node} newContent
--
GitLab