Apply placeholder style to quick equip items #15

beardeddragon5 · Jan 16, 2024 · 518c693 · 518c693
1 parent 7dbee13
commit 518c693
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/src/assets/placeholder.css b/src/assets/placeholder.css
@@ -105,3 +105,22 @@ potion-select-menu-item[data-item-quantity='0'] button {
 .placeholder-no-number-faded potion-select-menu-item[data-item-quantity='0'] .mr-2 h5 {
   display: none;
 }
+
+/** Quick equip */
+
+.placeholder-faded #minibar-skill-item-container button[data-item-quantity='0'] img:not(.minibar-equipped) {
+  opacity: 50%;
+}
+
+.placeholder-faded-image #minibar-skill-item-container button[data-item-quantity='0'] img:not(.minibar-equipped) {
+  opacity: 50%;
+}
+
+.placeholder-border #minibar-skill-item-container button[data-item-quantity='0'] {
+  border: 1px solid #d26a5c;
+  border-radius: 5px;
+}
+
+.placeholder-no-number-faded #minibar-skill-item-container button[data-item-quantity='0'] img:not(.minibar-equipped) {
+  opacity: 50%;
+}
diff --git a/src/ui.mts b/src/ui.mts
@@ -96,4 +96,12 @@ export async function setupUI(ctx: ItemPlaceholderContext) {
     const quantity = game.bank.items.get(potion)?.quantity ?? 0;
     this.setAttribute('data-item-quantity', String(quantity));
   });
+
+  ctx.patch(Minibar, 'createQuickEquipIcon').after(function (out, item) {
+    const icon = this.quickEquipIcons.get(item);
+    if (icon?.button) {
+      const quantity = game.bank.items.get(item)?.quantity ?? 0;
+      icon.button.setAttribute('data-item-quantity', String(quantity));
+    }
+  });
 }
diff --git a/src/util.mts b/src/util.mts
@@ -23,17 +23,25 @@ export function refreshAllPlaceholderStyles(itemStyle: PlaceholderStyles, emptyS
     const element = document.getElementById('bank-container');
     if (!element) {
       console.warn('[Item Placeholder] no bank container found');
-      return;
+    } else {
+      refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
     }
-    refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
   }
   {
     const element = document.getElementById('potion-select-menu-modal');
     if (!element) {
       console.warn('[Item Placeholder] no potion selection menu found');
-      return;
+    } else {
+      refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
+    }
+  }
+  {
+    const element = document.getElementById('skill-footer-minibar-items-container');
+    if (!element) {
+      console.warn('[Item Placeholder] no quick equip menu found');
+    } else {
+      refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
     }
-    refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
   }
 }
 

diff --git a/types/global.d.ts b/types/global.d.ts
@@ -256,5 +256,26 @@ declare class GameUI {
   create(vueElement: unknown, element: Element): void;
 }
 
+declare class Skill {}
+
+declare class Minibar {
+  quickEquipIcons: Map<
+    Item,
+    {
+      button: HTMLElement;
+      tooltip: unknown;
+      equippedTick: HTMLElement;
+    }
+  >;
+
+  game: Game;
+
+  constructor(game: Game);
+
+  get quickEquipContainer(): HTMLElement;
+
+  createQuickEquipIcon(item: Item, skill: Skill): void;
+}
+
 declare const game: Game;
 declare const ui: GameUI;