From ad90f74d2080d76210daca952f7d46ccc68c3da0 Mon Sep 17 00:00:00 2001 From: Nikhil Nagarajan Date: Mon, 10 Nov 2025 10:28:49 -0500 Subject: [PATCH] [PR] [Party Sheets] Sidebar character sheet changes (#1249) * Something experimenting * I am silly (wearning Dunce hat) * Stressful task * Armor functional to be hit * CSS Changes to accomadate pip boy * last minute change to resource section for better visual feeling * restoring old css for toggle * Added setting to toggle pip/number display * toggle functionality added * Fixed light-mode in characterSheet * Fixed multi-row resource pips display for character * Fixed separators * Added pip-display to Adversary and Companion. Some fixing on armor display --------- Co-authored-by: WBHarry --- lang/en.json | 3 +- .../applications/sheets/actors/adversary.mjs | 33 ++ .../applications/sheets/actors/character.mjs | 44 ++ .../applications/sheets/actors/companion.mjs | 11 + .../sheets/actors/environment.mjs | 2 - module/applications/sheets/api/base-actor.mjs | 4 + module/data/settings/Appearance.mjs | 1 + module/systemRegistration/handlebars.mjs | 4 +- styles/less/global/index.less | 1 + styles/less/global/inventory-item.less | 8 +- styles/less/global/resource-bar.less | 178 ++++++++ .../less/sheets/actors/adversary/sidebar.less | 8 + .../less/sheets/actors/character/sidebar.less | 116 +++++- .../less/sheets/actors/companion/header.less | 191 +++++---- .../less/sheets/actors/party/resources.less | 392 +++++++++--------- .../settings/appearance-settings/main.hbs | 4 + templates/sheets/actors/adversary/sidebar.hbs | 31 +- templates/sheets/actors/character/sidebar.hbs | 66 ++- templates/sheets/actors/companion/header.hbs | 25 +- .../sheets/global/partials/resource-bar.hbs | 35 ++ 20 files changed, 774 insertions(+), 383 deletions(-) create mode 100644 styles/less/global/resource-bar.less create mode 100644 templates/sheets/global/partials/resource-bar.hbs diff --git a/lang/en.json b/lang/en.json index 0beab72e..037dcdf8 100755 --- a/lang/en.json +++ b/lang/en.json @@ -2248,7 +2248,8 @@ "target": { "label": "Target" } - } + }, + "useResourcePips": { "label": "Pip Display For Resources" } }, "fearDisplay": { "token": "Tokens", diff --git a/module/applications/sheets/actors/adversary.mjs b/module/applications/sheets/actors/adversary.mjs index 6b57565c..95d77787 100644 --- a/module/applications/sheets/actors/adversary.mjs +++ b/module/applications/sheets/actors/adversary.mjs @@ -10,6 +10,8 @@ export default class AdversarySheet extends DHBaseActorSheet { position: { width: 660, height: 766 }, window: { resizable: true }, actions: { + toggleHitPoints: AdversarySheet.#toggleHitPoints, + toggleStress: AdversarySheet.#toggleStress, reactionRoll: AdversarySheet.#reactionRoll, toggleResourceDice: AdversarySheet.#toggleResourceDice, handleResourceDice: AdversarySheet.#handleResourceDice @@ -75,6 +77,16 @@ export default class AdversarySheet extends DHBaseActorSheet { const context = await super._prepareContext(options); 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; } @@ -155,6 +167,27 @@ export default class AdversarySheet extends DHBaseActorSheet { /* 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. * @type {ApplicationClickAction} diff --git a/module/applications/sheets/actors/character.mjs b/module/applications/sheets/actors/character.mjs index b9859a01..89c686c2 100644 --- a/module/applications/sheets/actors/character.mjs +++ b/module/applications/sheets/actors/character.mjs @@ -19,6 +19,9 @@ export default class CharacterSheet extends DHBaseActorSheet { actions: { toggleVault: CharacterSheet.#toggleVault, rollAttribute: CharacterSheet.#rollAttribute, + toggleHitPoints: CharacterSheet.#toggleHitPoints, + toggleStress: CharacterSheet.#toggleStress, + toggleArmor: CharacterSheet.#toggleArmor, toggleHope: CharacterSheet.#toggleHope, toggleLoadoutView: CharacterSheet.#toggleLoadoutView, openPack: CharacterSheet.#openPack, @@ -196,6 +199,16 @@ export default class CharacterSheet extends DHBaseActorSheet { return acc; }, {}); + 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; + context.inventory = { currency: { title: game.i18n.localize('DAGGERHEART.CONFIG.Gold.title'), @@ -746,6 +759,37 @@ export default class CharacterSheet extends DHBaseActorSheet { this.render(); } + /** + * 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 }); + } + + /** + * Toggles ArmorScore resource value. + * @type {ApplicationClickAction} + */ + static async #toggleArmor(_, button, element) { + const ArmorValue = Number.parseInt(button.dataset.value); + const newValue = this.document.system.armor.system.marks.value >= ArmorValue ? ArmorValue - 1 : ArmorValue; + await this.document.system.armor.update({ 'system.marks.value': newValue }); + } + /** * Toggles a hope resource value. * @type {ApplicationClickAction} diff --git a/module/applications/sheets/actors/companion.mjs b/module/applications/sheets/actors/companion.mjs index fd8cddbf..9b85f622 100644 --- a/module/applications/sheets/actors/companion.mjs +++ b/module/applications/sheets/actors/companion.mjs @@ -8,6 +8,7 @@ export default class DhCompanionSheet extends DHBaseActorSheet { classes: ['actor', 'companion'], position: { width: 340 }, actions: { + toggleStress: DhCompanionSheet.#toggleStress, actionRoll: DhCompanionSheet.#actionRoll, levelManagement: DhCompanionSheet.#levelManagement } @@ -50,6 +51,16 @@ export default class DhCompanionSheet extends DHBaseActorSheet { /* 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 }); + } + /** * */ diff --git a/module/applications/sheets/actors/environment.mjs b/module/applications/sheets/actors/environment.mjs index 30355ccc..e5630ad6 100644 --- a/module/applications/sheets/actors/environment.mjs +++ b/module/applications/sheets/actors/environment.mjs @@ -143,7 +143,6 @@ export default class DhpEnvironment extends DHBaseActorSheet { /* Application Clicks Actions */ /* -------------------------------------------- */ - /** * Toggle the used state of a resource dice. * @type {ApplicationClickAction} @@ -177,5 +176,4 @@ export default class DhpEnvironment extends DHBaseActorSheet { }, {}) }); } - } diff --git a/module/applications/sheets/api/base-actor.mjs b/module/applications/sheets/api/base-actor.mjs index 273a3c67..e1226416 100644 --- a/module/applications/sheets/api/base-actor.mjs +++ b/module/applications/sheets/api/base-actor.mjs @@ -61,6 +61,10 @@ export default class DHBaseActorSheet extends DHApplicationMixin(ActorSheetV2) { async _prepareContext(_options) { const context = await super._prepareContext(_options); context.isNPC = this.document.isNPC; + context.useResourcePips = game.settings.get( + CONFIG.DH.id, + CONFIG.DH.SETTINGS.gameSettings.appearance + ).useResourcePips; context.showAttribution = !game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance) .hideAttribution; diff --git a/module/data/settings/Appearance.mjs b/module/data/settings/Appearance.mjs index dfdd17e2..47909b2c 100644 --- a/module/data/settings/Appearance.mjs +++ b/module/data/settings/Appearance.mjs @@ -18,6 +18,7 @@ export default class DhAppearance extends foundry.abstract.DataModel { }); return { + useResourcePips: new BooleanField({ initial: false }), displayFear: new StringField({ required: true, choices: CONFIG.DH.GENERAL.fearDisplay, diff --git a/module/systemRegistration/handlebars.mjs b/module/systemRegistration/handlebars.mjs index 7bc9a8ff..582c9c29 100644 --- a/module/systemRegistration/handlebars.mjs +++ b/module/systemRegistration/handlebars.mjs @@ -1,6 +1,7 @@ export const preloadHandlebarsTemplates = async function () { foundry.applications.handlebars.loadTemplates({ - 'daggerheart.inventory-item-compact': 'systems/daggerheart/templates/sheets/global/partials/inventory-item-compact.hbs', + 'daggerheart.inventory-item-compact': + 'systems/daggerheart/templates/sheets/global/partials/inventory-item-compact.hbs', 'daggerheart.inventory-items': 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items-V2.hbs', 'daggerheart.inventory-item': 'systems/daggerheart/templates/sheets/global/partials/inventory-item-V2.hbs' @@ -11,6 +12,7 @@ export const preloadHandlebarsTemplates = async function () { 'systems/daggerheart/templates/sheets/global/partials/domain-card-item.hbs', 'systems/daggerheart/templates/sheets/global/partials/item-resource.hbs', 'systems/daggerheart/templates/sheets/global/partials/resource-section.hbs', + 'systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs', 'systems/daggerheart/templates/components/card-preview.hbs', 'systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs', 'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs', diff --git a/styles/less/global/index.less b/styles/less/global/index.less index db61304a..f51140de 100644 --- a/styles/less/global/index.less +++ b/styles/less/global/index.less @@ -19,3 +19,4 @@ @import './filter-menu.less'; @import './tab-attachments.less'; @import './dice.less'; +@import './resource-bar.less'; diff --git a/styles/less/global/inventory-item.less b/styles/less/global/inventory-item.less index f1d2cdfa..f8194104 100644 --- a/styles/less/global/inventory-item.less +++ b/styles/less/global/inventory-item.less @@ -72,7 +72,7 @@ flex: 0 0 40px; height: 40px; position: relative; - &:has(.roll-img) { + &:has(.roll-img) { cursor: pointer; } @@ -249,9 +249,9 @@ &.inventory-item-compact { display: grid; - grid-template: - "img name controls" auto - "img labels labels" 1fr + grid-template: + 'img name controls' auto + 'img labels labels' 1fr / 40px 1fr min-content; column-gap: 8px; diff --git a/styles/less/global/resource-bar.less b/styles/less/global/resource-bar.less new file mode 100644 index 00000000..be9bc68b --- /dev/null +++ b/styles/less/global/resource-bar.less @@ -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; + } + } +} diff --git a/styles/less/sheets/actors/adversary/sidebar.less b/styles/less/sheets/actors/adversary/sidebar.less index ab15fa46..f8537525 100644 --- a/styles/less/sheets/actors/adversary/sidebar.less +++ b/styles/less/sheets/actors/adversary/sidebar.less @@ -109,6 +109,14 @@ gap: 16px; margin-bottom: -10px; + &.pip-display { + top: -15px; + + .resources-section { + justify-content: space-around; + } + } + .resources-section { display: flex; justify-content: space-evenly; diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less index 3d244cdd..e66cba82 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/styles/less/sheets/actors/character/sidebar.less @@ -6,9 +6,16 @@ .appTheme({ .character-sidebar-sheet { background-image: url('../assets/parchments/dh-parchment-dark.png'); + .experience-value { background: url(../assets/svg/experience-shield.svg) no-repeat; } + + .info-section .status-section .status-bar.armor-slots { + .slot-value .slot-bar { + background: @dark-blue; + } + } } }, { &.sheet.actor.dh-style.character .character-sidebar-sheet { @@ -21,6 +28,12 @@ .portrait.death-roll .death-roll-btn { filter: brightness(0) drop-shadow(0 0 3px @dark-blue); } + + .info-section .status-section .status-bar.armor-slots { + .slot-value .slot-bar { + background-image: url('../assets/parchments/dh-parchment-light.png'); + } + } } }); @@ -127,6 +140,15 @@ gap: 10px; margin-bottom: -16px; + &.pip-display { + gap: 15px; + + .resources-section { + justify-content: space-around; + margin: 8px 2px 8px 2px; + } + } + .resources-section { display: flex; justify-content: space-evenly; @@ -136,7 +158,7 @@ display: flex; justify-content: center; position: relative; - width: 100px; + width: 120px; height: 40px; .status-label { @@ -154,13 +176,14 @@ color: light-dark(@beige, @dark-blue); } } + .status-value { position: absolute; display: flex; - padding: 0 6px; + padding: 0 5px; font-size: 1.5rem; align-items: center; - width: 100px; + width: 140px; height: 40px; justify-content: center; text-align: center; @@ -237,6 +260,28 @@ gap: 5px; justify-content: 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 { display: flex; justify-content: center; @@ -252,6 +297,7 @@ width: 95px; border-radius: 3px; background: light-dark(@dark-blue, @golden); + clip-path: none; h4 { font-weight: bold; @@ -261,6 +307,66 @@ font-size: var(--font-size-12); } } + .slot-value { + position: absolute; + display: flex; + padding: 0 5px; + 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); + flex-direction: column; + + .slot-bar { + display: flex; + flex-wrap: wrap; + gap: 4px; + padding: 5px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 6px; + z-index: 1; + background: @dark-blue; + justify-content: center; + color: light-dark(@dark-blue, @golden); + + .armor-slot { + cursor: pointer; + transition: all 0.3s ease; + font-size: var(--font-size-12); + + .fa-shield-halved { + color: light-dark(@dark-blue-40, @golden-40); + } + } + } + .slot-label { + display: flex; + align-items: center; + color: light-dark(@beige, @dark-blue); + background: light-dark(@dark-blue, @golden); + padding: 0 5px; + width: 120%; + font-weight: bold; + border-radius: 5px; + font-size: var(--font-size-12); + flex-wrap: wrap; + justify-content: center; + + .label { + padding-right: 1px; + border-bottom: 1px solid @dark-golden; + } + + .value { + padding-left: 6px; + border-left: 0; + } + } + } .status-value { position: absolute; display: flex; @@ -292,8 +398,6 @@ color: light-dark(@dark-blue, @beige); backdrop-filter: none; background: transparent; - transition: all 0.3s ease; - &:hover, &:focus { background: @semi-transparent-dark-blue; @@ -306,7 +410,6 @@ width: 30px; } } - .progress-bar { position: absolute; appearance: none; @@ -318,7 +421,6 @@ 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); diff --git a/styles/less/sheets/actors/companion/header.less b/styles/less/sheets/actors/companion/header.less index b85a1819..3616a6b3 100644 --- a/styles/less/sheets/actors/companion/header.less +++ b/styles/less/sheets/actors/companion/header.less @@ -37,11 +37,22 @@ } } + .resource-section { + width: 100%; + display: flex; + justify-content: center; + } + .status-section { display: flex; gap: 5px; justify-content: center; + &.pip-display { + width: 100%; + justify-content: space-around; + } + .status-number { display: flex; flex-direction: column; @@ -84,103 +95,103 @@ } } - .status-bar { - display: flex; - justify-content: center; - position: relative; - width: 100px; - height: 40px; + // .status-bar { + // display: flex; + // justify-content: center; + // position: relative; + // width: 100px; + // 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); + // .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); - } - } - .status-value { - position: absolute; - display: flex; - padding: 0 6px; - font-size: 1.5rem; - align-items: center; - width: 100px; - height: 40px; - justify-content: center; - text-align: center; - z-index: 2; - color: @beige; + // h4 { + // font-weight: bold; + // text-align: center; + // line-height: 18px; + // color: light-dark(@beige, @dark-blue); + // } + // } + // .status-value { + // position: absolute; + // display: flex; + // padding: 0 6px; + // font-size: 1.5rem; + // align-items: center; + // width: 100px; + // 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; + // 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; + // &.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); - } - } - } + // &: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; + // .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; - } - } - } + // &::-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; + // } + // } + // } .level-div { white-space: nowrap; diff --git a/styles/less/sheets/actors/party/resources.less b/styles/less/sheets/actors/party/resources.less index d7e126c5..9f3eae73 100644 --- a/styles/less/sheets/actors/party/resources.less +++ b/styles/less/sheets/actors/party/resources.less @@ -1,196 +1,196 @@ -@import '../../../utils/colors.less'; -@import '../../../utils/fonts.less'; -@import '../../../utils/mixin.less'; - -body.game:is(.performance-low, .noblur) { - .application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources { - background: light-dark(@dark-blue, @dark-golden); - - .actor-name { - background: light-dark(@dark-blue, @dark-golden); - } - } -} - -.application.sheet.daggerheart.actor.dh-style.party { - .tab.resources { - max-height: 400px; - overflow: auto; - - .actors-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 10px; - align-items: center; - width: 100%; - justify-content: center; - - .actor-resources { - display: flex; - flex-direction: column; - position: relative; - background: light-dark(@dark-blue-40, @dark-golden-40); - border-radius: 6px; - max-width: 230px; - height: -webkit-fill-available; - - .actor-name { - position: absolute; - top: 0px; - background: light-dark(@dark-blue-90, @dark-golden-80); - backdrop-filter: blur(6.5px); - border-radius: 6px 6px 0px 0px; - text-align: center; - width: 100%; - z-index: 1; - font-size: var(--font-size-20); - color: light-dark(@beige, @golden); - font-weight: bold; - padding: 5px 0; - } - - .actor-img { - height: 150px; - object-fit: cover; - object-position: top center; - border-radius: 6px 6px 0px 0px; - mask-image: linear-gradient(180deg, black 88%, transparent 100%); - } - - .resources { - display: flex; - flex-direction: column; - gap: 10px; - align-items: center; - margin: 10px; - - .slot-section { - display: flex; - flex-direction: column; - align-items: center; - - .slot-bar { - display: flex; - flex-wrap: wrap; - gap: 5px; - width: 239px; - - background-color: light-dark(@dark-blue-10, @dark-blue); - color: light-dark(@dark-blue, @golden); - padding: 5px; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 6px; - width: fit-content; - - .armor-slot { - cursor: pointer; - transition: all 0.3s ease; - font-size: var(--font-size-12); - - .fa-shield-halved { - color: light-dark(@dark-blue-40, @golden-40); - } - } - - .slot { - width: 20px; - 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); - } - } - } - .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 @dark-golden; - } - } - } - - .hope-section { - position: relative; - display: flex; - gap: 10px; - background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); - padding: 5px 10px; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 3px; - align-items: center; - width: fit-content; - - h4 { - font-size: var(--font-size-12); - font-weight: bold; - text-transform: uppercase; - color: light-dark(@dark-blue, @golden); - } - - .hope-value { - display: flex; - cursor: pointer; - font-size: var(--font-size-12); - } - } - - .threshold-section { - display: flex; - align-self: center; - gap: 10px; - background-color: light-dark(transparent, @dark-blue); - color: light-dark(@dark-blue, @golden); - padding: 5px 10px; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 3px; - align-items: center; - width: fit-content; - - h4 { - font-size: var(--font-size-12); - font-weight: bold; - text-transform: uppercase; - color: light-dark(@dark-blue, @golden); - - &.threshold-value { - color: light-dark(@dark, @beige); - } - } - } - } - } - } - .actors-dragger { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: 100%; - height: 40px; - border: 1px dashed light-dark(@dark-blue-50, @beige-50); - border-radius: 3px; - color: light-dark(@dark-blue-50, @beige-50); - } - } -} +@import '../../../utils/colors.less'; +@import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; + +body.game:is(.performance-low, .noblur) { + .application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources { + background: light-dark(@dark-blue, @dark-golden); + + .actor-name { + background: light-dark(@dark-blue, @dark-golden); + } + } +} + +.application.sheet.daggerheart.actor.dh-style.party { + .tab.resources { + max-height: 400px; + overflow: auto; + + .actors-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + align-items: center; + width: 100%; + justify-content: center; + + .actor-resources { + display: flex; + flex-direction: column; + position: relative; + background: light-dark(@dark-blue-40, @dark-golden-40); + border-radius: 6px; + max-width: 230px; + height: -webkit-fill-available; + + .actor-name { + position: absolute; + top: 0px; + background: light-dark(@dark-blue-90, @dark-golden-80); + backdrop-filter: blur(6.5px); + border-radius: 6px 6px 0px 0px; + text-align: center; + width: 100%; + z-index: 1; + font-size: var(--font-size-20); + color: light-dark(@beige, @golden); + font-weight: bold; + padding: 5px 0; + } + + .actor-img { + height: 150px; + object-fit: cover; + object-position: top center; + border-radius: 6px 6px 0px 0px; + mask-image: linear-gradient(180deg, black 88%, transparent 100%); + } + + .resources { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + margin: 10px; + + .slot-section { + display: flex; + flex-direction: column; + align-items: center; + + .slot-bar { + display: flex; + flex-wrap: wrap; + gap: 5px; + width: 239px; + + background-color: light-dark(@dark-blue-10, @dark-blue); + color: light-dark(@dark-blue, @golden); + padding: 5px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 6px; + width: fit-content; + + .armor-slot { + cursor: pointer; + transition: all 0.3s ease; + font-size: var(--font-size-12); + + .fa-shield-halved { + color: light-dark(@dark-blue-40, @golden-40); + } + } + + .slot { + width: 20px; + 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); + } + } + } + .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); + } + } + } + + .hope-section { + position: relative; + display: flex; + gap: 10px; + background-color: light-dark(transparent, @dark-blue); + color: light-dark(@dark-blue, @golden); + padding: 5px 10px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 3px; + align-items: center; + width: fit-content; + + h4 { + font-size: var(--font-size-12); + font-weight: bold; + text-transform: uppercase; + color: light-dark(@dark-blue, @golden); + } + + .hope-value { + display: flex; + cursor: pointer; + font-size: var(--font-size-12); + } + } + + .threshold-section { + display: flex; + align-self: center; + gap: 10px; + background-color: light-dark(transparent, @dark-blue); + color: light-dark(@dark-blue, @golden); + padding: 5px 10px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 3px; + align-items: center; + width: fit-content; + + h4 { + font-size: var(--font-size-12); + font-weight: bold; + text-transform: uppercase; + color: light-dark(@dark-blue, @golden); + + &.threshold-value { + color: light-dark(@dark, @beige); + } + } + } + } + } + } + .actors-dragger { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 100%; + height: 40px; + border: 1px dashed light-dark(@dark-blue-50, @beige-50); + border-radius: 3px; + color: light-dark(@dark-blue-50, @beige-50); + } + } +} diff --git a/templates/settings/appearance-settings/main.hbs b/templates/settings/appearance-settings/main.hbs index 9cab271a..fda6243b 100644 --- a/templates/settings/appearance-settings/main.hbs +++ b/templates/settings/appearance-settings/main.hbs @@ -1,4 +1,8 @@
+ {{formGroup + fields.useResourcePips + value=setting.useResourcePips + localize=true}} {{formGroup fields.displayFear value=setting.displayFear diff --git a/templates/sheets/actors/adversary/sidebar.hbs b/templates/sheets/actors/adversary/sidebar.hbs index 0909c969..38a5c11f 100644 --- a/templates/sheets/actors/adversary/sidebar.hbs +++ b/templates/sheets/actors/adversary/sidebar.hbs @@ -4,35 +4,10 @@ -
+
-
-
- - / - {{source.system.resources.hitPoints.max}} -
- -
-

{{localize 'DAGGERHEART.GENERAL.HitPoints.short'}}

-
- -
-
-
- - / - {{source.system.resources.stress.max}} -
- -
-

{{localize 'DAGGERHEART.GENERAL.stress'}}

-
-
+ {{> "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 label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs index 9ad2f0d3..9ef3939a 100644 --- a/templates/sheets/actors/character/sidebar.hbs +++ b/templates/sheets/actors/character/sidebar.hbs @@ -15,44 +15,12 @@
-
+
-
-
- - / - {{document.system.resources.hitPoints.max}} -
- -
-

{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}

-
- -
-
-
- - / - {{document.system.resources.stress.max}} -
- -
-

{{localize "DAGGERHEART.GENERAL.stress"}}

-
-
+ {{> "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 label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
-
+

{{document.system.evasion}}

@@ -64,10 +32,29 @@ {{#if document.system.armor.system.marks}}
+ {{#if useResourcePips}} +
+
+ {{#times document.system.armorScore}} + + {{#if (gte ../document.system.armor.system.marks.value (add this 1))}} + + {{else}} + + {{/if}} + + {{/times}} +
+
+ {{localize "DAGGERHEART.GENERAL.armorSlots"}} + {{document.system.armor.system.marks.value}} / {{document.system.armorScore}} +
+
+ {{else}}
-

-

/

-

{{document.system.armorScore}}

+ + / + {{document.system.armorScore}}

{{localize "DAGGERHEART.GENERAL.armorSlots"}}

+ {{/if}}
{{else}}
diff --git a/templates/sheets/actors/companion/header.hbs b/templates/sheets/actors/companion/header.hbs index a6127282..a543f71c 100644 --- a/templates/sheets/actors/companion/header.hbs +++ b/templates/sheets/actors/companion/header.hbs @@ -8,7 +8,12 @@ placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}' /> -
+ {{#if useResourcePips}} +
+ {{> "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 }} +
+ {{/if}} +

{{document.system.evasion}}

@@ -17,21 +22,11 @@

{{localize "DAGGERHEART.GENERAL.evasion"}}

-
-
- - / - {{document.system.resources.stress.max}} + {{#unless useResourcePips}} +
+ {{> "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" }}
- -
-

{{localize "DAGGERHEART.GENERAL.stress"}}

-
-
+ {{/unless}}

{{localize 'DAGGERHEART.GENERAL.level'}} diff --git a/templates/sheets/global/partials/resource-bar.hbs b/templates/sheets/global/partials/resource-bar.hbs new file mode 100644 index 00000000..c0d13e54 --- /dev/null +++ b/templates/sheets/global/partials/resource-bar.hbs @@ -0,0 +1,35 @@ +
+ {{#if useResourcePips}} +
+
+ {{#times resource.max}} + + + {{/times}} + + {{#times resource.emptyPips}} + + {{/times}} +
+
+ {{localize label}} + {{resource.value}} / {{resource.max}} +
+
+ {{else}} +
+ + / + {{resource.max}} +
+ +
+

{{localize label}}

+
+ {{/if}} +
\ No newline at end of file