diff --git a/lang/en.json b/lang/en.json index 96f5a9dd..a2d4bfd8 100755 --- a/lang/en.json +++ b/lang/en.json @@ -1138,6 +1138,7 @@ "plural": "Traits" }, "activeEffects": "Active Effects", + "armorSlots": "Armor Slots", "attack": "Attack", "basics": "Basics", "bonus": "Bonus", 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 f46a9628..e8662f86 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/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 { - width: 80px; - height: 30px; + 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; } } diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs index 7b5659d6..51816443 100644 --- a/templates/sheets/actors/character/sidebar.hbs +++ b/templates/sheets/actors/character/sidebar.hbs @@ -48,18 +48,32 @@ -
{{document.system.armor.system.marks.value}}/{{document.system.armorScore}}
- {{else}} + {{#if document.system.armor.system.marks}} + + {{else}} +-
- {{/if}} +