Improved the EffectDisplay tooltip of the beastform effect to show the info about the active beastform

module/data/activeEffect/beastformEffect.mjs

@@ -24,7 +24,7 @@ export default class BeastformEffect extends BaseEffect {
                     width: new fields.NumberField({ integer: false, nullable: true })
                 })
             }),
-            advantageOn: new fields.ArrayField(new fields.StringField()),
+            advantageOn: new fields.TypedObjectField(new fields.SchemaField({ value: new fields.StringField() })),
             featureIds: new fields.ArrayField(new fields.StringField()),
             effectIds: new fields.ArrayField(new fields.StringField())
         };

module/data/item/beastform.mjs

@@ -97,11 +97,11 @@ export default class DHBeastform extends BaseDataItem {
 
     /* -------------------------------------------- */
 
-    get beastformAttackData() {
+    static getBeastformAttackData(effect) {
-        const effect = this.parent.effects.find(x => x.type === 'beastform');
         if (!effect) return null;
 
-        const traitBonus = effect.changes.find(x => x.key === `system.traits.${this.mainTrait}.value`)?.value ?? 0;
+        const mainTrait = effect.changes.find(x => x.key === 'system.rules.attack.roll.trait')?.value;
+        const traitBonus = effect.changes.find(x => x.key === `system.traits.${mainTrait}.value`)?.value ?? 0;
         const evasionBonus = effect.changes.find(x => x.key === 'system.evasion')?.value ?? 0;
 
         const damageDiceIndex = effect.changes.find(x => x.key === 'system.rules.attack.damage.diceIndex');
@@ -109,7 +109,7 @@ export default class DHBeastform extends BaseDataItem {
         const damageBonus = effect.changes.find(x => x.key === 'system.rules.attack.damage.bonus')?.value ?? 0;
 
         return {
-            trait: game.i18n.localize(CONFIG.DH.ACTOR.abilities[this.mainTrait].label),
+            trait: game.i18n.localize(CONFIG.DH.ACTOR.abilities[mainTrait]?.label),
             traitBonus: traitBonus ? Number(traitBonus).signedString() : '',
             evasionBonus: evasionBonus ? Number(evasionBonus).signedString() : '',
             damageDice: damageDice,

module/documents/tooltipManager.mjs

@@ -31,12 +31,34 @@ export default class DhTooltipManager extends foundry.helpers.interaction.Toolti
             this.#bordered = true;
             let effect = {};
             if (element.dataset.uuid) {
-                const effectData = (await foundry.utils.fromUuid(element.dataset.uuid)).toObject();
+                const effectItem = await foundry.utils.fromUuid(element.dataset.uuid);
+                const effectData = effectItem.toObject();
+
                 effect = {
                     ...effectData,
-                    name: game.i18n.localize(effectData.name),
+                    name: game.i18n.localize(effectData.name)
-                    description: game.i18n.localize(effectData.description ?? effectData.parent.system.description)
                 };
+
+                if (effectData.type === 'beastform') {
+                    const beastformData = {
+                        features: effectItem.parent.items.filter(x => effectItem.system.featureIds.includes(x.id)),
+                        advantageOn: effectData.system.advantageOn,
+                        beastformAttackData: game.system.api.data.items.DHBeastform.getBeastformAttackData(effectItem)
+                    };
+                    for (const feature of beastformData.features) {
+                        feature.enrichedDescription = await feature.system.getEnrichedDescription();
+                    }
+                    effect.description = await foundry.applications.handlebars.renderTemplate(
+                        'systems/daggerheart/templates/ui/tooltip/parts/beastformData.hbs',
+                        {
+                            item: { system: beastformData }
+                        }
+                    );
+                } else {
+                    effect.description = game.i18n.localize(
+                        effectData.description ?? effectData.parent.system.description
+                    );
+                }
             } else {
                 const conditions = CONFIG.DH.GENERAL.conditions();
                 const condition = conditions[element.dataset.condition];

module/systemRegistration/handlebars.mjs

@@ -47,6 +47,7 @@ export const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/ui/chat/parts/button-part.hbs',
         'systems/daggerheart/templates/ui/itemBrowser/itemContainer.hbs',
         'systems/daggerheart/templates/scene/dh-config.hbs',
-        'systems/daggerheart/templates/settings/appearance-settings/diceSoNiceTab.hbs'
+        'systems/daggerheart/templates/settings/appearance-settings/diceSoNiceTab.hbs',
+        'systems/daggerheart/templates/ui/tooltip/parts/beastformData.hbs'
     ]);
 };

styles/less/ux/index.less

@@ -1,3 +1,4 @@
+@import './tooltip/sheet.less';
 @import './tooltip/tooltip.less';
 @import './tooltip/battlepoints.less';
 @import './tooltip/bordered-tooltip.less';

styles/less/ux/tooltip/bordered-tooltip.less

@@ -16,7 +16,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            text-align: start;
+            text-align: center;
             padding: 5px;
             gap: 0px;
 
@@ -35,12 +35,20 @@
             }
         }
 
+        .close-hints {
+            margin-top: 0.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+
             .close-hint {
                 border-radius: 3px;
                 padding: 3px;
                 background: @rustic-brown-80;
                 color: @golden;
                 font-size: 12px;
+                margin: 0;
+            }
         }
     }
 }

styles/less/ux/tooltip/sheet.less

@@ -0,0 +1,129 @@
+#tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
+aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
+#tooltip.bordered-tooltip {
+    .tooltip-title {
+        font-size: var(--font-size-20);
+        color: light-dark(@dark-blue, @golden);
+        font-weight: 700;
+    }
+
+    .tooltip-description {
+        font-style: inherit;
+        text-align: inherit;
+        width: 100%;
+        padding: 5px 10px;
+        position: relative;
+        margin-top: 5px;
+
+        &::before {
+            content: '';
+            background: @golden;
+            mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+            height: 2px;
+            width: calc(100% - 10px);
+        }
+
+        &::before {
+            position: absolute;
+            top: -5px;
+        }
+    }
+
+    .tooltip-separator {
+        background: @golden;
+        mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+        height: 2px;
+        width: calc(100% - 10px);
+        margin-bottom: 2px;
+    }
+
+    .tooltip-tags {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+        padding: 5px 10px;
+        position: relative;
+        max-height: 150px;
+        overflow-y: auto;
+        position: relative;
+
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+
+        .tooltip-tag {
+            display: flex;
+            gap: 10px;
+            flex-direction: column;
+
+            .tooltip-tag-label-container {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 3px;
+                }
+            }
+        }
+    }
+
+    .tags {
+        display: flex;
+        gap: 5px 10px;
+        padding-bottom: 16px;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        &.advantages {
+            width: 100%;
+            padding: 5px 10px;
+            padding-bottom: 16px;
+            position: relative;
+            margin-top: 5px;
+
+            &::before {
+                content: '';
+                background: @golden;
+                mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+                height: 2px;
+                width: calc(100% - 10px);
+            }
+
+            &::before {
+                position: absolute;
+                top: -5px;
+            }
+
+            .tag {
+                background: @green-10;
+                color: @green;
+                border-color: @green;
+            }
+        }
+
+        .tag {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 3px 5px;
+            font-size: var(--font-size-12);
+            font: @font-body;
+
+            background: light-dark(@dark-15, @beige-15);
+            border: 1px solid light-dark(@dark, @beige);
+            border-radius: 3px;
+        }
+
+        .label {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            font-size: var(--font-size-12);
+        }
+    }
+}

styles/less/ux/tooltip/tooltip.less

@@ -13,13 +13,6 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
     outline: 1px solid light-dark(@dark-80, @beige-80);
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
 
-    .tooltip-title {
-        font-size: var(--font-size-20);
-        color: light-dark(@dark-blue, @golden);
-        font-weight: 700;
-        margin-bottom: 5px;
-    }
-
     .tooltip-subtitle {
         margin: 0;
     }
@@ -53,110 +46,6 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
         }
     }
 
-    .tooltip-tags {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        width: 100%;
-        padding: 5px 10px;
-        position: relative;
-        padding-top: 10px;
-        max-height: 150px;
-        overflow-y: auto;
-        position: relative;
-
-        scrollbar-width: thin;
-        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
-
-        &::before {
-            content: '';
-            background: @golden;
-            mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
-            height: 2px;
-            width: calc(100% - 10px);
-        }
-
-        &::before {
-            position: absolute;
-            top: 0px;
-        }
-
-        .tooltip-tag {
-            display: flex;
-            gap: 10px;
-            flex-direction: column;
-
-            .tooltip-tag-label-container {
-                display: flex;
-                align-items: center;
-                gap: 5px;
-
-                img {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 3px;
-                }
-            }
-        }
-    }
-
-    .tags {
-        display: flex;
-        gap: 5px 10px;
-        padding-bottom: 16px;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        &.advantages {
-            width: 100%;
-            padding: 5px 10px;
-            padding-bottom: 16px;
-            position: relative;
-            margin-top: 5px;
-
-            &::before {
-                content: '';
-                background: @golden;
-                mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
-                height: 2px;
-                width: calc(100% - 10px);
-            }
-
-            &::before {
-                position: absolute;
-                top: -5px;
-            }
-
-            .tag {
-                background: @green-10;
-                color: @green;
-                border-color: @green;
-            }
-        }
-
-        .tag {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            padding: 3px 5px;
-            font-size: var(--font-size-12);
-            font: @font-body;
-
-            background: light-dark(@dark-15, @beige-15);
-            border: 1px solid light-dark(@dark, @beige);
-            border-radius: 3px;
-        }
-
-        .label {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            font-size: var(--font-size-12);
-        }
-    }
-
     .item-icons-list {
         position: absolute;
         display: flex;

templates/ui/tooltip/beastform.hbs

@@ -3,37 +3,7 @@
     <h2 class="tooltip-title">{{item.name}}</h2>
     <p class="tooltip-subtitle"><i>{{item.system.examples}}</i></p>
 
-    {{#if description}}
+    {{> "systems/daggerheart/templates/ui/tooltip/parts/beastformData.hbs" }}
-        <div class="tooltip-description">{{{description}}}</div>
-    {{/if}}
-
-    <div class="tags">
-        {{#with item.system.beastformAttackData}} 
-            <div class="tag">
-                <span>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}</span>
-            </div>
-            <div class="tag">
-                <span>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}</span>
-            </div>
-            <div class="tag">
-                <span>{{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}</span>
-            </div>
-            <div class="tag">
-                <span>{{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></span>
-            </div>
-        {{/with}}
-    </div>
-
-    <h2 class="tooltip-title">{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</h2>
-    <div class="tags advantages">
-        {{#each item.system.advantageOn as | chip |}}
-            <div class="tag">
-                <span>{{ifThen chip.value chip.value chip}}</span>
-            </div>
-        {{/each}}
-    </div>
-
-    {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}}
 
     <p class="tooltip-hint">
         <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}

templates/ui/tooltip/effect-display.hbs

@@ -16,9 +16,16 @@
         </div>
     {{/if}}
 
+    <div class="close-hints">
+        {{#if (eq effect.type 'beastform')}}
+            <p class="close-hint">
+                <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+            </p>
+        {{/if}}
         {{#unless effect.isLockedCondition}}
             <p class="close-hint">
                 <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
             </p>
         {{/unless}}
+    </div>
 </div>

templates/ui/tooltip/parts/beastformData.hbs

@@ -0,0 +1,31 @@
+{{#if description}}
+    <div class="tooltip-description">{{{description}}}</div>
+{{/if}}
+
+<div class="tags">
+    {{#with item.system.beastformAttackData}} 
+        <div class="tag">
+            <span>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}</span>
+        </div>
+        <div class="tag">
+            <span>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}</span>
+        </div>
+        <div class="tag">
+            <span>{{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}</span>
+        </div>
+        <div class="tag">
+            <span>{{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></span>
+        </div>
+    {{/with}}
+</div>
+
+<h2 class="tooltip-title">{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</h2>
+<div class="tags advantages">
+    {{#each item.system.advantageOn as | chip |}}
+        <div class="tag">
+            <span>{{ifThen chip.value chip.value chip}}</span>
+        </div>
+    {{/each}}
+</div>
+
+{{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}}

templates/ui/tooltip/parts/tooltipTags.hbs

@@ -1,4 +1,5 @@
 {{#if (gt features.length 0)}}<h2 class="tooltip-title">{{label}}</h2>{{/if}}
+<div class="tooltip-separator"></div>
 <div class="tooltip-tags">
     {{#each features as | feature |}}
         {{#with (ifThen ../isAction feature (ifThen feature.item feature.item feature))}}