diff --git a/src/events/intro/introSummary.js b/src/events/intro/introSummary.js
index 32357cf84a0a625aa450a5ab62c4a085485b8b9f..1a2d27cbf306ef455dd495f79658350b9d6505c5 100644
--- a/src/events/intro/introSummary.js
+++ b/src/events/intro/introSummary.js
@@ -305,7 +305,6 @@ App.Intro.summary = function() {
App.UI.DOM.appendNewElement("h2", el, "Economy");
let options = new App.UI.OptionsGroup();
- let option;
V.localEcon = V.economy;
options.addOption("Economic climate", "baseDifficulty")
@@ -367,13 +366,10 @@ App.Intro.summary = function() {
}
/* closes V.customVariety is defined */
- el.append(options.render());
if (V.customVariety) {
- el.append(App.UI.nationalitiesDisplay());
+ options.addCustom(App.UI.nationalitiesDisplay());
}
- options = new App.UI.OptionsGroup();
-
options.addOption("", "plot")
.addValue("Enable non-erotic events", 1).on().customDescription("Game mode: <strong>two-handed</strong>. Includes non-erotic events concerning the changing world.")
.addValue("Disable non-erotic events", 0).off().customDescription("Game mode: <strong>one-handed</strong>. No non-erotic events concerning the changing world.");
@@ -493,13 +489,13 @@ App.Intro.summary = function() {
options = new App.UI.OptionsGroup();
options.addOption("The Special Force Mod is", "Toggle", V.SF)
- .addValue("Enabled", 1).on().addValue("Disabled", 0).off()
- .addComment(`This mod is initially from anon1888 but expanded by SFanon offers a lategame special (started out as security but changed to special in order to try and reduce confusion with CrimeAnon's separate Security Expansion (SecExp) mod) force, that is triggered after week 72.
+ .addValue("Enabled", 1).on().addValue("Disabled", 0).off();
+ options.addComment(`This mod is initially from anon1888 but expanded by SFanon offers a lategame special (started out as security but changed to special in order to try and reduce confusion with CrimeAnon's separate Security Expansion (SecExp) mod) force, that is triggered after week 72.
It is non-canon where it conflicts with canonical updates to the base game.`);
options.addOption("The Security Expansion Mod is", "secExpEnabled")
- .addValue("Enabled", 1).on().addValue("Disabled", 0).off()
- .addComment(`This mod introduces security and crime in the arcology, as well as attacks and battles.
+ .addValue("Enabled", 1).on().addValue("Disabled", 0).off();
+ options.addComment(`This mod introduces security and crime in the arcology, as well as attacks and battles.
The mod can be activated in any moment, but it may result in unbalanced gameplay if activated very late in the game.`);
el.append(options.render());
@@ -618,14 +614,8 @@ App.Intro.summary = function() {
el.append(options.render());
App.UI.DOM.appendNewElement("h2", el, "Images");
- options = new App.UI.OptionsGroup();
-
- options.addOption("Images are", "seeImages")
- .addValue("Enabled", 1).on().addValue("Disabled", 0).off();
-
- el.append(options.render());
-
el.append(App.UI.artOptions());
+
return el;
}
};
diff --git a/src/gui/css/options.css b/src/gui/css/options.css
index fc2ad5bced6c6cf2be11fc4abd4644f8c4d7a945..7ce9fb2705cc625456d3c1fb5e887d9fd6954241 100644
--- a/src/gui/css/options.css
+++ b/src/gui/css/options.css
@@ -20,7 +20,7 @@ div.options-group div.button-group {
margin: 6px 0;
}
-div.options-group span.comment {
+div.options-group .comment {
color: gray;
font-style: italic;
margin-left: 10px;
@@ -103,4 +103,9 @@ table.invisible {
border-collapse: separate;
border-spacing: 5px;
margin:1em auto;
-}
\ No newline at end of file
+}
+
+/* custom row */
+.options-group .custom-row {
+ grid-column-start: span 2;
+}
diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index 8fabc3c368bfb78a3614dd084aa9095be640584d..f4ad29f7a0ecf6353d51a332d513d23adb284d9d 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -1,4 +1,12 @@
App.UI.OptionsGroup = (function() {
+ class Row {
+ /**
+ * @param {HTMLDivElement} container
+ * @param {boolean} doubleColumn
+ */
+ render(container, doubleColumn) {} // jshint ignore:line
+ }
+
/**
* @typedef value
* @property {*} value
@@ -12,13 +20,14 @@ App.UI.OptionsGroup = (function() {
* @property {Function} [callback]
*/
- const Option = class {
+ class Option extends Row {
/**
* @param {string} description can be SC markup
* @param {string} property
* @param {object} [object=V]
*/
constructor(description, property, object = V) {
+ super();
this.description = description;
this.property = property;
this.object = object;
@@ -161,14 +170,197 @@ App.UI.OptionsGroup = (function() {
this.valuePairs.last().neutral = true;
return this;
}
- };
+
+ /**
+ * @param {HTMLDivElement} container
+ */
+ render(container) {
+ /* left side */
+ const desc = document.createElement("div");
+ desc.className = "description";
+ $(desc).wiki(this.description);
+ container.append(desc);
+
+ /* right side */
+ const currentValue = this.object[this.property];
+ let anySelected = false;
+
+ const buttonGroup = document.createElement("div");
+ buttonGroup.classList.add("button-group");
+ if (this.valuePairs.length < 6) {
+ for (const value of this.valuePairs) {
+ if (value.mode === "plain") {
+ /* insert custom SC markup and go to next element */
+ $(buttonGroup).wiki(value.value);
+ continue;
+ }
+ const button = document.createElement("button");
+ button.append(value.name);
+ if (value.on) {
+ button.classList.add("on");
+ } else if (value.off) {
+ button.classList.add("off");
+ } else if (value.neutral) {
+ button.classList.add("neutral");
+ }
+ if (value.mode === "custom") {
+ button.onclick = () => {
+ value.callback();
+ if (value.value) {
+ Engine.play(value.value);
+ } else {
+ App.UI.reload();
+ }
+ };
+ } else {
+ if (value.mode === "=" && currentValue === value.value) {
+ button.classList.add("selected", "disabled");
+ anySelected = true;
+ if (value.descAppend !== undefined) {
+ desc.append(" ");
+ $(desc).wiki(value.descAppend);
+ }
+ } else if (!anySelected && inRange(value.mode, value.compareValue, currentValue)) {
+ button.classList.add("selected");
+ // disable the button if clicking it won't change the variable value
+ if (currentValue === value.value) {
+ button.classList.add("disabled");
+ }
+ anySelected = true;
+ if (value.descAppend !== undefined) {
+ desc.append(" ");
+ $(desc).wiki(value.descAppend);
+ }
+ }
+ button.onclick = () => {
+ this.object[this.property] = value.value;
+ if (value.callback) {
+ value.callback();
+ }
+ App.UI.reload();
+ };
+ }
+ buttonGroup.append(button);
+ }
+ } else {
+ let select = document.createElement("select");
+ select.classList.add("rajs-list");
+
+ for (const value of this.valuePairs) {
+ let el = document.createElement("option");
+ el.textContent = value.name;
+ el.value = value.value;
+ if (this.object[this.property] === value.value) {
+ el.selected = true;
+ }
+ select.appendChild(el);
+ }
+ select.onchange = () => {
+ const O = select.options[select.selectedIndex];
+ if (isNaN(Number(O.value))) {
+ this.object[this.property] = O.value;
+ } else {
+ this.object[this.property] = Number(O.value);
+ }
+ App.UI.reload();
+ };
+ buttonGroup.append(select);
+ }
+
+ if (this.textbox) {
+ const isNumber = typeof currentValue === "number";
+ const textbox = App.UI.DOM.makeTextBox(currentValue, input => {
+ this.object[this.property] = input;
+ App.UI.reload();
+ }, isNumber);
+ if (isNumber) {
+ textbox.classList.add("number");
+ }
+ buttonGroup.append(textbox);
+ if (this.unit) {
+ buttonGroup.append(" ", this.unit);
+ }
+ }
+ if (this.comment) {
+ const comment = document.createElement("span");
+ comment.classList.add("comment");
+ $(comment).wiki(this.comment);
+ buttonGroup.append(comment);
+ }
+ container.append(buttonGroup);
+
+ function inRange(mode, compareValue, value) {
+ if (mode === "<") {
+ return value < compareValue;
+ } else if (mode === "<=") {
+ return value <= compareValue;
+ } else if (mode === ">") {
+ return value > compareValue;
+ } else if (mode === ">=") {
+ return value >= compareValue;
+ }
+ return false;
+ }
+ }
+ }
+
+ class Comment extends Row {
+ /**
+ * @param {string} comment can be SC markup
+ */
+ constructor(comment) {
+ super();
+ this.comment = comment;
+ this.long = false;
+ }
+
+ /**
+ * @param {HTMLDivElement} container
+ */
+ render(container) {
+ /* left */
+ container.append(document.createElement("div"));
+
+ /* right */
+ const comment = document.createElement("div");
+ comment.classList.add("comment");
+ $(comment).wiki(this.comment);
+ container.append(comment);
+ }
+ }
+
+ class CustomRow extends Row {
+ /**
+ * @param {HTMLElement|string} element
+ */
+ constructor(element) {
+ super();
+ this.element = element;
+ }
+
+ /**
+ * @param {HTMLDivElement} container
+ * @param {boolean}doubleColumn
+ */
+ render(container, doubleColumn) {
+ /** @type {HTMLDivElement} */
+ const div = App.UI.DOM.makeElement("div", this.element, "custom-row");
+ let factor = 0.7;
+ if (doubleColumn) {
+ factor *= 0.5;
+ }
+ div.style.width = `${Math.round(window.innerWidth * factor)}px`;
+ container.append(div);
+ }
+ }
return class {
constructor() {
/**
- * @type {Array<Option>}
+ * @type {Array<Row>}
*/
- this.options = [];
+ this.rows = [];
+ this.doubleColumn = false;
}
/**
@@ -179,6 +371,17 @@ App.UI.OptionsGroup = (function() {
return this;
}
+ /**
+ * @template {Row} T
+ * @param {T} row
+ * @returns {T}
+ * @private
+ */
+ _addRow(row) {
+ this.rows.push(row);
+ return row;
+ }
+
/**
* @param {string} name
* @param {string} property
@@ -187,146 +390,43 @@ App.UI.OptionsGroup = (function() {
*/
addOption(name, property, object = V) {
const option = new Option(name, property, object);
- this.options.push(option);
- return option;
+ return this._addRow(option);
}
+ /**
+ * @param {string} comment may contain SC markup
+ * @returns {Comment}
+ */
+ addComment(comment) {
+ const c = new Comment(comment);
+ return this._addRow(c);
+ }
+
+ /**
+ * Adds a custom element taking up both rows
+ *
+ * @param {HTMLElement|string} element
+ * @returns {CustomRow}
+ */
+ addCustom(element) {
+ return this._addRow(new CustomRow(element));
+ }
+
+ /**
+ * @returns {HTMLDivElement}
+ */
render() {
const container = document.createElement("div");
container.className = "options-group";
if (this.doubleColumn) {
container.classList.add("double");
}
- for (/** @type {Option} */ const option of this.options) {
- /* left side */
- const desc = document.createElement("div");
- desc.className = "description";
- $(desc).wiki(option.description);
- container.append(desc);
-
- /* right side */
- const currentValue = option.object[option.property];
- let anySelected = false;
-
- const buttonGroup = document.createElement("div");
- buttonGroup.classList.add("button-group");
- if (option.valuePairs.length < 6) {
- for (const value of option.valuePairs) {
- if (value.mode === "plain") {
- /* insert custom SC markup and go to next element */
- $(buttonGroup).wiki(value.value);
- continue;
- }
- const button = document.createElement("button");
- button.append(value.name);
- if (value.on) {
- button.classList.add("on");
- } else if (value.off) {
- button.classList.add("off");
- } else if (value.neutral) {
- button.classList.add("neutral");
- }
- if (value.mode === "custom") {
- button.onclick = () => {
- value.callback();
- if (value.value) {
- Engine.play(value.value);
- } else {
- App.UI.reload();
- }
- };
- } else {
- if (value.mode === "=" && currentValue === value.value) {
- button.classList.add("selected", "disabled");
- anySelected = true;
- if (value.descAppend !== undefined) {
- desc.append(" ");
- $(desc).wiki(value.descAppend);
- }
- } else if (!anySelected && inRange(value.mode, value.compareValue, currentValue)) {
- button.classList.add("selected");
- // disable the button if clicking it won't change the variable value
- if (currentValue === value.value) {
- button.classList.add("disabled");
- }
- anySelected = true;
- if (value.descAppend !== undefined) {
- desc.append(" ");
- $(desc).wiki(value.descAppend);
- }
- }
- button.onclick = () => {
- option.object[option.property] = value.value;
- if (value.callback) {
- value.callback();
- }
- App.UI.reload();
- };
- }
- buttonGroup.append(button);
- }
- } else {
- let select = document.createElement("select");
- select.classList.add("rajs-list");
-
- for (const value of option.valuePairs) {
- let el = document.createElement("option");
- el.textContent = value.name;
- el.value = value.value;
- if (option.object[option.property] === value.value) {
- el.selected = true;
- }
- select.appendChild(el);
- }
- select.onchange = () => {
- const O = select.options[select.selectedIndex];
- if (isNaN(Number(O.value))) {
- option.object[option.property] = O.value;
- } else {
- option.object[option.property] = Number(O.value);
- }
- App.UI.reload();
- };
- buttonGroup.append(select);
- }
- if (option.textbox) {
- const isNumber = typeof currentValue === "number";
- const textbox = App.UI.DOM.makeTextBox(currentValue, input => {
- option.object[option.property] = input;
- App.UI.reload();
- }, isNumber);
- if (isNumber) {
- textbox.classList.add("number");
- }
- buttonGroup.append(textbox);
- if (option.unit) {
- buttonGroup.append(" ", option.unit);
- }
- }
- if (option.comment) {
- const comment = document.createElement("span");
- comment.classList.add("comment");
- $(comment).wiki(option.comment);
- buttonGroup.append(comment);
- }
- container.append(buttonGroup);
+ for (/** @type {Row} */ const row of this.rows) {
+ row.render(container, this.doubleColumn);
}
return container;
-
- function inRange(mode, compareValue, value) {
- if (mode === "<") {
- return value < compareValue;
- } else if (mode === "<=") {
- return value <= compareValue;
- } else if (mode === ">") {
- return value > compareValue;
- } else if (mode === ">=") {
- return value >= compareValue;
- }
- return false;
- }
}
};
})();
diff --git a/src/gui/options/optionsPassage.js b/src/gui/options/optionsPassage.js
index 7c215b4159d2bc819477bfe1cbb16467c2813da5..02f2dbfbe2006106f142f4b51489151709ce3bec 100644
--- a/src/gui/options/optionsPassage.js
+++ b/src/gui/options/optionsPassage.js
@@ -1025,7 +1025,7 @@ App.UI.artOptions = function() {
.addValueList([["Revamped embedded vector art", 3], ["Non-embedded vector art", 2], ["NoX/Deepmurk's vector art", 1], ["Shokushu's rendered imagepack", 0]]);
if (V.imageChoice === 1) {
- options.addOption("").addComment('<span class="warning">Git compiled only, no exceptions.</span>');
+ options.addComment('<span class="warning">Git compiled only, no exceptions.</span>');
options.addOption("Face artwork is", "seeFaces")
.addValue("Enabled", 1).on().addValue("Disabled", 0).off();
@@ -1039,7 +1039,7 @@ App.UI.artOptions = function() {
options.addOption("Clothing erection bulges are", "showClothingErection")
.addValue("Enabled", true).on().addValue("Disabled", false).off();
} else if (V.imageChoice === 0) {
- options.addOption("").addComment(`You need """to"""
+ options.addComment(`You need """to"""
<a href="https://mega.nz/#!upoAlBaZ!EbZ5wCixxZxBhMN_ireJTXt0SIPOywO2JW9XzTIPhe0">download the image pack</a>
"""and""" put the 'renders' folder into the resources/ folder where this html file is.`
);
@@ -1047,7 +1047,7 @@ App.UI.artOptions = function() {
options.addOption("Slave summary fetish images are", "seeMainFetishes")
.addValue("Enabled", 1).on().addValue("Disabled", 0).off();
} else if (V.imageChoice === 3) {
- options.addOption("").addComment('<span class="warning">Git compiled only, no exceptions.</span>');
+ options.addComment('<span class="warning">Git compiled only, no exceptions.</span>');
options.addOption("Clothing erection bulges are", "showClothingErection")
.addValue("Enabled", true).on().addValue("Disabled", false).off();
diff --git a/themes/light/options.css b/themes/light/options.css
index 88e25e7e362d0ee0669b6fb4c471dcd7a7e7c8e7..419ff6ed92790d70bcd8ce5fddc1a4419d519621 100644
--- a/themes/light/options.css
+++ b/themes/light/options.css
@@ -1,3 +1,3 @@
-div.options-group span.comment {
+div.options-group .comment {
color: #575757;
}