[Feature] Redesign group roll dialog (#1824)

* Redesign group roll dialog

* Style and restore aid modifiers

* Move successful buttons to inner result

* Localize and finish dialog

* Remove empty line

* Fix error and remove old styles

* Make icon pop a tiny bit better

* Fix advantage/disadvantage

gulpfile.js

@@ -3,7 +3,7 @@ var gulp = require('gulp');
 var less = require('gulp-less');
 
 gulp.task('less', function (cb) {
-    gulp.src('styles/daggerheart.less').pipe(less()).pipe(gulp.dest('styles'));
+    gulp.src('styles/daggerheart.less').pipe(less()).on('error', console.error.bind(console)).pipe(gulp.dest('styles'));
     cb();
 });
 

lang/en.json

@@ -758,15 +758,20 @@
                 }
             },
             "GroupRollSelect": {
-                "title": "Group Roll",
+                "cancelConfirmText": "Are you sure you want to cancel the Group Roll? This will close it for all other players too.",
-                "aidingCharacters": "Aiding Characters",
+                "cancelConfirmTitle": "Cancel Group Roll",
+                "initializationTitle": "Character Selection",
+                "finishGroupRoll": "Finish Group Roll",
                 "leader": "Leader",
                 "leaderRoll": "Leader Roll",
+                "members": "Members",
                 "openDialogForAll": "Open Dialog For All",
+                "removeRoll": "Remove Roll",
+                "resultsHint": "Results will appear when characters roll",
+                "selectLeaderHint": "Select one Character to be the leader",
+                "selectParticipantsHint": "Select one Character to be the leader",
                 "startGroupRoll": "Start Group Roll",
-                "finishGroupRoll": "Finish Group Roll",
+                "title": "Group Roll"
-                "cancelConfirmTitle": "Cancel Group Roll",
-                "cancelConfirmText": "Are you sure you want to cancel the Group Roll? This will close it for all other players too."
             },
             "TokenConfig": {
                 "actorSizeUsed": "Actor size is set, determining the dimensions"

module/applications/dialogs/groupRollDialog.mjs

@@ -37,17 +37,17 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         tag: 'form',
         id: 'GroupRollDialog',
         classes: ['daggerheart', 'views', 'dh-style', 'dialog', 'group-roll-dialog'],
-        position: { width: 550, height: 'auto' },
+        position: { width: 390, height: 'auto' },
+        window: {
+            icon: 'fa-solid fa-users'
+        },
         actions: {
             toggleSelectMember: this.#toggleSelectMember,
             startGroupRoll: this.#startGroupRoll,
             makeRoll: this.#makeRoll,
             removeRoll: this.#removeRoll,
             rerollDice: this.#rerollDice,
-            makeLeaderRoll: this.#makeLeaderRoll,
+            markSuccessful: this.#markSuccessful,
-            removeLeaderRoll: this.#removeLeaderRoll,
-            rerollLeaderDice: this.#rerollLeaderDice,
-            markSuccessfull: this.#markSuccessfull,
             cancelRoll: this.#onCancelRoll,
             finishRoll: this.#finishRoll
         },
@@ -59,17 +59,21 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
             id: 'initialization',
             template: 'systems/daggerheart/templates/dialogs/groupRollDialog/initialization.hbs'
         },
+        main: {
+            id: 'main',
+            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/main.hbs'
+        },
         leader: {
             id: 'leader',
-            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/leader.hbs'
+            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/parts/member.hbs'
         },
-        groupRoll: {
+        result: {
-            id: 'groupRoll',
+            id: 'result',
-            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/groupRoll.hbs'
+            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/parts/result.hbs'
         },
         footer: {
             id: 'footer',
-            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/footer.hbs'
+            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/parts/footer.hbs'
         }
     };
 
@@ -89,40 +93,14 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
     }
 
     _configureRenderParts(options) {
-        const { initialization, leader, groupRoll, footer } = super._configureRenderParts(options);
+        const parts = super._configureRenderParts(options);
-        const augmentedParts = { initialization };
         for (const memberKey of Object.keys(this.party.system.groupRoll.aidingCharacters)) {
-            augmentedParts[memberKey] = {
+            parts[memberKey] = {
                 id: memberKey,
-                template: 'systems/daggerheart/templates/dialogs/groupRollDialog/groupRollMember.hbs'
+                template: 'systems/daggerheart/templates/dialogs/groupRollDialog/parts/member.hbs'
             };
         }
-
+        return parts;
-        augmentedParts.leader = leader;
-        augmentedParts.groupRoll = groupRoll;
-        augmentedParts.footer = footer;
-
-        return augmentedParts;
-    }
-
-    /**@inheritdoc */
-    async _onRender(context, options) {
-        await super._onRender(context, options);
-
-        if (this.element.querySelector('.team-container')) return;
-
-        if (this.tabGroups.application !== this.constructor.PARTS.initialization.id) {
-            const initializationPart = this.element.querySelector('.initialization-container');
-            initializationPart.insertAdjacentHTML('afterend', '<div class="team-container"></div>');
-            initializationPart.insertAdjacentHTML(
-                'afterend',
-                `<div class="section-title">${game.i18n.localize('DAGGERHEART.APPLICATIONS.GroupRollSelect.aidingCharacters')}</div>`
-            );
-
-            const teamContainer = this.element.querySelector('.team-container');
-            for (const memberContainer of this.element.querySelectorAll('.team-member-container'))
-                teamContainer.appendChild(memberContainer);
-        }
     }
 
     async _prepareContext(_options) {
@@ -134,6 +112,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         context.data = this.party.system.groupRoll;
         context.traitOptions = CONFIG.DH.ACTOR.abilities;
         context.members = {};
+        context.aidKeys = Object.keys(this.party.system.groupRoll.aidingCharacters);
         context.allHaveRolled = Object.keys(context.data.participants).every(key => {
             const data = context.data.participants[key];
             return Boolean(data.rollData);
@@ -145,6 +124,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
     async _preparePartContext(partId, context, options) {
         const partContext = await super._preparePartContext(partId, context, options);
         partContext.partId = partId;
+        partContext.leader = this.getRollCharacterData(this.party.system.groupRoll.leader);
 
         switch (partId) {
             case 'initialization':
@@ -162,19 +142,14 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
                 partContext.canStartGroupRoll = selectedMembers.length > 1 && this.leader?.memberId;
                 partContext.openForAllPlayers = this.openForAllPlayers;
                 break;
-            case 'leader':
+            case 'result':
-                partContext.leader = this.getRollCharacterData(this.party.system.groupRoll.leader);
-                break;
-            case 'groupRoll':
                 const leader = this.party.system.groupRoll.leader;
                 partContext.hasRolled =
                     leader?.rollData ||
-                    Object.values(this.party.system.groupRoll?.aidingCharacters ?? {}).some(
+                    Object.values(this.party.system.groupRoll?.aidingCharacters ?? {}).some(x => x.successful !== null);
-                        x => x.successfull !== null
-                    );
                 const { modifierTotal, modifiers } = Object.values(this.party.system.groupRoll.aidingCharacters).reduce(
                     (acc, curr) => {
-                        const modifier = curr.successfull === true ? 1 : curr.successfull === false ? -1 : null;
+                        const modifier = curr.successful === true ? 1 : curr.successful === false ? -1 : null;
                         if (modifier) {
                             acc.modifierTotal += modifier;
                             acc.modifiers.push(modifier);
@@ -200,7 +175,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
             case 'footer':
                 partContext.canFinishRoll =
                     Boolean(this.party.system.groupRoll.leader?.rollData) &&
-                    Object.values(this.party.system.groupRoll.aidingCharacters).every(x => x.successfull !== null);
+                    Object.values(this.party.system.groupRoll.aidingCharacters).every(x => x.successful !== null);
                 break;
         }
 
@@ -216,20 +191,42 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         if (!data) return {};
 
         const actor = game.actors.get(data.id);
+        const isLeader = data === this.party.system.groupRoll.leader;
+
+        const roll = data.roll;
+        const withTypeSuffix = !roll ? null : roll.isCritical ? 'criticalShort' : roll.withHope ? 'hope' : 'fear';
+        const thing = withTypeSuffix ? _loc(`DAGGERHEART.GENERAL.${withTypeSuffix}`) : null;
 
         return {
             ...data,
+            type: isLeader ? 'leader' : 'aid',
+            basePath: isLeader ? 'system.groupRoll.leader' : `system.groupRoll.aidingCharacters.${data.id}`,
+            rollChoiceLabel: _loc(CONFIG.DH.ACTOR.abilities[data.rollChoice]?.label),
             roll: data.roll,
-            isEditable: actor.testUserPermission(game.user, CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER),
+            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.successful ? 1 : data.successful === false ? -1 : 0,
+            withLabelShort: thing ? _loc('DAGGERHEART.GENERAL.withThing', { thing }) : null
         };
     }
 
+    #getCharacterDataById(id) {
+        if (!id) return null;
+
+        const groupRoll = this.party.system.groupRoll;
+        if (id === 'leader' || id === groupRoll.leader?.id) {
+            return { data: groupRoll.leader, basePath: 'system.groupRoll.leader' };
+        } else if (id in groupRoll.aidingCharacters) {
+            return { data: groupRoll.aidingCharacters[id], basePath: `system.groupRoll.aidingCharacters.${id}` };
+        }
+
+        return null;
+    }
+
     static async updateData(event, _, formData) {
         const partyData = foundry.utils.expandObject(formData.object);
-
         this.updatePartyData(partyData, this.getUpdatingParts(event.target));
     }
 
@@ -256,16 +253,16 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
     }
 
     getUpdatingParts(target) {
-        const { initialization, leader, groupRoll, footer } = this.constructor.PARTS;
+        const { initialization, leader, result, footer } = this.constructor.PARTS;
         const isInitialization = this.tabGroups.application === initialization.id;
-        const updatingMember = target.closest('.team-member-container')?.dataset?.memberKey;
+        const updatingMember = target.closest('.member-roll-container.aid')?.dataset?.memberKey;
-        const updatingLeader = target.closest('.main-character-outer-container');
+        const updatingLeader = target.closest('.member-roll-container.leader');
 
         return [
             ...(isInitialization ? [initialization.id] : []),
             ...(updatingMember ? [updatingMember] : []),
             ...(updatingLeader ? [leader.id] : []),
-            ...(!isInitialization ? [groupRoll.id, footer.id] : [])
+            ...(!isInitialization ? [result.id, footer.id] : [])
         ];
     }
 
@@ -304,6 +301,9 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
     static #toggleSelectMember(_, button) {
         const member = this.partyMembers.find(x => x.id === button.dataset.id);
         member.selected = !member.selected;
+        if (this.leader?.memberId === member.id) {
+            this.leader = null;
+        }
         this.render();
     }
 
@@ -343,11 +343,14 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
     }
     //#endregion
 
-    async makeRoll(button, characterData, path) {
+    /** @this GroupRollDialog */
-        const actor = game.actors.find(x => x.id === characterData.id);
+    static async #makeRoll(_event, button) {
+        const member = button.closest('[data-member-key]').dataset.memberKey;
+        const { data, basePath } = this.#getCharacterDataById(member);
+        const actor = game.actors.find(x => x.id === data.id);
         if (!actor) return;
 
-        const result = await actor.rollTrait(characterData.rollChoice, {
+        const result = await actor.rollTrait(data.rollChoice, {
             skips: {
                 createMessage: true,
                 resources: true,
@@ -356,53 +359,40 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         });
 
         if (!result) return;
+        // todo: move logic to actor.rollTrait() or actor.diceRoll()
         if (!game.modules.get('dice-so-nice')?.active) foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
 
         const rollData = result.messageRoll.toJSON();
         delete rollData.options.messageRoll;
         this.updatePartyData(
             {
-                [path]: rollData
+                [basePath]: { rollData, successful: null }
             },
             this.getUpdatingParts(button)
         );
     }
 
-    static async #makeRoll(_event, button) {
+    /** @this GroupRollDialog  */
-        const { member } = button.dataset;
+    static async #removeRoll(_event, button) {
-        const character = this.party.system.groupRoll.aidingCharacters[member];
+        const member = button.closest('[data-member-key]').dataset.memberKey;
-        this.makeRoll(button, character, `system.groupRoll.aidingCharacters.${member}.rollData`);
+        const { basePath } = this.#getCharacterDataById(member);
-    }
-
-    static async #makeLeaderRoll(_event, button) {
-        const character = this.party.system.groupRoll.leader;
-        this.makeRoll(button, character, 'system.groupRoll.leader.rollData');
-    }
-
-    async removeRoll(button, path) {
         this.updatePartyData(
             {
-                [path]: {
+                [basePath]: {
                     rollData: null,
                     rollChoice: null,
                     selected: false,
-                    successfull: null
+                    successful: null
                 }
             },
             this.getUpdatingParts(button)
         );
     }
 
-    static async #removeRoll(_event, button) {
+    /** @this GroupRollDialog */
-        this.removeRoll(button, `system.groupRoll.aidingCharacters.${button.dataset.member}`);
+    static async #rerollDice(_, button) {
-    }
-
-    static async #removeLeaderRoll(_event, button) {
-        this.removeRoll(button, 'system.groupRoll.leader');
-    }
-
-    async rerollDice(button, data, path) {
         const { diceType } = button.dataset;
+        const { data, basePath } = this.#getCharacterDataById(button.dataset.member);
 
         const dieIndex = diceType === 'hope' ? 0 : diceType === 'fear' ? 1 : 2;
         const newRoll = game.system.api.dice.DualityRoll.fromData(data.rollData);
@@ -416,31 +406,19 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         const rollData = newRoll.toJSON();
         this.updatePartyData(
             {
-                [path]: rollData
+                [`${basePath}.rollData`]: rollData
             },
             this.getUpdatingParts(button)
         );
     }
 
-    static async #rerollDice(_, button) {
+    static #markSuccessful(_event, button) {
-        const { member } = button.dataset;
+        const memberKey = button.closest('[data-member-key]').dataset.memberKey;
-        this.rerollDice(
+        const previousValue = this.party.system.groupRoll.aidingCharacters[memberKey].successful;
-            button,
+        const newValue = Boolean(button.dataset.success === 'true');
-            this.party.system.groupRoll.aidingCharacters[member],
-            `system.groupRoll.aidingCharacters.${member}.rollData`
-        );
-    }
-
-    static async #rerollLeaderDice(_, button) {
-        this.rerollDice(button, this.party.system.groupRoll.leader, `system.groupRoll.leader.rollData`);
-    }
-
-    static #markSuccessfull(_event, button) {
-        const previousValue = this.party.system.groupRoll.aidingCharacters[button.dataset.member].successfull;
-        const newValue = Boolean(button.dataset.successfull === 'true');
         this.updatePartyData(
             {
-                [`system.groupRoll.aidingCharacters.${button.dataset.member}.successfull`]:
+                [`system.groupRoll.aidingCharacters.${memberKey}.successful`]:
                     previousValue === newValue ? null : newValue
             },
             this.getUpdatingParts(button)
@@ -484,7 +462,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
     static async #finishRoll() {
         const totalRoll = this.party.system.groupRoll.leader.roll;
         for (const character of Object.values(this.party.system.groupRoll.aidingCharacters)) {
-            totalRoll.terms.push(new foundry.dice.terms.OperatorTerm({ operator: character.successfull ? '+' : '-' }));
+            totalRoll.terms.push(new foundry.dice.terms.OperatorTerm({ operator: character.successful ? '+' : '-' }));
             totalRoll.terms.push(new foundry.dice.terms.NumericTerm({ number: 1 }));
         }
 

module/data/groupRollData.mjs

@@ -30,7 +30,7 @@ export class CharacterData extends foundry.abstract.DataModel {
             }),
             rollData: new fields.JSONField({ nullable: true, initial: null }),
             selected: new fields.BooleanField({ initial: false }),
-            successfull: new fields.BooleanField({ nullable: true, initial: null })
+            successful: new fields.BooleanField({ nullable: true, initial: null })
         };
     }
 

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

@@ -0,0 +1,46 @@
+h1 {
+    color: light-dark(@dark-blue, @golden);
+    font-family: var(--dh-font-subtitle);
+    font-size: var(--font-size-24);
+    text-align: center;
+    font-weight: 700;
+}
+
+header {
+    --bar-color: light-dark(@dark-blue, @golden);
+    color: light-dark(@dark, @beige);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:not(:first-child) {
+        margin-top: var(--spacer-8);
+    }
+    
+    span {
+        padding: 0 10px;
+    }
+
+    &:before {
+        content: ' ';
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--bar-color) 100%);
+    }
+
+    &:after {
+        content: ' ';
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(90deg, var(--bar-color) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+}
+
+img.portrait {
+    border-radius: 50%;
+    border: none;
+    object-fit: cover;
+    object-position: center top;
+    width: 2.5rem;
+    height: 2.5rem;
+}

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

@@ -0,0 +1,8 @@
+.daggerheart.dialog.dh-style.views.group-roll-dialog {
+    .window-content {
+        @import "./_common.less";
+    }
+}
+
+@import "./initialization.less";
+@import "./main.less";

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

@@ -1,62 +1,59 @@
-.theme-light .daggerheart.dialog.dh-style.views.group-roll-dialog {
-    .initialization-container .members-container .member-container {
-        .member-name {
-            background-image: url('../assets/parchments/dh-parchment-light.png');
-        }
-    }
-}
-
 .daggerheart.dialog.dh-style.views.group-roll-dialog {
-    .initialization-container {
+    .initialization-container.active {
-        h2 {
+        display: flex;
-            text-align: center;
+        flex-direction: column;
-        }
+        overflow: hidden;
-
-        .members-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
-            gap: 8px;
-
-            .member-container {
-                position: relative;
-                display: flex;
-                justify-content: center;
-
-                &.inactive {
-                    opacity: 0.4;
-                }
-
-                .member-name {
-                    position: absolute;
-                    padding: 0 2px;
-                    border: 1px solid;
-                    border-radius: 6px;
-                    margin-top: 4px;
-                    color: light-dark(@dark, @beige);
-                    background-image: url('../assets/parchments/dh-parchment-dark.png');
-                    text-align: center;
-                }
-
-                img {
-                    border-radius: 6px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
-                }
-            }
-        }
 
         .main-roll {
-            margin-top: 8px;
+            display: flex;
-            display: grid;
+            flex-direction: column;
-            grid-template-columns: 1fr 1fr;
+            text-align: center;
-            gap: 8px;
+            padding-bottom: 4px;
 
             &.inactive {
                 opacity: 0.4;
             }
         }
 
+        .hint {
+            color: var(--color-form-hint);
+            line-height: 1;
+            padding: var(--spacer-8) 0;
+            font-family: var(--dh-font-body);
+            font-size: var(--font-size-12);
+            font-weight: 300;
+        }
+
+        .members-container {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            overflow-y: auto;
+
+            .member-container {
+                display: flex;
+                position: relative;
+                justify-content: center;
+                height: unset;
+                padding: 4px 8px;
+                gap: var(--spacer-8);
+                flex: 0 0 auto;
+
+                &:not(.inactive) {
+                    background: @golden-bg;
+                }
+
+                .name {
+                    flex: 1;
+                    color: light-dark(@dark, @beige);
+                    font-weight: 500;
+                    text-align: left;
+                }
+            }
+        }
+
         footer {
-            margin-top: 8px;
+            margin-top: 12px;
             display: flex;
             gap: 8px;
 

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

@@ -1,35 +0,0 @@
-.daggerheart.dialog.dh-style.views.group-roll-dialog {
-    .main-character-outer-container {
-        &.inactive {
-            opacity: 0.3;
-            pointer-events: none;
-        }
-
-        .main-character-container {
-            .character-info {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                width: 100%;
-                height: 64px;
-
-                img {
-                    height: 64px;
-                    border-radius: 6px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
-                }
-
-                .character-data {
-                    padding-left: 0.75rem;
-                    flex: 1;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    text-align: left;
-                    font-size: var(--font-size-18);
-                }
-            }
-        }
-    }
-}

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

@@ -0,0 +1,273 @@
+.daggerheart.dialog.dh-style.views.group-roll-dialog {
+    .group-roll.active {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        a.roll-button {
+            &:hover {
+                text-shadow: none;
+                filter: drop-shadow(0 0 3px @golden-90);
+            }
+        }
+
+        .aiding-members {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            overflow-y: auto;
+        }
+
+        .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;
+            }
+        }
+
+        .with-result {
+            border-radius: 5px;
+            background: var(--duality-bg);
+            color: var(--color-light-2);
+            
+            &.hope {
+                --duality-text-color: @golden;
+                --duality-bg: url(../assets/parchments/dh-parchment-hope.png);
+            }
+
+            &.fear {
+                --duality-text-color: @chat-blue;
+                --duality-bg: url(../assets/parchments/dh-parchment-fear.png);
+            }
+
+            &.critical {
+                --duality-text-color: @chat-purple;
+                --duality-bg: url(../assets/parchments/dh-parchment-critical.png);
+            }
+
+            .duality-label {
+                font-family: var(--dh-font-subtitle);
+                color: var(--duality-text-color);
+                font-weight: 700;
+            }
+        }
+
+        .member-roll-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+            min-height: 3.375rem;
+
+            &.inactive {
+                pointer-events: none;
+            }
+
+            .name-area {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                justify-content: center;
+                .name {
+                    font-weight: 500;
+                }
+                .trait {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+                    select {
+                        --input-height: 2em;
+                        width: auto;
+                    }
+                }
+                .item-tags {
+                    align-items: stretch;
+                }
+            }
+
+            .buttons {
+                display: flex;
+                flex-direction: row;
+                button {
+                    --button-text-color: var(--color-text-primary);
+                    --button-size: 1.5em;
+                    padding: 0 var(--spacer-4);
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                    }
+                }
+            }
+
+            a.roll-button.initial-roll {
+                width: 1.875rem;
+                height: 1.875rem;
+                margin-right: 2px; /** makes hover look a bit nicer */
+            }
+
+            .with-result {
+                display: flex;
+                justify-content: end;
+                align-items: center;
+                gap: 6px;
+
+                .roll-data {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: end;
+                    justify-content: center;
+                    padding: 0 4px;
+                    min-height: 3rem;
+
+                    .duality-label {
+                        font-size: var(--font-size-15);
+
+                        .unused-damage {
+                            text-decoration: line-through;
+                        }
+
+                        .with {
+                            font-size: var(--font-size-10);
+                        }
+                    }
+
+                    .roll-dice-container {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-wrap: wrap;
+                        gap: 2px;
+
+                        .roll-dice {
+                            position: relative;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            .dice-label {
+                                position: absolute;
+                                color: white;
+                                font-size: 1rem;
+                                paint-order: stroke fill;
+                                -webkit-text-stroke: 2px black;
+                            }
+
+                            img {
+                                height: 1.3125rem;
+                            }
+                        }
+
+                        .roll-operator {
+                            font-size: var(--font-size-18);
+                            padding: 0 1px;
+                        }
+
+                        .roll-value {
+                            font-size: var(--font-size-16);
+                            padding: 0 1px;
+                        }
+                    }
+                }
+
+                .buttons {
+                    flex-direction: column;
+                    button {                    
+                        color: var(--medium-red);
+                        &[data-success=true] {
+                            color: var(--green);
+                        }
+                        &.active {
+                            text-shadow: 0 0 1px light-dark(@dark-80, @beige-80);
+                        }
+                        &.inactive {
+                            opacity: 0.35;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .group-roll-results {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 4px;
+        font-size: var(--font-size-12);
+        padding: 6px 12px;
+        margin-top: 8px;
+
+        &.empty {
+            color: light-dark(@dark-blue-90, @beige-80);
+            border-radius: 3px;
+            justify-content: center;
+            border: 1px dashed light-dark(@dark-blue-90, @beige-80);
+            text-align: center;
+            height: 3.25rem;
+            font-family: @font-body;
+        }
+
+        .row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .divider {
+            height: 1px;
+            background-image: linear-gradient(90deg, transparent 0%, var(--duality-text-color) 50%, transparent 100%);
+            margin-block: var(--spacer-4);
+        }
+
+        .modifiers .item-tags {
+            min-height: calc(2px + 1.1875rem);
+        }
+
+        .total {
+            .label {
+                font-size: var(--font-size-14);
+            }
+            .duality-label {
+                display: flex;
+                align-items: center;
+                gap: var(--spacer-4);
+                .value {
+                    font-size: 20px;
+                }
+            }
+        }
+    }
+
+    .finish-container {
+        margin-top: 16px;
+        gap: 16px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        .finish-button {
+            grid-column: span 2;
+        }
+    }
+}

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

@@ -1,265 +0,0 @@
-.daggerheart.dialog.dh-style.views.group-roll-dialog {
-    .team-container {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 16px;
-        margin-bottom: 16px;
-
-        .team-member-container {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            gap: 8px;
-            flex: 1;
-
-            &.inactive {
-                opacity: 0.3;
-                pointer-events: none;
-            }
-
-            .data-container {
-                display: flex;
-                flex-direction: column;
-                gap: 8px;
-                width: 100%;
-            }
-
-            .member-info {
-                display: flex;
-                align-items: start;
-                width: 100%;
-
-                img {
-                    height: 64px;
-                    border-radius: 6px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
-                }
-
-                .member-data {
-                    padding-left: 0.75rem;
-                    flex: 1;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    text-align: left;
-                    font-size: var(--font-size-18);
-                }
-            }
-        }
-    }
-
-    .roll-container {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .roll-title {
-        font-size: var(--font-size-20);
-        font-weight: bold;
-        color: light-dark(@dark-blue, @golden);
-        text-align: center;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        &.hope,
-        &.fear,
-        &.critical {
-            color: var(--text-color);
-        }
-
-        &.hope {
-            --text-color: @golden;
-        }
-
-        &.fear {
-            --text-color: @chat-blue;
-        }
-
-        &.critical {
-            --text-color: @chat-purple;
-        }
-
-        &::before,
-        &::after {
-            color: var(--text-color);
-            content: '';
-            flex: 1;
-            height: 2px;
-        }
-
-        &::before {
-            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, light-dark(@dark-blue, @golden) 100%);
-        }
-
-        &::after {
-            background: linear-gradient(90deg, light-dark(@dark-blue, @golden) 0%, rgba(0, 0, 0, 0) 100%);
-        }
-    }
-
-    .roll-tools {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-
-        img {
-            height: 16px;
-        }
-
-        a {
-            display: flex;
-            font-size: 16px;
-
-            &:hover {
-                text-shadow: none;
-                filter: drop-shadow(0 0 8px var(--golden));
-            }
-        }
-    }
-
-    .roll-data {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 4px;
-
-        &.hope {
-            --text-color: @golden;
-            --bg-color: @golden-40;
-        }
-
-        &.fear {
-            --text-color: @chat-blue;
-            --bg-color: @chat-blue-40;
-        }
-
-        &.critical {
-            --text-color: @chat-purple;
-            --bg-color: @chat-purple-40;
-        }
-
-        .duality-label {
-            color: var(--text-color);
-            font-size: var(--font-size-20);
-            font-weight: bold;
-            text-align: center;
-
-            .unused-damage {
-                text-decoration: line-through;
-            }
-        }
-
-        .roll-dice-container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-wrap: wrap;
-            gap: 8px;
-
-            .roll-dice {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .dice-label {
-                    position: absolute;
-                    color: white;
-                    font-size: 1rem;
-                    paint-order: stroke fill;
-                    -webkit-text-stroke: 2px black;
-                }
-
-                img {
-                    height: 32px;
-                }
-            }
-
-            .roll-operator {
-                font-size: var(--font-size-24);
-            }
-
-            .roll-value {
-                font-size: 18px;
-            }
-        }
-
-        .roll-total {
-            background: var(--bg-color);
-            color: var(--text-color);
-            border-radius: 4px;
-            padding: 3px;
-        }
-    }
-
-    .roll-success-container {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-
-        .roll-success-tools {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            color: light-dark(@dark-blue, @golden);
-
-            i {
-                font-size: 24px;
-            }
-        }
-
-        .roll-success-modifier {
-            display: flex;
-            align-items: center;
-            justify-content: right;
-            gap: 2px;
-            font-size: var(--font-size-20);
-            padding: 0px 4px;
-
-            &.success {
-                background: @green-10;
-                color: @green;
-            }
-
-            &.failure {
-                background: @red-10;
-                color: @red;
-            }
-        }
-    }
-
-    .section-title {
-        font-size: var(--font-size-18);
-        font-weight: bold;
-    }
-
-    .group-roll-results {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 4px;
-        font-size: var(--font-size-20);
-
-        .group-roll-container {
-            display: flex;
-            align-items: center;
-            gap: 2px;
-        }
-    }
-
-    .finish-container {
-        margin-top: 16px;
-        gap: 16px;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-
-        .finish-button {
-            grid-column: span 2;
-        }
-    }
-
-    .hint {
-        text-align: center;
-    }
-}

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

@@ -1,50 +0,0 @@
-@import '../../utils/colors.less';
-
-.application.daggerheart.group-roll {
-    fieldset.one-column {
-        min-width: 500px;
-        margin-bottom: 10px;
-    }
-    .actor-item {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-        width: 100%;
-
-        img {
-            height: 40px;
-            width: 40px;
-            border-radius: 50%;
-            object-fit: cover;
-        }
-
-        .actor-info {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-
-            .actor-check-info {
-                display: flex;
-                gap: 10px;
-
-                .form-fields {
-                    display: flex;
-                    gap: 5px;
-                    align-items: center;
-
-                    input {
-                        max-width: 40px;
-                        text-align: center;
-                    }
-                }
-            }
-        }
-
-        .controls {
-            margin-left: auto;
-        }
-    }
-    .tooltip-container {
-        width: 100%;
-    }
-}

styles/less/dialog/index.less

@@ -31,14 +31,10 @@
 
 @import './reroll-dialog/sheet.less';
 
-@import './group-roll/group-roll.less';
-
 @import './tag-team-dialog/initialization.less';
 @import './tag-team-dialog/sheet.less';
 
-@import './group-roll-dialog/initialization.less';
+@import './group-roll-dialog/index.less';
-@import './group-roll-dialog/leader.less';
-@import './group-roll-dialog/sheet.less';
 
 @import './image-select/sheet.less';
 

styles/less/global/elements.less

@@ -100,7 +100,7 @@
         scrollbar-color: light-dark(@dark-blue, @golden) transparent;
     }
 
-    button {
+    button:where(:not(.plain)) {
         background: light-dark(transparent, @golden);
         border: 1px solid light-dark(@dark-blue, @dark-blue);
         color: light-dark(@dark-blue, @dark-blue);

templates/dialogs/group-roll/group-roll.hbs

@@ -1,84 +0,0 @@
-<div class="group-roll">
-    <header class="dialog-header">
-        <h1>{{localize "DAGGERHEART.UI.Chat.groupRoll.title"}}</h1>
-    </header>
-
-    <fieldset class="one-column">
-        <legend>{{localize "DAGGERHEART.UI.Chat.groupRoll.leader"}}</legend>
-        {{#unless leader.actor}}
-            <input type="text" class="leader-change-input" />
-            <div class="drag-area">
-                <span>{{localize "DAGGERHEART.UI.Chat.groupRoll.selectLeader"}}</span>
-            </div>
-        {{else}}
-            <div class="actor-item">
-                <img src="{{leader.actor.img}}" alt="{{leader.actor.name}}">
-                <div class="actor-info">
-                    <span class="actor-name">{{leader.actor.name}}</span>
-                    <div class="actor-check-info">
-                        <div class="form-fields">
-                            <label>{{localize "DAGGERHEART.GENERAL.Trait.single"}}</label>
-                            <select name="actorLeader.trait">
-                                {{selectOptions traitList selected=leader.trait  labelAttr="label" valueAttr="id" localize=true }}
-                            </select>
-                        </div>
-                        {{!-- Not used yet --}}
-                        {{!-- <div class="form-fields">
-                            <label>{{localize "DAGGERHEART.GENERAL.difficulty"}}</label>
-                            <input type="number" name="actorLeader.difficulty" value="{{leader.difficulty}}" data-dtype="Number">
-                        </div> --}}
-                    </div>
-                </div>
-                <div class="controls">
-                    <a data-action="removeLeader" data-leader-uuid="{{leader.actor.uuid}}">
-                        <i class="fa-solid fa-trash"></i>
-                    </a>
-                </div>
-            </div>
-        {{/unless}}
-    </fieldset>
-
-    <fieldset class="one-column">
-        <legend>{{localize "DAGGERHEART.UI.Chat.groupRoll.partyTeam"}}</legend>
-        <span class="tooltip-container" {{#if allSelected}}data-tooltip="{{localize "DAGGERHEART.UI.Chat.groupRoll.wholePartySelected"}}"{{/if}}>
-            <input type="text" class="team-push-input" {{disabled @root.allSelected}}/>
-        </span>
-        {{#if (gt this.members.length 0)}}
-            {{#each members as |member index|}}
-                <div class="actor-item">
-                    <img src="{{member.actor.img}}" alt="{{member.actor.name}}">
-                    <div class="actor-info">
-                        <span class="actor-name">{{member.actor.name}}</span>
-                        <div class="actor-check-info">
-                            <div class="form-fields">
-                                <label>{{localize "DAGGERHEART.GENERAL.Trait.single"}}</label>
-                                <select name="{{concat "actorsMembers." index ".trait"}}">
-                                    {{selectOptions @root.traitList selected=member.trait  labelAttr="label" valueAttr="id" localize=true }}
-                                </select>
-                            </div>
-                            {{!-- Not used yet --}}
-                            {{!-- <div class="form-fields">
-                                <label>{{localize "DAGGERHEART.GENERAL.difficulty"}}</label>
-                                <input type="number" name="{{concat "actorsMembers." index ".difficulty"}}" value="{{member.difficulty}}" data-dtype="Number">
-                            </div> --}}
-                        </div>
-                    </div>
-                    <div class="controls">
-                        <a data-action="removeMember" data-member-uuid="{{member.actor.uuid}}">
-                            <i class="fa-solid fa-trash"></i>
-                        </a>
-                    </div>
-                </div>
-            {{/each}}
-        {{/if}}
-        {{#unless allSelected}}
-            <div class="drag-area">
-                <span>{{localize "DAGGERHEART.UI.Chat.groupRoll.selectMember"}}</span>
-            </div>
-        {{/unless}}
-    </fieldset>
-    <button class="submit-btn" data-action="roll" {{disabled @root.rollDisabled}}>
-        <i class="fa-solid fa-dice"></i>
-        <span>{{localize "DAGGERHEART.GENERAL.roll"}}</span>
-    </button>
-</div>

templates/dialogs/groupRollDialog/groupRoll.hbs

@@ -1,20 +0,0 @@
-<section class="tab {{#if tabs.groupRoll.active}} active{{/if}}" data-group="{{tabs.groupRoll.group}}" data-tab="{{tabs.groupRoll.id}}">
-    <fieldset>
-        <legend>{{localize "DAGGERHEART.GENERAL.result.single"}}</legend>
-
-        <div class="group-roll-results">
-            {{#if hasRolled}}<span class="roll-title {{groupRoll.totalDualityClass}}">{{groupRoll.total}} {{groupRoll.totalLabel}}</span>{{/if}}
-            <div class="group-roll-container">
-                <span>{{#if groupRoll.leaderTotal includeZero=true}}{{groupRoll.leaderTotal}}{{else}}{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.leaderRoll"}}{{/if}}</span>
-                {{#each groupRoll.modifiers as |modifier|}}
-                    <span>{{#if (gte modifier 0)}}+{{else}}-{{/if}}</span>
-                    <span>{{positive modifier}}</span>
-                {{/each}}
-                {{#unless groupRoll.modifiers.length}}
-                    <span>+</span>
-                    <span>{{localize "DAGGERHEART.GENERAL.Modifier.plural"}}</span>
-                {{/unless}}
-            </div>
-        </div>
-    </fieldset>
-</section>

templates/dialogs/groupRollDialog/groupRollMember.hbs

@@ -1,85 +0,0 @@
-{{#with (lookup members partId)}}
-    <fieldset class="team-member-container {{#if @root.allHaveRolled}}select-padding{{/if}} {{#unless isEditable}}inactive{{/unless}}" data-member-key="{{@root.partId}}">
-        <div class="data-container">
-            <div class="member-info">
-                <img src="{{img}}" />
-                <div class="member-data">
-                    <span class="member-name">{{name}}</span>
-                    <div class="roll-setup">
-                        <div class="form-group">
-                            <div class="form-fields">
-                                {{!-- <label>{{localize "DAGGERHEART.GENERAL.Trait.single"}}</label> --}}
-                                <select name="{{concat "system.groupRoll.aidingCharacters." @root.partId ".rollChoice"}}" {{#if hasRolled}}disabled{{/if}}>
-                                    {{selectOptions ../traitOptions selected=rollChoice localize=true}}
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {{#if readyToRoll}}
-                <div class="roll-container">
-                    <span class="roll-title">
-                        {{localize "DAGGERHEART.GENERAL.roll"}}
-                        <div class="roll-tools">
-                            <a class="roll-button" data-action="makeRoll" data-member="{{@root.partId}}">
-                                <img src="systems/daggerheart/assets/icons/dice/hope/d12.svg" />
-                            </a>
-
-                            {{#if hasRolled}}
-                                <a class="delete-button" data-action="removeRoll" data-member="{{@root.partId}}">
-                                    <i class="fa-solid fa-trash"></i>
-                                </a>
-                            {{/if}}
-                        </div>
-                    </span>
-
-                    {{#if roll}}
-                        <div class="roll-data {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
-                            <div class="duality-label">{{roll.total}} {{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</div>
-                            <div class="roll-dice-container">
-                                <a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="hope">
-                                    <span class="dice-label">{{roll.dHope.total}}</span>
-                                    <img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
-                                </a>
-                                <span class="roll-operator">+</span>
-                                <a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="fear">
-                                    <span class="dice-label">{{roll.dFear.total}}</span>
-                                    <img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
-                                </a>
-                                {{#if roll.advantage.type}}
-                                    <span class="roll-operator">{{#if (eq roll.advantage.type 1)}}+{{else}}-{{/if}}</span>
-                                    <span class="roll-dice">
-                                        <span class="dice-label">{{roll.advantage.value}}</span>
-                                        <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-value">{{positive roll.modifierTotal}}</span>
-                            </div>
-                        </div>
-                    {{else}}
-                        <span class="hint">{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.makeYourRoll"}}</span>
-                    {{/if}}
-                </div>
-            {{/if}}
-            {{#if hasRolled}}
-                <div class="roll-success-container">
-                    {{#if ../isGM}}
-                        <div class="roll-success-tools">
-                            <a data-action="markSuccessfull" data-member="{{@root.partId}}" data-successfull="true">
-                                <i class="{{#if successfull}}fa-solid{{else}}fa-regular{{/if}} fa-circle-check"></i>
-                            </a>
-                            <a data-action="markSuccessfull" data-member="{{@root.partId}}">
-                                <i class="{{#unless successfull}}fa-solid{{else}}fa-regular{{/unless}} fa-circle-xmark"></i>
-                            </a>
-                        </div>
-                    {{/if}}
-                    <div class="roll-success-modifier {{#if successfull}}success{{else if (not (isNullish successfull))}}failure{{/if}}">
-                        {{localize "DAGGERHEART.GENERAL.Modifier.single"}}{{#if successfull}} + 1{{else if (isNullish successfull)}} + ?{{else}} - 1{{/if}}
-                    </div>
-                </div>
-            {{/if}}
-        </div>
-    </fieldset>
-{{/with}}

templates/dialogs/groupRollDialog/initialization.hbs

@@ -1,32 +1,43 @@
 <section class="initialization-container tab {{#if tabs.initialization.active}} active{{/if}}" data-group="{{tabs.initialization.group}}" data-tab="{{tabs.initialization.id}}">
+    <h1>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.initializationTitle"}}</h1>
+    <header><span>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.leader"}}</span></header>
+    <section class="main-roll {{#if selectedLeaderDisabled}}inactive{{/if}}">
+        <div class="hint">{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.selectLeaderHint"}}</div>
+        <select class="main-character-field" {{#if selectedLeaderDisabled}}disabled{{/if}}>
+            {{selectOptions selectedLeaderOptions selected=selectedLeader.memberId blank="" }}
+        </select>
+    </section>
+
+    <header><span>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.members"}}</span></header>
+    <div class="hint">{{"DAGGERHEART.APPLICATIONS.GroupRollSelect.selectParticipantsHint"}}</div>
     <div class="members-container">
         {{#each memberSelection as |member|}}
-            <a 
+            <button 
-                class="member-container {{#unless member.selected}}inactive {{#if ../allselected}}locked{{/if}}{{/unless}}" 
+                class="plain member-container {{#unless member.selected}}inactive {{#if ../allselected}}locked{{/if}}{{/unless}}"
-                data-action="toggleSelectMember" data-id="{{member.id}}" {{#if (and (not member.selected) ../allSelected)}}disabled{{/if}}
+                data-action="toggleSelectMember" 
+                data-id="{{member.id}}" 
+                {{#if (and (not member.selected) ../allSelected)}}disabled{{/if}}
             >
-                <span class="member-name">{{member.name}}</span>
+                <img class="portrait" src="{{member.img}}" />
-                <img src="{{member.img}}" />
+                <span class="name">
-            </a>
+                    {{member.name}}
+                    {{#if (eq @root.selectedLeader.memberId member.id)}}
+                        <i class="fa-solid fa-crown" inert></i>
+                    {{/if}}
+                </span>
+                <input type="checkbox" {{#if member.selected}}checked{{/if}} />
+            </button>
         {{/each}} 
     </div>
 
-    <div class="main-roll {{#if selectedLeaderDisabled}}inactive{{/if}}">
-        <div class="form-group">
-            <label>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.leader"}}</label>
-            <div class="form-fields">
-                <select class="main-character-field" {{#if selectedLeaderDisabled}}disabled{{/if}}>
-                    {{selectOptions selectedLeaderOptions selected=selectedLeader.memberId blank="" }}
-                </select>
-            </div>
-        </div>
-    </div>
-
     <footer>
-        <button type="button" data-action="startGroupRoll" {{#unless canStartGroupRoll}}disabled{{/unless}}>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.startGroupRoll"}} <i class="fa-solid fa-arrow-right-long"></i></button>
         <div class="finish-tools {{#unless canStartGroupRoll}}inactive{{/unless}}">
             <span>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.openDialogForAll"}}</span>
             <input type="checkbox" class="openforall-field" {{#unless canStartGroupRoll}}disabled{{/unless}} {{checked openForAllPlayers}} />
         </div>
+        <button type="button" data-action="startGroupRoll" {{#unless canStartGroupRoll}}disabled{{/unless}}>
+            <i class="fa-solid fa-arrow-right-long" inert></i>
+            {{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.startGroupRoll"}}
+        </button>
     </footer>
 </section>

templates/dialogs/groupRollDialog/leader.hbs

@@ -1,73 +0,0 @@
-<section class="tab {{#if tabs.groupRoll.active}} active{{/if}}" data-group="{{tabs.groupRoll.group}}" data-tab="{{tabs.groupRoll.id}}">
-    {{#with leader}}
-        <div class="main-character-outer-container {{#unless isEditable}}inactive{{/unless}}">
-            <div class="section-title">{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.leader"}}</div>
-            <fieldset>
-                <div class="main-character-container">
-                    <div class="character-info">
-                        <img src="{{img}}" />
-                        <div class="character-data">
-                            <span>{{name}}</span>
-                            <div class="roll-setup">
-                                <div class="form-group">
-                                    <div class="form-fields">
-                                        <select name="system.groupRoll.leader.rollChoice" {{#if hasRolled}}disabled{{/if}}>
-                                            {{selectOptions ../traitOptions selected=rollChoice localize=true}}
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {{#if readyToRoll}}
-                    <div class="roll-container">
-                        <span class="roll-title">
-                            {{localize "DAGGERHEART.GENERAL.roll"}}
-                            <div class="roll-tools">
-                                <a class="roll-button" data-action="makeLeaderRoll">
-                                    <img src="systems/daggerheart/assets/icons/dice/hope/d12.svg" />
-                                </a>
-
-                                {{#if hasRolled}}
-                                    <a class="delete-button" data-action="removeLeaderRoll">
-                                        <i class="fa-solid fa-trash"></i>
-                                    </a>
-                                {{/if}}
-                            </div>
-                        </span>
-
-                        {{#if roll}}
-                            <div class="roll-data {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
-                                <div class="duality-label">{{roll.total}} {{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</div>
-                                <div class="roll-dice-container">
-                                    <a class="roll-dice" data-action="rerollLeaderDice" data-dice-type="hope">
-                                        <span class="dice-label">{{roll.dHope.total}}</span>
-                                        <img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
-                                    </a>
-                                    <span class="roll-operator">+</span>
-                                    <a class="roll-dice" data-action="rerollLeaderDice" data-dice-type="fear">
-                                        <span class="dice-label">{{roll.dFear.total}}</span>
-                                        <img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
-                                    </a>
-                                    {{#if roll.advantage.type}}
-                                        <span class="roll-operator">{{#if (eq roll.advantage.type 1)}}+{{else}}-{{/if}}</span>
-                                        <span class="roll-dice">
-                                            <span class="dice-label">{{roll.advantage.value}}</span>
-                                            <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-value">{{positive roll.modifierTotal}}</span>
-                                </div>
-                            </div>
-                        {{else}}
-                            <span class="hint">{{localize "DAGGERHEART.APPLICATIONS.TagTeamSelect.makeYourRoll"}}</span>
-                        {{/if}}
-                    </div>
-                {{/if}}
-            </fieldset>
-        </div>
-    {{/with}}
-</section>

templates/dialogs/groupRollDialog/main.hbs

@@ -0,0 +1,15 @@
+<section class="group-roll tab {{#if tabs.groupRoll.active}} active{{/if}}" data-group="{{tabs.groupRoll.group}}" data-tab="{{tabs.groupRoll.id}}">
+    <h1>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.title"}}</h1>
+    <header><span>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.members"}}</span></header>
+    <div class="aiding-members">
+        {{#each aidKeys as |key|}}
+            <div data-application-part="{{key}}"></div>
+        {{/each}}
+    </div>
+
+    <header><span>{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.leader"}}</span></header>
+    <div data-application-part="leader"></div>
+    <header><span>{{localize "DAGGERHEART.GENERAL.result.single"}}</span></header>
+    <div data-application-part="result"></div>
+    <div data-application-part="footer"></div>
+</section>

templates/dialogs/groupRollDialog/parts/footer.hbs

@@ -1,6 +1,9 @@
 <section class="tab {{#if tabs.groupRoll.active}} active{{/if}}" data-group="{{tabs.groupRoll.group}}" data-tab="{{tabs.groupRoll.id}}">
     <div class="finish-container">
         <button type="button" data-action="cancelRoll">{{localize "COMMON.Cancel"}}</button>
-        <button type="button" data-action="finishRoll" {{#unless canFinishRoll}}disabled{{/unless}} class="finish-button">{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.finishGroupRoll"}}</button>
+        <button type="button" data-action="finishRoll" {{#unless canFinishRoll}}disabled{{/unless}} class="finish-button">
+            <i class="fa-solid fa-dice" inert></i>
+            {{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.finishGroupRoll"}}
+        </button>
     </div>
 </section>

templates/dialogs/groupRollDialog/parts/member.hbs

@@ -0,0 +1,95 @@
+{{#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}}">
+        <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 isEditable}}
+                        <div class="buttons">
+                            <button type="button" data-action="makeRoll" class="plain" data-tooltip="DAGGERHEART.GENERAL.Roll.basic">
+                                <img class="roll-img duality" src="systems/daggerheart/assets/icons/dice/duality/DualityBW.svg" alt="2d12">
+                            </button>
+                            <button 
+                                type="button" 
+                                data-action="removeRoll" 
+                                class="plain icon fa-solid fa-trash" 
+                                data-tooltip="DAGGERHEART.APPLICATIONS.GroupRollSelect.removeRoll"
+                            ></button>
+                        </div>
+                    {{/if}}
+                </div>
+            {{else if readyToRoll}}
+                <div class="trait">
+                    {{localize "DAGGERHEART.CONFIG.RollTypes.trait.name" }}
+                    <select name="{{basePath}}.rollChoice" {{#if hasRolled}}disabled{{/if}}>
+                        {{selectOptions ../traitOptions selected=rollChoice localize=true}}
+                    </select>
+                </div>
+            {{/if}}
+        </div>
+        {{#if roll}}
+            <div class="with-result {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
+                <div class="roll-data">
+                    <div class="duality-label">
+                        {{roll.total}} 
+                        <span class="with">{{withLabelShort}}</span>
+                    </div>
+                    <div class="roll-dice-container">
+                        <a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="hope">
+                            <span class="dice-label">{{roll.dHope.total}}</span>
+                            <img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
+                        </a>
+                        <a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="fear">
+                            <span class="dice-label">{{roll.dFear.total}}</span>
+                            <img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
+                        </a>
+                        {{#if roll.hasAdvantage}}
+                            <span class="roll-operator">+</span>
+                            <span class="roll-dice">
+                                <span class="dice-label">{{roll.dAdvantage.total}}</span>
+                                <img src="{{concat "systems/daggerheart/assets/icons/dice/adv/d" roll.advantageFaces ".svg"}}" />
+                            </span>
+                        {{/if}}
+                        {{#if roll.hasDisadvantage}}
+                            <span class="roll-operator">-</span>
+                            <span class="roll-dice">
+                                <span class="dice-label">{{roll.dDisadvantage.total}}</span>
+                                <img src="{{concat "systems/daggerheart/assets/icons/dice/disadv/d" roll.advantageFaces ".svg"}}" />
+                            </span>
+                        {{/if}}
+                        <span class="roll-operator ">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
+                        <span class="roll-value">{{positive roll.modifierTotal}}</span>
+                    </div>
+                </div>
+                {{#if (and @root.isGM (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 successful}}active{{else}}inactive{{/if}}{{/if}}"
+                            data-tooltip="DAGGERHEART.GENERAL.success"
+                        ></button>
+                        <button 
+                            type="button" 
+                            data-action="markSuccessful" 
+                            class="plain icon fa-solid fa-times {{#if modifier}}{{#if successful}}inactive{{else}}active{{/if}}{{/if}}"
+                            data-tooltip="DAGGERHEART.GENERAL.failure"
+                        ></button>
+                    </div>
+                {{/if}}
+            </div>
+        {{else if (and readyToRoll isEditable)}}
+            <a class="roll-button initial-roll" data-action="makeRoll" data-member="{{@root.partId}}" data-tooltip="DAGGERHEART.GENERAL.Roll.basic">
+                <img class="roll-img duality" src="systems/daggerheart/assets/icons/dice/duality/DualityBW.svg" alt="2d12">
+            </a>
+        {{/if}}
+    </section>
+{{/with}}

templates/dialogs/groupRollDialog/parts/result.hbs

@@ -0,0 +1,30 @@
+{{#if (and hasRolled leader.roll)}}
+    <div class="group-roll-results with-result {{groupRoll.totalDualityClass}}">
+        <div class="row leader">
+            <span class="label">{{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.leaderRoll"}}</span>
+            <span class="duality-label">
+                {{leader.roll.total}} 
+                <span class="with">{{localize "DAGGERHEART.GENERAL.withThing" thing=leader.roll.totalLabel}}</span>
+            </span>
+        </div>
+        <div class="row modifiers">
+            <span class="label">{{localize "DAGGERHEART.GENERAL.Modifier.plural"}}</span>
+            <div class="item-tags">
+                {{#each groupRoll.modifiers as |modifier|}}
+                    <span class="tag {{#if (gte modifier 0)}}success{{else}}failure{{/if}}">
+                        {{numberFormat modifier sign=true}}
+                    </span>
+                {{/each}}
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="row total">
+            <span class="label">{{localize "DAGGERHEART.GENERAL.total"}}</span>
+            <span class="duality-label"><span class="value">{{groupRoll.total}}</span> {{groupRoll.totalLabel}}</span>
+        </div>
+    </div>
+{{else}}
+    <div class="group-roll-results empty">
+        {{localize "DAGGERHEART.APPLICATIONS.GroupRollSelect.resultsHint"}}
+    </div>
+{{/if}}