diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index 8fabc3c368bfb78a3614dd084aa9095be640584d..b9fc196c8527abfcd9cae5ba5313149ffdff2c09 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -12,7 +12,7 @@ App.UI.OptionsGroup = (function() {
* @property {Function} [callback]
*/
- const Option = class {
+ class Option {
/**
* @param {string} description can be SC markup
* @param {string} property
@@ -161,7 +161,139 @@ 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;
+ }
+ }
+ }
return class {
constructor() {
@@ -198,135 +330,10 @@ App.UI.OptionsGroup = (function() {
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);
+ option.render(container);
}
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;
- }
}
};
})();