feat(limited): Discrete component for limited

oliversalzburg · Oct 8, 2022 · 04eaf18 · 04eaf18
1 parent d435b17
commit 04eaf18
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 59 deletions.
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 { LimitedButton } from "../ui/components/LimitedButton";
 import { MaxButton } from "../ui/components/MaxButton";
 import { TriggerButton } from "../ui/components/TriggerButton";
 import { BonfireItem } from "./BonfireSettings";
@@ -23,7 +24,7 @@ export class Setting {
 
 export class SettingLimited extends Setting {
   limited: boolean;
-  $limited: JQuery<HTMLElement> | undefined = undefined;
+  $limited: LimitedButton | undefined = undefined;
 
   constructor(id: string, enabled = false, limited = false) {
     super(id, enabled);

diff --git a/packages/userscript/source/ui/SettingLimitedMaxUi.ts b/packages/userscript/source/ui/SettingLimitedMaxUi.ts
@@ -33,8 +33,8 @@ export class SettingLimitedMaxUi {
     handler: {
       onCheck: () => void;
       onUnCheck: () => void;
-      onLimitedCheck?: () => void;
-      onLimitedUnCheck?: () => void;
+      onLimitedCheck: () => void;
+      onLimitedUnCheck: () => void;
     },
     delimiter = false,
     upgradeIndicator = false

diff --git a/packages/userscript/source/ui/SettingLimitedUi.ts b/packages/userscript/source/ui/SettingLimitedUi.ts
@@ -1,6 +1,6 @@
 import { SettingLimited } from "../options/Settings";
-import { clog } from "../tools/Log";
 import { UserScript } from "../UserScript";
+import { LimitedButton } from "./components/LimitedButton";
 import { SettingUi } from "./SettingUi";
 
 export class SettingLimitedUi {
@@ -30,8 +30,8 @@ export class SettingLimitedUi {
     handler: {
       onCheck: () => void;
       onUnCheck: () => void;
-      onLimitedCheck?: () => void;
-      onLimitedUnCheck?: () => void;
+      onLimitedCheck: () => void;
+      onLimitedUnCheck: () => void;
     },
     delimiter = false,
     upgradeIndicator = false
@@ -47,38 +47,8 @@ export class SettingLimitedUi {
       []
     );
 
-    const labelElement = $("<label/>", {
-      for: `toggle-limited-${name}`,
-      text: host.engine.i18n("ui.limit"),
-    });
-
-    const input = $("<input/>", {
-      id: `toggle-limited-${name}`,
-      type: "checkbox",
-    });
-    setting.$limited = input;
-
-    input.on("change", () => {
-      if (input.is(":checked") && setting.limited === false) {
-        if (handler.onLimitedCheck) {
-          handler.onLimitedCheck();
-          return;
-        }
-
-        host.updateOptions(() => (setting.limited = true));
-        clog("Unlogged action item");
-      } else if (!input.is(":checked") && setting.limited === true) {
-        if (handler.onLimitedUnCheck) {
-          handler.onLimitedUnCheck();
-          return;
-        }
-
-        host.updateOptions(() => (setting.limited = false));
-        clog("Unlogged action item");
-      }
-    });
-
-    element.append(input, labelElement);
+    const limitedButton = new LimitedButton(host, name, setting, handler);
+    element.append(limitedButton.element);
 
     return element;
   }

diff --git a/packages/userscript/source/ui/SettingMaxUi.ts b/packages/userscript/source/ui/SettingMaxUi.ts
@@ -45,7 +45,6 @@ export class SettingMaxUi {
     );
 
     const maxButton = new MaxButton(host, name, label, setting);
-    setting.$max = maxButton;
     element.append(maxButton.element);
 
     return element;

diff --git a/packages/userscript/source/ui/TradeSettingsUi.ts b/packages/userscript/source/ui/TradeSettingsUi.ts
@@ -97,14 +97,8 @@ export class TradeSettingsUi extends SettingsSectionUi {
       {
         onCheck: () => this._host.engine.imessage("status.sub.enable", [i18nName]),
         onUnCheck: () => this._host.engine.imessage("status.sub.disable", [i18nName]),
-        onLimitedCheck: () => {
-          this._host.updateOptions(() => (option.limited = true));
-          this._host.engine.imessage("trade.limited", [i18nName]);
-        },
-        onLimitedUnCheck: () => {
-          this._host.updateOptions(() => (option.limited = false));
-          this._host.engine.imessage("trade.unlimited", [i18nName]);
-        },
+        onLimitedCheck: () => this._host.engine.imessage("trade.limited", [i18nName]),
+        onLimitedUnCheck: () => this._host.engine.imessage("trade.unlimited", [i18nName]),
       },
       delimiter,
       upgradeIndicator
@@ -297,7 +291,7 @@ export class TradeSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
-      mustExist(option.$limited).prop("checked", this._settings.items[name].limited);
+      mustExist(option.$limited).refreshUi();
 
       mustExist(option.$autumn).prop("checked", this._settings.items[name].autumn);
       mustExist(option.$spring).prop("checked", this._settings.items[name].spring);

diff --git a/packages/userscript/source/ui/WorkshopSettingsUi.ts b/packages/userscript/source/ui/WorkshopSettingsUi.ts
@@ -151,16 +151,10 @@ export class WorkshopSettingsUi extends SettingsSectionUi {
       option,
       label,
       {
-        onCheck: () => this._host.engine.imessage("status.auto.enable", [label]),
-        onUnCheck: () => this._host.engine.imessage("status.auto.disable", [label]),
-        onLimitedCheck: () => {
-          this._host.updateOptions(() => (option.limited = true));
-          this._host.engine.imessage("craft.limited", [label]);
-        },
-        onLimitedUnCheck: () => {
-          this._host.updateOptions(() => (option.limited = false));
-          this._host.engine.imessage("craft.unlimited", [label]);
-        },
+        onCheck: () => this._host.engine.imessage("status.sub.enable", [label]),
+        onUnCheck: () => this._host.engine.imessage("status.sub.disable", [label]),
+        onLimitedCheck: () => this._host.engine.imessage("craft.limited", [label]),
+        onLimitedUnCheck: () => this._host.engine.imessage("craft.unlimited", [label]),
       },
       delimiter,
       upgradeIndicator
@@ -250,7 +244,7 @@ export class WorkshopSettingsUi extends SettingsSectionUi {
 
     for (const [, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", option.enabled);
-      mustExist(option.$limited).prop("checked", option.limited);
+      mustExist(option.$limited).refreshUi();
       mustExist(option.$max).refreshUi();
     }
   }

diff --git a/packages/userscript/source/ui/components/LimitedButton.ts b/packages/userscript/source/ui/components/LimitedButton.ts
@@ -0,0 +1,48 @@
+import { SettingLimited } from "../../options/Settings";
+import { mustExist } from "../../tools/Maybe";
+import { UserScript } from "../../UserScript";
+
+export class LimitedButton {
+  readonly host: UserScript;
+  readonly setting: SettingLimited;
+  readonly element: JQuery<HTMLElement>;
+
+  constructor(
+    host: UserScript,
+    id: string,
+    setting: SettingLimited,
+    handler: { onLimitedCheck: () => void; onLimitedUnCheck: () => void }
+  ) {
+    const element = $("<label/>", {
+      for: `toggle-limited-${id}`,
+      text: host.engine.i18n("ui.limit"),
+    });
+
+    const input = $("<input/>", {
+      id: `toggle-limited-${id}`,
+      type: "checkbox",
+    });
+
+    input.on("change", () => {
+      if (input.is(":checked") && setting.limited === false) {
+        setting.limited = true;
+        host.updateOptions();
+        handler.onLimitedCheck();
+      } else if (!input.is(":checked") && setting.limited === true) {
+        setting.limited = false;
+        host.updateOptions();
+        handler.onLimitedUnCheck();
+      }
+    });
+
+    setting.$limited = this;
+
+    this.element = element;
+    this.host = host;
+    this.setting = setting;
+  }
+
+  refreshUi() {
+    mustExist(this.element).prop("checked", this.setting.limited);
+  }
+}