Redesign group roll dialog

module/applications/dialogs/groupRollDialog.mjs

@@ -37,16 +37,16 @@ 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: 380, 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,
-            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: {
-            id: 'groupRoll',
-            template: 'systems/daggerheart/templates/dialogs/groupRollDialog/groupRoll.hbs'
+        result: {
+            id: 'result',
+            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 augmentedParts = { initialization };
+        const parts = super._configureRenderParts(options);
         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'
             };
         }
-
-        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);
-        }
+        return parts;
     }
 
     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,10 +142,7 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
                 partContext.canStartGroupRoll = selectedMembers.length > 1 && this.leader?.memberId;
                 partContext.openForAllPlayers = this.openForAllPlayers;
                 break;
-            case 'leader':
-                partContext.leader = this.getRollCharacterData(this.party.system.groupRoll.leader);
-                break;
-            case 'groupRoll':
+            case 'result':
                 const leader = this.party.system.groupRoll.leader;
                 partContext.hasRolled =
                     leader?.rollData ||
@@ -216,20 +193,36 @@ 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;
 
         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)
         };
     }
 
+    #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 +249,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 updatingLeader = target.closest('.main-character-outer-container');
+        const updatingMember = target.closest('.member-roll-container.aid')?.dataset?.memberKey;
+        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] : [])
         ];
     }
 
@@ -368,21 +361,18 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         );
     }
 
+    /** @this GroupRollDialog */
     static async #makeRoll(_event, button) {
-        const { member } = button.dataset;
-        const character = this.party.system.groupRoll.aidingCharacters[member];
-        this.makeRoll(button, character, `system.groupRoll.aidingCharacters.${member}.rollData`);
+        const { data, basePath } = this.#getCharacterDataById(button.dataset.member);
+        this.makeRoll(button, data, `${basePath}.rollData`);
     }
 
-    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 GroupRollDialog  */
+    static async #removeRoll(_event, button) {
+        const { basePath } = this.#getCharacterDataById(button.dataset.member);
         this.updatePartyData(
             {
-                [path]: {
+                [basePath]: {
                     rollData: null,
                     rollChoice: null,
                     selected: false,
@@ -393,16 +383,10 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         );
     }
 
-    static async #removeRoll(_event, button) {
-        this.removeRoll(button, `system.groupRoll.aidingCharacters.${button.dataset.member}`);
-    }
-
-    static async #removeLeaderRoll(_event, button) {
-        this.removeRoll(button, 'system.groupRoll.leader');
-    }
-
-    async rerollDice(button, data, path) {
+    /** @this GroupRollDialog */
+    static async #rerollDice(_, button) {
         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,25 +400,12 @@ 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) {
-        const { member } = button.dataset;
-        this.rerollDice(
-            button,
-            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');

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 {
-        h2 {
-            text-align: center;
-        }
-
-        .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);
-                }
-            }
-        }
+    .initialization-container.active {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
 
         .main-roll {
-            margin-top: 8px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+            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,206 @@
+.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 var(--golden-90));
+            }
+        }
+
+        .aiding-members {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            overflow-y: auto;
+        }
+
+        .item-tags {
+            .tag.success {
+                background: @green-10;
+                color: @green;
+            }
+
+            .tag.failure {
+                background: @red-10;
+                color: @red;
+            }
+        }
+
+        .member-roll-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+            height: 3.375rem;
+
+            .name-area {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                justify-content: center;
+                .name {
+                    font-weight: 500;
+                }
+                .trait {
+                    display: flex;
+                    align-items: center;
+                    gap: var(--spacer-8);
+                    select {
+                        --input-height: 2em;
+                        width: auto;
+                    }
+                }
+            }
+
+            &.inactive {
+                opacity: 0.3;
+                pointer-events: none;
+            }
+
+            a.roll-button.initial-roll {
+                width: 1.875rem;
+                height: 1.875rem;
+                margin-right: 2px; /** makes hover look a bit nicer */
+            }
+        }
+    }
+
+    .roll-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .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;
+        }
+    }
+
+    .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: 4px;
+
+            .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.25rem;
+                }
+            }
+
+            .roll-operator {
+                font-size: var(--font-size-18);
+            }
+
+            .roll-value {
+                font-size: var(--font-size-16);
+            }
+        }
+    }
+
+    .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;
+
+        .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);
+        }
+
+        .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/index.less

@@ -36,9 +36,7 @@
 @import './tag-team-dialog/initialization.less';
 @import './tag-team-dialog/sheet.less';
 
-@import './group-roll-dialog/initialization.less';
-@import './group-roll-dialog/leader.less';
-@import './group-roll-dialog/sheet.less';
+@import './group-roll-dialog/index.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/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,38 @@
 <section class="initialization-container tab {{#if tabs.initialization.active}} active{{/if}}" data-group="{{tabs.initialization.group}}" data-tab="{{tabs.initialization.id}}">
+    <h1>Character Selection</h1>
+    <header><span>Leader</span></header>
+    <section class="main-roll {{#if selectedLeaderDisabled}}inactive{{/if}}">
+        <div class="hint">Select one Character to be the leader</div>
+        <select class="main-character-field" {{#if selectedLeaderDisabled}}disabled{{/if}}>
+            {{selectOptions selectedLeaderOptions selected=selectedLeader.memberId blank="" }}
+        </select>
+    </section>
+
+    <header><span>Party Members</span></header>
+    <div class="hint">Select all Characters who will participate in the roll</div>
     <div class="members-container">
         {{#each memberSelection as |member|}}
-            <a 
-                class="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}}
+            <button 
+                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}}
             >
-                <span class="member-name">{{member.name}}</span>
-                <img src="{{member.img}}" />
-            </a>
+                <img class="portrait" src="{{member.img}}" />
+                <span class="name">{{member.name}}</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>Group Roll</h1>
+    <header><span>Members</span></header>
+    <div class="aiding-members">
+        {{#each aidKeys as |key|}}
+            <div data-application-part="{{key}}"></div>
+        {{/each}}
+    </div>
+
+    <header><span>Leader</span></header>
+    <div data-application-part="leader"></div>
+    <header><span>Result</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,53 @@
+{{#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>
+                </div>
+            {{else if readyToRoll}}
+                <div class="trait">
+                    Trait
+                    <select name="{{basePath}}.rollChoice" {{#if hasRolled}}disabled{{/if}}>
+                        {{selectOptions ../traitOptions selected=rollChoice localize=true}}
+                    </select>
+                </div>
+            {{/if}}
+        </div>
+        {{#if roll}}
+            <div class="roll-data with-result {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
+                <div class="duality-label">
+                    {{roll.total}} 
+                    <span class="with">{{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</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.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 if readyToRoll}}
+            <a class="roll-button initial-roll" data-action="makeRoll" data-member="{{@root.partId}}">
+                <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,29 @@
+
+{{#if hasRolled}}
+    <div class="group-roll-results with-result {{groupRoll.totalDualityClass}}">
+        <div class="row leader">
+            <span class="label">Leader Roll</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">Modifiers</span>
+            <div class="item-tags">
+                {{#each groupRoll.modifiers as |modifier|}}
+                    <span class="tag">{{#if (gte modifier 0)}}+{{else}}-{{/if}}{{positive modifier}}</span>
+                {{/each}}
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="row total">
+            <span class="label">Total</span>
+            <span class="duality-label"><span class="value">{{groupRoll.total}}</span> {{groupRoll.totalLabel}}</span>
+        </div>
+    </div>
+{{else}}
+    <div class="group-roll-results empty">
+        Results will appear when characters roll
+    </div>
+{{/if}}