feat(ui): Add element for LimitedMax settings

This enables setting the cap for resources to craft.

packages/userscript/source/options/Settings.ts

@@ -39,16 +39,12 @@ export class SettingMax extends Setting {
   }
 }
 
-export class SettingLimitedMax extends Setting implements SettingLimited, SettingMax {
-  limited: boolean;
-  $limited: JQuery<HTMLElement> | undefined = undefined;
-
+export class SettingLimitedMax extends SettingLimited implements SettingMax {
   max: number;
   $max: JQuery<HTMLElement> | undefined = undefined;
 
   constructor(enabled = false, limited = false, max = -1) {
-    super(enabled);
-    this.limited = limited;
+    super(enabled, limited);
     this.max = max;
   }
 }

packages/userscript/source/ui/SettingLimitedMaxUi.ts

@@ -0,0 +1,82 @@
+import { SettingLimitedMax } from "../options/Settings";
+import { UserScript } from "../UserScript";
+import { SettingLimitedUi } from "./SettingLimitedUi";
+import { SettingsSectionUi } from "./SettingsSectionUi";
+
+export class SettingLimitedMaxUi {
+  /**
+   * Create a UI element for a setting that can be limited and has a maximum.
+   * This will result in an element with a checkbox that has a "Limited" label
+   * and control the `limited` property of the setting.
+   * It will also have a "Max" indicator, which controls the respective `max`
+   * property in the setting model.
+   *
+   * @param host The userscript instance.
+   * @param name A unique name for this setting.
+   * @param setting The setting model.
+   * @param label The label for the setting.
+   * @param delimiter Should a delimiter be rendered after this element?
+   * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
+   * to indicate that this is an upgrade of a prior setting?
+   * @param handler Handlers to call when the setting is checked or unchecked.
+   * @param handler.onCheck Is called when the setting is checked.
+   * @param handler.onUnCheck Is called when the setting is unchecked.
+   * @param handler.onLimitedCheck Is called when the "Limited" checkbox is checked.
+   * @param handler.onLimitedUnCheck Is called when the "Limited" checkbox is unchecked.
+   * @returns The created element.
+   */
+  static make(
+    host: UserScript,
+    name: string,
+    setting: SettingLimitedMax,
+    label: string,
+    delimiter = false,
+    upgradeIndicator = false,
+    handler: {
+      onCheck?: () => void;
+      onUnCheck?: () => void;
+      onLimitedCheck?: () => void;
+      onLimitedUnCheck?: () => void;
+    } = {}
+  ): JQuery<HTMLElement> {
+    const element = SettingLimitedUi.make(
+      host,
+      name,
+      setting,
+      label,
+      delimiter,
+      upgradeIndicator,
+      handler
+    );
+
+    const maxButton = $("<div/>", {
+      id: `set-${name}-max`,
+      css: {
+        cursor: "pointer",
+        display: "inline-block",
+        float: "right",
+        paddingRight: "5px",
+        paddingTop: "2px",
+      },
+    }).data("option", setting);
+    setting.$max = maxButton;
+
+    maxButton.on("click", () => {
+      const value = SettingsSectionUi.promptLimit(
+        host.i18n("ui.max.set", [label]),
+        setting.max.toString()
+      );
+
+      if (value !== null) {
+        const limit = SettingsSectionUi.renderLimit(value, host);
+        host.updateOptions(() => (setting.max = value));
+        maxButton[0].title = limit;
+        maxButton[0].innerText = host.i18n("ui.max", [limit]);
+      }
+    });
+
+    element.append(maxButton);
+
+    return element;
+  }
+}

packages/userscript/source/ui/SettingLimitedUi.ts

@@ -5,27 +5,27 @@ import { SettingUi } from "./SettingUi";
 
 export class SettingLimitedUi {
   /**
-   * Create a UI element for an option that can be limited.
+   * Create a UI element for a setting that can be limited.
    * This will result in an element with a checkbox that has a "Limited" label.
    *
    * @param host The userscript instance.
-   * @param name A unique name for this option.
-   * @param option The option model.
-   * @param label The label for the option.
+   * @param name A unique name for this setting.
+   * @param setting The setting model.
+   * @param label The label for the setting.
    * @param delimiter Should a delimiter be rendered after this element?
    * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
-   * to indicate that this is an upgrade of a prior option?
-   * @param handler Handlers to call when the option is checked or unchecked.
-   * @param handler.onCheck Is called when the option is checked.
-   * @param handler.onUnCheck Is called when the option is unchecked.
+   * to indicate that this is an upgrade of a prior setting?
+   * @param handler Handlers to call when the setting is checked or unchecked.
+   * @param handler.onCheck Is called when the setting is checked.
+   * @param handler.onUnCheck Is called when the setting is unchecked.
    * @param handler.onLimitedCheck Is called when the "Limited" checkbox is checked.
    * @param handler.onLimitedUnCheck Is called when the "Limited" checkbox is unchecked.
    * @returns The created element.
    */
   static make(
     host: UserScript,
     name: string,
-    option: SettingLimited,
+    setting: SettingLimited,
     label: string,
     delimiter = false,
     upgradeIndicator = false,
@@ -36,7 +36,15 @@ export class SettingLimitedUi {
       onLimitedUnCheck?: () => void;
     } = {}
   ): JQuery<HTMLElement> {
-    const element = SettingUi.make(host, name, option, label, delimiter, upgradeIndicator, handler);
+    const element = SettingUi.make(
+      host,
+      name,
+      setting,
+      label,
+      delimiter,
+      upgradeIndicator,
+      handler
+    );
 
     const labelElement = $("<label/>", {
       for: `toggle-limited-${name}`,
@@ -46,25 +54,25 @@ export class SettingLimitedUi {
     const input = $("<input/>", {
       id: `toggle-limited-${name}`,
       type: "checkbox",
-    }).data("option", option);
-    option.$limited = input;
+    }).data("option", setting);
+    setting.$limited = input;
 
     input.on("change", () => {
-      if (input.is(":checked") && option.limited === false) {
+      if (input.is(":checked") && setting.limited === false) {
         if (handler.onLimitedCheck) {
           handler.onLimitedCheck();
           return;
         }
 
-        host.updateOptions(() => (option.limited = true));
+        host.updateOptions(() => (setting.limited = true));
         clog("Unlogged action item");
-      } else if (!input.is(":checked") && option.limited === true) {
+      } else if (!input.is(":checked") && setting.limited === true) {
         if (handler.onLimitedUnCheck) {
           handler.onLimitedUnCheck();
           return;
         }
 
-        host.updateOptions(() => (option.limited = false));
+        host.updateOptions(() => (setting.limited = false));
         clog("Unlogged action item");
       }
     });

packages/userscript/source/ui/SettingMaxUi.ts

@@ -5,26 +5,26 @@ import { SettingUi } from "./SettingUi";
 
 export class SettingMaxUi {
   /**
-   * Create a UI element for an option that can have a maximum.
+   * Create a UI element for a setting that can have a maximum.
    * This will result in an element with a labeled checkbox and a "Max" indicator,
-   * which controls the respective `max` property in the option model.
+   * which controls the respective `max` property in the setting model.
    *
    * @param host The userscript instance.
-   * @param name A unique name for this option.
-   * @param option The option model.
-   * @param label The label for the option.
+   * @param name A unique name for this setting.
+   * @param setting The setting model.
+   * @param label The label for the setting.
    * @param delimiter Should a delimiter be rendered after this element?
    * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
-   * to indicate that this is an upgrade of a prior option?
-   * @param handler Handlers to call when the option is checked or unchecked.
-   * @param handler.onCheck Is called when the option is checked.
-   * @param handler.onUnCheck Is called when the option is unchecked.
+   * to indicate that this is an upgrade of a prior setting?
+   * @param handler Handlers to call when the setting is checked or unchecked.
+   * @param handler.onCheck Is called when the setting is checked.
+   * @param handler.onUnCheck Is called when the setting is unchecked.
    * @returns The created element.
    */
   static make(
     host: UserScript,
     name: string,
-    option: SettingMax,
+    setting: SettingMax,
     label: string,
     delimiter = false,
     upgradeIndicator = false,
@@ -33,7 +33,15 @@ export class SettingMaxUi {
       onUnCheck?: () => void;
     } = {}
   ): JQuery<HTMLElement> {
-    const element = SettingUi.make(host, name, option, label, delimiter, upgradeIndicator, handler);
+    const element = SettingUi.make(
+      host,
+      name,
+      setting,
+      label,
+      delimiter,
+      upgradeIndicator,
+      handler
+    );
 
     const maxButton = $("<div/>", {
       id: `set-${name}-max`,
@@ -42,19 +50,20 @@ export class SettingMaxUi {
         display: "inline-block",
         float: "right",
         paddingRight: "5px",
+        paddingTop: "2px",
       },
-    }).data("option", option);
-    option.$max = maxButton;
+    }).data("option", setting);
+    setting.$max = maxButton;
 
     maxButton.on("click", () => {
       const value = SettingsSectionUi.promptLimit(
         host.i18n("ui.max.set", [label]),
-        option.max.toString()
+        setting.max.toString()
       );
 
       if (value !== null) {
         const limit = SettingsSectionUi.renderLimit(value, host);
-        host.updateOptions(() => (option.max = value));
+        host.updateOptions(() => (setting.max = value));
         maxButton[0].title = limit;
         maxButton[0].innerText = host.i18n("ui.max", [limit]);
       }

packages/userscript/source/ui/SettingTriggerUi.ts

@@ -8,7 +8,7 @@ export class SettingTriggerUi {
   static make(
     host: UserScript,
     name: string,
-    option: SettingTrigger,
+    setting: SettingTrigger,
     label: string,
     delimiter = false,
     upgradeIndicator = false,
@@ -17,24 +17,32 @@ export class SettingTriggerUi {
       onUnCheck?: () => void;
     } = {}
   ): JQuery<HTMLElement> {
-    const element = SettingUi.make(host, name, option, label, delimiter, upgradeIndicator, handler);
+    const element = SettingUi.make(
+      host,
+      name,
+      setting,
+      label,
+      delimiter,
+      upgradeIndicator,
+      handler
+    );
 
-    if (option.trigger !== undefined) {
+    if (setting.trigger !== undefined) {
       const triggerButton = SettingsSectionUi.getTriggerButton(`set-${name}-trigger`, {
         onClick: () => {
           const value = SettingsSectionUi.promptPercentage(
             host.i18n("ui.trigger.set", [label]),
-            SettingsSectionUi.renderPercentage(mustExist(option.trigger))
+            SettingsSectionUi.renderPercentage(mustExist(setting.trigger))
           );
 
           if (value !== null) {
-            option.trigger = value;
+            setting.trigger = value;
             host.updateOptions();
-            triggerButton[0].title = SettingsSectionUi.renderPercentage(option.trigger);
+            triggerButton[0].title = SettingsSectionUi.renderPercentage(setting.trigger);
           }
         },
       });
-      option.$trigger = triggerButton;
+      setting.$trigger = triggerButton;
 
       element.append(triggerButton);
     }