Fixed multi-row resource pips display for character

module/applications/sheets/actors/character.mjs

@@ -180,6 +180,16 @@ export default class CharacterSheet extends DHBaseActorSheet {
             return acc;
         }, {});
 
+        context.resources = Object.keys(this.document.system.resources).reduce((acc, key) => {
+            acc[key] = this.document.system.resources[key];
+            return acc;
+        }, {});
+        const maxResource = Math.max(context.resources.hitPoints.max, context.resources.stress.max);
+        context.resources.hitPoints.emptyPips =
+            context.resources.hitPoints.max < maxResource ? maxResource - context.resources.hitPoints.max : 0;
+        context.resources.stress.emptyPips =
+            context.resources.stress.max < maxResource ? maxResource - context.resources.stress.max : 0;
+
         context.inventory = {
             currency: {
                 title: game.i18n.localize('DAGGERHEART.CONFIG.Gold.title'),
@@ -736,7 +746,8 @@ export default class CharacterSheet extends DHBaseActorSheet {
      */
     static async #toggleHitPoints(_, button) {
         const hitPointsValue = Number.parseInt(button.dataset.value);
-        const newValue = this.document.system.resources.hitPoints.value >= hitPointsValue ? hitPointsValue - 1 : hitPointsValue;
+        const newValue =
+            this.document.system.resources.hitPoints.value >= hitPointsValue ? hitPointsValue - 1 : hitPointsValue;
         await this.document.update({ 'system.resources.hitPoints.value': newValue });
     }
 
@@ -754,7 +765,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
      * Toggles ArmorScore resource value.
      * @type {ApplicationClickAction}
      */
-    static async #toggleArmor(_, button,element) {
+    static async #toggleArmor(_, button, element) {
         const ArmorValue = Number.parseInt(button.dataset.value);
         const newValue = this.document.system.armor.system.marks.value >= ArmorValue ? ArmorValue - 1 : ArmorValue;
         await this.document.system.armor.update({ 'system.marks.value': newValue });

module/systemRegistration/handlebars.mjs

@@ -10,6 +10,7 @@ export const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/sheets/global/partials/domain-card-item.hbs',
         'systems/daggerheart/templates/sheets/global/partials/item-resource.hbs',
         'systems/daggerheart/templates/sheets/global/partials/resource-section.hbs',
+        'systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs',
         'systems/daggerheart/templates/components/card-preview.hbs',
         'systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs',
         'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs',

styles/less/sheets/actors/character/sidebar.less

@@ -209,6 +209,11 @@
                                 background: light-dark(@dark-blue, @golden);
                             }
                         }
+
+                        .empty-slot {
+                            width: 15px;
+                            height: 10px;
+                        }
                     }
                     .slot-label {
                         display: flex;

templates/sheets/actors/character/sidebar.hbs

@@ -17,71 +17,8 @@
     </div>
     <div class="info-section">
         <div class="resources-section">
-            <div class="status-bar">
+            {{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints }}
-                {{#if useResourcePips}}
+            {{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress }}
-                <div class='slot-value'>
-                    <div class="slot-bar">
-                        {{#times document.system.resources.hitPoints.max}}
-                            <span class='slot {{#if (gte ../document.system.resources.hitPoints.value (add this 1))}}filled{{/if}}' data-action='toggleHitPoints' data-value="{{add this 1}}">
-                            </span>
-                        {{/times}}
-                    </div>
-                    <div class="slot-label">
-                        <span class="label">{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</span>
-                        <span class="value">{{document.system.resources.hitPoints.value}} / {{document.system.resources.hitPoints.max}}</span>
-                    </div> 
-                </div>
-                {{else}}
-                <div class='status-value'>
-                    <p><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"></p>
-                    <p>/</p>
-                    <p class="bar-label">{{document.system.resources.hitPoints.max}}</p>
-                </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>
-                {{/if}}
-            </div>
-            <div class="status-bar">
-                {{#if useResourcePips}}
-                <div class='slot-value'>
-                    <div class="slot-bar">
-                        {{#times document.system.resources.stress.max}}
-                            <span class='slot {{#if (gte ../document.system.resources.stress.value (add this 1))}}filled{{/if}}' data-action='toggleStress' data-value="{{add this 1}}">
-                            </span>
-                        {{/times}}
-                    </div>
-                    <div class="slot-label">
-                        <div class="slot-label">
-                            <span class="label">{{localize "DAGGERHEART.GENERAL.stress"}}</span>
-                            <span class="value">{{document.system.resources.stress.value}} / {{document.system.resources.stress.max}}</span>
-                        </div>
-                    </div>
-                </div>
-                {{else}}
-                <div class='status-value'>
-                    <p><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"></p>
-                    <p>/</p>
-                    <p class="bar-label">{{document.system.resources.stress.max}}</p>
-                </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>
-                {{/if}}
-            </div>
         </div>
         <div class="status-section">
             <div class="status-number">

templates/sheets/global/partials/resource-bar.hbs

@@ -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}}' data-action='toggleHitPoints' 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 "DAGGERHEART.GENERAL.HitPoints.short"}}</span>
+                <span class="value">{{resource.value}} / {{resource.max}}</span>
+            </div> 
+        </div>
+    {{else}}
+        <div class='status-value'>
+            <p><input class="bar-input" name="system.resources.hitPoints.value" min="0" max='{{resource.max}}'
+                    value="{{resource.value}}" type="number"></p>
+            <p>/</p>
+            <p class="bar-label">{{resource.max}}</p>
+        </div>
+        <progress
+            class='progress-bar'
+            max='{{resource.max}}'
+            value='{{resource.value}}'
+        ></progress>
+        <div class="status-label">
+            <h4>{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</h4>
+        </div>
+    {{/if}}
+</div>