Skill Test Targets Display

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,48 @@ 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,
+                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);
+
+        html.find('.chat-card').append(tray);
+    }
+
     protected async enrichDamage(html: JQuery) {
         if (!this.hasDamage) return;
 
@@ -509,6 +556,9 @@ export class CosmereChatMessage extends ChatMessage {
                       ? AdvantageMode.Disadvantage
                       : AdvantageMode.None;
 
+            roll.resetFormula();
+            roll.resetTotal();
+
             void this.update({ rolls: this.rolls });
         }
     }

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',

src/templates/chat/card-tray-targets.hbs

@@ -0,0 +1,26 @@
+<section class="chat-card-tray collapsible">
+    <label>
+          <i class="fas fa-bullseye" inert=""></i>
+          <span>{{ localize "COSMERE.ChatMessage.Trays.Targets" }}</span>
+          <i class="fas fa-caret-down" inert=""></i>
+    </label>
+    <div class="collapsible-content">
+        <div class="wrapper">            
+            <div class="target-headers">
+                <span>{{ localize "COSMERE.AttributeGroup.Physical.short" }} <i class="fa-solid fa-shield"></i></span>
+                <span>{{ localize "COSMERE.AttributeGroup.Cognitive.short" }} <i class="fa-solid fa-shield"></i></span>
+                <span>{{ localize "COSMERE.AttributeGroup.Spiritual.short" }} <i class="fa-solid fa-shield"></i></span>
+            </div>
+            <ul class="target-list">
+                {{#each targets}}
+                <li class="target">
+                    <span class="name">{{this.name}}</span>
+                    <span class="result">{{this.phyDef}} {{{this.phyIcon}}}</span>
+                    <span class="result">{{this.cogDef}} {{{this.cogIcon}}}</span>
+                    <span class="result">{{this.spiDef}} {{{this.spiIcon}}}</span>
+                </li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+</section>