vermine2047/templates/combat-tracker.hbs

<section class="{{cssClass}} directory flexcol" id="{{cssId}}"
    data-tab="{{tabName}}">
    <header class="combat-tracker-header">

        {{!-- Encounter Controls --}}
        {{#if user.isGM}}
        <nav class="encounters {{css}}" aria-label="{{localize "COMBAT.NavLabel"}}">

            {{!-- Cycle Display --}}
            {{#if displayCycle}}
            <button type="button" class="inline-control icon fa-solid fa-plus" data-action="createCombat"
                data-tooltip aria-label="{{localize "COMBAT.Create"}}"></button>
            <div class="cycle-combats">
                <button type="button" class="inline-control icon fa-solid fa-caret-left" data-action="cycleCombat"
                    {{#if previousId}}data-combat-id="{{previousId}}"{{else}}disabled{{/if}}
                    data-tooltip aria-label="{{localize "COMBAT.EncounterPrevious"}}"></button>
                <div class="encounter-count">
                    <span class="value">{{currentIndex}}</span>
                    <span class="separator">/</span>
                    <span class="max">{{combats.length}}</span>
                </div>
                <button type="button" class="inline-control icon fa-solid fa-caret-right" data-action="cycleCombat"
                    {{#if nextId}}data-combat-id="{{nextId}}"{{else}}disabled{{/if}}
                    data-tooltip aria-label="{{localize "COMBAT.EncounterNext"}}"></button>
            </div>
            <button type="button" class="inline-control icon fa-solid fa-trash" data-action="deleteCombat"
                {{#unless combatCount}}disabled{{/unless}}
                data-tooltip aria-label="{{localize "COMBAT.Delete"}}"></button>

            {{!-- Tabbed Display --}}
            {{else if combats.length}}
            <button type="button" class="inline-control icon fa-solid fa-plus" data-action="createCombat"
                data-tooltip aria-label="{{localize "COMBAT.Create"}}"></button>
            {{#each combats}}
            <button type="button" class="inline-control {{#if active}}active{{/if}}" data-action="cycleCombat"
                data-combat-id="{{id}}" {{#if name}}data-tooltip aria-label="{{name}}"{{/if}}>{{label}}</button>
            {{/each}}
            <button type="button" class="inline-control icon fa-solid fa-trash" data-action="deleteCombat"
                {{#unless combatCount}}disabled{{/unless}}
                data-tooltip aria-label="{{localize "COMBAT.Delete"}}"></button>

            {{!-- No Combats --}}
            {{else}}
            <button type="button" class="combat-control-lg" data-action="createCombat">
                <i class="fa-solid fa-plus" inert></i>
                <span>{{localize "COMBAT.Create"}}</span>
            </button>
            {{/if}}
        </nav>
        {{/if}}

        {{!-- Encounter Name --}}
        {{#if combat.name}}
        <h2 class="encounter-name">{{combat.name}}</h2>
        {{/if}}

        <div class="encounter-controls {{#if hasCombat}}combat{{/if}}">

            {{!-- Bulk Rolls --}}
            <div class="control-buttons left flexrow">
                {{#if user.isGM}}
                <button type="button" class="inline-control combat-control icon fa-solid fa-users" data-action="rollAll"
                    {{#unless turns.length}}disabled{{/unless}} data-tooltip="COMBAT.RollAll"
                    aria-label="{{localize "COMBAT.RollAll"}}"></button>
                <button type="button" class="inline-control combat-control icon fa-solid fa-users-cog" data-action="rollNPC"
                    {{#unless turns.length}}disabled{{/unless}} data-tooltip="COMBAT.RollNPC"
                    aria-label="{{localize "COMBAT.RollNPC"}}"></button>
                {{else}}
                <div class="spacer"></div>
                <div class="spacer"></div>
                {{/if}}
            </div>

            {{!-- Combat Status --}}
            <strong class="encounter-title">
                {{#if combats.length}}
                {{#if combat.round}}
                {{localize "COMBAT.Round" round=combat.round}}
                {{else}}
                {{localize "COMBAT.NotStarted"}}
                {{/if}}
                {{else}}
                {{localize "COMBAT.None"}}
                {{/if}}
            </strong>

            {{!-- Combat Controls --}}
            <div class="control-buttons right flexrow">
                <div class="spacer"></div>
                <button type="button" class="encounter-context-menu inline-control combat-control icon fa-solid fa-ellipsis-vertical"
                    {{#unless (and user.isGM hasCombat)}}disabled{{/unless}}></button>
            </div>

        </div>
    </header>

    <ol class="combat-tracker plain">
        {{#each turns}}
        <li class="combatant {{css}}" data-combatant-id="{{id}}">
            <img class="token-image" src="{{img}}" alt="{{name}}" loading="lazy">
            <div class="token-name">
                <strong class="name {{getCombatTrackerColor isPlayer isNpc}}">{{name}}</strong>
                <div class="combatant-controls">
                    {{#if @root.user.isGM}}
                    <button type="button" class="inline-control combatant-control icon fa-solid fa-eye-slash {{#if hidden}}active{{/if}}"
                        data-action="toggleHidden" data-tooltip
                        aria-label="{{localize (ifThen hidden "COMBATANT.Show" "COMBATANT.Hide")}}"></button>
                    <button type="button" class="inline-control combatant-control icon fa-solid fa-skull {{#if isDefeated}}active{{/if}}"
                        data-action="toggleDefeated" data-tooltip
                        aria-label="{{localize (ifThen isDefeated "COMBATANT.UnmarkDefeated" "COMBATANT.MarkDefeated")}}"></button>
                    <button type="button" class="inline-control combatant-control icon fa-solid fa-trash"
                        data-action="deleteCombatant" data-tooltip
                        aria-label="{{localize "COMBATANT.ACTIONS.Remove"}}"></button>
                    {{/if}}
                    {{#if canPing}}
                    <button type="button" class="inline-control combatant-control icon fa-solid fa-bullseye-arrow"
                        data-action="pingCombatant" data-tooltip
                        aria-label="{{localize "COMBATANT.Ping"}}"></button>
                    {{/if}}
                    {{#if owner}}
                    <div class="combatant-attitudes">
                        <button type="button" class="inline-control combatant-control status offensive {{#ife attitude "offensive"}}active{{/ife}}"
                            data-attitude="offensive" data-tooltip
                            aria-label="{{localize "ATTITUDES.offensive.name"}}"><i class="fa-solid fa-fist-raised"></i></button>
                        <button type="button" class="inline-control combatant-control status active {{#ife attitude "active"}}active{{/ife}}"
                            data-attitude="active" data-tooltip
                            aria-label="{{localize "ATTITUDES.active.name"}}"><i class="fa-solid fa-bow-arrow"></i></button>
                        <button type="button" class="inline-control combatant-control status passive {{#ife attitude "passive"}}active{{/ife}}"
                            data-attitude="passive" data-tooltip
                            aria-label="{{localize "ATTITUDES.passive.name"}}"><i class="fa-solid fa-snooze"></i></button>
                    </div>
                    {{/if}}
                    <div class="token-effects">
                        {{#each effects}}
                        <img class="token-effect" src="{{this}}" alt="">
                        {{/each}}
                    </div>
                </div>
            </div>

            {{!-- Resource --}}
            {{#if hasResource}}
            <div class="token-resource">
                <span class="resource">{{resource}}</span>
            </div>
            {{/if}}

            {{!-- Initiative --}}
            <div class="token-initiative">
                {{#if hasRolled}}
                <span>{{initiative}}</span>
                {{else if isOwner}}
                <button type="button" class="combatant-control roll" data-action="rollInitiative" data-tooltip
                    aria-label="{{localize "COMBAT.InitiativeRoll"}}"
                    style="--initiative-icon: url('{{@root.initiativeIcon.icon}}'); --initiative-icon-hover: url('{{@root.initiativeIcon.hover}}');"></button>
                {{/if}}
            </div>
        </li>
        {{/each}}
    </ol>

    <nav class="combat-controls" data-tooltip-direction="UP">
        {{#if hasCombat}}
        {{#if user.isGM}}
        {{#if round}}
        <button type="button" class="inline-control combat-control icon fa-solid fa-backward-step" data-action="previousRound"
            data-tooltip aria-label="{{localize "COMBAT.RoundPrev"}}"></button>
        <button type="button" class="inline-control combat-control icon fa-solid fa-arrow-left" data-action="previousTurn"
            data-tooltip aria-label="{{localize "COMBAT.TurnPrev"}}"></button>
        <button type="button" class="combat-control combat-control-lg" data-action="endCombat">
            <i class="fa-solid fa-xmark" inert></i>
            <span>{{localize "COMBAT.End"}}</span>
        </button>
        <button type="button" class="inline-control combat-control icon fa-solid fa-arrow-right" data-action="nextTurn"
            data-tooltip aria-label="{{localize "COMBAT.TurnNext"}}"></button>
        <button type="button" class="inline-control combat-control icon fa-solid fa-forward-step" data-action="nextRound"
            data-tooltip aria-label="{{localize "COMBAT.RoundNext"}}"></button>
        {{else}}
        <button type="button" class="combat-control combat-control-lg" data-action="startCombat">
            <i class="fa-solid fa-swords" inert></i>
            <span>{{localize "COMBAT.Begin"}}</span>
        </button>
        {{/if}}
        {{else if control}}
        <button type="button" class="inline-control combat-control icon fa-solid fa-arrow-left" data-action="previousTurn"
            data-tooltip aria-label="{{localize "COMBAT.TurnPrev"}}"></button>
        <button type="button" class="combat-control combat-control-lg" data-action="nextTurn">
            <i class="fa-solid fa-check" inert></i>
            <span>{{localize "COMBAT.TurnEnd"}}</span>
        </button>
        <button type="button" class="inline-control combat-control icon fa-solid fa-arrow-right" data-action="nextTurn"
            data-tooltip aria-label="{{localize "COMBAT.TurnNext"}}"></button>
        {{/if}}
        {{/if}}
    </nav>
</section>