mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
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>
This commit is contained in:
Psitacus
GitHub
parent
6b6f4e61d6
commit
ef45cd71f8
4 changed files with 172 additions and 13 deletions
|
|
@ -1138,6 +1138,7 @@
|
|||
"plural": "Traits"
|
||||
},
|
||||
"activeEffects": "Active Effects",
|
||||
"armorSlots": "Armor Slots",
|
||||
"attack": "Attack",
|
||||
"basics": "Basics",
|
||||
"bonus": "Bonus",
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
/* -------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,18 +48,32 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-number">
|
||||
<div class='status-value armor-slots'>
|
||||
{{#if document.system.armor.system.marks}}
|
||||
<p>{{document.system.armor.system.marks.value}}/{{document.system.armorScore}}</p>
|
||||
{{else}}
|
||||
{{#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>
|
||||
</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">
|
||||
<h4>Armor Slots</h4>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="status-number">
|
||||
<div class='status-value'>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue