Style and restore aid modifiers

module/applications/dialogs/groupRollDialog.mjs

@@ -37,7 +37,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         tag: 'form',
         id: 'GroupRollDialog',
         classes: ['daggerheart', 'views', 'dh-style', 'dialog', 'group-roll-dialog'],
-        position: { width: 380, height: 'auto' },
+        position: { width: 390, height: 'auto' },
         window: {
             icon: 'fa-solid fa-users'
         },
@@ -47,7 +47,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
             makeRoll: this.#makeRoll,
             removeRoll: this.#removeRoll,
             rerollDice: this.#rerollDice,
-            markSuccessfull: this.#markSuccessfull,
+            markSuccessful: this.#markSuccessful,
             cancelRoll: this.#onCancelRoll,
             finishRoll: this.#finishRoll
         },
@@ -204,7 +204,8 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
             isEditable: actor?.testUserPermission(game.user, CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER),
             key: partId,
             readyToRoll: Boolean(data.rollChoice),
-            hasRolled: Boolean(data.rollData)
+            hasRolled: Boolean(data.rollData),
+            modifier: data.successfull ? 1 : data.successfull === false ? -1 : 0
         };
     }
 
@@ -406,12 +407,13 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         );
     }
 
-    static #markSuccessfull(_event, button) {
+    static #markSuccessful(_event, button) {
-        const previousValue = this.party.system.groupRoll.aidingCharacters[button.dataset.member].successfull;
+        const memberKey = button.closest('[data-member-key]').dataset.memberKey;
-        const newValue = Boolean(button.dataset.successfull === 'true');
+        const previousValue = this.party.system.groupRoll.aidingCharacters[memberKey].successfull;
+        const newValue = Boolean(button.dataset.success === 'true');
         this.updatePartyData(
             {
-                [`system.groupRoll.aidingCharacters.${button.dataset.member}.successfull`]:
+                [`system.groupRoll.aidingCharacters.${memberKey}.successfull`]:
                     previousValue === newValue ? null : newValue
             },
             this.getUpdatingParts(button)

styles/less/dialog/group-roll-dialog/main.less

@@ -19,15 +19,31 @@
         }
 
         .item-tags {
+            gap: 6px;
+            .tag.failure,
             .tag.success {
+                font-weight: 600;
+                justify-content: center;
+                min-width: 3ch;
+            }
+
+            .tag.success {
+                border-color: @green;
                 background: @green-10;
                 color: @green;
             }
 
             .tag.failure {
+                border-color: @red;
                 background: @red-10;
                 color: @red;
             }
+
+            .tag {
+                padding-top: 0;
+                padding-bottom: 0;
+                line-height: 1.1875rem;
+            }
         }
 
         .member-roll-container {
@@ -48,12 +64,30 @@
                 .trait {
                     display: flex;
                     align-items: center;
-                    gap: var(--spacer-8);
+                    gap: 6px;
                     select {
                         --input-height: 2em;
                         width: auto;
                     }
                 }
+                .item-tags {
+                    align-items: stretch;
+                    .buttons {
+                        align-items: stretch;
+                        display: flex;
+                        button {
+                            --button-size: auto;
+                            color: var(--medium-red);
+                            padding: 0 var(--spacer-4);
+                            &[data-success=true] {
+                                color: var(--green);
+                            }
+                            &.inactive {
+                                opacity: 0.5;
+                            }
+                        }
+                    }
+                }
             }
 
             &.inactive {
@@ -178,6 +212,10 @@
             margin-block: var(--spacer-4);
         }
 
+        .modifiers .item-tags {
+            min-height: calc(2px + 1.1875rem);
+        }
+
         .total {
             .label {
                 font-size: var(--font-size-14);

templates/dialogs/groupRollDialog/parts/member.hbs

@@ -1,13 +1,23 @@
 {{#with (ifThen (eq partId "leader") leader (lookup members partId))}}
     <section class="member-roll-container {{type}} {{#if @root.allHaveRolled}}select-padding{{/if}} {{#unless isEditable}}inactive{{/unless}}" data-member-key="{{@root.partId}}">
         {{log this}}
-        {{log @root}}
         <img class="portrait" src="{{img}}" />
         <div class="name-area">
             <span class="name">{{name}}</span>
             {{#if hasRolled}}
                 <div class="trait item-tags">
                     <div class="tag">{{rollChoiceLabel}}</div>
+                    {{#if modifier}}
+                        <span class="tag {{#if (gte modifier 0)}}success{{else}}failure{{/if}}">
+                            {{numberFormat modifier sign=true}}
+                        </span>
+                    {{/if}}
+                    {{#if (and isEditable (ne ../partId "leader"))}}
+                        <div class="buttons">
+                            <button type="button" data-action="markSuccessful" data-success="true" class="plain icon fa-solid fa-check {{#if modifier}}{{#if successfull}}active{{else}}inactive{{/if}}{{/if}}"></button>
+                            <button type="button" data-action="markSuccessful" class="plain icon fa-solid fa-times {{#if modifier}}{{#if successfull}}inactive{{else}}active{{/if}}{{/if}}"></button>
+                        </div>
+                    {{/if}}
                 </div>
             {{else if readyToRoll}}
                 <div class="trait">
@@ -40,7 +50,7 @@
                             <img src="{{concat "systems/daggerheart/assets/icons/dice/" (ifThen (eq roll.advantage.type 1) "adv/" "disadv/") roll.advantage.dice ".svg"}}" />
                         </span>
                     {{/if}}
-                    <span class="roll-operator">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
+                    <span class="roll-operator ">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
                     <span class="roll-value">{{positive roll.modifierTotal}}</span>
                 </div>
             </div>

templates/dialogs/groupRollDialog/parts/result.hbs

@@ -12,7 +12,9 @@
             <span class="label">Modifiers</span>
             <div class="item-tags">
                 {{#each groupRoll.modifiers as |modifier|}}
-                    <span class="tag">{{#if (gte modifier 0)}}+{{else}}-{{/if}}{{positive modifier}}</span>
+                    <span class="tag {{#if (gte modifier 0)}}success{{else}}failure{{/if}}">
+                        {{numberFormat modifier sign=true}}
+                    </span>
                 {{/each}}
             </div>
         </div>