Show rarity in ABC picker options (foundryvtt#17363)

calzoney1 · Nov 18, 2024 · 6fff088 · 6fff088
1 parent a068f8b
commit 6fff088
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/src/module/actor/character/apps/abc-picker/app.svelte b/src/module/actor/character/apps/abc-picker/app.svelte
@@ -57,6 +57,11 @@
                 <div class="name">{item.name}</div>
                 <div class="source" class:publication={item.source.publication}>{item.source.name}</div>
             </button>
+            {#if item.rarity}
+                <div class="tags paizo-style">
+                    <span class="tag rarity {item.rarity.slug}">{item.rarity.label}</span>
+                </div>
+            {/if}
             <div class="buttons">
                 <button
                     type="button"
@@ -96,24 +101,29 @@
         overflow: hidden scroll;
         padding: var(--space-4) 0;
 
-        & > li {
+        > li {
+            display: grid;
             align-items: center;
             border-top: 1px solid var(--color-border);
-            display: flex;
-            gap: var(--space-8);
+            column-gap: var(--space-8);
+            grid-template:
+                "icon name-source rarity" auto
+                "icon name-source buttons" auto / 3rem auto 5rem;
             margin: 0;
-            padding: var(--space-3) var(--space-6);
+            padding: var(--space-1) var(--space-6) var(--space-4);
 
             img {
-                color: pointer;
                 border: none;
+                grid-area: icon;
                 height: 3rem;
+                width: 3rem;
             }
 
             button.name-source {
                 display: flex;
                 flex-flow: column nowrap;
-                flex-grow: 1;
+                grid-area: name-source;
+                height: unset;
                 justify-content: center;
 
                 .name {
@@ -133,8 +143,9 @@
             .buttons {
                 align-items: center;
                 display: flex;
-                gap: var(--space-2);
                 flex-flow: row nowrap;
+                gap: var(--space-2);
+                grid-area: buttons;
                 justify-content: end;
 
                 button {
@@ -157,8 +168,15 @@
                 }
             }
 
+            .tags {
+                font-size: var(--font-size-9);
+                grid-area: rarity;
+                justify-content: end;
+            }
+
             &:hover:not(.selected) button.confirm {
                 opacity: 0.33;
+                pointer-events: none;
                 visibility: visible;
             }
 

diff --git a/src/module/actor/character/apps/abc-picker/app.ts b/src/module/actor/character/apps/abc-picker/app.ts
@@ -1,6 +1,7 @@
-import { CharacterPF2e } from "@actor";
-import type { ItemPF2e } from "@item";
+import type { CharacterPF2e } from "@actor";
+import type { ABCItemPF2e, DeityPF2e, ItemPF2e } from "@item";
 import type { ItemType } from "@item/base/data/index.ts";
+import { Rarity } from "@module/data.ts";
 import { SvelteApplicationMixin, SvelteApplicationRenderContext } from "@system/svelte/mixin.svelte.ts";
 import { sluggify } from "@util";
 import { UUIDUtils } from "@util/uuid.ts";
@@ -20,6 +21,7 @@ interface ABCItemRef {
     name: string;
     img: ImageFilePath;
     uuid: ItemUUID;
+    rarity?: { slug: Rarity; label: string };
     source: {
         name: string;
         /** Whether the source comes from an item's publication data or is simply the providing module */
@@ -72,7 +74,7 @@ class ABCPicker extends SvelteApplicationMixin<
         );
 
         const items = [...worldItems, ...packItems]
-            .filter((item): item is ItemPF2e<null> => {
+            .filter((item): item is ABCItemPF2e<null> | DeityPF2e<null> => {
                 if (item.type !== itemType || item.parent) return false;
                 if (item.pack?.startsWith("pf2e-animal-companions.")) return false;
                 if (item.isOfType("heritage")) {
@@ -94,13 +96,23 @@ class ABCPicker extends SvelteApplicationMixin<
             return { name, publication: false };
         };
 
-        return items.map(
-            (i): ABCItemRef => ({
-                ...R.pick(i, ["name", "img", "uuid"]),
-                source: resolveSource(i),
+        const rarities: Record<string, string> = {
+            uncommon: game.i18n.localize(CONFIG.PF2E.rarityTraits.uncommon),
+            rare: game.i18n.localize(CONFIG.PF2E.rarityTraits.rare),
+            unique: game.i18n.localize(CONFIG.PF2E.rarityTraits.unique),
+        };
+
+        return items.map((item) => {
+            const ref: ABCItemRef = {
+                ...R.pick(item, ["name", "img", "uuid"]),
+                source: resolveSource(item),
                 hidden: false,
-            }),
-        );
+            };
+            if ("rarity" in item && item.rarity !== "common") {
+                ref.rarity = { slug: item.rarity, label: rarities[item.rarity] };
+            }
+            return ref;
+        });
     }
 
     protected override async _prepareContext(): Promise<ABCPickerContext> {