From b1fe6a30c529a62adc582e346a46c77f4499721b Mon Sep 17 00:00:00 2001
From: psitacus <walther.johnson@ucalgary.ca>
Date: Mon, 14 Jul 2025 21:16:40 -0600
Subject: [PATCH] working progress bar

---
 .../applications/sheets/actors/character.mjs  |  15 +++
 .../less/sheets/actors/character/sidebar.less | 106 +++++++++++++++++-
 templates/sheets/actors/character/sidebar.hbs |  25 +++--
 3 files changed, 130 insertions(+), 16 deletions(-)

diff --git a/module/applications/sheets/actors/character.mjs b/module/applications/sheets/actors/character.mjs
index eae7a223..99545d4e 100644
--- a/module/applications/sheets/actors/character.mjs
+++ b/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                  */
     /* -------------------------------------------- */
diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less
index ec017c03..249c18bf 100644
--- a/styles/less/sheets/actors/character/sidebar.less
+++ b/styles/less/sheets/actors/character/sidebar.less
@@ -174,6 +174,107 @@
             gap: 5px;
             justify-content: center;
 
+            .status-bar.armor-slots {
+                display: flex;
+                justify-content: center;
+                position: relative;
+                width: 80px;
+                height: 30px;
+
+                .status-label {
+                    position: relative;
+                    top: 30px;
+                    height: 22px;
+                    width: 79px;
+                    clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
+                    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);
+
+                    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);
+
+                    &::-webkit-progress-bar {
+                        border: none;
+                        background: light-dark(transparent, @dark-blue);
+                        border-radius: 6px;
+                    }
+                    &::-webkit-progress-value {
+                        background: @gradient-stress;
+                        border-radius: 6px;
+                    }
+                    &.stress-color::-webkit-progress-value {
+                        background: @gradient-stress;
+                        border-radius: 6px;
+                    }
+                    &::-moz-progress-bar {
+                        background: @gradient-stress;
+                        border-radius: 6px;
+                    }
+                    &.stress-color::-moz-progress-bar {
+                        background: @gradient-stress;
+                        border-radius: 6px;
+                    }
+                }
+            }
+
             .status-number {
                 justify-items: center;
 
@@ -192,11 +293,6 @@
                     background: light-dark(transparent, @dark-blue);
                     z-index: 2;
 
-                    &.armor-slots {
-                        width: 80px;
-                        height: 30px;
-                    }
-
                     input[type='number'] {
                         background: transparent;
                         font-size: 1.2rem;
diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs
index 35b321ba..ea89dad2 100644
--- a/templates/sheets/actors/character/sidebar.hbs
+++ b/templates/sheets/actors/character/sidebar.hbs
@@ -48,20 +48,23 @@
                 </div>
             </div>
 
-            <div class="status-number">
-                <div class='status-value armor-slots'>
-                    {{#if document.system.armor.system.marks}}
-                        <p><input class="bar-input" name="system.armor.system.marks.value" value="{{document.system.armor.system.marks.value}}" type="number"></p>
+            {{#if document.system.armor.system.marks}}
+                <div class="status-bar armor-slots">
+                    <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>
-                    {{else}}
-                        <p>-</p>
-                    {{/if}}
+                    </div>
+                    <progress
+                        class='progress-bar stress-color'
+                        value='{{document.system.armor.system.marks.value}}'
+                        max='{{document.system.armorScore}}'
+                    ></progress>
+                    <div class="status-label">
+                        <h4>Armor Slots</h4>
+                    </div>
                 </div>
-                <div class="status-label">
-                    <h4>Armor Slots</h4>
-                </div>
-            </div>
+            {{/if}}
 
             <div class="status-number">
                 <div class='status-value'>