Merge branch 'pulldown-for-options' into 'pregmod-master'

Pulldown for options

See merge request pregmodfan/fc-pregmod!8372

src/gui/options/options.js

@@ -204,60 +204,86 @@ App.UI.OptionsGroup = (function() {
 
 				const buttonGroup = document.createElement("div");
 				buttonGroup.classList.add("button-group");
-				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);
-							}
+				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");
 						}
-						button.onclick = () => {
-							option.object[option.property] = value.value;
-							if (value.callback) {
+						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);
+								}
 							}
-							App.UI.reload();
-						};
+							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);
+						console.log(option);
 					}
-					buttonGroup.append(button);
+					select.onchange = () => {
+						const O = select.options[select.selectedIndex];
+						if (Number(O.value)) {
+							option.object[option.property] = Number(O.value);
+						} else {
+							option.object[option.property] = O.value;
+						}
+					};
+					buttonGroup.append(select);
 				}
+
 				if (option.textbox) {
 					const isNumber = typeof currentValue === "number";
 					const textbox = App.UI.DOM.makeTextBox(currentValue, input => {