refactor(core): New SettingsPanel component

The settings panel is a setting (a checkbox item) and an expandable list of further settings. The concept exists throughout the script, but this is the first component where both are combined.
oliversalzburg · Oct 8, 2022 · 9731195 · 9731195
1 parent 790c316
commit 9731195
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 221 deletions.
diff --git a/packages/userscript/source/ui/BonfireSettingsUi.ts b/packages/userscript/source/ui/BonfireSettingsUi.ts
@@ -4,9 +4,8 @@ import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { TriggerButton } from "./components/TriggerButton";
-import { SettingsListUi } from "./SettingsListUi";
-import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class BonfireSettingsUi extends SettingsSectionUi {
@@ -16,9 +15,8 @@ export class BonfireSettingsUi extends SettingsSectionUi {
   constructor(host: UserScript, settings: BonfireSettings) {
     const toggleName = "build";
     const label = ucfirst(host.engine.i18n("ui.build"));
-    const list = SettingsListUi.getSettingsList(host.engine, toggleName);
-    const panel = SettingsPanelUi.make(host, toggleName, label, settings, list);
-    super(host, panel, list);
+    const panel = new SettingsPanel(host, toggleName, label, settings);
+    super(host, panel);
 
     this._settings = settings;
 
@@ -269,24 +267,20 @@ export class BonfireSettingsUi extends SettingsSectionUi {
         true
       ),
     ];
-    list.append(optionButtons);
+    panel.list.append(optionButtons);
 
     const additionOptions = this._getAdditionOptions();
-
-    panel.element.append(list);
-    list.append(additionOptions);
+    panel.list.append(additionOptions);
   }
 
   private _getAdditionOptions(): Array<JQuery<HTMLElement>> {
     const header = this._getHeader("Additional options");
 
-    const upgradeBuildingsList = SettingsListUi.getSettingsList(this._host.engine, "buildings");
-    const upgradeBuildingsElement = SettingsPanelUi.make(
+    const upgradeBuildingsElement = new SettingsPanel(
       this._host,
       "buildings",
       this._host.engine.i18n("ui.upgrade.buildings"),
-      this._settings.upgradeBuildings,
-      upgradeBuildingsList
+      this._settings.upgradeBuildings
     );
 
     const upgradeBuildingsButtons = [];
@@ -310,7 +304,9 @@ export class BonfireSettingsUi extends SettingsSectionUi {
     }
     // Ensure buttons are added into UI with their labels alphabetized.
     upgradeBuildingsButtons.sort((a, b) => a.label.localeCompare(b.label));
-    upgradeBuildingsButtons.forEach(button => upgradeBuildingsList.append(button.button.element));
+    upgradeBuildingsButtons.forEach(button =>
+      upgradeBuildingsElement.list.append(button.button.element)
+    );
 
     const nodeTurnOnSteamworks = new SettingListItem(
       this._host,
@@ -329,12 +325,7 @@ export class BonfireSettingsUi extends SettingsSectionUi {
       }
     );
 
-    return [
-      header,
-      upgradeBuildingsElement.element,
-      upgradeBuildingsList,
-      nodeTurnOnSteamworks.element,
-    ];
+    return [header, upgradeBuildingsElement.element, nodeTurnOnSteamworks.element];
   }
 
   setState(state: BonfireSettings): void {

diff --git a/packages/userscript/source/ui/EngineSettingsUi.ts b/packages/userscript/source/ui/EngineSettingsUi.ts
@@ -3,25 +3,22 @@ import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
-import { SettingsSectionUiBase } from "./SettingsSectionUi";
 
-export class EngineSettingsUi extends SettingsSectionUiBase {
+export class EngineSettingsUi {
   readonly element: JQuery<HTMLElement>;
   private readonly _settings: EngineSettings;
 
   constructor(host: UserScript, settings: EngineSettings) {
-    super(host);
-
     this._settings = settings;
 
     const toggleName = "engine";
 
-    const itext = ucfirst(this._host.engine.i18n("ui.engine"));
+    const itext = ucfirst(host.engine.i18n("ui.engine"));
 
     // Our main element is a list item.
     const element = new SettingListItem(host, toggleName, itext, settings, {
-      onCheck: () => this._host.engine.start(true),
-      onUnCheck: () => this._host.engine.stop(true),
+      onCheck: () => host.engine.start(true),
+      onUnCheck: () => host.engine.stop(true),
     });
     this.element = element.element;
   }

diff --git a/packages/userscript/source/ui/FilterSettingsUi.ts b/packages/userscript/source/ui/FilterSettingsUi.ts
@@ -4,8 +4,7 @@ import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
-import { SettingsListUi } from "./SettingsListUi";
-import { SettingsPanelUi } from "./SettingsPanelUi";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class FiltersSettingsUi extends SettingsSectionUi {
@@ -14,9 +13,8 @@ export class FiltersSettingsUi extends SettingsSectionUi {
   constructor(host: UserScript, settings: FilterSettings) {
     const toggleName = "filter";
     const label = ucfirst(host.engine.i18n("ui.filter"));
-    const list = SettingsListUi.getSettingsList(host.engine, toggleName);
-    const panel = SettingsPanelUi.make(host, toggleName, label, settings, list);
-    super(host, panel, list);
+    const panel = new SettingsPanel(host, toggleName, label, settings);
+    super(host, panel);
 
     this._settings = settings;
 
@@ -127,10 +125,8 @@ export class FiltersSettingsUi extends SettingsSectionUi {
       .sort((a, b) => a.label.localeCompare(b.label))
       .map(button => makeButton(button.name, button.option, button.label));
 
-    list.append(optionButtons);
-    list.append(this._getExplainer("Disabled items are hidden from the log."));
-
-    panel.element.append(list);
+    panel.list.append(optionButtons);
+    panel.list.append(this._getExplainer("Disabled items are hidden from the log."));
   }
 
   setState(state: FilterSettings): void {

diff --git a/packages/userscript/source/ui/OptionsSettingsUi.ts b/packages/userscript/source/ui/OptionsSettingsUi.ts
@@ -5,9 +5,8 @@ import { ucfirst } from "../tools/Format";
 import { isNil, mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
-import { SettingsListUi } from "./SettingsListUi";
-import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class OptionsSettingsUi extends SettingsSectionUi {
@@ -16,9 +15,8 @@ export class OptionsSettingsUi extends SettingsSectionUi {
   constructor(host: UserScript, settings: OptionsSettings) {
     const toggleName = "options";
     const label = ucfirst(host.engine.i18n("ui.options"));
-    const list = SettingsListUi.getSettingsList(host.engine, toggleName);
-    const panel = SettingsPanelUi.make(host, toggleName, label, settings, list);
-    super(host, panel, list);
+    const panel = new SettingsPanel(host, toggleName, label, settings);
+    super(host, panel);
 
     this._settings = settings;
 
@@ -45,9 +43,7 @@ export class OptionsSettingsUi extends SettingsSectionUi {
       ),
     ];
 
-    list.append(...optionButtons);
-
-    panel.element.append(list);
+    panel.list.append(...optionButtons);
   }
 
   private _getOptionsOption(

diff --git a/packages/userscript/source/ui/ReligionSettingsUi.ts b/packages/userscript/source/ui/ReligionSettingsUi.ts
@@ -5,10 +5,9 @@ import { mustExist } from "../tools/Maybe";
 import { UnicornItemVariant } from "../types";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 import { TriggerButton } from "./components/TriggerButton";
-import { SettingsListUi } from "./SettingsListUi";
-import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class ReligionSettingsUi extends SettingsSectionUi {
@@ -18,9 +17,8 @@ export class ReligionSettingsUi extends SettingsSectionUi {
   constructor(host: UserScript, settings: ReligionSettings) {
     const toggleName = "faith";
     const label = ucfirst(host.engine.i18n("ui.faith"));
-    const list = SettingsListUi.getSettingsList(host.engine, toggleName);
-    const panel = SettingsPanelUi.make(host, toggleName, label, settings, list);
-    super(host, panel, list);
+    const panel = new SettingsPanel(host, toggleName, label, settings);
+    super(host, panel);
 
     this._settings = settings;
 
@@ -191,12 +189,10 @@ export class ReligionSettingsUi extends SettingsSectionUi {
       ),
     ];
 
-    list.append(...optionButtons);
+    panel.list.append(...optionButtons);
 
     const additionOptions = this.getAdditionOptions();
-
-    panel.element.append(list);
-    list.append(additionOptions);
+    panel.list.append(additionOptions);
 
     /* TODO:
 

diff --git a/packages/userscript/source/ui/ResourcesSettingsUi.ts b/packages/userscript/source/ui/ResourcesSettingsUi.ts
@@ -5,8 +5,7 @@ import { mustExist } from "../tools/Maybe";
 import { Resource } from "../types";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
-import { SettingsListUi } from "./SettingsListUi";
-import { SettingsPanelUi } from "./SettingsPanelUi";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class ResourcesSettingsUi extends SettingsSectionUi {
@@ -15,29 +14,22 @@ export class ResourcesSettingsUi extends SettingsSectionUi {
   constructor(host: UserScript, settings: ResourcesSettings) {
     const toggleName = "resources";
     const label = ucfirst(host.engine.i18n("ui.resources"));
-    const list = SettingsListUi.getSettingsList(host.engine, toggleName);
-    const panel = SettingsPanelUi.make(host, toggleName, label, settings, list);
-    super(host, panel, list);
+    const panel = new SettingsPanel(host, toggleName, label, settings);
+    super(host, panel);
 
     this._settings = settings;
     $("input", panel.element).prop("disabled", true);
 
-    const allresources = SettingsSectionUi.getList("available-resources-list");
-
-    list.append(allresources);
-
     // Add all the current resources
     for (const [name, item] of objectEntries(this._settings.items)) {
-      list.append(
+      panel.list.append(
         this._makeResourceSetting(
           name,
           ucfirst(this._host.engine.i18n(`$resources.${name}.title`)),
           item
         )
       );
     }
-
-    panel.element.append(list);
   }
 
   /**

diff --git a/packages/userscript/source/ui/ScienceSettingsUi.ts b/packages/userscript/source/ui/ScienceSettingsUi.ts
@@ -4,8 +4,7 @@ import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
 import { SettingListItem } from "./components/SettingListItem";
-import { SettingsListUi } from "./SettingsListUi";
-import { SettingsPanelUi } from "./SettingsPanelUi";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class ScienceSettingsUi extends SettingsSectionUi {
@@ -14,20 +13,17 @@ export class ScienceSettingsUi extends SettingsSectionUi {
   constructor(host: UserScript, settings: ScienceSettings) {
     const toggleName = "upgrade";
     const label = ucfirst(host.engine.i18n("ui.upgrade"));
-    const list = SettingsListUi.getSettingsList(host.engine, toggleName);
-    const panel = SettingsPanelUi.make(host, toggleName, label, settings, list);
-    super(host, panel, list);
+    const panel = new SettingsPanel(host, toggleName, label, settings);
+    super(host, panel);
 
     this._settings = settings;
 
     // Technologies
-    const techsList = SettingsListUi.getSettingsList(this._host.engine, "techs");
-    const techsElement = SettingsPanelUi.make(
+    const techsElement = new SettingsPanel(
       this._host,
       "techs",
       this._host.engine.i18n("ui.upgrade.techs"),
-      this._settings.techs,
-      techsList
+      this._settings.techs
     );
 
     const techButtons = [];
@@ -42,16 +38,14 @@ export class ScienceSettingsUi extends SettingsSectionUi {
     }
     // Ensure buttons are added into UI with their labels alphabetized.
     techButtons.sort((a, b) => a.label.localeCompare(b.label));
-    techButtons.forEach(button => techsList.append(button.button.element));
+    techButtons.forEach(button => techsElement.list.append(button.button.element));
 
     // Policies
-    const policiesList = SettingsListUi.getSettingsList(this._host.engine, "policies");
-    const policiesElement = SettingsPanelUi.make(
+    const policiesElement = new SettingsPanel(
       this._host,
       "policies",
       this._host.engine.i18n("ui.upgrade.policies"),
-      this._settings.policies,
-      policiesList
+      this._settings.policies
     );
 
     const policyButtons = [];
@@ -74,10 +68,9 @@ export class ScienceSettingsUi extends SettingsSectionUi {
     }
     // Ensure buttons are added into UI with their labels alphabetized.
     policyButtons.sort((a, b) => a.label.localeCompare(b.label));
-    policyButtons.forEach(button => policiesList.append(button.button.element));
+    policyButtons.forEach(button => policiesElement.list.append(button.button.element));
 
-    list.append(techsElement.element, techsList, policiesElement.element, policiesList);
-    panel.element.append(list);
+    panel.list.append(techsElement.element, policiesElement.element);
   }
 
   setState(state: ScienceSettings): void {

diff --git a/packages/userscript/source/ui/SettingsSectionUi.ts b/packages/userscript/source/ui/SettingsSectionUi.ts
@@ -4,6 +4,7 @@ import { SettingMax } from "../options/Settings";
 import { UserScript } from "../UserScript";
 import { WorkshopManager } from "../WorkshopManager";
 import { SettingMaxListItem } from "./components/SettingMaxListItem";
+import { SettingsPanel } from "./components/SettingsPanel";
 
 export type Toggleable = {
   get isExpanded(): boolean;
@@ -14,11 +15,15 @@ export type Toggleable = {
  * Base class for all automation UI sections.
  * This provides common functionality to help build the automation sections themselves.
  */
-export abstract class SettingsSectionUiBase {
+export abstract class SettingsSectionUi {
   protected _host: UserScript;
+  readonly element: JQuery<HTMLElement>;
+  readonly panel: SettingsPanel;
 
-  constructor(host: UserScript) {
+  constructor(host: UserScript, panel: SettingsPanel) {
     this._host = host;
+    this.element = panel.element;
+    this.panel = panel;
   }
 
   abstract refreshUi(): void;
@@ -124,40 +129,3 @@ export abstract class SettingsSectionUiBase {
     return SettingsSectionUi.renderPercentage(consume ?? WorkshopManager.DEFAULT_CONSUME_RATE);
   }
 }
-
-export abstract class SettingsSectionUi extends SettingsSectionUiBase {
-  readonly element: JQuery<HTMLElement>;
-  protected readonly expando: JQuery<HTMLElement>;
-  protected readonly mainChild: JQuery<HTMLElement>;
-  private _mainChildVisible = false;
-
-  get isExpanded() {
-    return this._mainChildVisible;
-  }
-
-  constructor(
-    host: UserScript,
-    settingsPanel: { element: JQuery<HTMLElement>; expando: JQuery<HTMLElement> },
-    mainChild: JQuery<HTMLElement>
-  ) {
-    super(host);
-    this.element = settingsPanel.element;
-    this.expando = settingsPanel.expando;
-    this.mainChild = mainChild;
-  }
-
-  toggle(expand: boolean | undefined) {
-    this._mainChildVisible = expand !== undefined ? expand : !this._mainChildVisible;
-    if (this._mainChildVisible) {
-      this.mainChild.show();
-      this.expando.data("expanded", true);
-      this.expando.prop("title", this._host.engine.i18n("ui.itemsHide"));
-      this.expando.text("-");
-    } else {
-      this.mainChild.hide();
-      this.expando.data("expanded", false);
-      this.expando.prop("title", this._host.engine.i18n("ui.itemsShow"));
-      this.expando.text("+");
-    }
-  }
-}