diff --git a/src/facilities/fsDecoration.js b/src/facilities/fsDecoration.js index f50d62088c9f8932c6ec0d30d8b6aa8d30e2dab0..336daa97da3c845d2d1666b3f0c5a98c6794af9a 100644 --- a/src/facilities/fsDecoration.js +++ b/src/facilities/fsDecoration.js @@ -1,39 +1,102 @@ /** 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); + } }; /** diff --git a/src/gui/options/options.js b/src/gui/options/options.js index f4ad29f7a0ecf6353d51a332d513d23adb284d9d..1f3c73a8d96782157512bc0190f203f6f7842d60 100644 --- a/src/gui/options/options.js +++ b/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); diff --git a/src/uncategorized/futureSociety.tw b/src/uncategorized/futureSociety.tw index 2b8a1c614d233e6afa8dcee41f1bbdefafc105ea..9ad7466dbc3285474fa50a2b0211d596727408bc 100644 --- a/src/uncategorized/futureSociety.tw +++ b/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()>>