refactor(core): Replace factories with components

The factories were a good step towards normalizing the constructions of all common parts. We now gradually move all the factory-build parts into component instances.

packages/userscript/source/ui/BonfireSettingsUi.ts

@@ -3,11 +3,11 @@ import { objectEntries } from "../tools/Entries";
 import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
+import { SettingListItem } from "./components/SettingListItem";
 import { TriggerButton } from "./components/TriggerButton";
 import { SettingsListUi } from "./SettingsListUi";
 import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
-import { SettingUi } from "./SettingUi";
 
 export class BonfireSettingsUi extends SettingsSectionUi {
   private readonly _trigger: TriggerButton;
@@ -292,12 +292,11 @@ export class BonfireSettingsUi extends SettingsSectionUi {
     const upgradeBuildingsButtons = [];
     for (const [upgradeName, upgrade] of objectEntries(this._settings.upgradeBuildings.items)) {
       const label = this._host.engine.i18n(`$buildings.${upgradeName}.label`);
-      const button = SettingUi.make(
+      const button = new SettingListItem(
         this._host,
         `building-${upgradeName}`,
-        upgrade,
         label,
-
+        upgrade,
         {
           onCheck: () => this._host.engine.imessage("status.auto.enable", [label]),
           onUnCheck: () => this._host.engine.imessage("status.auto.disable", [label]),
@@ -313,12 +312,11 @@ export class BonfireSettingsUi extends SettingsSectionUi {
     upgradeBuildingsButtons.sort((a, b) => a.label.localeCompare(b.label));
     upgradeBuildingsButtons.forEach(button => upgradeBuildingsList.append(button.button.element));
 
-    const nodeTurnOnSteamworks = SettingUi.make(
+    const nodeTurnOnSteamworks = new SettingListItem(
       this._host,
       "_steamworks",
-      this._settings.turnOnSteamworks,
       this._host.engine.i18n("option.steamworks"),
-
+      this._settings.turnOnSteamworks,
       {
         onCheck: () =>
           this._host.engine.imessage("status.auto.enable", [

packages/userscript/source/ui/FilterSettingsUi.ts

@@ -3,10 +3,10 @@ import { objectEntries } from "../tools/Entries";
 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 { SettingsSectionUi } from "./SettingsSectionUi";
-import { SettingUi } from "./SettingUi";
 
 export class FiltersSettingsUi extends SettingsSectionUi {
   private readonly _settings: FilterSettings;
@@ -109,11 +109,11 @@ export class FiltersSettingsUi extends SettingsSectionUi {
     ];
 
     const makeButton = (name: FilterItem, option: FilterSettingsItem, label: string) =>
-      SettingUi.make(
+      new SettingListItem(
         this._host,
         name,
-        option,
         label,
+        option,
         {
           onCheck: () => this._host.engine.imessage("filter.enable", [label]),
           onUnCheck: () => this._host.engine.imessage("filter.disable", [label]),

packages/userscript/source/ui/OptionsSettingsUi.ts

@@ -4,11 +4,11 @@ import { objectEntries } from "../tools/Entries";
 import { ucfirst } from "../tools/Format";
 import { isNil, mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
+import { SettingListItem } from "./components/SettingListItem";
+import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 import { SettingsListUi } from "./SettingsListUi";
 import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
-import { SettingTriggerUi } from "./SettingTriggerUi";
-import { SettingUi } from "./SettingUi";
 
 export class OptionsSettingsUi extends SettingsSectionUi {
   private readonly _settings: OptionsSettings;
@@ -60,8 +60,9 @@ export class OptionsSettingsUi extends SettingsSectionUi {
       onUnCheck: () => this._host.engine.imessage("status.sub.disable", [iname]),
     };
     return option.trigger
-      ? SettingTriggerUi.make(this._host, name, option as SettingTrigger, iname, handler).element
-      : SettingUi.make(this._host, name, option, iname, handler).element;
+      ? new SettingTriggerListItem(this._host, name, iname, option as SettingTrigger, handler)
+          .element
+      : new SettingListItem(this._host, name, iname, option, handler).element;
   }
 
   setState(state: OptionsSettings): void {

packages/userscript/source/ui/ReligionSettingsUi.ts

@@ -4,12 +4,12 @@ import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UnicornItemVariant } from "../types";
 import { UserScript } from "../UserScript";
+import { SettingListItem } from "./components/SettingListItem";
+import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 import { TriggerButton } from "./components/TriggerButton";
 import { SettingsListUi } from "./SettingsListUi";
 import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
-import { SettingTriggerUi } from "./SettingTriggerUi";
-import { SettingUi } from "./SettingUi";
 
 export class ReligionSettingsUi extends SettingsSectionUi {
   private readonly _trigger: TriggerButton;
@@ -222,11 +222,11 @@ export class ReligionSettingsUi extends SettingsSectionUi {
   getAdditionOptions(): Array<JQuery<HTMLElement>> {
     const nodeHeader = this._getHeader("Additional options");
 
-    const nodeAdore = SettingTriggerUi.make(
+    const nodeAdore = new SettingTriggerListItem(
       this._host,
       "adore",
-      this._settings.adore,
       this._host.engine.i18n("option.faith.adore"),
+      this._settings.adore,
       {
         onCheck: () =>
           this._host.engine.imessage("status.sub.enable", [
@@ -239,11 +239,11 @@ export class ReligionSettingsUi extends SettingsSectionUi {
       }
     );
 
-    const nodeAutoPraise = SettingTriggerUi.make(
+    const nodeAutoPraise = new SettingTriggerListItem(
       this._host,
       "autoPraise",
-      this._settings.autoPraise,
       this._host.engine.i18n("option.praise"),
+      this._settings.autoPraise,
       {
         onCheck: () =>
           this._host.engine.imessage("status.sub.enable", [
@@ -256,12 +256,11 @@ export class ReligionSettingsUi extends SettingsSectionUi {
       }
     );
 
-    const nodeBestUnicornBuilding = SettingUi.make(
+    const nodeBestUnicornBuilding = new SettingListItem(
       this._host,
       "bestUnicornBuilding",
-      this._settings.bestUnicornBuilding,
       this._host.engine.i18n("option.faith.best.unicorn"),
-
+      this._settings.bestUnicornBuilding,
       {
         onCheck: () =>
           this._host.engine.imessage("status.sub.enable", [
@@ -310,11 +309,11 @@ export class ReligionSettingsUi extends SettingsSectionUi {
       //this._host.saveToKittenStorage();
     });
 
-    const nodeTranscend = SettingUi.make(
+    const nodeTranscend = new SettingListItem(
       this._host,
       "transcend",
-      this._settings.transcend,
       this._host.engine.i18n("option.faith.transcend"),
+      this._settings.transcend,
       {
         onCheck: () =>
           this._host.engine.imessage("status.sub.enable", [

packages/userscript/source/ui/ResourcesSettingsUi.ts

@@ -4,10 +4,10 @@ import { ucfirst } from "../tools/Format";
 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 { SettingsSectionUi } from "./SettingsSectionUi";
-import { SettingUi } from "./SettingUi";
 
 export class ResourcesSettingsUi extends SettingsSectionUi {
   private readonly _settings: ResourcesSettings;
@@ -57,7 +57,7 @@ export class ResourcesSettingsUi extends SettingsSectionUi {
     const stock = setting.stock;
 
     // The overall container for this resource item.
-    const container = SettingUi.make(this._host, `resource-${name}`, setting, title, {
+    const container = new SettingListItem(this._host, `resource-${name}`, title, setting, {
       onCheck: () => this._host.engine.imessage("status.resource.enable", [title]),
       onUnCheck: () => this._host.engine.imessage("status.resource.disable", [title]),
     });

packages/userscript/source/ui/ScienceSettingsUi.ts

@@ -3,10 +3,10 @@ import { objectEntries } from "../tools/Entries";
 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 { SettingsSectionUi } from "./SettingsSectionUi";
-import { SettingUi } from "./SettingUi";
 
 export class ScienceSettingsUi extends SettingsSectionUi {
   private readonly _settings: ScienceSettings;
@@ -33,7 +33,7 @@ export class ScienceSettingsUi extends SettingsSectionUi {
     const techButtons = [];
     for (const [techName, tech] of objectEntries(this._settings.techs.items)) {
       const label = this._host.engine.i18n(`$science.${techName}.label`);
-      const button = SettingUi.make(this._host, `tech-${techName}`, tech, label, {
+      const button = new SettingListItem(this._host, `tech-${techName}`, label, tech, {
         onCheck: () => this._host.engine.imessage("status.auto.enable", [label]),
         onUnCheck: () => this._host.engine.imessage("status.auto.disable", [label]),
       });
@@ -59,10 +59,16 @@ export class ScienceSettingsUi extends SettingsSectionUi {
       const policyLabel = this._host.engine.i18n(
         `$policy.${policyName === "authocracy" ? "autocracy" : policyName}.label`
       );
-      const policyButton = SettingUi.make(this._host, `policy-${policyName}`, policy, policyLabel, {
-        onCheck: () => this._host.engine.imessage("status.auto.enable", [policyLabel]),
-        onUnCheck: () => this._host.engine.imessage("status.auto.disable", [policyLabel]),
-      });
+      const policyButton = new SettingListItem(
+        this._host,
+        `policy-${policyName}`,
+        policyLabel,
+        policy,
+        {
+          onCheck: () => this._host.engine.imessage("status.auto.enable", [policyLabel]),
+          onUnCheck: () => this._host.engine.imessage("status.auto.disable", [policyLabel]),
+        }
+      );
 
       policyButtons.push({ label: policyLabel, button: policyButton });
     }