Skill Test Targets Display

src/declarations/foundry/client/data/documents/actor.d.ts

@@ -30,7 +30,9 @@ declare class Actor<
 
     get items(): Collection<I>;
     get effects(): Collection<ActiveEffect>;
+    get isToken(): boolean;
     get appliedEffects(): ActiveEffect[];
+    get token(): TokenDocument;
 
     /**
      * Return a data object which defines the data schema against which dice rolls can be evaluated.
@@ -55,6 +57,19 @@ declare class Actor<
         options?: Actor.ToggleStatusEffectOptions,
     ): Promise<ActiveEffect | boolean | undefined>;
 
+    /**
+     * Retrieve an Array of active tokens which represent this Actor in the current canvas Scene. 
+     * If the canvas is not currently active, or there are no linked actors, the returned Array will be empty. 
+     * If the Actor is a synthetic token actor, only the exact Token which it represents will be returned.
+     * @param linked Limit results to Tokens which are linked to the Actor. Otherwise, return all Tokens even those which are not linked.
+     * @param document Return the Document instance rather than the PlaceableObject
+     * @returns An array of Token instances in the current Scene which reference this Actor.
+     */
+    public getActiveTokens(
+        linked?: boolean,
+        document?: boolean
+    ): (TokenDocument | Token)[];
+
     /**
      * Get all ActiveEffects that may apply to this Actor.
      * If CONFIG.ActiveEffect.legacyTransferral is true, this is equivalent to actor.effects.contents.

src/lang/en.json

@@ -862,6 +862,9 @@
                 "RollAdvantage": "Click to roll with advantage.",
                 "RollDisadvantage": "Click to roll with disadvantage."
             },
+            "Trays": {
+                "Targets": "Targets"
+            },
             "InjuryRoll": "Injury Roll",
             "InjuryDuration": {
                 "Dead": "{actor} has <strong>died</strong>.",

src/style/chat/module.scss

@@ -477,14 +477,110 @@
                 }
             }            
 
+            .chat-card-tray {
+                & > label {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 0.25rem;
+                    font-size: var(--font-size-11);
+                    font-family: var(--plotweaver-font-normal);
+                    font-weight: bold;
+                    text-transform: uppercase;
+
+                    & > span {
+                        flex: none;
+                    }
+
+                    & > i:first-of-type {
+                        color: var(--plotweaver-color-light-2);
+                    }
+                }
+
+                & > label::before,
+                & > label::after {
+                    content: "";
+                    flex-basis: 50%;
+                    border-top: 1px dotted var(--plotweaver-color-dark-6);
+                    align-self: center;
+                }
+
+                .target-headers {
+                    color: var(--plotweaver-color-light-2);
+                    font-size: var(--font-size-10);
+                    font-family: var(--plotweaver-font-condensed);
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    margin-top: 0.25rem;
+
+                    & > span {
+                        width: 15%;
+                        text-align: center;
+                    }
+                }
+
+                .target-list {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.25rem;
+                    list-style: none;
+                    padding: 0;
+                    margin: 0.25rem 0;
+
+                    .target {
+                        display: flex;
+                        align-items: center;
+                        cursor: pointer;
+                        font-size: var(--font-size-13);
+                        font-family: var(--plotweaver-font-normal);
+                        font-weight: bold;
+
+                        .name {
+                            color: var(--plotweaver-color-dark-1);
+                            width: 55%;
+                        }
+
+                        .result {                            
+                            color: var(--plotweaver-color-dark-4);
+                            width: 15%;
+                            text-align: center;
+
+                            .success {
+                                color: var(--plotweaver-color-health-front)
+                            }
+
+                            .failure {
+                                color: var(--plotweaver-color-complication)
+                            }
+                        }
+                    }
+                }
+            }
+
             .collapsible {
                 cursor: pointer;
 
                 .collapsible-content {
                     display: grid;
                     grid-template-rows: 0fr;
-                    transition: grid-template-rows 250ms ease;                    
-                }    
+                    transition: grid-template-rows 250ms ease;
+
+                    & > .wrapper {
+                        overflow: hidden;
+                    }
+                }
+
+                .fa-caret-down {
+                    transform: rotate(-90deg);
+                    transition: all 250ms ease;
+                }
+
+                &.expanded .fa-caret-down {
+                    transform: rotate(0deg);
+                }
 
                 &.expanded .collapsible-content {
                     grid-template-rows: 1fr;

src/system/dice/d20-roll.ts

@@ -400,6 +400,14 @@ export class D20Roll extends foundry.dice.Roll<D20RollData> {
         });
     }
 
+    /**
+     * Recalculates the roll total from the current (potentially modified) terms.
+     * @returns {number} The new total of the roll.
+     */
+    public resetTotal(): number {
+        return (this._total = this._evaluateTotal());
+    }
+
     /* --- Internal Functions --- */
 
     private configureModifiers() {

src/system/documents/actor.ts

@@ -37,6 +37,7 @@ import { d20Roll, D20Roll, D20RollData, DamageRoll } from '@system/dice';
 // Dialogs
 import { ShortRestDialog } from '@system/applications/actor/dialogs/short-rest';
 import { MESSAGE_TYPES } from './chat-message';
+import { getTargetDescriptors } from '../utils/generic';
 
 export type CharacterActor = CosmereActor<CharacterActorDataModel>;
 export type AdversaryActor = CosmereActor<AdversaryActorDataModel>;
@@ -713,6 +714,7 @@ export class CosmereActor<
         rollData.messageData.flags[SYSTEM_ID] = {
             message: {
                 type: MESSAGE_TYPES.SKILL,
+                targets: getTargetDescriptors(),
             },
         };
 

src/system/documents/chat-message.ts

@@ -7,7 +7,11 @@ import { renderSystemTemplate, TEMPLATES } from '../utils/templates';
 import { SYSTEM_ID } from '../constants';
 import { AdvantageMode } from '../types/roll';
 import { getSystemSetting, SETTINGS } from '../settings';
-import { getApplyTargets, getConstantFromRoll } from '../utils/generic';
+import {
+    getApplyTargets,
+    getConstantFromRoll,
+    TargetDescriptor,
+} from '../utils/generic';
 
 export const MESSAGE_TYPES = {
     SKILL: 'skill',
@@ -117,6 +121,7 @@ export class CosmereChatMessage extends ChatMessage {
         await this.enrichSkillTest(content);
         await this.enrichDamage(content);
         await this.enrichInjury(content);
+        await this.enrichTestTargets(content);
 
         // Replace content
         html.find('.message-content').replaceWith(content);
@@ -180,6 +185,53 @@ export class CosmereChatMessage extends ChatMessage {
         html.find('.chat-card').append(section);
     }
 
+    protected async enrichTestTargets(html: JQuery) {
+        if (!this.hasSkillTest) return;
+
+        const targets = this.getFlag(
+            SYSTEM_ID,
+            'message.targets',
+        ) as TargetDescriptor[];
+        if (!targets || targets.length === 0) return;
+
+        const d20Roll = this.d20Rolls[0];
+
+        const success = '<i class="fa-solid fa-check success"></i>';
+        const failure = '<i class="fa-solid fa-times failure"></i>';
+
+        const targetData = [];
+        for (const target of targets) {
+            targetData.push({
+                name: target.name,
+                uuid: target.uuid,
+                phyDef: target.def.phy,
+                phyIcon:
+                    (d20Roll.total ?? 0) >= target.def.phy ? success : failure,
+                cogDef: target.def.cog,
+                cogIcon:
+                    (d20Roll.total ?? 0) >= target.def.cog ? success : failure,
+                spiDef: target.def.spi,
+                spiIcon:
+                    (d20Roll.total ?? 0) >= target.def.spi ? success : failure,
+            });
+        }
+
+        const trayHTML = await renderSystemTemplate(
+            TEMPLATES.CHAT_CARD_TRAY_TARGETS,
+            {
+                targets: targetData,
+            },
+        );
+
+        const tray = $(trayHTML as unknown as HTMLElement);
+
+        tray.find('li.target').on('click', (event) => {
+            void this.onClickTarget(event);
+        });
+
+        html.find('.chat-card').append(tray);
+    }
+
     protected async enrichDamage(html: JQuery) {
         if (!this.hasDamage) return;
 
@@ -509,6 +561,9 @@ export class CosmereChatMessage extends ChatMessage {
                       ? AdvantageMode.Disadvantage
                       : AdvantageMode.None;
 
+            roll.resetFormula();
+            roll.resetTotal();
+
             void this.update({ rolls: this.rolls });
         }
     }
@@ -594,6 +649,31 @@ export class CosmereChatMessage extends ChatMessage {
         target?.classList.toggle('expanded');
     }
 
+    /**
+     * Handle target selection and panning.
+     * @param {Event} event The triggering event.
+     * @returns {Promise} A promise that resolves once the canvas pan has completed.
+     * @protected
+     */
+    private async onClickTarget(event: JQuery.ClickEvent) {
+        event.stopPropagation();
+        const uuid = (event.currentTarget as HTMLElement).dataset.uuid;
+
+        if (!uuid) return;
+
+        const actor = fromUuidSync(uuid) as CosmereActor;
+        const token = actor?.getActiveTokens()[0] as Token;
+
+        if (!token) return;
+
+        const releaseOthers = !event.shiftKey;
+        if (token.controlled) token.release();
+        else {
+            token.control({ releaseOthers });
+            return game.canvas!.animatePan(token.center);
+        }
+    }
+
     /**
      * Handles hover begin events on the given html/jquery object.
      * @param {JQuery} html The object to handle hover begin events for.

src/system/documents/item.ts

@@ -63,7 +63,11 @@ import {
 } from '@system/dice';
 import { AdvantageMode } from '@system/types/roll';
 import { RollMode } from '@system/dice/types';
-import { determineConfigurationMode, hasKey } from '../utils/generic';
+import {
+    determineConfigurationMode,
+    getTargetDescriptors,
+    hasKey,
+} from '../utils/generic';
 import { MESSAGE_TYPES } from './chat-message';
 import { renderSystemTemplate, TEMPLATES } from '../utils/templates';
 
@@ -855,6 +859,7 @@ export class CosmereItem<
             message: {
                 type: MESSAGE_TYPES.ACTION,
                 description: await this.getDescriptionHTML(),
+                targets: getTargetDescriptors(),
             },
         };
 

src/system/utils/generic.ts

@@ -1,3 +1,4 @@
+import { CosmereActor } from '../documents';
 import {
     getSystemKeybinding,
     getSystemSetting,
@@ -168,3 +169,49 @@ export function getApplyTargets() {
 
     return new Set([...selectTokens, ...targetTokens]);
 }
+
+export interface TargetDescriptor {
+    /**
+     * The UUID of the target.
+     */
+    uuid: string;
+
+    /**
+     * The target's name.
+     */
+    name: string;
+
+    /**
+     * The target's image.
+     */
+    img: string;
+
+    /**
+     * The target's defense values.
+     */
+    def: {
+        phy: number;
+        cog: number;
+        spi: number;
+    };
+}
+
+/**
+ * Grab the targeted tokens and return relevant information on them.
+ * @returns {TargetDescriptor[]}
+ */
+export function getTargetDescriptors() {
+    const targets = new Map();
+    for (const token of game.user!.targets) {
+        const { name, img, system, uuid } = (token.actor as CosmereActor) ?? {};
+        const phy = system.defenses.phy.value.value ?? 10;
+        const cog = system.defenses.cog.value.value ?? 10;
+        const spi = system.defenses.spi.value.value ?? 10;
+
+        if (uuid) {
+            targets.set(uuid, { name, img, uuid, def: { phy, cog, spi } });
+        }
+    }
+
+    return Array.from(targets.values());
+}

src/system/utils/templates.ts

@@ -52,6 +52,8 @@ export const TEMPLATES = {
     CHAT_CARD_INJURY: 'chat/card-injury.hbs',
     CHAT_CARD_DAMAGE_BUTTONS: 'chat/card-damage-buttons.hbs',
 
+    CHAT_CARD_TRAY_TARGETS: 'chat/card-tray-targets.hbs',
+
     CHAT_ROLL_D20: 'chat/roll-d20.hbs',
     CHAT_ROLL_DAMAGE: 'chat/roll-damage.hbs',
     CHAT_ROLL_TOOLTIP: 'chat/roll-tooltip.hbs',