cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-15 13:11:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

[PR] [Party Sheets] Sidebar character sheet changes (#1249)

Browse source 
* 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 <williambjrklund@gmail.com>
This commit is contained in:
Nikhil Nagarajan 2025-11-10 10:28:49 -05:00 • committed by GitHub
parent a50fb9f9ac
commit ad90f74d20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 774 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

3
lang/en.json
View file

@ -2248,7 +2248,8 @@
"target": { "target": {
"label": "Target" "label": "Target"
} }
} },
"useResourcePips": { "label": "Pip Display For Resources" }
}, },
"fearDisplay": { "fearDisplay": {
"token": "Tokens", "token": "Tokens",

33
module/applications/sheets/actors/adversary.mjs
View file

@ -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}

44
module/applications/sheets/actors/character.mjs
View file

@ -19,6 +19,9 @@ export default class CharacterSheet extends DHBaseActorSheet {
actions: { actions: {
toggleVault: CharacterSheet.#toggleVault, toggleVault: CharacterSheet.#toggleVault,
rollAttribute: CharacterSheet.#rollAttribute, rollAttribute: CharacterSheet.#rollAttribute,
toggleHitPoints: CharacterSheet.#toggleHitPoints,
toggleStress: CharacterSheet.#toggleStress,
toggleArmor: CharacterSheet.#toggleArmor,
toggleHope: CharacterSheet.#toggleHope, toggleHope: CharacterSheet.#toggleHope,
toggleLoadoutView: CharacterSheet.#toggleLoadoutView, toggleLoadoutView: CharacterSheet.#toggleLoadoutView,
openPack: CharacterSheet.#openPack, openPack: CharacterSheet.#openPack,
@ -196,6 +199,16 @@ export default class CharacterSheet extends DHBaseActorSheet {
return acc; 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 = { context.inventory = {
currency: { currency: {
title: game.i18n.localize('DAGGERHEART.CONFIG.Gold.title'), title: game.i18n.localize('DAGGERHEART.CONFIG.Gold.title'),
@ -746,6 +759,37 @@ export default class CharacterSheet extends DHBaseActorSheet {
this.render(); 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. * Toggles a hope resource value.
* @type {ApplicationClickAction} * @type {ApplicationClickAction}

11
module/applications/sheets/actors/companion.mjs
View file

@ -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 });
}
/** /**
* *
*/ */

2
module/applications/sheets/actors/environment.mjs
View file

@ -143,7 +143,6 @@ export default class DhpEnvironment extends DHBaseActorSheet {
/* Application Clicks Actions */ /* Application Clicks Actions */
/* -------------------------------------------- */ /* -------------------------------------------- */
/** /**
* Toggle the used state of a resource dice. * Toggle the used state of a resource dice.
* @type {ApplicationClickAction} * @type {ApplicationClickAction}
@ -177,5 +176,4 @@ export default class DhpEnvironment extends DHBaseActorSheet {
}, {}) }, {})
}); });
} }
} }

4
module/applications/sheets/api/base-actor.mjs
View file

@ -61,6 +61,10 @@ export default class DHBaseActorSheet extends DHApplicationMixin(ActorSheetV2) {
async _prepareContext(_options) { async _prepareContext(_options) {
const context = await super._prepareContext(_options); const context = await super._prepareContext(_options);
context.isNPC = this.document.isNPC; 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) context.showAttribution = !game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance)
.hideAttribution; .hideAttribution;

1
module/data/settings/Appearance.mjs
View file

@ -18,6 +18,7 @@ export default class DhAppearance extends foundry.abstract.DataModel {
}); });
return { return {
useResourcePips: new BooleanField({ initial: false }),
displayFear: new StringField({ displayFear: new StringField({
required: true, required: true,
choices: CONFIG.DH.GENERAL.fearDisplay, choices: CONFIG.DH.GENERAL.fearDisplay,

4
module/systemRegistration/handlebars.mjs
View file

@ -1,6 +1,7 @@
export const preloadHandlebarsTemplates = async function () { export const preloadHandlebarsTemplates = async function () {
foundry.applications.handlebars.loadTemplates({ 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': 'daggerheart.inventory-items':
'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items-V2.hbs', 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items-V2.hbs',
'daggerheart.inventory-item': 'systems/daggerheart/templates/sheets/global/partials/inventory-item-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/domain-card-item.hbs',
'systems/daggerheart/templates/sheets/global/partials/item-resource.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-section.hbs',
'systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs',
'systems/daggerheart/templates/components/card-preview.hbs', 'systems/daggerheart/templates/components/card-preview.hbs',
'systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs', 'systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs',
'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs', 'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs',

1
styles/less/global/index.less
View file

@ -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';

8
styles/less/global/inventory-item.less
View file

@ -72,7 +72,7 @@
flex: 0 0 40px; flex: 0 0 40px;
height: 40px; height: 40px;
position: relative; position: relative;
&:has(.roll-img) { &:has(.roll-img) {
cursor: pointer; cursor: pointer;
} }
@ -249,9 +249,9 @@
&.inventory-item-compact { &.inventory-item-compact {
display: grid; display: grid;
grid-template: grid-template:
"img name controls" auto 'img name controls' auto
"img labels labels" 1fr 'img labels labels' 1fr
/ 40px 1fr min-content; / 40px 1fr min-content;
column-gap: 8px; column-gap: 8px;

178
styles/less/global/resource-bar.less Normal file
View 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;
}
}
}

8
styles/less/sheets/actors/adversary/sidebar.less
View file

@ -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;

116
styles/less/sheets/actors/character/sidebar.less
View file

@ -6,9 +6,16 @@
.appTheme({ .appTheme({
.character-sidebar-sheet { .character-sidebar-sheet {
background-image: url('../assets/parchments/dh-parchment-dark.png'); background-image: url('../assets/parchments/dh-parchment-dark.png');
.experience-value { .experience-value {
background: url(../assets/svg/experience-shield.svg) no-repeat; 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 { &.sheet.actor.dh-style.character .character-sidebar-sheet {
@ -21,6 +28,12 @@
.portrait.death-roll .death-roll-btn { .portrait.death-roll .death-roll-btn {
filter: brightness(0) drop-shadow(0 0 3px @dark-blue); 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; 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-evenly; justify-content: space-evenly;
@ -136,7 +158,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
width: 100px; width: 120px;
height: 40px; height: 40px;
.status-label { .status-label {
@ -154,13 +176,14 @@
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 5px;
font-size: 1.5rem; font-size: 1.5rem;
align-items: center; align-items: center;
width: 100px; width: 140px;
height: 40px; height: 40px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -237,6 +260,28 @@
gap: 5px; gap: 5px;
justify-content: center; 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 { .status-bar.armor-slots {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -252,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;
@ -261,6 +307,66 @@
font-size: var(--font-size-12); 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 { .status-value {
position: absolute; position: absolute;
display: flex; display: flex;
@ -292,8 +398,6 @@
color: light-dark(@dark-blue, @beige); color: light-dark(@dark-blue, @beige);
backdrop-filter: none; backdrop-filter: none;
background: transparent; background: transparent;
transition: all 0.3s ease;
&:hover, &:hover,
&:focus { &:focus {
background: @semi-transparent-dark-blue; background: @semi-transparent-dark-blue;
@ -306,7 +410,6 @@
width: 30px; width: 30px;
} }
} }
.progress-bar { .progress-bar {
position: absolute; position: absolute;
appearance: none; appearance: none;
@ -318,7 +421,6 @@
background: light-dark(transparent, @dark-blue); background: light-dark(transparent, @dark-blue);
border-bottom: none; border-bottom: none;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
&::-webkit-progress-bar { &::-webkit-progress-bar {
border: none; border: none;
background: light-dark(transparent, @dark-blue); background: light-dark(transparent, @dark-blue);

191
styles/less/sheets/actors/companion/header.less
View file

@ -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;

392
styles/less/sheets/actors/party/resources.less
View file

@ -1,196 +1,196 @@
@import '../../../utils/colors.less'; @import '../../../utils/colors.less';
@import '../../../utils/fonts.less'; @import '../../../utils/fonts.less';
@import '../../../utils/mixin.less'; @import '../../../utils/mixin.less';
body.game:is(.performance-low, .noblur) { body.game:is(.performance-low, .noblur) {
.application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources { .application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources {
background: light-dark(@dark-blue, @dark-golden); background: light-dark(@dark-blue, @dark-golden);
.actor-name { .actor-name {
background: light-dark(@dark-blue, @dark-golden); background: light-dark(@dark-blue, @dark-golden);
} }
} }
} }
.application.sheet.daggerheart.actor.dh-style.party { .application.sheet.daggerheart.actor.dh-style.party {
.tab.resources { .tab.resources {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
.actors-list { .actors-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
.actor-resources { .actor-resources {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background: light-dark(@dark-blue-40, @dark-golden-40); background: light-dark(@dark-blue-40, @dark-golden-40);
border-radius: 6px; border-radius: 6px;
max-width: 230px; max-width: 230px;
height: -webkit-fill-available; height: -webkit-fill-available;
.actor-name { .actor-name {
position: absolute; position: absolute;
top: 0px; top: 0px;
background: light-dark(@dark-blue-90, @dark-golden-80); background: light-dark(@dark-blue-90, @dark-golden-80);
backdrop-filter: blur(6.5px); backdrop-filter: blur(6.5px);
border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px;
text-align: center; text-align: center;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
font-size: var(--font-size-20); font-size: var(--font-size-20);
color: light-dark(@beige, @golden); color: light-dark(@beige, @golden);
font-weight: bold; font-weight: bold;
padding: 5px 0; padding: 5px 0;
} }
.actor-img { .actor-img {
height: 150px; height: 150px;
object-fit: cover; object-fit: cover;
object-position: top center; object-position: top center;
border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px;
mask-image: linear-gradient(180deg, black 88%, transparent 100%); mask-image: linear-gradient(180deg, black 88%, transparent 100%);
} }
.resources { .resources {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
margin: 10px; margin: 10px;
.slot-section { .slot-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.slot-bar { .slot-bar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5px; gap: 5px;
width: 239px; width: 239px;
background-color: light-dark(@dark-blue-10, @dark-blue); background-color: light-dark(@dark-blue-10, @dark-blue);
color: light-dark(@dark-blue, @golden); color: light-dark(@dark-blue, @golden);
padding: 5px; padding: 5px;
border: 1px solid light-dark(@dark-blue, @golden); border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px; border-radius: 6px;
width: fit-content; width: fit-content;
.armor-slot { .armor-slot {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
font-size: var(--font-size-12); font-size: var(--font-size-12);
.fa-shield-halved { .fa-shield-halved {
color: light-dark(@dark-blue-40, @golden-40); color: light-dark(@dark-blue-40, @golden-40);
} }
} }
.slot { .slot {
width: 20px; width: 20px;
height: 10px; height: 10px;
border: 1px solid light-dark(@dark-blue, @golden); border: 1px solid light-dark(@dark-blue, @golden);
background: light-dark(@dark-blue-10, @golden-10); background: light-dark(@dark-blue-10, @golden-10);
border-radius: 3px; border-radius: 3px;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
&.filled { &.filled {
background: light-dark(@dark-blue, @golden); background: light-dark(@dark-blue, @golden);
} }
} }
} }
.slot-label { .slot-label {
display: flex; display: flex;
align-items: center; align-items: center;
color: light-dark(@beige, @dark-blue); color: light-dark(@beige, @dark-blue);
background: light-dark(@dark-blue, @golden); background: light-dark(@dark-blue, @golden);
padding: 0 5px; padding: 0 5px;
width: fit-content; width: fit-content;
font-weight: bold; font-weight: bold;
border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px;
font-size: var(--font-size-12); font-size: var(--font-size-12);
.label { .label {
padding-right: 5px; padding-right: 5px;
} }
.value { .value {
padding-left: 6px; padding-left: 6px;
border-left: 1px solid @dark-golden; border-left: 1px solid light-dark(@beige, @dark-golden);
} }
} }
} }
.hope-section { .hope-section {
position: relative; position: relative;
display: flex; display: flex;
gap: 10px; gap: 10px;
background-color: light-dark(transparent, @dark-blue); background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden); color: light-dark(@dark-blue, @golden);
padding: 5px 10px; padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden); border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px; border-radius: 3px;
align-items: center; align-items: center;
width: fit-content; width: fit-content;
h4 { h4 {
font-size: var(--font-size-12); font-size: var(--font-size-12);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
color: light-dark(@dark-blue, @golden); color: light-dark(@dark-blue, @golden);
} }
.hope-value { .hope-value {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
font-size: var(--font-size-12); font-size: var(--font-size-12);
} }
} }
.threshold-section { .threshold-section {
display: flex; display: flex;
align-self: center; align-self: center;
gap: 10px; gap: 10px;
background-color: light-dark(transparent, @dark-blue); background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden); color: light-dark(@dark-blue, @golden);
padding: 5px 10px; padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden); border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px; border-radius: 3px;
align-items: center; align-items: center;
width: fit-content; width: fit-content;
h4 { h4 {
font-size: var(--font-size-12); font-size: var(--font-size-12);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
color: light-dark(@dark-blue, @golden); color: light-dark(@dark-blue, @golden);
&.threshold-value { &.threshold-value {
color: light-dark(@dark, @beige); color: light-dark(@dark, @beige);
} }
} }
} }
} }
} }
} }
.actors-dragger { .actors-dragger {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 40px; height: 40px;
border: 1px dashed light-dark(@dark-blue-50, @beige-50); border: 1px dashed light-dark(@dark-blue-50, @beige-50);
border-radius: 3px; border-radius: 3px;
color: light-dark(@dark-blue-50, @beige-50); color: light-dark(@dark-blue-50, @beige-50);
} }
} }
} }

4
templates/settings/appearance-settings/main.hbs
View file

@ -1,4 +1,8 @@
<section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}"> <section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
{{formGroup
fields.useResourcePips
value=setting.useResourcePips
localize=true}}
{{formGroup {{formGroup
fields.displayFear fields.displayFear
value=setting.displayFear value=setting.displayFear

31
templates/sheets/actors/adversary/sidebar.hbs
View file

@ -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">

66
templates/sheets/actors/character/sidebar.hbs
View file

@ -15,44 +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">
<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='{{document.system.resources.hitPoints.max}}'
value="{{document.system.resources.hitPoints.value}}" type="number">
<span>/</span>
<span class="bar-label">{{document.system.resources.hitPoints.max}}</span>
</div>
<progress
class='progress-bar'
max='{{document.system.resources.hitPoints.max}}'
value='{{document.system.resources.hitPoints.value}}'
></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='{{document.system.resources.stress.max}}'
value="{{document.system.resources.stress.value}}" type="number">
<span>/</span>
<span class="bar-label">{{document.system.resources.stress.max}}</span>
</div>
<progress
class='progress-bar stress-color'
value='{{document.system.resources.stress.value}}'
min="0"
max='{{document.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 {{#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>
@ -64,10 +32,29 @@
{{#if document.system.armor.system.marks}} {{#if document.system.armor.system.marks}}
<div class="status-bar armor-slots"> <div class="status-bar armor-slots">
{{#if useResourcePips}}
<div class='slot-value'>
<div class="slot-bar">
{{#times document.system.armorScore}}
<a class='armor-slot' data-action='toggleArmor' data-value="{{add this 1}}">
{{#if (gte ../document.system.armor.system.marks.value (add this 1))}}
<i class="fa-solid fa-shield"></i>
{{else}}
<i class="fa-solid fa-shield-halved"></i>
{{/if}}
</a>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
<span class="value">{{document.system.armor.system.marks.value}} / {{document.system.armorScore}}</span>
</div>
</div>
{{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'
@ -77,6 +64,7 @@
<div class="status-label"> <div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4> <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
</div> </div>
{{/if}}
</div> </div>
{{else}} {{else}}
<div class="status-number armor-slots"> <div class="status-number armor-slots">

25
templates/sheets/actors/companion/header.hbs
View file

@ -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'}}

35
templates/sheets/global/partials/resource-bar.hbs Normal file
View file

@ -0,0 +1,35 @@
<div class="status-bar">
{{#if useResourcePips}}
<div class='slot-value'>
<div class="slot-bar">
{{#times resource.max}}
<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>
{{/times}}
{{#times resource.emptyPips}}
<span class="empty-slot"></span>
{{/times}}
</div>
<div class="slot-label">
<span class="label">{{localize label}}</span>
<span class="value">{{resource.value}} / {{resource.max}}</span>
</div>
</div>
{{else}}
<div class='status-value'>
<input class="bar-input" name="{{key}}" min="0" max='{{resource.max}}'
value="{{resource.value}}" type="number">
<span>/</span>
<span class="bar-label">{{resource.max}}</span>
</div>
<progress
class='progress-bar'
max='{{resource.max}}'
value='{{resource.value}}'
></progress>
<div class="status-label">
<h4>{{localize label}}</h4>
</div>
{{/if}}
</div>