allow adding dom nodes directly as options in options system

src/facilities/fsDecoration.js

 /** Replaces <<SetFacilityDecoration>> widget
- * @param {string} variable - global property name for the facility decoration (no $ etc)
- * @returns {HTMLElement}
+ * @returns {DocumentFragment}
  */
-App.UI.facilityRedecoration = function(variable) {
-	const select = document.createElement("select");
-	select.classList.add("rajs-list");
-	const arc = V.arcologies[0];
-	for (const FS of FutureSocieties.activeFSes(arc)) {
-		if (arc[FS] > 20) {
-			const decorationName = FutureSocieties.decorationName(FS);
-			if (decorationName) {
-				const option = App.UI.DOM.makeElement("option", decorationName, "indent");
-				if (V[variable] === decorationName) {
-					option.selected = true;
-				}
-				select.append(option);
-			}
-		}
+App.UI.facilityRedecoration = function() {
+	const el = new DocumentFragment();
+	const activeFacilities = new Map([]);
+	const options = new App.UI.OptionsGroup();
+
+	FutureSocieties.DecorationCleanup();
+
+	if (V.brothel > 0) {
+		activeFacilities.set(V.brothelName, "brothelDecoration");
+	}
+
+	if (V.club > 0) {
+		activeFacilities.set(V.clubName, "clubDecoration");
+	}
+
+	if (V.dairy > 0) {
+		activeFacilities.set(V.dairyName, "dairyDecoration");
 	}
-	const option = App.UI.DOM.makeElement("option", "standard", "indent");
-	if (V[variable] === "standard") {
-		option.selected = true;
+
+	if (V.farmyard > 0) {
+		activeFacilities.set(V.farmyardName, "farmyardDecoration");
+	}
+
+	if (V.spa > 0) {
+		activeFacilities.set(V.spaName, "spaDecoration");
+	}
+
+	if (V.nursery > 0) {
+		activeFacilities.set(V.nurseryName, "nurseryDecoration");
+	}
+
+	if (V.clinic > 0) {
+		activeFacilities.set(V.clinicName, "clinicDecoration");
+	}
+
+	if (V.schoolroom > 0) {
+		activeFacilities.set(V.schoolroomName, "schoolroomDecoration");
 	}
-	select.append(option);
 
-	select.onchange = () => {
-		const O = select.options[select.selectedIndex];
-		if (O.value !== "standard") {
-			cashX(-5000, "capEx");
+	if (V.cellblock > 0) {
+		activeFacilities.set(V.cellblockName, "cellblockDecoration");
+	}
+
+	if (V.servantsQuarters > 0) {
+		activeFacilities.set(V.servantsQuartersName, "servantsQuartersDecoration");
+	}
+
+	if (V.arcade > 0) {
+		activeFacilities.set(V.arcadeName, "arcadeDecoration");
+	}
+
+	if (V.masterSuite > 0) {
+		activeFacilities.set(V.masterSuiteName, "masterSuiteDecoration");
+	}
+
+	for (const [name, decoration] of activeFacilities) {
+		const option = options.addOption(`The decoration style of ${capFirstChar(name)} is`);
+		createPulldown(option, decoration);
+	}
+	el.append(options.render());
+
+	return el;
+
+	function createPulldown(option, variable) {
+		const select = document.createElement("select");
+		select.classList.add("rajs-list");
+		const arc = V.arcologies[0];
+		for (const FS of FutureSocieties.activeFSes(arc)) {
+			if (arc[FS] > 20) {
+				const decorationName = FutureSocieties.decorationName(FS);
+				if (decorationName) {
+					const choice = App.UI.DOM.makeElement("option", decorationName, "indent");
+					if (V[variable] === decorationName) {
+						choice.selected = true;
+					}
+					select.append(choice);
+				}
+			}
 		}
-		V[variable] = O.value;
-		App.UI.reload();
-	};
-	select.append(option);
-	return select;
+		const choice = App.UI.DOM.makeElement("option", "standard", "indent");
+		if (V[variable] === "standard") {
+			choice.selected = true;
+		}
+		select.append(choice);
+
+		select.onchange = () => {
+			const O = select.options[select.selectedIndex];
+			if (O.value !== "standard") {
+				cashX(-5000, "capEx");
+			}
+			V[variable] = O.value;
+			App.UI.reload();
+		};
+		select.append(option);
+		option.addCustomDOM(select);
+	}
 };
 
 /**

src/gui/options/options.js

@@ -124,6 +124,17 @@ App.UI.OptionsGroup = (function() {
 			return this;
 		}
 
+		/**
+		 * @param {Node} node
+		 * @returns {Option}
+		 */
+		addCustomDOM(node) {
+			this.valuePairs.push({
+				value: node, mode: "DOM"
+			});
+			return this;
+		}
+
 		/* modify last added option */
 
 		/**
@@ -193,6 +204,10 @@ App.UI.OptionsGroup = (function() {
 						/* insert custom SC markup and go to next element */
 						$(buttonGroup).wiki(value.value);
 						continue;
+					} else if (value.mode === "DOM") {
+						/* insert custom SC markup and go to next element */
+						buttonGroup.append(value.value);
+						continue;
 					}
 					const button = document.createElement("button");
 					button.append(value.name);

src/uncategorized/futureSociety.tw

@@ -1719,52 +1719,4 @@ You are spending <<print cashFormat($FSSpending)>> each week to support your soc
 
 <h3>Facility Redecoration</h3>
 
-<<run FutureSocieties.DecorationCleanup()>>
-
-<<if $brothel > 0>>
-	<div><<= capFirstChar($brothelName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("brothelDecoration")>> style.</div>
-<</if>>
-
-<<if $club > 0>>
-	<div><<= capFirstChar($clubName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("clubDecoration")>> style.</div>
-<</if>>
-
-<<if $dairy > 0>>
-	<div><<= capFirstChar($dairyName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("dairyDecoration")>> style.</div>
-<</if>>
-
-<<if $farmyard > 0>>
-	<div><<= capFirstChar($farmyardName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("farmyardDecoration")>> style.</div>
-<</if>>
-
-<<if $spa > 0>>
-	<div><<= capFirstChar($spaName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("spaDecoration")>> style.</div>
-<</if>>
-
-<<if $nursery > 0>>
-	<div><<= capFirstChar($nurseryName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("nurseryDecoration")>> style.</div>
-<</if>>
-
-<<if $clinic > 0>>
-	<div><<= capFirstChar($clinicName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("clinicDecoration")>> style.</div>
-<</if>>
-
-<<if $schoolroom > 0>>
-	<div><<= capFirstChar($schoolroomName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("schoolroomDecoration")>> style.</div>
-<</if>>
-
-<<if $cellblock > 0>>
-	<div><<= capFirstChar($cellblockName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("cellblockDecoration")>> style.</div>
-<</if>>
-
-<<if $servantsQuarters > 0>>
-	<div><<= capFirstChar($servantsQuartersName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("servantsQuartersDecoration")>> style.</div>
-<</if>>
-
-<<if $arcade > 0>>
-	<div><<= capFirstChar($arcadeName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("arcadeDecoration")>> style.</div>
-<</if>>
-
-<<if $masterSuite > 0>>
-	<div><<= capFirstChar($masterSuiteName)>> is decorated in <<includeDOM App.UI.facilityRedecoration("masterSuiteDecoration")>> style.</div>
-<</if>>
+<<includeDOM App.UI.facilityRedecoration()>>