[PR] [Feature] Party Sheet (#1230)

* start development

* finish party members tab

* start resources tab

* finish resources tab

* finish inventory tab and add inital template to projects tab

* add resource buttons actions methods

* add group roll dialog

* Main implementation

* Fixed costs

* Minor fixes and tweaks for the party sheet (#1239)

* Minor fixes and tweaks for the party sheet

* Fix scroll restoration for party sheet tabs

* Finished GroupRoll

* Removed/commented-out not yet implemented things

* Commented out Difficulty since it's not used yet

* Re-render party when members update (#1242)

* Fixed so style applies in preview chat message

* Added the clown car

* Fixed so items can be dropped into the Party sheet

* Added delete icon to inventory

* Fixed TokenHUD token property useage. Fixed skipping roll message

* Added visible modifier to GroupRoll leader result

* Leader roll displays the large result display right away after rolling

* Corrected tokenHUD for non-player-tokens

* Fixed clowncar tokenData

* Fixed TagTeam roll message and sound

* Removed final TagTeamRoll roll sound

* [PR] [Party Sheets] Sidebar character sheet changes (#1249)

* Something experimenting

* I am silly (wearning Dunce hat)

* Stressful task

* Armor functional to be hit

* CSS Changes to accomadate pip boy

* last minute change to resource section for better visual feeling

* restoring old css for toggle

* Added setting to toggle pip/number display

* toggle functionality added

* Fixed light-mode in characterSheet

* Fixed multi-row resource pips display for character

* Fixed separators

* Added pip-display to Adversary and Companion. Some fixing on armor display

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>

* Fixed party height and resource armor update

* Fixed deletebutton padding

* Only showing expand-me icon on InventoryItem if there is a description to show

* .

* Fixed menu icon to be beige instead of white in dark mode

---------

Co-authored-by: moliloo <dev.murilobrito@gmail.com>
Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com>
Co-authored-by: Nikhil Nagarajan <potter.nikhil@gmail.com>
This commit is contained in:
WBHarry 2025-11-11 16:02:45 +01:00 committed by GitHub
parent f53252a369
commit 261a3a68b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
91 changed files with 3769 additions and 271 deletions

View file

@ -4,35 +4,10 @@
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
</div>
<div class="info-section">
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
<div class="resources-section">
<div class="status-bar">
<div class='status-value'>
<input class="bar-input" name="system.resources.hitPoints.value" min="0" max='{{source.system.resources.hitPoints.max}}'
value="{{source.system.resources.hitPoints.value}}" type="number">
<span>/</span>
<span class="bar-label">{{source.system.resources.hitPoints.max}}</span>
</div>
<progress class='progress-bar' value='{{source.system.resources.hitPoints.value}}'
max='{{source.system.resources.hitPoints.max}}'></progress>
<div class="status-label">
<h4>{{localize 'DAGGERHEART.GENERAL.HitPoints.short'}}</h4>
</div>
</div>
<div class="status-bar">
<div class='status-value'>
<input class="bar-input" name="system.resources.stress.value" min="0" max='{{source.system.resources.stress.max}}'
value="{{source.system.resources.stress.value}}" type="number">
<span>/</span>
<span class="bar-label">{{source.system.resources.stress.max}}</span>
</div>
<progress class='progress-bar stress-color' value='{{source.system.resources.stress.value}}'
max='{{source.system.resources.stress.max}}'></progress>
<div class="status-label">
<h4>{{localize 'DAGGERHEART.GENERAL.stress'}}</h4>
</div>
</div>
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
</div>
<div class="status-section">
<div class="status-number">

View file

@ -15,44 +15,12 @@
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
</div>
<div class="info-section">
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
<div class="resources-section">
<div class="status-bar">
<div class='status-value'>
<input class="bar-input" name="system.resources.hitPoints.value" min="0" max='{{document.system.resources.hitPoints.max}}'
value="{{document.system.resources.hitPoints.value}}" type="number">
<span>/</span>
<span class="bar-label">{{document.system.resources.hitPoints.max}}</span>
</div>
<progress
class='progress-bar'
max='{{document.system.resources.hitPoints.max}}'
value='{{document.system.resources.hitPoints.value}}'
></progress>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</h4>
</div>
</div>
<div class="status-bar">
<div class='status-value'>
<input class="bar-input" name="system.resources.stress.value" min="0" max='{{document.system.resources.stress.max}}'
value="{{document.system.resources.stress.value}}" type="number">
<span>/</span>
<span class="bar-label">{{document.system.resources.stress.max}}</span>
</div>
<progress
class='progress-bar stress-color'
value='{{document.system.resources.stress.value}}'
min="0"
max='{{document.system.resources.stress.max}}'
></progress>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.stress"}}</h4>
</div>
</div>
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
</div>
<div class="status-section">
<div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
<div class="status-number">
<div class='status-value'>
<p>{{document.system.evasion}}</p>
@ -64,10 +32,29 @@
{{#if document.system.armor.system.marks}}
<div class="status-bar armor-slots">
{{#if useResourcePips}}
<div class='slot-value'>
<div class="slot-bar">
{{#times document.system.armorScore}}
<a class='armor-slot' data-action='toggleArmor' data-value="{{add this 1}}">
{{#if (gte ../document.system.armor.system.marks.value (add this 1))}}
<i class="fa-solid fa-shield"></i>
{{else}}
<i class="fa-solid fa-shield-halved"></i>
{{/if}}
</a>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
<span class="value">{{document.system.armor.system.marks.value}} / {{document.system.armorScore}}</span>
</div>
</div>
{{else}}
<div class='status-value'>
<p><input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number"></p>
<p>/</p>
<p class="bar-label">{{document.system.armorScore}}</p>
<input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number">
<span>/</span>
<span class="bar-label">{{document.system.armorScore}}</span>
</div>
<progress
class='progress-bar stress-color'
@ -77,6 +64,7 @@
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
</div>
{{/if}}
</div>
{{else}}
<div class="status-number armor-slots">

View file

@ -8,7 +8,12 @@
placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}'
/>
</h1>
<div class="status-section">
{{#if useResourcePips}}
<div class="resource-section">
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=document.system.resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" largePips=true }}
</div>
{{/if}}
<div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
<div class="status-number">
<div class='status-value'>
<p>{{document.system.evasion}}</p>
@ -17,21 +22,11 @@
<h4>{{localize "DAGGERHEART.GENERAL.evasion"}}</h4>
</div>
</div>
<div class="status-bar">
<div class='status-value'>
<input class="bar-input" name="system.resources.stress.value" value="{{document.system.resources.stress.value}}" min="0" max='{{document.system.resources.stress.max}}' type="number">
<span>/</span>
<span class="bar-label">{{document.system.resources.stress.max}}</span>
{{#unless useResourcePips}}
<div class="resource-section">
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=document.system.resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
</div>
<progress
class='progress-bar stress-color'
value='{{document.system.resources.stress.value}}'
max='{{document.system.resources.stress.max}}'
></progress>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.stress"}}</h4>
</div>
</div>
{{/unless}}
<div class='level-div'>
<h3 class='label'>
{{localize 'DAGGERHEART.GENERAL.level'}}

View file

@ -0,0 +1,9 @@
<header class='party-header-sheet'>
<img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
<div class='item-container'>
<div class="item-info">
<h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
<h2 class="label">Party</h2>
</div>
</div>
</header>

View file

@ -0,0 +1,82 @@
<section class='tab {{tabs.inventory.cssClass}} {{tabs.inventory.id}}' data-tab='{{tabs.inventory.id}}'
data-group='{{tabs.inventory.group}}'>
<div class="search-section">
<div class="search-bar">
<div class="icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="search" name="search" class="search-inventory" placeholder="Search...">
</div>
<a class="filter-button">
<i class="fa-solid fa-filter"></i>
</a>
<a data-tooltip="{{localize 'DAGGERHEART.UI.Tooltip.compendiumBrowser'}}" data-action="tempBrowser">
<i class="fa-solid fa-book-atlas"></i>
</a>
</div>
<div class="currency-section">
<div class="input">
<span>{{localize this.inventory.currency.coins}}</span>
{{formInput systemFields.gold.fields.coins value=source.system.gold.coins enriched=source.system.gold.coins
localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize this.inventory.currency.handfuls}}</span>
{{formInput systemFields.gold.fields.handfuls value=source.system.gold.handfuls
enriched=source.system.gold.handfuls localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize this.inventory.currency.bags}}</span>
{{formInput systemFields.gold.fields.bags value=source.system.gold.bags enriched=source.system.gold.bags
localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize this.inventory.currency.chests}}</span>
{{formInput systemFields.gold.fields.chests value=source.system.gold.chests
enriched=source.system.gold.chests localize=true toggled=true}}
</div>
</div>
<div class="items-section">
{{> 'daggerheart.inventory-items'
title='TYPES.Item.weapon'
type='weapon'
actorType='party'
collection=document.itemTypes.weapon
isGlassy=true
canCreate=true
hideResources=true
hideContextMenu=true
}}
{{> 'daggerheart.inventory-items'
title='TYPES.Item.armor'
type='armor'
actorType='party'
collection=document.itemTypes.armor
isGlassy=true
canCreate=true
hideResources=true
hideContextMenu=true
}}
{{> 'daggerheart.inventory-items'
title='TYPES.Item.consumable'
type='consumable'
actorType='party'
collection=document.itemTypes.consumable
isGlassy=true
canCreate=true
hideContextMenu=true
}}
{{> 'daggerheart.inventory-items'
title='TYPES.Item.loot'
type='loot'
actorType='party'
collection=document.itemTypes.loot
isGlassy=true
canCreate=true
hideContextMenu=true
}}
</div>
</section>

View file

@ -0,0 +1,10 @@
<section
class='tab {{tabs.notes.cssClass}} {{tabs.notes.id}}'
data-tab='{{tabs.notes.id}}'
data-group='{{tabs.notes.group}}'
>
<fieldset class="fit-height">
<legend>{{localize tabs.notes.label}}</legend>
{{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
</fieldset>
</section>

View file

@ -0,0 +1,40 @@
<section
class='tab {{tabs.partyMembers.cssClass}} {{tabs.partyMembers.id}}'
data-tab='{{tabs.partyMembers.id}}'
data-group='{{tabs.partyMembers.group}}'
>
<div class="actions-section">
<button data-action="tagTeamRoll">
<i class="fa-solid fa-user-group"></i>
<span>Tag Team Roll</span>
</button>
<button data-action="groupRoll">
<i class="fa-solid fa-users"></i>
<span>Group Roll</span>
</button>
{{!-- NOT YET IMPLEMENTED --}}
{{!-- <button>
<i class="fa-solid fa-handshake-angle"></i>
<span>Help Action</span>
</button> --}}
</div>
<fieldset class="actors-section glassy">
<legend>{{localize tabs.partyMembers.label}}</legend>
<ul class="actors-list">
{{#each document.system.partyMembers as |actor id|}}
{{> 'daggerheart.inventory-item'
item=actor
type='character'
isActor=true
}}
{{/each}}
</ul>
{{#unless document.system.partyMembers.length}}
<div class="actors-dragger">
<span>{{localize "DAGGERHEART.GENERAL.dropActorsHere"}}</span>
</div>
{{/unless}}
</fieldset>
</section>

View file

@ -0,0 +1,4 @@
<section class='tab {{tabs.projects.cssClass}} {{tabs.projects.id}}' data-tab='{{tabs.projects.id}}'
data-group='{{tabs.projects.group}}'>
<h2>Soon tm</h2>
</section>

View file

@ -0,0 +1,99 @@
<section
class='tab {{tabs.resources.cssClass}} {{tabs.resources.id}}'
data-tab='{{tabs.resources.id}}'
data-group='{{tabs.resources.group}}'
>
<div data-action="triggerRest" data-type="longRest" class="actions-section">
<button data-type="longRest">
<i class="fa-solid fa-bed"></i>
<span>{{localize "DAGGERHEART.APPLICATIONS.Downtime.longRest.title"}}</span>
</button>
<button data-action="triggerRest" data-type="shortRest">
<i class="fa-solid fa-utensils"></i>
<span>{{localize "DAGGERHEART.APPLICATIONS.Downtime.shortRest.title"}}</span>
</button>
</div>
<fieldset class="resource-section glassy">
<legend>{{localize tabs.resources.label}}</legend>
<ul class="actors-list">
{{#each document.system.partyMembers as |actor id|}}
<li class="actor-resources">
<h2 class="actor-name">{{actor.name}}</h2>
<img class="actor-img" src="{{actor.img}}">
<div class="resources">
<div class="slot-section">
<div class="slot-bar">
{{#times actor.system.resources.hitPoints.max}}
<span class='slot {{#if (gte actor.system.resources.hitPoints.value (add this 1))}}filled{{/if}}'
data-action='toggleHitPoints' data-actor-id="{{actor.uuid}}" data-value="{{add this 1}}">
</span>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</span>
<span class="value">{{actor.system.resources.hitPoints.value}} / {{actor.system.resources.hitPoints.max}}</span>
</div>
</div>
<div class="slot-section">
<div class="slot-bar">
{{#times actor.system.resources.stress.max}}
<span class='slot {{#if (gte actor.system.resources.stress.value (add this 1))}}filled{{/if}}'
data-action='toggleStress' data-actor-id="{{actor.uuid}}" data-value="{{add this 1}}">
</span>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize "DAGGERHEART.GENERAL.stress"}}</span>
<span class="value">{{actor.system.resources.stress.value}} / {{actor.system.resources.stress.max}}</span>
</div>
</div>
{{#if actor.system.armor.system.marks}}
<div class="slot-section">
<div class="slot-bar">
{{#times actor.system.armorScore}}
<a class='armor-slot'
data-action='toggleArmorSlot' data-actor-id="{{actor.uuid}}" data-item-uuid="{{actor.system.armor.uuid}}" data-value="{{add this 1}}">
{{#if (gte actor.system.armor.system.marks.value (add this 1))}}
<i class="fa-solid fa-shield"></i>
{{else}}
<i class="fa-solid fa-shield-halved"></i>
{{/if}}
</a>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
<span class="value">{{actor.system.armor.system.marks.value}} / {{actor.system.armorScore}}</span>
</div>
</div>
{{/if}}
<div class="hope-section">
<h4>{{localize "DAGGERHEART.GENERAL.hope"}}</h4>
{{#times actor.system.resources.hope.max}}
<span class='hope-value' data-action='toggleHope' data-actor-id="{{actor.uuid}}" data-value="{{add this 1}}">
{{#if (gte actor.system.resources.hope.value (add this 1))}}
<i class='fa-solid fa-diamond'></i>
{{else}}
<i class='fa-regular fa-circle'></i>
{{/if}}
</span>
{{/times}}
</div>
<div class="threshold-section">
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
<h4 class="threshold-value">{{actor.system.damageThresholds.major}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
<h4 class="threshold-value">{{actor.system.damageThresholds.severe}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
</div>
</div>
</li>
{{/each}}
</ul>
</fieldset>
</section>

View file

@ -10,6 +10,7 @@ Parameters:
- isGlassy {boolean} : If true, applies the 'glassy' class to the fieldset.
- cardView {boolean} : If true and type is 'domainCard', renders using domain card layout.
- isActor {boolean} : Passed through to inventory-item partials.
- actorType {boolean} : The actor type of the parent actor
- canCreate {boolean} : If true, show createDoc anchor on legend
- inVault {boolean} : If true, the domainCard is created with inVault=true
- disabled {boolean}: If true, the ActiveEffect is created with disabled=true;
@ -54,6 +55,7 @@ Parameters:
{{> 'daggerheart.inventory-item'
item=item
type=../type
actorType=../actorType
hideControls=../hideControls
hideContextMenu=../hideContextMenu
isActor=../isActor

View file

@ -4,6 +4,7 @@
Parameters:
- type {string} : The type of items in the list
- isActor {boolean} : Passed through to inventory-item partials.
- actorType {boolean} : The actor type of the parent actor
- categoryAdversary {string} : Category adversary id.
- noExtensible {boolean} : If true, the inventory-item-content would be collapsable/extendible else it always be showed
- hideLabels {boolean} : If true, hide label-tags else show label-tags.
@ -17,7 +18,7 @@ Parameters:
<li class="inventory-item" data-item-id="{{item.id}}" {{#if (or (eq type 'action' ) (eq type 'attack' ))}}
data-action-id="{{item.id}}" {{/if}} data-item-uuid="{{item.uuid}}" data-type="{{type}}" data-no-compendium-edit="{{noCompendiumEdit}}" draggable="true">
<div class="inventory-item-header" {{#unless noExtensible}}data-action="toggleExtended" {{/unless}}>
<div class="inventory-item-header {{#if (eq actorType 'party')}}padded{{/if}}" {{#unless noExtensible}}data-action="toggleExtended" {{/unless}}>
{{!-- Image --}}
<div class="img-portait" data-action='{{ifThen (or (hasProperty item "use") (eq type "attack")) "useItem" (ifThen
(hasProperty item "toChat" ) "toChat" "editDoc" ) }}' {{#unless hideTooltip}} {{#if (eq type 'attack' )}}
@ -36,7 +37,7 @@ Parameters:
<div class="item-label">
{{!-- Item Name --}}
<span class="item-name">{{localize item.name}} {{#unless noExtensible}}<span class="expanded-icon"><i class="fa-solid fa-expand"></i></span>{{/unless}}</span>
<span class="item-name">{{localize item.name}} {{#unless (or noExtensible (not item.system.description))}}<span class="expanded-icon"><i class="fa-solid fa-expand"></i></span>{{/unless}}</span>
{{!-- Tags Start --}}
{{#with item}}
@ -75,18 +76,30 @@ Parameters:
<i class='fas fa-trash'></i>
</a>
{{/if}}
{{#if (eq type 'character')}}
<a data-action='deletePartyMember' data-tooltip="CONTROLS.CommonDelete">
<i class='fas fa-trash'></i>
</a>
{{/if}}
{{else}}
{{#if (eq type 'weapon')}}
<a class="{{#unless item.system.equipped}}unequipped{{/unless}}" data-action="toggleEquipItem"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.equipped 'unequip' 'equip' }}">
<i class="fa-solid fa-hands"></i>
</a>
{{else if (eq type 'armor')}}
<a class="{{#unless item.system.equipped}}unequipped{{/unless}}" data-action="toggleEquipItem"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.equipped 'unequip' 'equip' }}">
<i class="fa-solid fa-shield"></i>
</a>
{{else if (eq type 'domainCard')}}
{{#unless (eq actorType 'party')}}
{{#if (eq type 'weapon')}}
<a class="{{#unless item.system.equipped}}unequipped{{/unless}}" data-action="toggleEquipItem"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.equipped 'unequip' 'equip' }}">
<i class="fa-solid fa-hands"></i>
</a>
{{else if (eq type 'armor')}}
<a class="{{#unless item.system.equipped}}unequipped{{/unless}}" data-action="toggleEquipItem"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.equipped 'unequip' 'equip' }}">
<i class="fa-solid fa-shield"></i>
</a>
{{/if}}
{{else}}
<a data-action="deleteItem" data-tooltip="DAGGERHEART.UI.Tooltip.deleteItem">
<i class="fa-solid fa-trash"></i>
</a>
{{/unless}}
{{#if (eq type 'domainCard')}}
<a data-action="toggleVault"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.inVault 'sendToLoadout' 'sendToVault' }}">
<i class="fa-solid {{ifThen item.system.inVault 'fa-arrow-up' 'fa-arrow-down'}}"></i>
@ -97,7 +110,7 @@ Parameters:
<i class="{{ifThen item.disabled 'fa-solid fa-toggle-off' 'fa-solid fa-toggle-on'}}"></i>
</a>
{{/if}}
{{#if (hasProperty item "toChat")}}
{{#if (and (hasProperty item "toChat") (not (eq actorType 'party')))}}
<a data-action="toChat" data-tooltip="DAGGERHEART.UI.Tooltip.sendToChat">
<i class="fa-regular fa-message"></i>
</a>

View file

@ -0,0 +1,35 @@
<div class="status-bar">
{{#if useResourcePips}}
<div class='slot-value'>
<div class="slot-bar">
{{#times resource.max}}
<span class='slot {{#if (gte ../resource.value (add this 1))}}filled{{/if}} {{#if ../largePips}}large{{/if}}' data-action="{{../action}}" data-value="{{add this 1}}">
</span>
{{/times}}
{{#times resource.emptyPips}}
<span class="empty-slot"></span>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize label}}</span>
<span class="value">{{resource.value}} / {{resource.max}}</span>
</div>
</div>
{{else}}
<div class='status-value'>
<input class="bar-input" name="{{key}}" min="0" max='{{resource.max}}'
value="{{resource.value}}" type="number">
<span>/</span>
<span class="bar-label">{{resource.max}}</span>
</div>
<progress
class='progress-bar'
max='{{resource.max}}'
value='{{resource.value}}'
></progress>
<div class="status-label">
<h4>{{localize label}}</h4>
</div>
{{/if}}
</div>