Iss337 - Allow armor slots to be edited from the character sheet (#345)

* add armor slot input

* working progress bar

* fix label styling

* fix more styling

* fix styling issue on firefix

* Restored armorSlots when empty and added localization

---------

Co-authored-by: psitacus <walther.johnson@ucalgary.ca>
Co-authored-by: WBHarry <williambjrklund@gmail.com>

lang/en.json

@@ -1138,6 +1138,7 @@
                 "plural": "Traits"
             },
             "activeEffects": "Active Effects",
+            "armorSlots": "Armor Slots",
             "attack": "Attack",
             "basics": "Basics",
             "bonus": "Bonus",

module/applications/sheets/actors/character.mjs

@@ -103,6 +103,11 @@ export default class CharacterSheet extends DHBaseActorSheet {
         htmlElement.querySelectorAll('.inventory-item-quantity').forEach(element => {
             element.addEventListener('change', this.updateItemQuantity.bind(this));
         });
+        
+        // Add listener for armor marks input
+        htmlElement.querySelectorAll('.armor-marks-input').forEach(element => {
+            element.addEventListener('change', this.updateArmorMarks.bind(this));
+        });
     }
 
     /** @inheritDoc */
@@ -515,6 +520,16 @@ export default class CharacterSheet extends DHBaseActorSheet {
         this.render();
     }
 
+    async updateArmorMarks(event) {
+        const armor = this.document.system.armor;
+        if (!armor) return;
+
+        const maxMarks = this.document.system.armorScore;
+        const value = Math.min(Math.max(Number(event.currentTarget.value), 0), maxMarks);
+        await armor.update({ 'system.marks.value': value });
+        this.render();
+    }
+
     /* -------------------------------------------- */
     /*  Application Clicks Actions                  */
     /* -------------------------------------------- */

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

@@ -174,9 +174,114 @@
             gap: 5px;
             justify-content: center;
 
+            .status-bar.armor-slots {
+                display: flex;
+                justify-content: center;
+                position: relative;
+                width: 95px;
+                height: 30px;
+
+                .status-label {
+                    padding: 2px 10px;
+                    position: relative;
+                    top: 30px;
+                    height: 22px;
+                    width: 95px;
+                    border-radius: 3px;
+                    background: light-dark(@dark-blue, @golden);
+
+                    h4 {
+                        font-weight: bold;
+                        text-align: center;
+                        line-height: 18px;
+                        color: light-dark(@beige, @dark-blue);
+                        font-size: 12px;
+                    }
+                }
+                .status-value {
+                    position: absolute;
+                    display: flex;
+                    padding: 0 6px;
+                    font-size: 1.2rem;
+                    align-items: center;
+                    width: 80px;
+                    height: 30px;
+                    justify-content: center;
+                    text-align: center;
+                    z-index: 2;
+                    color: light-dark(@dark-blue, @beige);
+                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border-bottom: none;
+                    border-radius: 6px 6px 0 0;
+
+                    input[type='number'] {
+                        background: transparent;
+                        font-size: 1.2rem;
+                        width: 30px;
+                        height: 20px;
+                        text-align: center;
+                        border: none;
+                        outline: 2px solid transparent;
+                        color: light-dark(@dark-blue, @beige);
+
+                        &.bar-input {
+                            padding: 0;
+                            color: light-dark(@dark-blue, @beige);
+                            backdrop-filter: none;
+                            background: transparent;
+                            transition: all 0.3s ease;
+
+                            &:hover,
+                            &:focus {
+                                background: @semi-transparent-dark-blue;
+                                backdrop-filter: blur(9.5px);
+                            }
+                        }
+                    }
+
+                    .bar-label {
+                        width: 30px;
+                    }
+                }
+
+                .progress-bar {
+                    position: absolute;
+                    appearance: none;
+                    width: 80px;
+                    height: 30px;
+                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border-radius: 6px;
+                    z-index: 1;
+                    background: light-dark(transparent, @dark-blue);
+                    border-bottom: none;
+                    border-radius: 6px 6px 0 0;
+
+                    &::-webkit-progress-bar {
+                        border: none;
+                        background: light-dark(transparent, @dark-blue);
+                    }
+                    &::-webkit-progress-value {
+                        background: @gradient-stress;
+                    }
+                    &.stress-color::-webkit-progress-value {
+                        background: @gradient-stress;
+                    }
+                    &::-moz-progress-bar {
+                        background: @gradient-stress;
+                    }
+                    &.stress-color::-moz-progress-bar {
+                        background: @gradient-stress;
+                    }
+                }
+            }
+
             .status-number {
                 justify-items: center;
 
+                &.armor-slots {
+                    width: 95px;
+                }
+
                 .status-value {
                     position: relative;
                     display: flex;
@@ -192,9 +297,33 @@
                     background: light-dark(transparent, @dark-blue);
                     z-index: 2;
 
-                    &.armor-slots {
+                    input[type='number'] {
-                        width: 80px;
+                        background: transparent;
-                        height: 30px;
+                        font-size: 1.2rem;
+                        width: 30px;
+                        height: 20px;
+                        text-align: center;
+                        border: none;
+                        outline: 2px solid transparent;
+                        color: light-dark(@dark-blue, @beige);
+
+                        &.bar-input {
+                            padding: 0;
+                            color: light-dark(@dark-blue, @beige);
+                            backdrop-filter: none;
+                            background: transparent;
+                            transition: all 0.3s ease;
+
+                            &:hover,
+                            &:focus {
+                                background: @semi-transparent-dark-blue;
+                                backdrop-filter: blur(9.5px);
+                            }
+                        }
+                    }
+
+                    .bar-label {
+                        width: 30px;
                     }
                 }
 

templates/sheets/actors/character/sidebar.hbs

@@ -48,18 +48,32 @@
                 </div>
             </div>
 
-            <div class="status-number">
+            {{#if document.system.armor.system.marks}}
-                <div class='status-value armor-slots'>
+                <div class="status-bar armor-slots">
-                    {{#if document.system.armor.system.marks}}
+                    <div class='status-value'>
-                        <p>{{document.system.armor.system.marks.value}}/{{document.system.armorScore}}</p>
+                        <p><input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number"></p>
-                    {{else}}
+                        <p>/</p>
+                        <p class="bar-label">{{document.system.armorScore}}</p>
+                    </div>
+                    <progress
+                        class='progress-bar stress-color'
+                        value='{{document.system.armor.system.marks.value}}'
+                        max='{{document.system.armorScore}}'
+                    ></progress>
+                    <div class="status-label">
+                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
+                    </div>
+                </div>
+            {{else}}
+                <div class="status-number armor-slots">
+                    <div class='status-value'>
                         <p>-</p>
-                    {{/if}}
+                    </div>
+                    <div class="status-label">
+                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
+                    </div>
                 </div>
-                <div class="status-label">
+            {{/if}}
-                    <h4>Armor Slots</h4>
-                </div>
-            </div>
 
             <div class="status-number">
                 <div class='status-value'>