daggerheart/templates/chat/duality-roll.hbs

<div class="dice-roll daggerheart chat roll" data-action="expandRoll">
    <div class="dice-flavor">{{title}}</div>
    <div class="duality-modifiers">
        {{#each modifiers}}
            <div class="duality-modifier">
                {{label}}
            </div>
        {{/each}}
        {{#if advantageState}}
            <div class="duality-modifier">
                {{localize "DAGGERHEART.General.Advantage.Full"}}
            </div>
        {{/if}}
        {{#if (eq advantageState false)}}
            <div class="duality-modifier">
                {{localize "DAGGERHEART.General.Disadvantage.Full"}}
            </div>
        {{/if}}
    </div>
    <div class="dice-result">
        <div class="dice-formula">{{roll.formula}}</div>
        <div class="dice-tooltip">
            <div class="wrapper">
                <section class="tooltip-part">
                    <div class="dice">
                        <header class="part-header flexrow">
                            <span class="part-formula">
                                <span>1{{hope.dice}}</span>
                                |
                                <span>1{{fear.dice}}</span>
                            </span>
                            <span class="part-total">{{diceTotal}}</span>
                        </header>
                        <div class="flexrow">
                            <ol class="dice-rolls duality">
                                <li class="roll die {{hope.dice}}" title="{{localize "DAGGERHEART.General.Hope"}}">
                                    <div class="dice-container">
                                        <div class="dice-title">{{localize "DAGGERHEART.General.Hope"}}</div>
                                        <div class="dice-inner-container hope" title="{{localize "DAGGERHEART.General.Hope"}}">
                                            <div class="dice-wrapper">
                                                <img class="dice" src="../icons/svg/d12-grey.svg"/>
                                            </div>
                                            <div class="dice-value">{{hope.value}}</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="roll die {{fear.dice}}" title="{{localize "DAGGERHEART.General.Fear"}}">
                                    <div class="dice-container">
                                        <div class="dice-title">{{localize "DAGGERHEART.General.Fear"}}</div>
                                        <div class="dice-inner-container fear" title="{{localize "DAGGERHEART.General.Fear"}}">
                                            <div class="dice-wrapper">
                                                <img class="dice" src="../icons/svg/d12-grey.svg"/>
                                            </div>
                                            <div class="dice-value">{{fear.value}}</div>
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </div>  
                    </div>
                    {{#if advantageState}}
                        <div class="dice">
                            <header class="part-header flexrow">
                                <span class="part-formula">
                                    <span>1{{advantage.dice}}</span>
                                </span>
                                <span class="part-total">{{advantage.value}}</span>
                            </header>
                            <div class="flexrow">
                                <ol class="dice-rolls">
                                    <li class="roll die {{advantage.dice}}">
                                        <div class="dice-container">
                                            <div class="dice-inner-container advantage">
                                                <div class="dice-wrapper">
                                                    <img class="dice" src="../icons/svg/d6-grey.svg"/>
                                                </div>
                                                <div class="dice-value">{{advantage.value}}</div>
                                            </div>
                                        </div>
                                    </li>
                                </ol>
                            </div>  
                        </div>
                    {{/if}}
                    {{#if (eq advantageState false)}}
                        <div class="dice">
                            <header class="part-header flexrow">
                                <span class="part-formula">
                                    <span>1{{advantage.dice}}</span>
                                </span>
                                <span class="part-total">{{advantage.value}}</span>
                            </header>
                            <div class="flexrow">
                                <ol class="dice-rolls">
                                    <li class="roll die {{advantage.dice}}">
                                        <div class="dice-container">
                                            <div class="dice-inner-container disadvantage">
                                                <div class="dice-wrapper">
                                                    <img class="dice" src="../icons/svg/d6-grey.svg"/>
                                                </div>
                                                <div class="dice-value">{{advantage.value}}</div>
                                            </div>
                                        </div>
                                    </li>
                                </ol>
                            </div>  
                        </div>
                    {{/if}}
                    {{#if modifierTotal.value}}<div class="duality-modifier">{{modifierTotal.label}}</div>{{/if}}
                </section>
            </div>
        </div>
        <div class="dice-total duality {{#if fear.discarded}}hope{{else}}{{#if hope.discarded}}fear{{else}}critical{{/if}}{{/if}}">
            <div class="dice-total-label">{{totalLabel}}</div>
            <div class="dice-total-value">
                {{roll.total}}
            </div>
        </div>
        {{#if (gt targets.length 0)}}
            <div class="target-section">
                {{#each targets as |target|}}
                    <div class="dice-total target-container {{#if target.hit}}hit{{else}}{{#if (not ../total.alternate)}}miss{{/if}}{{/if}}" data-token="{{target.id}}">
                            <img src="{{target.img}}" />
                            <div class="target-inner-container">
                                {{#if target.hit}}{{localize "Hit"}}{{else}}{{#if (not ../total.alternate)}}{{localize "Miss"}}{{else}}?{{/if}}{{/if}}
                            </div>
                    </div>
                {{/each}}
            </div>
        {{/if}}
        <div class="dice-actions{{#unless damage.value}} duality-alone{{/unless}}">
            {{#if damage.value}}
                    <button class="duality-action" data-value="{{roll.total}}" data-damage="{{damage.value}}" data-damage-type="{{damage.type}}" {{#if damage.disabled}}disabled{{/if}}><span>{{localize "DAGGERHEART.Chat.AttackRoll.RollDamage"}}</span></button>
            {{/if}}
            <div class="duality-result">
                <div>{{roll.total}} {{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
            </div>
        </div>
    </div>
</div>