[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
This commit is contained in:
Carlos Fernandez 2026-04-26 04:43:10 -04:00 committed by GitHub
parent 6d09c5504d
commit cc822856e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 640 additions and 795 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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}}

View file

@ -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
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}}
{{#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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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}}

View file

@ -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}}