Release Healer Man 0.1.40

src/ui/BossLootWindow.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { useEffect, type CSSProperties } from "react";
+import { BOSS_CARD_RARITY_INFO } from "../game/bossCards";
 import { useCombatStore } from "../game/combatStore";
 import { useGameStore } from "../game/store";
 import { classCanEquipItem, PLAYER_EQUIPMENT_OWNER_ID } from "../game/equipment";
@@ -83,6 +84,9 @@ export function BossLootWindow() {
       <div className="boss-loot-window__body">
         <p className="boss-loot-window__eyebrow">Loot acquired automatically</p>
         <div className="boss-loot-window__items">
+          {reward.cards?.rarities.map((rarity) => <article key={rarity} className="boss-loot-window__item" style={{ "--item-quality": BOSS_CARD_RARITY_INFO[rarity].color } as CSSProperties}>
+            <b aria-hidden="true">◆</b><p><strong>{BOSS_CARD_RARITY_INFO[rarity].label} Boss Card</strong><small>{reward.bossName} · Collection log</small></p><em>+1</em>
+          </article>)}
           {reward.items.map((item) => {
             const comparison = classCanEquipItem(classId, item)
               ? compareEquipmentUpgrade(item, loadout, profile, heirloomContext)
@@ -100,15 +104,15 @@ export function BossLootWindow() {
               {item.quantity > 1 ? <em>×{item.quantity}</em> : null}
             </article>;
           })}
-          {!reward.items.length ? (
+          {!reward.items.length && !reward.cards?.rarities.length ? (
             <p className="boss-loot-window__empty">No items dropped this time.</p>
           ) : null}
         </div>
       </div>
 
       <footer>
-        <span>{reward.items.length} item{reward.items.length === 1 ? "" : "s"} added to shared inventory</span>
-        <button type="button" onClick={viewInventory}>View inventory</button>
+        <span>{reward.cards?.rarities.length ? `${reward.cards.rarities.length} card${reward.cards.rarities.length === 1 ? "" : "s"} added to collection${reward.items.length ? ` · ${reward.items.length} items acquired` : ""}` : `${reward.items.length} items added to shared inventory`}</span>
+        {reward.cards ? <button type="button" onClick={() => { dismiss(); useGameStore.getState().openOverlay("boss-cards"); }}>View collection</button> : <button type="button" onClick={viewInventory}>View inventory</button>}
       </footer>
     </section>
   );