Something experimenting

module/applications/sheets/actors/character.mjs

@@ -19,6 +19,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
         actions: {
             toggleVault: CharacterSheet.#toggleVault,
             rollAttribute: CharacterSheet.#rollAttribute,
+            toggleHitpoints: CharacterSheet.#toggleHitPoints,
             toggleHope: CharacterSheet.#toggleHope,
             toggleLoadoutView: CharacterSheet.#toggleLoadoutView,
             openPack: CharacterSheet.#openPack,
@@ -727,6 +728,17 @@ export default class CharacterSheet extends DHBaseActorSheet {
         this.render();
     }
 
+    /**
+     * Toggles a hitpoint resource value.
+     * @type {ApplicationClickAction}
+     */
+    static async #toggleHitPoints(_, button) {
+        const hitPointsValue = Number.parseInt(button.dataset.value);
+        const newValue = this.document.system.resources.hitPoints.value >= hitPointsValue ? hitPointsValue - 1 : hitPointsValue;
+        await this.document.update({ 'system.resources.hitPoints.value': newValue });
+        this.render();
+    }
+
     /**
      * Toggles a hope resource value.
      * @type {ApplicationClickAction}

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

@@ -136,7 +136,7 @@
                 display: flex;
                 justify-content: center;
                 position: relative;
-                width: 100px;
+                width: 120px;
                 height: 40px;
 
                 .status-label {
@@ -157,16 +157,50 @@
                 .status-value {
                     position: absolute;
                     display: flex;
-                    padding: 0 6px;
+                    padding: 0 5px;
                     font-size: 1.5rem;
                     align-items: center;
-                    width: 100px;
+                    width: 140px;
                     height: 40px;
                     justify-content: center;
                     text-align: center;
                     z-index: 2;
                     color: @beige;
 
+                    .slot-bar {
+                            display: flex;
+                            flex-wrap: wrap;
+                            gap: 5px;
+                            padding: 7px;
+
+                            color: light-dark(@dark-blue, @golden);
+                            width: fit-content;
+
+                                .armor-slot {
+                                    cursor: pointer;
+                                    transition: all 0.3s ease;
+                                    font-size: var(--font-size-12);
+
+                                    .fa-shield-halved {
+                                        color: light-dark(@dark-blue-40, @golden-40);
+                                    }
+                                }
+
+                                .slot {
+                                    width: 15px;
+                                    height: 10px;
+                                    border: 1px solid light-dark(@dark-blue, @golden);
+                                    background: light-dark(@dark-blue-10, @golden-10);
+                                    border-radius: 3px;
+                                    transition: all 0.3s ease;
+                                    cursor: pointer;
+                                
+                                    &.filled {
+                                        background: light-dark(@dark-blue, @golden);
+                                    }
+                                }   
+                    }
+
                     input[type='number'] {
                         background: transparent;
                         font-size: 1.5rem;
@@ -199,7 +233,7 @@
                 .progress-bar {
                     position: absolute;
                     appearance: none;
-                    width: 100px;
+                    width: 125px;
                     height: 40px;
                     border: 1px solid light-dark(@dark-blue, @golden);
                     border-radius: 6px;
@@ -503,4 +537,4 @@
             }
         }
     }
-}
+}

templates/sheets/actors/character/sidebar.hbs

@@ -19,18 +19,23 @@
         <div class="resources-section">
             <div class="status-bar">
                 <div class='status-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> {{!--
                     <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>
+                    <p class="bar-label">{{document.system.resources.hitPoints.max}}</p> --}}
                 </div>
-                <progress
+                <div
                     class='progress-bar'
-                    max='{{document.system.resources.hitPoints.max}}'
+                ></div>
-                    value='{{document.system.resources.hitPoints.value}}'
-                ></progress>
                 <div class="status-label">
-                    <h4>{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</h4>
+                    <h4><span>{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</span><span>|</span>
+                    <span>{{document.system.resources.hitPoints.value}} / {{document.system.resources.hitPoints.max}}</span></h4>
                 </div>
 
             </div>