feat(ui): Beta 9 Polish

Now uses CSS Modules to style components.

@types/module.css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const styles: Record<string, string>;
+  export = styles;
+}

packages/kitten-analysts/package.json

@@ -55,6 +55,7 @@
     "esbuild": "0.24.0",
     "typescript": "5.6.3",
     "vite": "5.4.11",
+    "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-userscript": "0.1.3"
   },
   "keywords": [

packages/kitten-engineers/package.json

@@ -39,6 +39,7 @@
   "devDependencies": {
     "typescript": "5.6.3",
     "vite": "5.4.11",
+    "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-userscript": "0.1.3"
   },
   "keywords": [

packages/kitten-scientists/package.json

@@ -46,6 +46,7 @@
     "@types/web": "0.0.179",
     "typescript": "5.6.3",
     "vite": "5.4.11",
+    "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-userscript": "0.1.3"
   },
   "keywords": [

packages/kitten-scientists/source/i18n/en-US.json

@@ -245,7 +245,10 @@
   "ui.trigger.build.inherited": "inherited from section",
   "ui.trigger.build.prompt": "Trigger for {0} (Current: {1})",
   "ui.trigger.build.promptExplainer": "If you submit an empty value, or a negative value, the section trigger is used instead. If you submit an invalid value, it will be treated as if you hit Cancel.",
+  "ui.trigger.prompt.absolute": "Enter the new trigger value as an absolute value between 0.0 and Infinity.",
   "ui.trigger.prompt.percentage": "Enter the new trigger value as a percentage between 0.0 and 100.0.",
+  "ui.trigger.reset.inactive": "inactive",
+  "ui.trigger.reset.promptExplainer": "If you submit a negative value, the item will be disabled. If you submit an empty value, or an invalid value, it will be treated as if you hit Cancel.",
   "ui.trigger.section.inactive": "∞ (nothing is built automatically)",
   "ui.trigger.section.prompt": "Trigger for section {0} (Current: {1})",
   "ui.trigger.section.promptExplainer": "If you submit an empty value, or a negative value, the section trigger will be set to infinity (∞), which disables all builds, unless they have their own trigger set.\nIf you submit an invalid value, it will be treated as if you hit Cancel.",

packages/kitten-scientists/source/ui/ResetBonfireSettingsUi.ts

@@ -1,9 +1,12 @@
 import { isNil } from "@oliversalzburg/js-utils/data/nil.js";
+import { redirectErrorsToConsole } from "@oliversalzburg/js-utils/errors/console.js";
 import { KittenScientists } from "../KittenScientists.js";
 import { Icons } from "../images/Icons.js";
 import { ResetBonfireSettings } from "../settings/ResetBonfireSettings.js";
 import { SettingTrigger } from "../settings/Settings.js";
 import { StagedBuilding } from "../types/index.js";
+import stylesDelimiter from "./components/Delimiter.module.css";
+import { Dialog } from "./components/Dialog.js";
 import { HeaderListItem } from "./components/HeaderListItem.js";
 import { IconSettingsPanel } from "./components/IconSettingsPanel.js";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem.js";
@@ -32,25 +35,31 @@ export class ResetBonfireSettingsUi extends IconSettingsPanel<ResetBonfireSettin
             item => item.baseBuilding === building,
           )?.building as StagedBuilding;
           this._buildings.push(
-            this._getResetOption(host, this.setting.buildings[building], meta.stages[0].label),
+            this._getResetOption(
+              host,
+              this.setting.buildings[building],
+              label,
+              meta.stages[0].label,
+            ),
             this._getResetOption(
               host,
               this.setting.buildings[name],
+              label,
               meta.stages[1].label,
               false,
               true,
             ),
           );
         } else if (!isNil(meta.label)) {
           this._buildings.push(
-            this._getResetOption(host, this.setting.buildings[building], meta.label),
+            this._getResetOption(host, this.setting.buildings[building], label, meta.label),
           );
         }
       }
 
       // Add padding after each group. Except for the last group, which ends the list.
       if (buildingGroup !== host.game.bld.buildingGroups[host.game.bld.buildingGroups.length - 1]) {
-        this._buildings.at(-1)?.element.addClass("ks-delimiter");
+        this._buildings.at(-1)?.element.addClass(stylesDelimiter.delimiter);
       }
     }
 
@@ -62,19 +71,63 @@ export class ResetBonfireSettingsUi extends IconSettingsPanel<ResetBonfireSettin
   private _getResetOption(
     host: KittenScientists,
     option: SettingTrigger,
+    sectionLabel: string,
     i18nName: string,
     delimiter = false,
     upgradeIndicator = false,
   ) {
-    return new SettingTriggerListItem(host, i18nName, option, {
+    const element = new SettingTriggerListItem(host, i18nName, option, {
       delimiter,
       onCheck: () => {
         host.engine.imessage("status.reset.check.enable", [i18nName]);
       },
       onUnCheck: () => {
         host.engine.imessage("status.reset.check.disable", [i18nName]);
       },
+      onRefresh: () => {
+        element.triggerButton.inactive = option.trigger === -1;
+      },
+      onRefreshTrigger: () => {
+        element.triggerButton.element[0].title = host.engine.i18n("ui.trigger", [
+          option.trigger < 0
+            ? host.engine.i18n("ui.trigger.reset.inactive", [sectionLabel])
+            : option.trigger.toString(),
+        ]);
+      },
+      onSetTrigger: () => {
+        Dialog.prompt(
+          host,
+          host.engine.i18n("ui.trigger.prompt.absolute"),
+          host.engine.i18n("ui.trigger.build.prompt", [
+            i18nName,
+            option.trigger !== -1
+              ? option.trigger.toString()
+              : host.engine.i18n("ui.trigger.reset.inactive"),
+          ]),
+          option.trigger !== -1 ? option.trigger.toString() : "",
+          host.engine.i18n("ui.trigger.reset.promptExplainer"),
+        )
+          .then(value => {
+            if (value === undefined) {
+              return;
+            }
+
+            if (value === "" || value.startsWith("-")) {
+              option.trigger = -1;
+              option.enabled = false;
+              return;
+            }
+
+            option.enabled = true;
+            option.trigger = Number(value);
+          })
+          .then(() => {
+            element.refreshUi();
+          })
+          .catch(redirectErrorsToConsole(console));
+      },
       upgradeIndicator,
     });
+    return element;
   }
 }

packages/kitten-scientists/source/ui/ResetUpgradesSettingsUi.ts

@@ -4,6 +4,7 @@ import { KittenScientists } from "../KittenScientists.js";
 import { Icons } from "../images/Icons.js";
 import { ResetUpgradeSettings } from "../settings/ResetUpgradeSettings.js";
 import { Setting, SettingOptions } from "../settings/Settings.js";
+import stylesDelimiter from "./components/Delimiter.module.css";
 import { IconSettingsPanel } from "./components/IconSettingsPanel.js";
 import { SettingListItem } from "./components/SettingListItem.js";
 import { SettingsList } from "./components/SettingsList.js";
@@ -41,7 +42,7 @@ export class ResetUpgradesSettingsUi extends IconSettingsPanel<ResetUpgradeSetti
             localeSupportsSortMethod &&
             lastLabel[0] !== upgrade.label[0]
           ) {
-            lastElement.element.addClass("ks-delimiter");
+            lastElement.element.addClass(stylesDelimiter.delimiter);
           }
 
           const element = this._getResetOption(

packages/kitten-scientists/source/ui/TradeSettingsUi.ts

@@ -1,17 +1,20 @@
 import { isNil } from "@oliversalzburg/js-utils/data/nil.js";
+import { redirectErrorsToConsole } from "@oliversalzburg/js-utils/errors/console.js";
 import { KittenScientists } from "../KittenScientists.js";
 import { SettingBuySellThreshold } from "../settings/Settings.js";
 import { TradeSettings, TradeSettingsItem } from "../settings/TradeSettings.js";
 import { ucfirst } from "../tools/Format.js";
 import { BuyButton } from "./components/buttons-text/BuyButton.js";
 import { SellButton } from "./components/buttons-text/SellButton.js";
+import { Dialog } from "./components/Dialog.js";
 import { HeaderListItem } from "./components/HeaderListItem.js";
 import { SeasonsList } from "./components/SeasonsList.js";
 import { SettingLimitedListItem } from "./components/SettingLimitedListItem.js";
 import { SettingListItem } from "./components/SettingListItem.js";
 import { SettingsList } from "./components/SettingsList.js";
 import { SettingsPanel } from "./components/SettingsPanel.js";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem.js";
+import { UiComponent } from "./components/UiComponent.js";
 import { EmbassySettingsUi } from "./EmbassySettingsUi.js";
 
 export class TradeSettingsUi extends SettingsPanel<TradeSettings> {
@@ -27,6 +30,46 @@ export class TradeSettingsUi extends SettingsPanel<TradeSettings> {
         onUnCheck: () => {
           host.engine.imessage("status.auto.disable", [label]);
         },
+        onRefresh: item => {
+          (item as SettingTriggerListItem).triggerButton.inactive = settings.trigger < 0;
+        },
+        onRefreshTrigger: item => {
+          item.triggerButton.element[0].title = host.engine.i18n("ui.trigger", [
+            settings.trigger < 0
+              ? host.engine.i18n("ui.trigger.section.inactive")
+              : `${UiComponent.renderPercentage(settings.trigger)}%`,
+          ]);
+        },
+        onSetTrigger: () => {
+          Dialog.prompt(
+            host,
+            host.engine.i18n("ui.trigger.prompt.percentage"),
+            host.engine.i18n("ui.trigger.section.prompt", [
+              label,
+              settings.trigger !== -1
+                ? `${UiComponent.renderPercentage(settings.trigger)}%`
+                : host.engine.i18n("ui.infinity"),
+            ]),
+            settings.trigger !== -1 ? UiComponent.renderPercentage(settings.trigger) : "",
+            host.engine.i18n("ui.trigger.section.promptExplainer"),
+          )
+            .then(value => {
+              if (value === undefined) {
+                return;
+              }
+
+              if (value === "" || value.startsWith("-")) {
+                settings.trigger = -1;
+                return;
+              }
+
+              settings.trigger = UiComponent.parsePercentage(value);
+            })
+            .then(() => {
+              this.refreshUi();
+            })
+            .catch(redirectErrorsToConsole(console));
+        },
       }),
     );
 

packages/kitten-scientists/source/ui/UpgradeSettingsUi.ts

@@ -6,6 +6,7 @@ import { SettingOptions } from "../settings/Settings.js";
 import { UpgradeSettings } from "../settings/UpgradeSettings.js";
 import { PaddingButton } from "./components/buttons-icon/PaddingButton.js";
 import { PanelOptions } from "./components/CollapsiblePanel.js";
+import stylesDelimiter from "./components/Delimiter.module.css";
 import { Dialog } from "./components/Dialog.js";
 import { SettingsList } from "./components/SettingsList.js";
 import { SettingsPanel } from "./components/SettingsPanel.js";
@@ -87,7 +88,7 @@ export class UpgradeSettingsUi extends SettingsPanel<UpgradeSettings> {
       ? upgrades.sort((a, b) => a.label.localeCompare(b.label))
       : upgrades) {
       if (!isNil(lastElement) && localeSupportsSortMethod && lastLabel[0] !== upgrade.label[0]) {
-        lastElement.element.addClass("ks-delimiter");
+        lastElement.element.addClass(stylesDelimiter.delimiter);
       }
 
       const option = this.setting.upgrades[upgrade.name];

packages/kitten-scientists/source/ui/UserInterface.module.css

@@ -0,0 +1,67 @@
+#ksColumn {
+  min-width: 250px;
+  max-width: 440px;
+  vertical-align: top;
+  padding-left: 8px;
+  top: 20px;
+  position: relative;
+  overflow-y: auto;
+}
+.spacer {
+  display: block;
+  margin-bottom: 100px;
+}
+.ui {
+  margin: 5px 0 10px 0;
+  padding-right: 10px;
+  font-size: 14px;
+}
+.ui ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ui ul:after {
+  clear: both;
+  content: " ";
+  display: block;
+  height: 0;
+}
+
+.showActivity {
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Dialogs */
+.dialog.ks-dialog {
+  display: flex;
+  flex-direction: column;
+  height: fit-content !important;
+  box-shadow: none;
+}
+.dialog.ks-dialog .close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+}
+
+/* Rules needed to enable stock warning. */
+
+.ui #toggle-list-resources .stockWarn *,
+.ui #toggle-reset-list-resources .stockWarn * {
+  color: #dd1e00;
+}
+
+/* Ensure the right column gets a scrollbar, when our content extends it too far down. */
+#game #rightColumn {
+  overflow-y: auto;
+}
+
+#game .res-row .res-cell.ks-stock-above {
+  color: green;
+}
+#game .res-row .res-cell.ks-stock-below {
+  color: red;
+}