refactor(max): Discrete max component

oliversalzburg · Oct 8, 2022 · 86fc660 · 86fc660
1 parent 3ca7f9a
commit 86fc660
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 65 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 { MaxButton } from "../ui/components/MaxButton";
 import { TriggerButton } from "../ui/components/TriggerButton";
 import { BonfireItem } from "./BonfireSettings";
 import { FaithItem, ReligionItem } from "./ReligionSettings";
@@ -32,7 +33,7 @@ export class SettingLimited extends Setting {
 
 export class SettingMax extends Setting {
   max: number;
-  $max: JQuery<HTMLElement> | undefined = undefined;
+  $max: MaxButton | undefined = undefined;
 
   constructor(enabled = false, max = -1) {
     super(enabled);
@@ -42,7 +43,7 @@ export class SettingMax extends Setting {
 
 export class SettingLimitedMax extends SettingLimited implements SettingMax {
   max: number;
-  $max: JQuery<HTMLElement> | undefined = undefined;
+  $max: MaxButton | undefined = undefined;
 
   constructor(enabled = false, limited = false, max = -1) {
     super(enabled, limited);

diff --git a/packages/userscript/source/ui/BonfireSettingsUi.ts b/packages/userscript/source/ui/BonfireSettingsUi.ts
@@ -367,9 +367,7 @@ export class BonfireSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
-      mustExist(option.$max).text(
-        this._host.engine.i18n("ui.max", [this._renderLimit(this._settings.items[name].max)])
-      );
+      mustExist(option.$max).refreshUi();
     }
 
     // Building upgrades.

diff --git a/packages/userscript/source/ui/ReligionSettingsUi.ts b/packages/userscript/source/ui/ReligionSettingsUi.ts
@@ -368,9 +368,7 @@ export class ReligionSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
-      mustExist(option.$max).text(
-        this._host.engine.i18n("ui.max", [this._renderLimit(this._settings.items[name].max)])
-      );
+      mustExist(option.$max).refreshUi();
     }
   }
 }
diff --git a/packages/userscript/source/ui/SettingLimitedMaxUi.ts b/packages/userscript/source/ui/SettingLimitedMaxUi.ts
@@ -1,7 +1,7 @@
 import { SettingLimitedMax } from "../options/Settings";
 import { UserScript } from "../UserScript";
+import { MaxButton } from "./components/MaxButton";
 import { SettingLimitedUi } from "./SettingLimitedUi";
-import { SettingsSectionUi } from "./SettingsSectionUi";
 
 export class SettingLimitedMaxUi {
   /**
@@ -49,26 +49,9 @@ export class SettingLimitedMaxUi {
       upgradeIndicator
     );
 
-    const maxButton = $("<div/>", {
-      id: `set-${name}-max`,
-    }).addClass("ks-max-button");
+    const maxButton = new MaxButton(host, name, label, setting);
     setting.$max = maxButton;
-
-    maxButton.on("click", () => {
-      const value = SettingsSectionUi.promptLimit(
-        host.engine.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.engine.i18n("ui.max", [limit]);
-      }
-    });
-
-    element.append(maxButton);
+    element.append(maxButton.element);
 
     return element;
   }

diff --git a/packages/userscript/source/ui/SettingMaxUi.ts b/packages/userscript/source/ui/SettingMaxUi.ts
@@ -1,6 +1,6 @@
 import { SettingMax } from "../options/Settings";
 import { UserScript } from "../UserScript";
-import { SettingsSectionUi } from "./SettingsSectionUi";
+import { MaxButton } from "./components/MaxButton";
 import { SettingUi } from "./SettingUi";
 
 export class SettingMaxUi {
@@ -44,26 +44,9 @@ export class SettingMaxUi {
       []
     );
 
-    const maxButton = $("<div/>", {
-      id: `set-${name}-max`,
-    }).addClass("ks-max-button");
+    const maxButton = new MaxButton(host, name, label, setting);
     setting.$max = maxButton;
-
-    maxButton.on("click", () => {
-      const value = SettingsSectionUi.promptLimit(
-        host.engine.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.engine.i18n("ui.max", [limit]);
-      }
-    });
-
-    element.append(maxButton);
+    element.append(maxButton.element);
 
     return element;
   }

diff --git a/packages/userscript/source/ui/SpaceSettingsUi.ts b/packages/userscript/source/ui/SpaceSettingsUi.ts
@@ -245,9 +245,7 @@ export class SpaceSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
-      mustExist(option.$max).text(
-        this._host.engine.i18n("ui.max", [this._renderLimit(this._settings.items[name].max)])
-      );
+      mustExist(option.$max).refreshUi();
     }
   }
 }
diff --git a/packages/userscript/source/ui/TimeSettingsUi.ts b/packages/userscript/source/ui/TimeSettingsUi.ts
@@ -127,9 +127,7 @@ export class TimeSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
-      mustExist(option.$max).text(
-        this._host.engine.i18n("ui.max", [this._renderLimit(this._settings.items[name].max)])
-      );
+      mustExist(option.$max).refreshUi();
     }
   }
 }
diff --git a/packages/userscript/source/ui/TradeSettingsUi.ts b/packages/userscript/source/ui/TradeSettingsUi.ts
@@ -287,11 +287,7 @@ export class TradeSettingsUi extends SettingsSectionUi {
     mustExist(this._settings.buildEmbassies.$trigger).refreshUi();
     for (const [name, option] of objectEntries(this._settings.buildEmbassies.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.buildEmbassies.items[name].enabled);
-      mustExist(option.$max).text(
-        this._host.engine.i18n("ui.max", [
-          this._renderLimit(this._settings.buildEmbassies.items[name].max),
-        ])
-      );
+      mustExist(option.$max).refreshUi();
     }
 
     mustExist(this._settings.unlockRaces.$enabled).prop(

diff --git a/packages/userscript/source/ui/VillageSettingsUi.ts b/packages/userscript/source/ui/VillageSettingsUi.ts
@@ -183,9 +183,7 @@ export class VillageSettingsUi extends SettingsSectionUi {
 
     for (const [name, option] of objectEntries(this._settings.items)) {
       mustExist(option.$enabled).prop("checked", this._settings.items[name].enabled);
-      mustExist(option.$max).text(
-        this._host.engine.i18n("ui.max", [this._renderLimit(this._settings.items[name].max)])
-      );
+      mustExist(option.$max).refreshUi();
     }
   }
 }
diff --git a/packages/userscript/source/ui/WorkshopSettingsUi.ts b/packages/userscript/source/ui/WorkshopSettingsUi.ts
@@ -251,9 +251,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.$max).text(
-        this._host.engine.i18n("ui.max", [this._renderLimit(option.max)])
-      );
+      mustExist(option.$max).refreshUi();
     }
   }
 }
diff --git a/packages/userscript/source/ui/components/MaxButton.ts b/packages/userscript/source/ui/components/MaxButton.ts
@@ -0,0 +1,52 @@
+import { SettingMax } from "../../options/Settings";
+import { UserScript } from "../../UserScript";
+import { SettingsSectionUi } from "../SettingsSectionUi";
+
+export class MaxButton {
+  readonly host: UserScript;
+  readonly setting: SettingMax;
+  readonly element: JQuery<HTMLElement>;
+
+  constructor(
+    host: UserScript,
+    id: string,
+    label: string,
+    setting: SettingMax,
+    handler: { onClick?: () => void } = {}
+  ) {
+    const element = $("<div/>", {
+      id: `set-${id}-max`,
+    }).addClass("ks-max-button");
+
+    element.on("click", () => {
+      const value = SettingsSectionUi.promptLimit(
+        host.engine.i18n("ui.max.set", [label]),
+        setting.max.toString()
+      );
+
+      if (value !== null) {
+        const limit = SettingsSectionUi.renderLimit(value, host);
+        host.updateOptions(() => (setting.max = value));
+        element[0].title = limit;
+        element[0].innerText = host.engine.i18n("ui.max", [limit]);
+      }
+
+      if (handler.onClick) {
+        handler.onClick();
+      }
+    });
+
+    setting.$max = this;
+
+    this.element = element;
+    this.host = host;
+    this.setting = setting;
+  }
+
+  refreshUi() {
+    this.element[0].title = this.setting.max.toFixed();
+    this.element.text(
+      this.host.engine.i18n("ui.max", [SettingsSectionUi.renderLimit(this.setting.max, this.host)])
+    );
+  }
+}