mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 03:31:07 +01:00
Combat and CombatTracker (#108)
* Added Combat and CombatTracker * Some cleneaup * Fixing and cleaning up * Added categories for combatants * Style improvements * Layout change
This commit is contained in:
WBHarry
GitHub
parent
32730b3aac
commit
aa8fe6a7a1
23 changed files with 730 additions and 684 deletions
4
templates/ui/combat/combatTracker.hbs
Normal file
4
templates/ui/combat/combatTracker.hbs
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div>
|
||||
{{> 'systems/daggerheart/templates/ui/combat/combatTrackerSection.hbs' this title=(localize "DAGGERHEART.General.Character.Plural") turns=this.characters}}
|
||||
{{> 'systems/daggerheart/templates/ui/combat/combatTrackerSection.hbs' this title=(localize "DAGGERHEART.General.Adversary.Plural") turns=this.adversaries}}
|
||||
</div>
|
||||
17
templates/ui/combat/combatTrackerFooter.hbs
Normal file
17
templates/ui/combat/combatTrackerFooter.hbs
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<nav class="combat-controls" data-tooltip-direction="UP">
|
||||
{{~#if hasCombat~}}
|
||||
{{#if user.isGM}}
|
||||
{{#if combat.round}}
|
||||
<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>
|
||||
{{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}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</nav>
|
||||
86
templates/ui/combat/combatTrackerHeader.hbs
Normal file
86
templates/ui/combat/combatTrackerHeader.hbs
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<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-gear" data-action="trackerSettings"
|
||||
data-tooltip aria-label="{{ localize "COMBAT.Settings" }}"></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 }}">
|
||||
{{ label }}
|
||||
</button>
|
||||
{{/each}}
|
||||
<button type="button" class="inline-control icon fa-solid fa-gear" data-action="trackerSettings"
|
||||
data-tooltip aria-label="{{ localize "COMBAT.Settings" }}"></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}}
|
||||
|
||||
<div class="encounter-controls {{#if hasCombat}}combat{{/if}}">
|
||||
{{#if hasCombat}}
|
||||
<div class="encounter-control-fear-container">
|
||||
<img class="dice " src="../icons/svg/d12-grey.svg"/>
|
||||
<i class="fas fa-skull encounter-control-fear"></i>
|
||||
<div class="encounter-control-counter">{{fear}}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{!-- Combat Status --}}
|
||||
<strong class="encounter-title">
|
||||
{{#if combats.length}}
|
||||
{{#if combat.round}}
|
||||
{{ localize "DAGGERHEART.Combat.combatStarted" }}
|
||||
{{else}}
|
||||
{{ localize "COMBAT.NotStarted" }}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{ localize "COMBAT.None" }}
|
||||
{{/if}}
|
||||
</strong>
|
||||
|
||||
{{!-- Combat Controls --}}
|
||||
{{#if hasCombat}}
|
||||
<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>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
64
templates/ui/combat/combatTrackerSection.hbs
Normal file
64
templates/ui/combat/combatTrackerSection.hbs
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<div>
|
||||
<h4 class="divider">{{title}}</h4>
|
||||
<ol class="combat-tracker plain">
|
||||
{{#each turns}}
|
||||
<li class="combatant {{ css }}" data-combatant-id="{{ id }}" data-action="activateCombatant">
|
||||
{{!-- Image --}}
|
||||
<img class="token-image" src="{{ img }}" alt="{{ name }}" loading="lazy">
|
||||
|
||||
{{!-- Name & Controls --}}
|
||||
<div class="token-name">
|
||||
<strong class="name">{{ name }}</strong>
|
||||
<div class="flexrow">
|
||||
<div class="combatant-controls flex-0">
|
||||
{{#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 "COMBAT.ToggleVis" }}"></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 "COMBAT.ToggleDead" }}"></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 "COMBAT.PingCombatant" }}"></button>
|
||||
{{/if}}
|
||||
{{#unless @root.user.isGM}}
|
||||
<button type="button" class="inline-control combatant-control icon fa-solid fa-arrows-to-eye"
|
||||
data-action="panToCombatant" data-tooltip
|
||||
aria-label="{{ localize "COMBAT.PanToCombatant" }}"></button>
|
||||
{{/unless}}
|
||||
</div>
|
||||
|
||||
{{#if ../combat.round}}
|
||||
<div class="token-actions">
|
||||
{{#if isOwner}}
|
||||
{{#if (and (not isNPC) ../actionTokens.enabled)}}
|
||||
<div class="action-tokens">
|
||||
{{#times ../actionTokens.tokens}}
|
||||
<button type="button" class="inline-control main icon fa-solid fa-bolt-lightning action-token {{#if (lte ../system/actionTokens this)}}used{{/if}}" data-action="setActionTokens" data-combatant-id="{{../id}}" data-token-index="{{this}}">
|
||||
</button>
|
||||
{{/times}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if @root.user.isGM}}
|
||||
<button
|
||||
type="button" class="inline-control spotlight-control discrete icon fa-solid {{#if system.spotlight.requesting}}fa-hand-sparkles requesting{{else}}fa-hand{{/if}}"
|
||||
data-action="toggleSpotlight" data-combatant-id="{{id}}" data-tooltip aria-label="{{localize "DAGGERHEART.Combat.giveSpotlight"}}"
|
||||
></button>
|
||||
{{else}}
|
||||
<button
|
||||
type="button" class="inline-control spotlight-control discrete icon fa-solid {{#if system.spotlight.requesting}}fa-hand-sparkles requesting{{else}}fa-hand{{/if}}"
|
||||
data-action="requestSpotlight" data-combatant-id="{{id}}" data-tooltip aria-label="{{#if system.spotlight.requesting}}{{localize "DAGGERHEART.Combat.requestingSpotlight"}}{{else}}{{localize "DAGGERHEART.Combat.requestSpotlight"}}{{/if}}"
|
||||
></button>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
<section class="{{cssClass}} directory flexcol" id="{{cssId}}" data-tab="{{tabName}}">
|
||||
<header class="combat-tracker-header">
|
||||
{{#if user.isGM}}
|
||||
<nav class="encounters flexrow" aria-label="{{localize 'COMBAT.NavLabel'}}">
|
||||
<a class="combat-button combat-create" aria-label="{{localize 'COMBAT.Create'}}" role="button" data-tooltip="COMBAT.Create">
|
||||
<i class="fas fa-plus"></i>
|
||||
</a>
|
||||
{{#if combatCount}}
|
||||
<a class="combat-button combat-cycle" aria-label="{{localize 'COMBAT.EncounterPrevious'}}" role="button" data-tooltip="COMBAT.EncounterPrevious"
|
||||
{{#if previousId}}data-document-id="{{previousId}}"{{else}}disabled{{/if}}>
|
||||
<i class="fas fa-caret-left"></i>
|
||||
</a>
|
||||
<h4 class="encounter">{{localize "COMBAT.Encounter"}} {{currentIndex}} / {{combatCount}}</h4>
|
||||
<a class="combat-button combat-cycle" aria-label="{{localize 'COMBAT.EncounterNext'}}" role="button" data-tooltip="COMBAT.EncounterNext"
|
||||
{{#if nextId}}data-document-id="{{nextId}}"{{else}}disabled{{/if}}>
|
||||
<i class="fas fa-caret-right"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
<a class="combat-button combat-control" aria-label="{{localize 'COMBAT.Delete'}}" role="button" data-tooltip="COMBAT.Delete" data-control="endCombat" {{#unless combatCount}}disabled{{/unless}}>
|
||||
<i class="fas fa-trash"></i>
|
||||
</a>
|
||||
</nav>
|
||||
{{/if}}
|
||||
|
||||
<div class="encounter-controls flexrow {{#if hasCombat}}combat{{/if}}">
|
||||
{{#if user.isGM}}
|
||||
<a class="combat-button combat-control" aria-label="{{localize 'COMBAT.RollAll'}}" role="button" data-tooltip="COMBAT.RollAll" data-control="rollAll" {{#unless turns}}disabled{{/unless}}>
|
||||
<i class="fas fa-users"></i>
|
||||
</a>
|
||||
<a class="combat-button combat-control" aria-label="{{localize 'COMBAT.RollNPC'}}" role="button" data-tooltip="COMBAT.RollNPC" data-control="rollNPC" {{#unless turns}}disabled{{/unless}}>
|
||||
<i class="fas fa-users-cog"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if combatCount}}
|
||||
{{#if combat.round}}
|
||||
<h3 class="encounter-title noborder">{{localize 'COMBAT.Round'}} {{combat.round}}</h3>
|
||||
{{else}}
|
||||
<h3 class="encounter-title noborder">{{localize 'COMBAT.NotStarted'}}</h3>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<h3 class="encounter-title noborder">{{localize "COMBAT.None"}}</h3>
|
||||
{{/if}}
|
||||
|
||||
{{#if user.isGM}}
|
||||
<a class="combat-button combat-control" aria-label="{{localize 'COMBAT.InitiativeReset'}}" role="button" data-tooltip="COMBAT.InitiativeReset" data-control="resetAll"
|
||||
{{#unless hasCombat}}disabled{{/unless}}>
|
||||
<i class="fas fa-undo"></i>
|
||||
</a>
|
||||
<a class="combat-button combat-control" aria-label="{{localize 'labels.scope'}}" role="button" data-tooltip="{{labels.scope}}"
|
||||
data-control="toggleSceneLink" {{#unless hasCombat}}disabled{{/unless}}>
|
||||
<i class="fas fa-{{#unless linked}}un{{/unless}}link"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
<a class="combat-button combat-settings" aria-label="{{localize 'COMBAT.Settings'}}" role="button" data-tooltip="COMBAT.Settings" data-control="trackerSettings">
|
||||
<i class="fas fa-cog"></i>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="encounter-gm-resources">
|
||||
{{#if combat.system}}
|
||||
<div class="gm-resource-controls">
|
||||
<i class="fa-solid fa-caret-up icon-button up" data-type="action"></i>
|
||||
<i class="fa-solid fa-caret-down icon-button down {{#if (lte combat.system.actions 0)}}disabled{{/if}}" data-type="action"></i>
|
||||
</div>
|
||||
<div class="gm-resource">
|
||||
<i class="fa-solid fa-hand-sparkles"></i>
|
||||
<span>{{combat.system.actions}}</span>
|
||||
</div>
|
||||
<div class="gm-resource-tools">
|
||||
<i class="fa-solid fa-arrow-right-long trade-actions {{#if (lt combat.system.actions 2)}}disabled{{/if}}"></i>
|
||||
<i class="fa-solid fa-arrow-left-long trade-fear {{#if (lt fear 1)}}disabled{{/if}}"></i>
|
||||
</div>
|
||||
<div class="gm-resource">
|
||||
<i class="fa-solid fa-skull"></i>
|
||||
<span>{{fear}}</span>
|
||||
</div>
|
||||
<div class="gm-resource-controls">
|
||||
<i class="fa-solid fa-caret-up icon-button up {{#if (gte fear 6)}}disabled{{/if}}" data-type="fear"></i>
|
||||
<i class="fa-solid fa-caret-down icon-button down {{#if (lte fear 0)}}disabled{{/if}}" data-type="fear"></i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<ol id="combat-tracker" class="directory-list">
|
||||
{{#each turns}}
|
||||
<li class="combatant actor directory-item flexrow {{this.css}}" data-combatant-id="{{this.id}}">
|
||||
<img class="token-image" data-src="{{this.img}}" alt="{{this.name}}"/>
|
||||
<div class="token-name flexcol">
|
||||
<h4>{{this.name}}</h4>
|
||||
<div class="combatant-controls flexrow">
|
||||
{{#if ../user.isGM}}
|
||||
<a class="combatant-control {{#if this.hidden}}active{{/if}}" aria-label="{{localize 'COMBAT.ToggleVis'}}" role="button" data-tooltip="COMBAT.ToggleVis" data-control="toggleHidden">
|
||||
<i class="fas fa-eye-slash"></i>
|
||||
</a>
|
||||
<a class="combatant-control {{#if this.defeated}}active{{/if}}" aria-label="{{localize 'COMBAT.ToggleDead'}}" role="button" data-tooltip="COMBAT.ToggleDead" data-control="toggleDefeated">
|
||||
<i class="fas fa-skull"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if this.canPing}}
|
||||
<a class="combatant-control" aria-label="{{localize 'COMBAT.PingCombatant'}}" role="button" data-tooltip="COMBAT.PingCombatant" data-control="pingCombatant">
|
||||
<i class="fa-solid fa-bullseye-arrow"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#unless ../user.isGM}}
|
||||
<a class="combatant-control" aria-label="{{localize 'COMBAT.PanToCombatant'}}" role="button" data-tooltip="COMBAT.PanToCombatant" data-control="panToCombatant">
|
||||
<i class="fa-solid fa-arrows-to-eye"></i>
|
||||
</a>
|
||||
{{/unless}}
|
||||
<div class="token-effects">
|
||||
{{#each this.effects}}
|
||||
<img class="token-effect" src="{{this}}"/>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if this.hasResource}}
|
||||
<div class="token-resource">
|
||||
<span class="resource">{{this.resource}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="token-action-tokens">
|
||||
{{#if this.playerCharacter}}
|
||||
<i class="fa-solid fa-hand use-action-token" data-combatant="{{this.id}}"></i>
|
||||
{{else if (and (not this.ownedByPlayer) ../user.isGM)}}
|
||||
<i class="fa-solid fa-hand use-action-token {{#if (lt ../combat.system.actions 1)}}disabled{{/if}}" data-combatant="{{this.id}}"></i>
|
||||
{{/if}}
|
||||
{{!-- {{#if this.hasRolled}}
|
||||
<span class="initiative">{{this.initiative}}</span>
|
||||
{{else if this.owner}}
|
||||
<a class="combatant-control roll" aria-label="{{localize 'COMBAT.InitiativeRoll'}}" role="button" data-tooltip="COMBAT.InitiativeRoll" data-control="rollInitiative"></a>
|
||||
{{/if}} --}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
|
||||
<nav id="combat-controls" class="directory-footer flexrow" data-tooltip-direction="UP">
|
||||
{{#if hasCombat}}
|
||||
{{#if user.isGM}}
|
||||
{{#if round}}
|
||||
<a class="combat-control" aria-label="{{localize 'COMBAT.RoundPrev'}}" role="button" data-tooltip="COMBAT.RoundPrev" data-control="previousRound"><i class="fas fa-step-backward"></i></a>
|
||||
<a class="combat-control" aria-label="{{localize 'COMBAT.TurnPrev'}}" role="button" data-tooltip="COMBAT.TurnPrev" data-control="previousTurn"><i class="fas fa-arrow-left"></i></a>
|
||||
<a class="combat-control center" aria-label="{{localize 'COMBAT.End'}}" role="button" data-control="endCombat">{{localize 'COMBAT.End'}}</a>
|
||||
<a class="combat-control" aria-label="{{localize 'COMBAT.TurnNext'}}" role="button" data-tooltip="COMBAT.TurnNext" data-control="nextTurn"><i class="fas fa-arrow-right"></i></a>
|
||||
<a class="combat-control" aria-label="{{localize 'COMBAT.RoundNext'}}" role="button" data-tooltip="COMBAT.RoundNext" data-control="nextRound"><i class="fas fa-step-forward"></i></a>
|
||||
{{else}}
|
||||
<a class="combat-control center" aria-label="{{localize 'COMBAT.Begin'}}" role="button" data-control="startCombat">{{localize 'COMBAT.Begin'}}</a>
|
||||
{{/if}}
|
||||
{{else if control}}
|
||||
<a class="combat-control" aria-label="{{localize 'COMBAT.TurnPrev'}}" role="button" data-tooltip="COMBAT.TurnPrev" data-control="previousTurn"><i class="fas fa-arrow-left"></i></a>
|
||||
<a class="combat-control center" aria-label="{{localize 'COMBAT.TurnEnd'}}" role="button" data-control="nextTurn">{{localize 'COMBAT.TurnEnd'}}</a>
|
||||
<a class="combat-control" aria-label="{{localize 'COMBAT.TurnNext'}}" role="button" data-tooltip="COMBAT.TurnNext" data-control="nextTurn"><i class="fas fa-arrow-right"></i></a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</nav>
|
||||
</section>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<aside id="players" class="app daggerheart {{#if hide}}hidden{{/if}}">
|
||||
<h3 aria-label="{{localize 'PLAYERS.Title'}}" role="button">
|
||||
<div class="flex-centered">
|
||||
<i class="fas fa-users"></i>
|
||||
{{ localize "PLAYERS.Title" }}
|
||||
{{#if showOffline}}
|
||||
<i class="players-mode fas fa-angle-down"></i>
|
||||
{{else}}
|
||||
<i class="players-mode fas fa-angle-up"></i>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="players-container">
|
||||
<i class="fa-solid fa-skull"></i>
|
||||
<div>{{this.fear}}</div>
|
||||
{{#if user.isGM}}
|
||||
<div class="flexcol">
|
||||
<i class="fa-solid fa-chevron-up fear-control up {{#if (gte this.fear 6)}}disabled{{/if}}"></i>
|
||||
<i class="fa-solid fa-chevron-down fear-control down {{#if (lte this.fear 0)}}disabled{{/if}}"></i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</h3>
|
||||
|
||||
<ol aria-label="{{localize 'PLAYERS.List'}}" tabIndex="0" id="player-list">
|
||||
{{#each users as |user|}}
|
||||
<li class="player {{#if user.isGM}}gm{{/if}} flexrow" data-user-id="{{user._id}}">
|
||||
<span class="player-active {{#if user.active}}active{{else}}inactive{{/if}}"
|
||||
style="background: {{user.color}}; border: 1px solid {{user.border.css}}"></span>
|
||||
<span class="player-name {{#if user.isSelf}}self{{/if}}" data-tooltip="{{user.displayName}}">
|
||||
{{user.displayName}}
|
||||
</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
</aside>
|
||||
Loading…
Add table
Add a link
Reference in a new issue