Use placeholder styles on potion selection menu (beardeddragon5#7)

src/assets/placeholder.css

@@ -1,3 +1,5 @@
+/** Placeholders */
+
 .placeholder-faded bank-item-icon[data-item-quantity='0']:not(bank-item-icon[data-item-id^='item_placeholder:empty_']) {
   opacity: 50%;
 }
@@ -37,6 +39,8 @@
   }
 }
 
+/** Empties */
+
 .empty-faded bank-item-icon[data-item-id^='item_placeholder:empty_'] {
   opacity: 50%;
 }
@@ -62,3 +66,40 @@
     display: none;
   }
 }
+
+/** Potion Popup */
+
+potion-select-menu-item[data-item-quantity='0'] button {
+  display: none;
+}
+
+.placeholder-faded potion-select-menu-item[data-item-quantity='0'] {
+  opacity: 50%;
+}
+
+.placeholder-faded-image potion-select-menu-item[data-item-quantity='0'] .shop-img {
+  opacity: 50%;
+}
+
+.placeholder-border potion-select-menu-item[data-item-quantity='0'] div {
+  border: 1px solid #d26a5c;
+  border-radius: 5px;
+}
+
+.placeholder-zero potion-select-menu-item[data-item-quantity='0'] .mr-2 h5 {
+  background-color: #e56767 !important;
+  color: white !important;
+  border-radius: 5px;
+}
+
+.placeholder-no-number potion-select-menu-item[data-item-quantity='0'] .mr-2 h5 {
+  display: none;
+}
+
+.placeholder-no-number-faded potion-select-menu-item[data-item-quantity='0'] {
+  opacity: 50%;
+
+  & .mr-2 h5 {
+    display: none;
+  }
+}

src/ui.mts

@@ -91,4 +91,9 @@ export async function setupUI(ctx: ItemPlaceholderContext) {
 
     refreshAllPlaceholderStylesWithContext(ctx);
   });
+
+  ctx.patch(PotionSelectMenuItem, 'setPotion').after(function (out, potion, game) {
+    const quantity = game.bank.items.get(potion)?.quantity ?? 0;
+    this.setAttribute('data-item-quantity', String(quantity));
+  });
 }

src/util.mts

@@ -19,11 +19,29 @@ export function isEmpty(item?: Item): boolean {
 }
 
 export function refreshAllPlaceholderStyles(itemStyle: PlaceholderStyles, emptyStyle: PlaceholderStyles) {
-  const element = document.getElementById('bank-container');
-  if (!element) {
-    console.warn('[Item Placeholder] no bank container found');
-    return;
+  {
+    const element = document.getElementById('bank-container');
+    if (!element) {
+      console.warn('[Item Placeholder] no bank container found');
+      return;
+    }
+    refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
   }
+  {
+    const element = document.getElementById('potion-select-menu-modal');
+    if (!element) {
+      console.warn('[Item Placeholder] no potion selection menu found');
+      return;
+    }
+    refreshAllPlaceholderStylesOnElement(element, itemStyle, emptyStyle);
+  }
+}
+
+export function refreshAllPlaceholderStylesOnElement(
+  element: HTMLElement,
+  itemStyle: PlaceholderStyles,
+  emptyStyle: PlaceholderStyles,
+) {
   for (const style of Object.values(PlaceholderStyles)) {
     element.classList.remove(style);
     element.classList.remove(style.replace('placeholder', 'empty'));

types/global.d.ts

@@ -28,6 +28,10 @@ declare class BankSelectedItemMenu extends HTMLElement {
   setItem(bankItem: BankItem, bank: Bank): void;
 }
 
+declare class PotionSelectMenuItem extends HTMLElement {
+  setPotion(potion: Item, game: Game): void;
+}
+
 declare class Item {
   get id(): string;
   get localID(): string;