feat(ui): Highlight the next best unicorn building

When the build order for unicorn buildings is automated, we now display the building that we're focusing on.

Fixes: #740

packages/kitten-scientists/source/ReligionManager.ts

@@ -115,16 +115,24 @@ export class ReligionManager implements Automation {
 
   private _buildBestUnicornBuilding() {
     const bestUnicornBuilding = this.getBestUnicornBuilding();
-    if (bestUnicornBuilding === null) {
+    if (this.settings.bestUnicornBuildingCurrent !== bestUnicornBuilding) {
+      this.settings.bestUnicornBuildingCurrent = bestUnicornBuilding;
+      this._host.refreshUi();
+    }
+
+    if (this.settings.bestUnicornBuildingCurrent === null) {
       return;
     }
 
     const sectionTrigger = this.settings.trigger;
 
-    if (bestUnicornBuilding === "unicornPasture") {
-      this._bonfireManager.build(bestUnicornBuilding, 0, 1);
+    if (this.settings.bestUnicornBuildingCurrent === "unicornPasture") {
+      this._bonfireManager.build(this.settings.bestUnicornBuildingCurrent, 0, 1);
     } else {
-      const buildingButton = this._getBuildButton(bestUnicornBuilding, UnicornItemVariant.Ziggurat);
+      const buildingButton = this._getBuildButton(
+        this.settings.bestUnicornBuildingCurrent,
+        UnicornItemVariant.Ziggurat,
+      );
       if (isNil(buildingButton?.model)) {
         return;
       }
@@ -175,7 +183,10 @@ export class ReligionManager implements Automation {
       }
 
       // Let the BulkManager figure out if the build can be made.
-      const buildRequest = { [bestUnicornBuilding]: this.settings.buildings[bestUnicornBuilding] };
+      const buildRequest = {
+        [this.settings.bestUnicornBuildingCurrent]:
+          this.settings.buildings[this.settings.bestUnicornBuildingCurrent],
+      };
       const build = this._bulkManager.bulk(
         buildRequest,
         this.getBuildMetaData(buildRequest),
@@ -185,7 +196,7 @@ export class ReligionManager implements Automation {
       if (0 < build.length && 0 < build[0].count) {
         // We force only building 1 of the best unicorn building, because
         // afterwards the best unicorn building is likely going to change.
-        this.build(bestUnicornBuilding, UnicornItemVariant.Ziggurat, 1);
+        this.build(this.settings.bestUnicornBuildingCurrent, UnicornItemVariant.Ziggurat, 1);
       }
     }
   }

packages/kitten-scientists/source/settings/ReligionSettings.ts

@@ -66,6 +66,8 @@ export class ReligionSettings extends SettingTrigger {
    */
   bestUnicornBuilding: Setting;
 
+  bestUnicornBuildingCurrent: ZiggurathUpgrade | "unicornPasture" | null;
+
   /**
    * Sacrifice alicorns for time crystals.
    */
@@ -123,6 +125,7 @@ export class ReligionSettings extends SettingTrigger {
     this.autoPraise = autoPraise;
     this.adore = adore;
     this.transcend = transcend;
+    this.bestUnicornBuildingCurrent = null;
   }
 
   private initBuildings(): ReligionSettingsItems {
@@ -164,5 +167,7 @@ export class ReligionSettings extends SettingTrigger {
     this.autoPraise.load(settings.autoPraise);
     this.adore.load(settings.adore);
     this.transcend.load(settings.transcend);
+    this.bestUnicornBuildingCurrent =
+      settings.bestUnicornBuildingCurrent ?? this.bestUnicornBuildingCurrent;
   }
 }

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

@@ -15,9 +15,13 @@ import { SettingMaxTriggerListItem } from "./components/SettingMaxTriggerListIte
 import { SettingsList } from "./components/SettingsList.js";
 import { SettingsPanel } from "./components/SettingsPanel.js";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem.js";
+import stylesTimeSkipHeatSettings from "./TimeSkipHeatSettingsUi.module.css";
 
 export class ReligionSettingsUi extends SettingsPanel<ReligionSettings> {
-  private readonly _unicornBuildings: Array<SettingMaxTriggerListItem>;
+  private readonly _unicornBuildings: Map<
+    ZiggurathUpgrade | "unicornPasture",
+    SettingMaxTriggerListItem
+  >;
   private readonly _bestUnicornBuilding: SettingListItem;
 
   constructor(
@@ -82,30 +86,37 @@ export class ReligionSettingsUi extends SettingsPanel<ReligionSettings> {
 
     const unicornsArray: Array<ZiggurathUpgrade | "unicornPasture"> = [...UnicornItems];
 
-    this._unicornBuildings = [
-      BuildSectionTools.getBuildOption(
-        host,
-        this.setting.buildings.unicornPasture,
-        locale,
-        this.setting,
-        host.engine.i18n("$buildings.unicornPasture.label"),
-        label,
-      ),
+    this._unicornBuildings = new Map([
+      [
+        "unicornPasture",
+        BuildSectionTools.getBuildOption(
+          host,
+          this.setting.buildings.unicornPasture,
+          locale,
+          this.setting,
+          host.engine.i18n("$buildings.unicornPasture.label"),
+          label,
+        ),
+      ],
       ...host.game.religion.zigguratUpgrades
         .filter(
           item => unicornsArray.includes(item.name) && !isNil(this.setting.buildings[item.name]),
         )
-        .map(zigguratUpgrade =>
-          BuildSectionTools.getBuildOption(
-            host,
-            this.setting.buildings[zigguratUpgrade.name],
-            locale,
-            this.setting,
-            zigguratUpgrade.label,
-            label,
-          ),
+        .map(
+          zigguratUpgrade =>
+            [
+              zigguratUpgrade.name,
+              BuildSectionTools.getBuildOption(
+                host,
+                this.setting.buildings[zigguratUpgrade.name],
+                locale,
+                this.setting,
+                zigguratUpgrade.label,
+                label,
+              ),
+            ] as [ZiggurathUpgrade | "unicornPasture", SettingMaxTriggerListItem],
         ),
-    ];
+    ]);
 
     this._bestUnicornBuilding = new SettingListItem(
       host,
@@ -116,7 +127,7 @@ export class ReligionSettingsUi extends SettingsPanel<ReligionSettings> {
           host.engine.imessage("status.sub.enable", [
             host.engine.i18n("option.faith.best.unicorn"),
           ]);
-          for (const building of this._unicornBuildings) {
+          for (const building of this._unicornBuildings.values()) {
             building.setting.enabled = true;
             building.setting.max = -1;
             building.setting.trigger = -1;
@@ -137,7 +148,7 @@ export class ReligionSettingsUi extends SettingsPanel<ReligionSettings> {
       new SettingsList(host, {
         children: [
           new HeaderListItem(host, host.engine.i18n("$religion.panel.ziggurat.label")),
-          ...this._unicornBuildings,
+          ...this._unicornBuildings.values(),
           this._bestUnicornBuilding,
           new Delimiter(host),
 
@@ -282,10 +293,22 @@ export class ReligionSettingsUi extends SettingsPanel<ReligionSettings> {
   }
 
   override refreshUi() {
-    for (const building of this._unicornBuildings) {
+    for (const [buildingName, building] of this._unicornBuildings.entries()) {
       building.readOnly = this._bestUnicornBuilding.setting.enabled;
       building.maxButton.readOnly = this._bestUnicornBuilding.setting.enabled;
       building.triggerButton.readOnly = this._bestUnicornBuilding.setting.enabled;
+
+      building.elementLabel.attr("data-ks-active-from", "❊");
+      building.elementLabel.attr("data-ks-active-to", "✮");
+
+      if (
+        this.setting.bestUnicornBuilding.enabled &&
+        this.setting.bestUnicornBuildingCurrent === buildingName
+      ) {
+        building.elementLabel.addClass(stylesTimeSkipHeatSettings.active);
+      } else {
+        building.elementLabel.removeClass(stylesTimeSkipHeatSettings.active);
+      }
     }
     super.refreshUi();
   }

packages/kitten-scientists/source/ui/components/Button.module.css

@@ -30,7 +30,7 @@
     }
   }
 
-  &.ineffective {
+  &.ineffective:not(.inactive) {
     color: red;
     animation: hail-rainbow 1.5s linear infinite;
   }
@@ -56,7 +56,7 @@
     }
   }
 
-  &.ineffective {
+  &.ineffective:not(.inactive) {
     color: red;
     animation: hail-rainbow 1.5s linear infinite;
   }