refactor(trigger): Discrete trigger component

Should serve as a template to move the UI further into composable blocks and reduce redundancy.
oliversalzburg · Oct 8, 2022 · 3ca7f9a · 3ca7f9a
1 parent ef2b42a
commit 3ca7f9a
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 135 deletions.
diff --git a/packages/userscript/source/i18n/i18nData.json b/packages/userscript/source/i18n/i18nData.json
@@ -162,6 +162,7 @@
     "ui.time": "Time",
     "ui.timeCtrl": "Time Control",
     "ui.trade": "Trade",
+    "ui.trigger": "Trigger: {0}",
     "ui.trigger.set": "Enter a new trigger value for {0}. Should be in the range of 0 to 1.",
     "ui.upgrade.buildings": "Upgrade buildings",
     "ui.upgrade.missions": "Start missions",
@@ -344,6 +345,7 @@
     "ui.time": "时间",
     "ui.timeCtrl": "时间操纵",
     "ui.trade": "贸易",
+    "ui.trigger": "Trigger: {0}",
     "ui.trigger.set": "输入新的 {0} 触发值，取值范围为 0 到 1 的小数。",
     "ui.upgrade.buildings": "建筑",
     "ui.upgrade.missions": "探索星球",

diff --git a/packages/userscript/source/options/OptionsSettings.ts b/packages/userscript/source/options/OptionsSettings.ts
@@ -1,19 +1,11 @@
 import { objectEntries } from "../tools/Entries";
-import { Setting, SettingTrigger } from "./Settings";
+import { SettingTrigger } from "./Settings";
 import { SettingsSection } from "./SettingsSection";
 import { KittenStorageType } from "./SettingsStorage";
 
 export type OptionsItem = "autofeed" | "crypto" | "fixCry" | "observe";
 
-export class OptionsSettingsItem extends Setting implements Partial<SettingTrigger> {
-  trigger: number | undefined = undefined;
-  $trigger: JQuery<HTMLElement> | undefined = undefined;
-
-  constructor(enabled = false, trigger: number | undefined = undefined) {
-    super(enabled);
-    this.trigger = trigger;
-  }
-}
+export class OptionsSettingsItem extends SettingTrigger {}
 
 export class OptionsSettings extends SettingsSection {
   items: {

diff --git a/packages/userscript/source/options/Settings.ts b/packages/userscript/source/options/Settings.ts
@@ -1,4 +1,5 @@
 import { Resource, SpaceBuildings } from "../types";
+import { TriggerButton } from "../ui/components/TriggerButton";
 import { BonfireItem } from "./BonfireSettings";
 import { FaithItem, ReligionItem } from "./ReligionSettings";
 import { TimeItem } from "./TimeSettings";
@@ -51,7 +52,7 @@ export class SettingLimitedMax extends SettingLimited implements SettingMax {
 
 export class SettingTrigger extends Setting {
   trigger: number;
-  $trigger: JQuery<HTMLElement> | undefined = undefined;
+  $trigger: TriggerButton | undefined = undefined;
 
   constructor(enabled = false, trigger = 1) {
     super(enabled);

diff --git a/packages/userscript/source/ui/BonfireSettingsUi.ts b/packages/userscript/source/ui/BonfireSettingsUi.ts
@@ -3,12 +3,14 @@ import { objectEntries } from "../tools/Entries";
 import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
+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;
   private readonly _settings: BonfireSettings;
 
   constructor(host: UserScript, settings: BonfireSettings) {
@@ -21,7 +23,8 @@ export class BonfireSettingsUi extends SettingsSectionUi {
     this._settings = settings;
 
     // Create "trigger" button in the item.
-    panel.element.append(this._makeSectionTriggerButton(toggleName, label, this._settings));
+    this._trigger = new TriggerButton(host, toggleName, label, settings);
+    panel.element.append(this._trigger.element);
 
     const optionButtons = [
       this._getHeader(this._host.engine.i18n("$buildings.group.food")),
@@ -352,9 +355,7 @@ export class BonfireSettingsUi extends SettingsSectionUi {
     this.setState(this._settings);
 
     mustExist(this._settings.$enabled).prop("checked", this._settings.enabled);
-    mustExist(this._settings.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.trigger
-    );
+    mustExist(this._settings.$trigger).refreshUi();
     mustExist(this._settings.upgradeBuildings.$enabled).prop(
       "checked",
       this._settings.upgradeBuildings.enabled

diff --git a/packages/userscript/source/ui/OptionsSettingsUi.ts b/packages/userscript/source/ui/OptionsSettingsUi.ts
@@ -85,9 +85,7 @@ export class OptionsSettingsUi extends SettingsSectionUi {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
 
       if (!isNil(option.$trigger)) {
-        option.$trigger[0].title = SettingsSectionUi.renderPercentage(
-          mustExist(this._settings.items[name].trigger)
-        );
+        option.$trigger.refreshUi();
       }
     }
   }

diff --git a/packages/userscript/source/ui/ReligionSettingsUi.ts b/packages/userscript/source/ui/ReligionSettingsUi.ts
@@ -4,13 +4,15 @@ import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UnicornItemVariant } from "../types";
 import { UserScript } from "../UserScript";
+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;
   private readonly _settings: ReligionSettings;
 
   constructor(host: UserScript, settings: ReligionSettings) {
@@ -23,7 +25,8 @@ export class ReligionSettingsUi extends SettingsSectionUi {
     this._settings = settings;
 
     // Create "trigger" button in the item.
-    panel.element.append(this._makeSectionTriggerButton(toggleName, label, this._settings));
+    this._trigger = new TriggerButton(host, toggleName, label, settings);
+    panel.element.append(this._trigger.element);
 
     const optionButtons = [
       this._getHeader(this._host.engine.i18n("$religion.panel.ziggurat.label")),
@@ -348,21 +351,15 @@ export class ReligionSettingsUi extends SettingsSectionUi {
     this.setState(this._settings);
 
     mustExist(this._settings.$enabled).prop("checked", this._settings.enabled);
-    mustExist(this._settings.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.trigger
-    );
+    mustExist(this._settings.$trigger).refreshUi();
 
     mustExist(this._settings.adore.$enabled).prop("checked", this._settings.adore.enabled);
-    mustExist(this._settings.adore.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.adore.trigger
-    );
+    mustExist(this._settings.adore.$trigger).refreshUi();
     mustExist(this._settings.autoPraise.$enabled).prop(
       "checked",
       this._settings.autoPraise.enabled
     );
-    mustExist(this._settings.autoPraise.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.autoPraise.trigger
-    );
+    mustExist(this._settings.autoPraise.$trigger).refreshUi();
     mustExist(this._settings.bestUnicornBuilding.$enabled).prop(
       "checked",
       this._settings.bestUnicornBuilding.enabled

diff --git a/packages/userscript/source/ui/SettingTriggerUi.ts b/packages/userscript/source/ui/SettingTriggerUi.ts
@@ -1,7 +1,6 @@
 import { SettingTrigger } from "../options/Settings";
-import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
-import { SettingsSectionUi } from "./SettingsSectionUi";
+import { TriggerButton } from "./components/TriggerButton";
 import { SettingUi } from "./SettingUi";
 
 export class SettingTriggerUi {
@@ -29,64 +28,10 @@ export class SettingTriggerUi {
     );
 
     if (setting.trigger !== undefined) {
-      const triggerButton = SettingTriggerUi.getTriggerButton(
-        host,
-        `set-${name}-trigger`,
-        label,
-        setting
-      );
-      setting.$trigger = triggerButton;
-
-      element.append(triggerButton);
+      const triggerButton = new TriggerButton(host, `set-${name}-trigger`, label, setting);
+      element.append(triggerButton.element);
     }
 
     return element;
   }
-
-  /**
-   * Constructs a button to configure the trigger value of an
-   * automation section.
-   *
-   * @param host A reference to the host.
-   * @param id The ID of this trigger button.
-   * @param label The label of the element this trigger is associated with.
-   * @param setting The setting this trigger controls.
-   * @param handler Handlers to register on the control.
-   * @param handler.onClick Call this method when the trigger button
-   * is clicked.
-   * @returns The constructed trigger button.
-   */
-  static getTriggerButton(
-    host: UserScript,
-    id: string,
-    label: string,
-    setting: SettingTrigger,
-    handler: { onClick?: () => void } = {}
-  ) {
-    const triggerButton = $("<div/>", {
-      id: `trigger-${id}`,
-      html: '<svg style="width: 15px; height: 15px;" viewBox="0 0 48 48"><path fill="currentColor" d="M19.95 42 22 27.9h-7.3q-.55 0-.8-.5t0-.95L26.15 6h2.05l-2.05 14.05h7.2q.55 0 .825.5.275.5.025.95L22 42Z" /></svg>',
-    }).addClass("ks-icon-button");
-
-    triggerButton.on("click", () => {
-      const value = SettingsSectionUi.promptPercentage(
-        host.engine.i18n("ui.trigger.set", [label]),
-        SettingsSectionUi.renderPercentage(mustExist(setting.trigger))
-      );
-
-      if (value !== null) {
-        setting.trigger = value;
-        host.updateOptions();
-        triggerButton[0].title = SettingsSectionUi.renderPercentage(setting.trigger);
-      }
-    });
-
-    if (handler.onClick) {
-      triggerButton.on("click", handler.onClick);
-    }
-
-    setting.$trigger = triggerButton;
-
-    return triggerButton;
-  }
 }
diff --git a/packages/userscript/source/ui/SettingsSectionUi.ts b/packages/userscript/source/ui/SettingsSectionUi.ts
@@ -1,10 +1,9 @@
 import { BonfireSettingsItem } from "../options/BonfireSettings";
 import { ReligionSettingsItem } from "../options/ReligionSettings";
-import { SettingMax, SettingTrigger } from "../options/Settings";
+import { SettingMax } from "../options/Settings";
 import { UserScript } from "../UserScript";
 import { WorkshopManager } from "../WorkshopManager";
 import { SettingMaxUi } from "./SettingMaxUi";
-import { SettingTriggerUi } from "./SettingTriggerUi";
 
 export type Toggleable = {
   get isExpanded(): boolean;
@@ -24,18 +23,6 @@ export abstract class SettingsSectionUiBase {
 
   abstract refreshUi(): void;
 
-  /**
-   * Creates a new button to control a trigger value in a configuration section.
-   *
-   * @param id The ID of the button.
-   * @param itext The label of the section this trigger is for.
-   * @param setting The settings section this trigger is for.
-   * @returns The created button.
-   */
-  protected _makeSectionTriggerButton(id: string, itext: string, setting: SettingTrigger) {
-    return SettingTriggerUi.getTriggerButton(this._host, id, itext, setting);
-  }
-
   static getList(id: string) {
     return $("<ul/>", { id }).addClass("ks-list");
   }

diff --git a/packages/userscript/source/ui/SpaceSettingsUi.ts b/packages/userscript/source/ui/SpaceSettingsUi.ts
@@ -3,12 +3,14 @@ import { objectEntries } from "../tools/Entries";
 import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
+import { TriggerButton } from "./components/TriggerButton";
 import { SettingsListUi } from "./SettingsListUi";
 import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 import { SettingUi } from "./SettingUi";
 
 export class SpaceSettingsUi extends SettingsSectionUi {
+  private readonly _trigger: TriggerButton;
   private readonly _settings: SpaceSettings;
 
   constructor(host: UserScript, settings: SpaceSettings) {
@@ -21,7 +23,8 @@ export class SpaceSettingsUi extends SettingsSectionUi {
     this._settings = settings;
 
     // Create "trigger" button in the item.
-    panel.element.append(this._makeSectionTriggerButton(toggleName, label, this._settings));
+    this._trigger = new TriggerButton(host, toggleName, label, settings);
+    panel.element.append(this._trigger.element);
 
     const optionButtons = [
       this._getHeader(this._host.engine.i18n("$space.planet.cath.label")),
@@ -230,9 +233,7 @@ export class SpaceSettingsUi extends SettingsSectionUi {
     this.setState(this._settings);
 
     mustExist(this._settings.$enabled).prop("checked", this._settings.enabled);
-    mustExist(this._settings.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.trigger
-    );
+    mustExist(this._settings.$trigger).refreshUi();
 
     mustExist(this._settings.unlockMissions.$enabled).prop(
       "checked",

diff --git a/packages/userscript/source/ui/TimeControlSettingsUi.ts b/packages/userscript/source/ui/TimeControlSettingsUi.ts
@@ -1136,16 +1136,12 @@ export class TimeControlSettingsUi extends SettingsSectionUi {
       "checked",
       this._settings.accelerateTime.enabled
     );
-    mustExist(this._settings.accelerateTime.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.accelerateTime.trigger
-    );
+    mustExist(this._settings.accelerateTime.$trigger).refreshUi();
 
     mustExist(this._settings.reset.$enabled).prop("checked", this._settings.reset.enabled);
 
     mustExist(this._settings.timeSkip.$enabled).prop("checked", this._settings.timeSkip.enabled);
-    mustExist(this._settings.timeSkip.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.timeSkip.trigger
-    );
+    mustExist(this._settings.timeSkip.$trigger).refreshUi();
     mustExist(this._settings.timeSkip.$autumn).prop("checked", this._settings.timeSkip.autumn);
     mustExist(this._settings.timeSkip.$spring).prop("checked", this._settings.timeSkip.spring);
     mustExist(this._settings.timeSkip.$summer).prop("checked", this._settings.timeSkip.summer);
@@ -1163,31 +1159,31 @@ export class TimeControlSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.buildItems)) {
       mustExist(option.$enabled).prop("checked", this._settings.buildItems[name].enabled);
-      mustExist(option.$trigger).text(
+      mustExist(option.$trigger).element.text(
         this._host.engine.i18n("ui.min", [
           this._renderLimit(this._settings.buildItems[name].trigger),
         ])
       );
     }
     for (const [name, option] of objectEntries(this._settings.religionItems)) {
       mustExist(option.$enabled).prop("checked", this._settings.religionItems[name].enabled);
-      mustExist(option.$trigger).text(
+      mustExist(option.$trigger).element.text(
         this._host.engine.i18n("ui.min", [
           this._renderLimit(this._settings.religionItems[name].trigger),
         ])
       );
     }
     for (const [name, option] of objectEntries(this._settings.spaceItems)) {
       mustExist(option.$enabled).prop("checked", this._settings.spaceItems[name].enabled);
-      mustExist(option.$trigger).text(
+      mustExist(option.$trigger).element.text(
         this._host.engine.i18n("ui.min", [
           this._renderLimit(this._settings.spaceItems[name].trigger),
         ])
       );
     }
     for (const [name, option] of objectEntries(this._settings.timeItems)) {
       mustExist(option.$enabled).prop("checked", this._settings.timeItems[name].enabled);
-      mustExist(option.$trigger).text(
+      mustExist(option.$trigger).element.text(
         this._host.engine.i18n("ui.min", [
           this._renderLimit(this._settings.timeItems[name].trigger),
         ])

diff --git a/packages/userscript/source/ui/TimeSettingsUi.ts b/packages/userscript/source/ui/TimeSettingsUi.ts
@@ -3,12 +3,14 @@ import { objectEntries } from "../tools/Entries";
 import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
+import { TriggerButton } from "./components/TriggerButton";
 import { SettingMaxUi } from "./SettingMaxUi";
 import { SettingsListUi } from "./SettingsListUi";
 import { SettingsPanelUi } from "./SettingsPanelUi";
 import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class TimeSettingsUi extends SettingsSectionUi {
+  private readonly _trigger: TriggerButton;
   private readonly _settings: TimeSettings;
 
   constructor(host: UserScript, settings: TimeSettings) {
@@ -21,7 +23,8 @@ export class TimeSettingsUi extends SettingsSectionUi {
     this._settings = settings;
 
     // Create "trigger" button in the item.
-    panel.element.append(this._makeSectionTriggerButton(toggleName, label, this._settings));
+    this._trigger = new TriggerButton(host, toggleName, label, settings);
+    panel.element.append(this._trigger.element);
 
     const optionButtons = [
       this._getTimeSetting(
@@ -120,9 +123,7 @@ export class TimeSettingsUi extends SettingsSectionUi {
     this.setState(this._settings);
 
     mustExist(this._settings.$enabled).prop("checked", this._settings.enabled);
-    mustExist(this._settings.$trigger)[0].title = SettingsSectionUi.renderPercentage(
-      this._settings.trigger
-    );
+    mustExist(this._settings.$trigger).refreshUi();
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);