Added a toggle in D20RollDialog for ReactionRolls

lang/en.json

@@ -1393,6 +1393,7 @@
             "proficiency": "Proficiency",
             "quantity": "Quantity",
             "range": "Range",
+            "reactionRoll": "Reaction Roll",
             "recovery": "Recovery",
             "reroll": "Reroll",
             "rerollThing": "Reroll {thing}",

module/applications/dialogs/d20RollDialog.mjs

@@ -7,6 +7,7 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
         this.roll = roll;
         this.config = config;
         this.config.experiences = [];
+        this.reactionOverride = false;
 
         if (config.source?.action) {
             this.item = config.data.parent.items.get(config.source.item) ?? config.data.parent;
@@ -30,6 +31,7 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
         actions: {
             updateIsAdvantage: this.updateIsAdvantage,
             selectExperience: this.selectExperience,
+            toggleReaction: this.toggleReaction,
             submitRoll: this.submitRoll
         },
         form: {
@@ -103,6 +105,7 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
             context.isLite = this.config.roll?.lite;
             context.extraFormula = this.config.extraFormula;
             context.formula = this.roll.constructFormula(this.config);
+            context.reactionOverride = this.reactionOverride;
         }
         return context;
     }
@@ -141,7 +144,15 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
         this.render();
     }
 
+    static toggleReaction() {
+        if (this.config.roll) {
+            this.reactionOverride = !this.reactionOverride;
+            this.render();
+        }
+    }
+
     static async submitRoll() {
+        this.config.roll.type = this.reactionOverride ? CONFIG.DH.ITEM.actionTypes.reaction.id : this.config.roll.type;
         await this.close({ submitted: true });
     }
 

module/dice/dhRoll.mjs

@@ -69,6 +69,7 @@ export default class DHRoll extends Roll {
 
     static postEvaluate(roll, config = {}) {
         return {
+            type: config.roll.type,
             total: roll.total,
             formula: roll.formula,
             dice: roll.dice.map(d => ({
@@ -194,7 +195,8 @@ export const registerRollDiceHooks = () => {
         if (config.roll.result.duality === -1) updates.push({ key: 'fear', value: 1 });
 
         if (config.rerolledRoll) {
-            if (config.rerolledRoll.isCritical || config.rerolledRoll.result.duality === 1) updates.push({ key: 'hope', value: -1 });
+            if (config.rerolledRoll.isCritical || config.rerolledRoll.result.duality === 1)
+                updates.push({ key: 'hope', value: -1 });
             if (config.rerolledRoll.isCritical) updates.push({ key: 'stress', value: 1 });
             if (config.rerolledRoll.result.duality === -1) updates.push({ key: 'fear', value: -1 });
         }

styles/less/dialog/dice-roll/roll-selection.less

@@ -9,6 +9,36 @@
 }
 
 .application.daggerheart.dialog.dh-style.views.roll-selection {
+    .dialog-header {
+        display: flex;
+        justify-content: center;
+
+        h1 {
+            width: auto;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .reaction-roll-controller {
+                width: auto;
+                opacity: 0.3;
+                border-radius: 50%;
+                font-size: 18px;
+                font-weight: bold;
+
+                &:hover {
+                    opacity: 0.5;
+                    background: light-dark(transparent, @golden);
+                    color: light-dark(@dark-blue, @dark-blue);
+                }
+
+                &.active {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
     .roll-dialog-container {
         display: flex;
         flex-direction: column;
@@ -16,6 +46,7 @@
         max-width: 550px;
 
         .dices-section {
+            position: relative;
             display: flex;
             gap: 60px;
             justify-content: center;

templates/dialogs/dice-roll/header.hbs

@@ -1,7 +1,8 @@
 <header class="dialog-header">
-    {{#if rollConfig.headerTitle}}
+    <h1>
-        <h1>{{rollConfig.headerTitle}}</h1>
+        {{ifThen rollConfig.headerTitle rollConfig.headerTitle rollConfig.title}}
-    {{else}}
+        <button class="reaction-roll-controller {{#if reactionOverride}}active{{/if}}" data-action="toggleReaction" data-tooltip-text="{{localize "DAGGERHEART.GENERAL.reactionRoll"}}">
-        <h1>{{rollConfig.title}}</h1>
+            <i class="fa-solid fa-reply"></i>
-    {{/if}}
+        </button>
+    </h1>
 </header>

templates/dialogs/dice-roll/rollSelection.hbs

@@ -40,6 +40,7 @@
                                 </select>
                             </div>
                         </div>
+
                         <div class="dice-option">
                             <img class="dice-icon" src="{{concat 'systems/daggerheart/assets/icons/dice/fear/' @root.roll.dFear.denomination '.svg'}}" alt="">
                             <div class="dice-select">