Fixed ArmorManagement pip syle

module/applications/sheets/actors/character.mjs

@@ -966,11 +966,16 @@ export default class CharacterSheet extends DHBaseActorSheet {
 
         if (armorSources.length <= 1) return;
 
+        const useResourcePips = game.settings.get(
+            CONFIG.DH.id,
+            CONFIG.DH.SETTINGS.gameSettings.appearance
+        ).useResourcePips;
         const html = document.createElement('div');
         html.innerHTML = await foundry.applications.handlebars.renderTemplate(
             `systems/daggerheart/templates/ui/tooltip/armorManagement.hbs`,
             {
-                sources: armorSources
+                sources: armorSources,
+                useResourcePips
             }
         );
 
@@ -986,6 +991,10 @@ export default class CharacterSheet extends DHBaseActorSheet {
             element.addEventListener('blur', CharacterSheet.armorSourceUpdate);
             element.addEventListener('input', CharacterSheet.armorSourceInput);
         });
+
+        html.querySelectorAll('.armor-slot').forEach(element => {
+            element.addEventListener('click', CharacterSheet.armorSourcePipUpdate);
+        });
     }
 
     static async armorSourceInput(event) {
@@ -1000,12 +1009,11 @@ export default class CharacterSheet extends DHBaseActorSheet {
     static async armorSourceUpdate(event) {
         const effect = await foundry.utils.fromUuid(event.target.dataset.uuid);
         if (effect.system.changes.length !== 1) return;
-        const armorEffect = effect.system.changes[0];
         const value = Math.max(Math.min(Number.parseInt(event.target.value), effect.system.armorData.max), 0);
 
         const newChanges = [
             {
-                ...armorEffect,
+                ...effect.system.changes[0],
                 value
             }
         ];
@@ -1017,6 +1025,38 @@ export default class CharacterSheet extends DHBaseActorSheet {
         await effect.update({ 'system.changes': newChanges });
     }
 
+    static async armorSourcePipUpdate(event) {
+        const target = event.target.closest('.armor-slot');
+        const effect = await foundry.utils.fromUuid(target.dataset.uuid);
+        if (effect.system.changes.length !== 1) return;
+        const { value, max } = effect.system.armorData;
+
+        const inputValue = Number.parseInt(target.dataset.value);
+        const decreasing = value >= inputValue;
+        const newValue = decreasing ? inputValue - 1 : inputValue;
+
+        const newChanges = [
+            {
+                ...effect.system.changes[0],
+                value: newValue
+            }
+        ];
+
+        const container = target.closest('.slot-bar');
+        for (const armorSlot of container.querySelectorAll('.armor-slot i')) {
+            const index = Number.parseInt(armorSlot.dataset.index);
+            if (decreasing && index >= newValue) {
+                armorSlot.classList.remove('fa-shield');
+                armorSlot.classList.add('fa-shield-halved');
+            } else if (!decreasing && index < newValue) {
+                armorSlot.classList.add('fa-shield');
+                armorSlot.classList.remove('fa-shield-halved');
+            }
+        }
+
+        await effect.update({ 'system.changes': newChanges });
+    }
+
     /**
      *  Open the downtime application.
      * @type {ApplicationClickAction}

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

@@ -276,6 +276,23 @@
                         }
                     }
 
+                    .slot-label {
+                        .slot-value-container {
+                            position: relative;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            width: 100%;
+
+                            i {
+                                position: absolute;
+                                right: 0;
+                                font-size: 12px;
+                                color: light-dark(@beige, @dark-blue);
+                            }
+                        }
+                    }
+
                     .status-value {
                         padding: 0 5px;
                     }

styles/less/ux/tooltip/armorManagement.less

@@ -97,4 +97,27 @@
             }
         }
     }
+
+    .slot-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        padding: 5px;
+        border: 1px solid light-dark(@dark-blue, @golden);
+        border-radius: 6px;
+        z-index: 1;
+        background: @dark-blue;
+        justify-content: center;
+        color: light-dark(@dark-blue, @golden);
+
+        .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);
+            }
+        }
+    }
 }

templates/sheets/actors/character/sidebar.hbs

@@ -45,10 +45,13 @@
                             </a>
                         {{/times}}
                         </div>
-                        <div class="slot-label">
+                        <a class="slot-label" data-action="toggleArmorMangement">
                             <span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
+                            <div class="slot-value-container">
                                 <span class="value">{{document.system.armorScore.value}} / {{document.system.armorScore.max}}</span>
+                                <i class="fa-solid fa-gear"></i>
                             </div>
+                        </a> 
                     </div>
                     {{else}}
                     <div class='status-value'>
@@ -61,10 +64,10 @@
                         value='{{document.system.armorScore.value}}'
                         max='{{document.system.armorScore.max}}'
                     ></progress>
-                    <div class="status-label" data-action="toggleArmorMangement">
+                    <a class="status-label" data-action="toggleArmorMangement">
                         <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
                         <i class="fa-solid fa-gear"></i>
-                    </div>
+                    </a>
                     {{/if}}
                 </div>
             {{else}}

templates/ui/tooltip/armorManagement.hbs

@@ -1,5 +1,21 @@
 <div class="daggerheart armor-management-container">
     {{#each sources as |source|}}
+        {{#if ../useResourcePips}}
+            <div class="armor-source-container">
+                <label class="armor-source-label">{{source.name}}</label>
+                <div class="slot-bar">
+                    {{#times source.max}}
+                        <a class='armor-slot' data-value="{{add this 1}}" data-uuid="{{source.uuid}}">
+                            {{#if (gte ../value (add this 1))}}
+                                <i class="fa-solid fa-shield" data-index="{{this}}"></i>
+                            {{else}}
+                                <i class="fa-solid fa-shield-halved" data-index="{{this}}"></i>
+                            {{/if}}
+                        </a>
+                    {{/times}}
+                </div>
+            </div>
+        {{else}}
             <div class="armor-source-container">
                 <label class="armor-source-label">{{source.name}}</label>
                 <div class="status-bar armor-slots">
@@ -15,5 +31,6 @@
                     ></progress>
                 </div>
             </div>
+        {{/if}}
     {{/each}}
 </div>