mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-16 05:31:07 +01:00
Added pip-display to Adversary and Companion. Some fixing on armor display
This commit is contained in:
WBHarry
parent
ac79cf4bc1
commit
5a44171d8f
11 changed files with 405 additions and 227 deletions
|
|
@ -10,6 +10,8 @@ export default class AdversarySheet extends DHBaseActorSheet {
|
||||||
position: { width: 660, height: 766 },
|
position: { width: 660, height: 766 },
|
||||||
window: { resizable: true },
|
window: { resizable: true },
|
||||||
actions: {
|
actions: {
|
||||||
|
toggleHitPoints: AdversarySheet.#toggleHitPoints,
|
||||||
|
toggleStress: AdversarySheet.#toggleStress,
|
||||||
reactionRoll: AdversarySheet.#reactionRoll,
|
reactionRoll: AdversarySheet.#reactionRoll,
|
||||||
toggleResourceDice: AdversarySheet.#toggleResourceDice,
|
toggleResourceDice: AdversarySheet.#toggleResourceDice,
|
||||||
handleResourceDice: AdversarySheet.#handleResourceDice
|
handleResourceDice: AdversarySheet.#handleResourceDice
|
||||||
|
|
@ -75,6 +77,16 @@ export default class AdversarySheet extends DHBaseActorSheet {
|
||||||
const context = await super._prepareContext(options);
|
const context = await super._prepareContext(options);
|
||||||
context.systemFields.attack.fields = this.document.system.attack.schema.fields;
|
context.systemFields.attack.fields = this.document.system.attack.schema.fields;
|
||||||
|
|
||||||
|
context.resources = Object.keys(this.document.system.resources).reduce((acc, key) => {
|
||||||
|
acc[key] = this.document.system.resources[key];
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
const maxResource = Math.max(context.resources.hitPoints.max, context.resources.stress.max);
|
||||||
|
context.resources.hitPoints.emptyPips =
|
||||||
|
context.resources.hitPoints.max < maxResource ? maxResource - context.resources.hitPoints.max : 0;
|
||||||
|
context.resources.stress.emptyPips =
|
||||||
|
context.resources.stress.max < maxResource ? maxResource - context.resources.stress.max : 0;
|
||||||
|
|
||||||
return context;
|
return context;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -155,6 +167,27 @@ export default class AdversarySheet extends DHBaseActorSheet {
|
||||||
/* Application Clicks Actions */
|
/* Application Clicks Actions */
|
||||||
/* -------------------------------------------- */
|
/* -------------------------------------------- */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles hitpoint resource value.
|
||||||
|
* @type {ApplicationClickAction}
|
||||||
|
*/
|
||||||
|
static async #toggleHitPoints(_, button) {
|
||||||
|
const hitPointsValue = Number.parseInt(button.dataset.value);
|
||||||
|
const newValue =
|
||||||
|
this.document.system.resources.hitPoints.value >= hitPointsValue ? hitPointsValue - 1 : hitPointsValue;
|
||||||
|
await this.document.update({ 'system.resources.hitPoints.value': newValue });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles stress resource value.
|
||||||
|
* @type {ApplicationClickAction}
|
||||||
|
*/
|
||||||
|
static async #toggleStress(_, button) {
|
||||||
|
const StressValue = Number.parseInt(button.dataset.value);
|
||||||
|
const newValue = this.document.system.resources.stress.value >= StressValue ? StressValue - 1 : StressValue;
|
||||||
|
await this.document.update({ 'system.resources.stress.value': newValue });
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Performs a reaction roll for an Adversary.
|
* Performs a reaction roll for an Adversary.
|
||||||
* @type {ApplicationClickAction}
|
* @type {ApplicationClickAction}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ export default class DhCompanionSheet extends DHBaseActorSheet {
|
||||||
classes: ['actor', 'companion'],
|
classes: ['actor', 'companion'],
|
||||||
position: { width: 340 },
|
position: { width: 340 },
|
||||||
actions: {
|
actions: {
|
||||||
|
toggleStress: DhCompanionSheet.#toggleStress,
|
||||||
actionRoll: DhCompanionSheet.#actionRoll,
|
actionRoll: DhCompanionSheet.#actionRoll,
|
||||||
levelManagement: DhCompanionSheet.#levelManagement
|
levelManagement: DhCompanionSheet.#levelManagement
|
||||||
}
|
}
|
||||||
|
|
@ -50,6 +51,16 @@ export default class DhCompanionSheet extends DHBaseActorSheet {
|
||||||
/* Application Clicks Actions */
|
/* Application Clicks Actions */
|
||||||
/* -------------------------------------------- */
|
/* -------------------------------------------- */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles stress resource value.
|
||||||
|
* @type {ApplicationClickAction}
|
||||||
|
*/
|
||||||
|
static async #toggleStress(_, button) {
|
||||||
|
const StressValue = Number.parseInt(button.dataset.value);
|
||||||
|
const newValue = this.document.system.resources.stress.value >= StressValue ? StressValue - 1 : StressValue;
|
||||||
|
await this.document.update({ 'system.resources.stress.value': newValue });
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -19,3 +19,4 @@
|
||||||
@import './filter-menu.less';
|
@import './filter-menu.less';
|
||||||
@import './tab-attachments.less';
|
@import './tab-attachments.less';
|
||||||
@import './dice.less';
|
@import './dice.less';
|
||||||
|
@import './resource-bar.less';
|
||||||
|
|
|
||||||
178
styles/less/global/resource-bar.less
Normal file
178
styles/less/global/resource-bar.less
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
// Theme sidebar backgrounds
|
||||||
|
.appTheme({
|
||||||
|
.slot-value .slot-bar {
|
||||||
|
background: @dark-blue;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
.slot-value .slot-bar {
|
||||||
|
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
.status-label {
|
||||||
|
position: relative;
|
||||||
|
top: 40px;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slot-value {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 140px;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
color: @beige;
|
||||||
|
|
||||||
|
.slot-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid light-dark(@dark-blue, @golden);
|
||||||
|
border-radius: 6px;
|
||||||
|
z-index: 1;
|
||||||
|
color: light-dark(@dark-blue, @golden);
|
||||||
|
width: fit-content;
|
||||||
|
|
||||||
|
.slot {
|
||||||
|
width: 15px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px solid light-dark(@dark-blue, @golden);
|
||||||
|
background: light-dark(@dark-blue-10, @golden-10);
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.filled {
|
||||||
|
background: light-dark(@dark-blue, @golden);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-slot {
|
||||||
|
width: 15px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slot-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: light-dark(@beige, @dark-blue);
|
||||||
|
background: light-dark(@dark-blue, @golden);
|
||||||
|
padding: 0 5px;
|
||||||
|
width: fit-content;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 0px 0px 5px 5px;
|
||||||
|
font-size: var(--font-size-12);
|
||||||
|
|
||||||
|
.label {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
padding-left: 6px;
|
||||||
|
border-left: 1px solid light-dark(@beige, @dark-golden);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-value {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 140px;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
color: @beige;
|
||||||
|
|
||||||
|
input[type='number'] {
|
||||||
|
background: transparent;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
color: @beige;
|
||||||
|
|
||||||
|
&.bar-input {
|
||||||
|
padding: 0;
|
||||||
|
color: @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: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
position: absolute;
|
||||||
|
appearance: none;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid light-dark(@dark-blue, @golden);
|
||||||
|
border-radius: 6px;
|
||||||
|
z-index: 1;
|
||||||
|
background: @dark-blue;
|
||||||
|
|
||||||
|
&::-webkit-progress-bar {
|
||||||
|
border: none;
|
||||||
|
background: @dark-blue;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
&::-webkit-progress-value {
|
||||||
|
background: @gradient-hp;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
&.stress-color::-webkit-progress-value {
|
||||||
|
background: @gradient-stress;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background: @gradient-hp;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
&.stress-color::-moz-progress-bar {
|
||||||
|
background: @gradient-stress;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -109,6 +109,14 @@
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-bottom: -10px;
|
margin-bottom: -10px;
|
||||||
|
|
||||||
|
&.pip-display {
|
||||||
|
top: -15px;
|
||||||
|
|
||||||
|
.resources-section {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.resources-section {
|
.resources-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,10 @@
|
||||||
background: url(../assets/svg/experience-shield.svg) no-repeat;
|
background: url(../assets/svg/experience-shield.svg) no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section {
|
.info-section .status-section .status-bar.armor-slots {
|
||||||
.resources-section .status-bar, .status-section .status-bar.armor-slots {
|
.slot-value .slot-bar {
|
||||||
.slot-value .slot-bar {
|
background: @dark-blue;
|
||||||
background: @dark-blue;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -31,12 +29,10 @@
|
||||||
filter: brightness(0) drop-shadow(0 0 3px @dark-blue);
|
filter: brightness(0) drop-shadow(0 0 3px @dark-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section {
|
.info-section .status-section .status-bar.armor-slots {
|
||||||
.resources-section .status-bar, .status-section .status-bar.armor-slots {
|
.slot-value .slot-bar {
|
||||||
.slot-value .slot-bar {
|
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -141,13 +137,22 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
gap: 15px;
|
gap: 10px;
|
||||||
margin-bottom: -16px;
|
margin-bottom: -16px;
|
||||||
|
|
||||||
|
&.pip-display {
|
||||||
|
gap: 15px;
|
||||||
|
|
||||||
|
.resources-section {
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 8px 2px 8px 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.resources-section {
|
.resources-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-evenly;
|
||||||
margin: 8px 2px 8px 2px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.status-bar {
|
.status-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -171,71 +176,6 @@
|
||||||
color: light-dark(@beige, @dark-blue);
|
color: light-dark(@beige, @dark-blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.slot-value {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0 5px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
align-items: center;
|
|
||||||
width: 140px;
|
|
||||||
height: 40px;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 2;
|
|
||||||
color: @beige;
|
|
||||||
|
|
||||||
.slot-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
|
||||||
border-radius: 6px;
|
|
||||||
z-index: 1;
|
|
||||||
color: light-dark(@dark-blue, @golden);
|
|
||||||
width: fit-content;
|
|
||||||
|
|
||||||
.slot {
|
|
||||||
width: 15px;
|
|
||||||
height: 10px;
|
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
|
||||||
background: light-dark(@dark-blue-10, @golden-10);
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.filled {
|
|
||||||
background: light-dark(@dark-blue, @golden);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-slot {
|
|
||||||
width: 15px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.slot-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: light-dark(@beige, @dark-blue);
|
|
||||||
background: light-dark(@dark-blue, @golden);
|
|
||||||
padding: 0 5px;
|
|
||||||
width: fit-content;
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 0px 0px 5px 5px;
|
|
||||||
font-size: var(--font-size-12);
|
|
||||||
|
|
||||||
.label {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
padding-left: 6px;
|
|
||||||
border-left: 1px solid light-dark(@beige, @dark-golden);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-value {
|
.status-value {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -319,13 +259,34 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
|
||||||
|
&.pip-display {
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
.status-bar.armor-slots {
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.slot-value {
|
||||||
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.slot-bar {
|
||||||
|
border-radius: 6px 6px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-value {
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.status-bar.armor-slots {
|
.status-bar.armor-slots {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
width: 95px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
||||||
.status-label {
|
.status-label {
|
||||||
|
|
@ -336,6 +297,7 @@
|
||||||
width: 95px;
|
width: 95px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: light-dark(@dark-blue, @golden);
|
background: light-dark(@dark-blue, @golden);
|
||||||
|
clip-path: none;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -401,13 +363,14 @@
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
|
border-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.status-value {
|
.status-value {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 5px;
|
padding: 0 6px;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
|
@ -416,6 +379,9 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: light-dark(@dark-blue, @beige);
|
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'] {
|
input[type='number'] {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
|
||||||
|
|
@ -37,11 +37,22 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.resource-section {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.status-section {
|
.status-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
&.pip-display {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
.status-number {
|
.status-number {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -84,103 +95,103 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-bar {
|
// .status-bar {
|
||||||
display: flex;
|
// display: flex;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
position: relative;
|
// position: relative;
|
||||||
width: 100px;
|
// width: 100px;
|
||||||
height: 40px;
|
// height: 40px;
|
||||||
|
|
||||||
.status-label {
|
// .status-label {
|
||||||
position: relative;
|
// position: relative;
|
||||||
top: 40px;
|
// top: 40px;
|
||||||
height: 22px;
|
// height: 22px;
|
||||||
width: 79px;
|
// width: 79px;
|
||||||
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
|
// clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
|
||||||
background: light-dark(@dark-blue, @golden);
|
// background: light-dark(@dark-blue, @golden);
|
||||||
|
|
||||||
h4 {
|
// h4 {
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
line-height: 18px;
|
// line-height: 18px;
|
||||||
color: light-dark(@beige, @dark-blue);
|
// color: light-dark(@beige, @dark-blue);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.status-value {
|
// .status-value {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
display: flex;
|
// display: flex;
|
||||||
padding: 0 6px;
|
// padding: 0 6px;
|
||||||
font-size: 1.5rem;
|
// font-size: 1.5rem;
|
||||||
align-items: center;
|
// align-items: center;
|
||||||
width: 100px;
|
// width: 100px;
|
||||||
height: 40px;
|
// height: 40px;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
z-index: 2;
|
// z-index: 2;
|
||||||
color: @beige;
|
// color: @beige;
|
||||||
|
|
||||||
input[type='number'] {
|
// input[type='number'] {
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
font-size: 1.5rem;
|
// font-size: 1.5rem;
|
||||||
width: 40px;
|
// width: 40px;
|
||||||
height: 30px;
|
// height: 30px;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
border: none;
|
// border: none;
|
||||||
outline: 2px solid transparent;
|
// outline: 2px solid transparent;
|
||||||
color: @beige;
|
// color: @beige;
|
||||||
|
|
||||||
&.bar-input {
|
// &.bar-input {
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
color: @beige;
|
// color: @beige;
|
||||||
backdrop-filter: none;
|
// backdrop-filter: none;
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
transition: all 0.3s ease;
|
// transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
background: @semi-transparent-dark-blue;
|
// background: @semi-transparent-dark-blue;
|
||||||
backdrop-filter: blur(9.5px);
|
// backdrop-filter: blur(9.5px);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.bar-label {
|
// .bar-label {
|
||||||
width: 40px;
|
// width: 40px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.progress-bar {
|
// .progress-bar {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
appearance: none;
|
// appearance: none;
|
||||||
width: 100px;
|
// width: 100px;
|
||||||
height: 40px;
|
// height: 40px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
// border: 1px solid light-dark(@dark-blue, @golden);
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
z-index: 1;
|
// z-index: 1;
|
||||||
background: @dark-blue;
|
// background: @dark-blue;
|
||||||
|
|
||||||
&::-webkit-progress-bar {
|
// &::-webkit-progress-bar {
|
||||||
border: none;
|
// border: none;
|
||||||
background: @dark-blue;
|
// background: @dark-blue;
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
}
|
// }
|
||||||
&::-webkit-progress-value {
|
// &::-webkit-progress-value {
|
||||||
background: @gradient-hp;
|
// background: @gradient-hp;
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
}
|
// }
|
||||||
&.stress-color::-webkit-progress-value {
|
// &.stress-color::-webkit-progress-value {
|
||||||
background: @gradient-stress;
|
// background: @gradient-stress;
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
}
|
// }
|
||||||
&::-moz-progress-bar {
|
// &::-moz-progress-bar {
|
||||||
background: @gradient-hp;
|
// background: @gradient-hp;
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
}
|
// }
|
||||||
&.stress-color::-moz-progress-bar {
|
// &.stress-color::-moz-progress-bar {
|
||||||
background: @gradient-stress;
|
// background: @gradient-stress;
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.level-div {
|
.level-div {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
||||||
|
|
@ -4,35 +4,10 @@
|
||||||
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
|
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-section">
|
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||||
<div class="resources-section">
|
<div class="resources-section">
|
||||||
<div class="status-bar">
|
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
|
||||||
<div class='status-value'>
|
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
|
||||||
<input class="bar-input" name="system.resources.hitPoints.value" min="0" max='{{source.system.resources.hitPoints.max}}'
|
|
||||||
value="{{source.system.resources.hitPoints.value}}" type="number">
|
|
||||||
<span>/</span>
|
|
||||||
<span class="bar-label">{{source.system.resources.hitPoints.max}}</span>
|
|
||||||
</div>
|
|
||||||
<progress class='progress-bar' value='{{source.system.resources.hitPoints.value}}'
|
|
||||||
max='{{source.system.resources.hitPoints.max}}'></progress>
|
|
||||||
<div class="status-label">
|
|
||||||
<h4>{{localize 'DAGGERHEART.GENERAL.HitPoints.short'}}</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="status-bar">
|
|
||||||
<div class='status-value'>
|
|
||||||
<input class="bar-input" name="system.resources.stress.value" min="0" max='{{source.system.resources.stress.max}}'
|
|
||||||
value="{{source.system.resources.stress.value}}" type="number">
|
|
||||||
<span>/</span>
|
|
||||||
<span class="bar-label">{{source.system.resources.stress.max}}</span>
|
|
||||||
</div>
|
|
||||||
<progress class='progress-bar stress-color' value='{{source.system.resources.stress.value}}'
|
|
||||||
max='{{source.system.resources.stress.max}}'></progress>
|
|
||||||
<div class="status-label">
|
|
||||||
<h4>{{localize 'DAGGERHEART.GENERAL.stress'}}</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="status-section">
|
<div class="status-section">
|
||||||
<div class="status-number">
|
<div class="status-number">
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,12 @@
|
||||||
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
|
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
|
||||||
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
|
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-section">
|
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||||
<div class="resources-section">
|
<div class="resources-section">
|
||||||
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints }}
|
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
|
||||||
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress }}
|
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
|
||||||
</div>
|
</div>
|
||||||
<div class="status-section">
|
<div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||||
<div class="status-number">
|
<div class="status-number">
|
||||||
<div class='status-value'>
|
<div class='status-value'>
|
||||||
<p>{{document.system.evasion}}</p>
|
<p>{{document.system.evasion}}</p>
|
||||||
|
|
@ -52,9 +52,9 @@
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class='status-value'>
|
<div class='status-value'>
|
||||||
<p><input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number"></p>
|
<input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number">
|
||||||
<p>/</p>
|
<span>/</span>
|
||||||
<p class="bar-label">{{document.system.armorScore}}</p>
|
<span class="bar-label">{{document.system.armorScore}}</span>
|
||||||
</div>
|
</div>
|
||||||
<progress
|
<progress
|
||||||
class='progress-bar stress-color'
|
class='progress-bar stress-color'
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,12 @@
|
||||||
placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}'
|
placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}'
|
||||||
/>
|
/>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="status-section">
|
{{#if useResourcePips}}
|
||||||
|
<div class="resource-section">
|
||||||
|
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=document.system.resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" largePips=true }}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||||
<div class="status-number">
|
<div class="status-number">
|
||||||
<div class='status-value'>
|
<div class='status-value'>
|
||||||
<p>{{document.system.evasion}}</p>
|
<p>{{document.system.evasion}}</p>
|
||||||
|
|
@ -17,21 +22,11 @@
|
||||||
<h4>{{localize "DAGGERHEART.GENERAL.evasion"}}</h4>
|
<h4>{{localize "DAGGERHEART.GENERAL.evasion"}}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-bar">
|
{{#unless useResourcePips}}
|
||||||
<div class='status-value'>
|
<div class="resource-section">
|
||||||
<input class="bar-input" name="system.resources.stress.value" value="{{document.system.resources.stress.value}}" min="0" max='{{document.system.resources.stress.max}}' type="number">
|
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=document.system.resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
|
||||||
<span>/</span>
|
|
||||||
<span class="bar-label">{{document.system.resources.stress.max}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<progress
|
{{/unless}}
|
||||||
class='progress-bar stress-color'
|
|
||||||
value='{{document.system.resources.stress.value}}'
|
|
||||||
max='{{document.system.resources.stress.max}}'
|
|
||||||
></progress>
|
|
||||||
<div class="status-label">
|
|
||||||
<h4>{{localize "DAGGERHEART.GENERAL.stress"}}</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='level-div'>
|
<div class='level-div'>
|
||||||
<h3 class='label'>
|
<h3 class='label'>
|
||||||
{{localize 'DAGGERHEART.GENERAL.level'}}
|
{{localize 'DAGGERHEART.GENERAL.level'}}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div class='slot-value'>
|
<div class='slot-value'>
|
||||||
<div class="slot-bar">
|
<div class="slot-bar">
|
||||||
{{#times resource.max}}
|
{{#times resource.max}}
|
||||||
<span class='slot {{#if (gte ../resource.value (add this 1))}}filled{{/if}}' data-action='toggleHitPoints' data-value="{{add this 1}}">
|
<span class='slot {{#if (gte ../resource.value (add this 1))}}filled{{/if}} {{#if ../largePips}}large{{/if}}' data-action="{{../action}}" data-value="{{add this 1}}">
|
||||||
</span>
|
</span>
|
||||||
{{/times}}
|
{{/times}}
|
||||||
|
|
||||||
|
|
@ -12,13 +12,13 @@
|
||||||
{{/times}}
|
{{/times}}
|
||||||
</div>
|
</div>
|
||||||
<div class="slot-label">
|
<div class="slot-label">
|
||||||
<span class="label">{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</span>
|
<span class="label">{{localize label}}</span>
|
||||||
<span class="value">{{resource.value}} / {{resource.max}}</span>
|
<span class="value">{{resource.value}} / {{resource.max}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class='status-value'>
|
<div class='status-value'>
|
||||||
<input class="bar-input" name="system.resources.hitPoints.value" min="0" max='{{resource.max}}'
|
<input class="bar-input" name="{{key}}" min="0" max='{{resource.max}}'
|
||||||
value="{{resource.value}}" type="number">
|
value="{{resource.value}}" type="number">
|
||||||
<span>/</span>
|
<span>/</span>
|
||||||
<span class="bar-label">{{resource.max}}</span>
|
<span class="bar-label">{{resource.max}}</span>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
value='{{resource.value}}'
|
value='{{resource.value}}'
|
||||||
></progress>
|
></progress>
|
||||||
<div class="status-label">
|
<div class="status-label">
|
||||||
<h4>{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</h4>
|
<h4>{{localize label}}</h4>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue