Indicate fumbles / coups on the dice-total

src/ds4.scss

@@ -7,6 +7,7 @@
 @include meta.load-css("scss/global/grid");
 @include meta.load-css("scss/global/window");
 @include meta.load-css("scss/components/actor_sheet");
+@include meta.load-css("scss/components/dice_total");
 
 /* Styles limited to ds4 sheets */
 .ds4 {

src/module/ds4.ts

@@ -9,6 +9,7 @@ import { DS4ItemSheet } from "./item/item-sheet";
 import { migration } from "./migrations";
 import { DS4Check } from "./rolls/check";
 import { createCheckRoll } from "./rolls/check-factory";
+import { DS4Roll } from "./rolls/roll";
 import registerSlayingDiceModifier from "./rolls/slaying-dice-modifier";
 import { registerSystemSettings } from "./settings";
 
@@ -34,6 +35,8 @@ Hooks.once("init", async () => {
     CONFIG.Dice.types.push(DS4Check);
     CONFIG.Dice.terms.s = DS4Check;
 
+    CONFIG.Dice.rolls.unshift(DS4Roll);
+
     registerSlayingDiceModifier();
 
     registerSystemSettings();

src/module/rolls/check-factory.ts

@@ -34,11 +34,9 @@ class CheckFactory {
     private checkOptions: DS4CheckFactoryOptions;
 
     async execute(): Promise<ChatMessage | unknown> {
-        const rollCls = CONFIG.Dice.rolls[0];
-
         const innerFormula = ["ds", this.createTargetValueTerm(), this.createCritTerm()].filterJoin("");
         const formula = this.checkOptions.useSlayingDice ? `{${innerFormula}}x` : innerFormula;
-        const roll = new rollCls(formula);
+        const roll = Roll.create(formula);
 
         const rollModeTemplate = this.checkOptions.rollMode;
         return roll.toMessage({}, { rollMode: rollModeTemplate, create: true });

src/module/rolls/roll.ts

@@ -0,0 +1,44 @@
+import { DS4Check } from "./check";
+
+export class DS4Roll<D extends Record<string, unknown> = Record<string, unknown>> extends Roll<D> {
+    static CHAT_TEMPLATE = "systems/ds4/templates/roll/roll.hbs";
+
+    /**
+     * This only differs from {@link Roll.render} in that it provides `isCoup` and `isFumble` properties to the roll
+     * template if the first dice term is a ds4 check.
+     * @override
+     */
+    async render(chatOptions: Roll.ChatOptions = {}): Promise<HTMLElement> {
+        chatOptions = mergeObject(
+            {
+                user: game.user?._id,
+                flavor: null,
+                template: DS4Roll.CHAT_TEMPLATE,
+                blind: false,
+            },
+            chatOptions,
+        );
+        const isPrivate = chatOptions.isPrivate;
+
+        // Execute the roll, if needed
+        if (!this._rolled) this.roll();
+
+        // Define chat data
+        const firstDiceTerm = this.dice[0];
+        const isCoup = firstDiceTerm instanceof DS4Check && firstDiceTerm.coup;
+        const isFumble = firstDiceTerm instanceof DS4Check && firstDiceTerm.fumble;
+
+        const chatData = {
+            formula: isPrivate ? "???" : this._formula,
+            flavor: isPrivate ? null : chatOptions.flavor,
+            user: chatOptions.user,
+            tooltip: isPrivate ? "" : await this.getTooltip(),
+            total: isPrivate ? "?" : Math.round((this.total ?? 0) * 100) / 100,
+            isCoup: isPrivate ? null : isCoup,
+            isFumble: isPrivate ? null : isFumble,
+        };
+
+        // Render the roll display template
+        return (renderTemplate(chatOptions.template ?? "", chatData) as unknown) as HTMLElement; // TODO(types): Make this cast unnecessary by fixing upstream
+    }
+}

src/scss/components/_dice_total.scss

@@ -0,0 +1,18 @@
+@use "../utils/colors";
+
+.ds4-dice-total {
+    @mixin color-filter($rotation) {
+        filter: sepia(0.5) hue-rotate($rotation);
+        backdrop-filter: sepia(0.5) hue-rotate($rotation);
+    }
+
+    &--coup {
+        color: colors.$c-coup;
+        @include color-filter(60deg);
+    }
+
+    &--fumble {
+        color: colors.$c-fumble;
+        @include color-filter(-60deg);
+    }
+}

src/scss/utils/_colors.scss

@@ -3,3 +3,5 @@ $c-black: #000;
 $c-light-grey: #777;
 $c-border-groove: #eeede0;
 $c-invalid-input: rgba(lightcoral, 50%);
+$c-coup: #18520b;
+$c-fumble: #aa0200;

src/templates/roll/roll.hbs

@@ -0,0 +1,11 @@
+<div class="dice-roll">
+    {{#if flavor}}
+    <div class="dice-flavor">{{flavor}}</div>
+    {{/if}}
+    <div class="dice-result">
+        <div class="dice-formula">{{formula}}</div>
+        {{{tooltip}}}
+        <h4 class="dice-total{{#if isFumble}} ds4-dice-total--fumble{{/if}}{{#if isCoup}} ds4-dice-total--coup{{/if}}">{{total}}
+        </h4>
+    </div>
+</div>