From e139cd4dae2d3e504d923ac2d39619d5202e15c4 Mon Sep 17 00:00:00 2001 From: moliloo Date: Fri, 29 Aug 2025 20:18:17 -0300 Subject: [PATCH] enhance chat messages styles --- lang/en.json | 2 + module/helpers/handlebarsHelper.mjs | 11 +- styles/less/ui/chat/damage-summary.less | 73 ++++++++---- styles/less/ui/chat/effect-summary.less | 146 +++++++++++++++++++++--- templates/ui/chat/damageSummary.hbs | 37 ++++-- templates/ui/chat/effectSummary.hbs | 40 ++++--- 6 files changed, 244 insertions(+), 65 deletions(-) diff --git a/lang/en.json b/lang/en.json index 6c84f92b..81a427fd 100755 --- a/lang/en.json +++ b/lang/en.json @@ -2332,6 +2332,7 @@ "rollHealing": "Roll Healing", "applyEffect": "Apply Effects" }, + "clearResource": "Clear {quantity} {resource}", "damageSummary": { "title": "Damage Applied", "healingTitle": "Healing Applied" @@ -2366,6 +2367,7 @@ "heal": "Heal", "applyHealing": "Apply Healing" }, + "markResource": "Mark {quantity} {resource}", "reroll": { "confirmTitle": "Reroll Dice", "confirmText": "Are you sure you want to reroll?" diff --git a/module/helpers/handlebarsHelper.mjs b/module/helpers/handlebarsHelper.mjs index 83220307..847b04ce 100644 --- a/module/helpers/handlebarsHelper.mjs +++ b/module/helpers/handlebarsHelper.mjs @@ -14,7 +14,8 @@ export default class RegisterHandlebarsHelpers { getProperty: foundry.utils.getProperty, setVar: this.setVar, empty: this.empty, - pluralize: this.pluralize + pluralize: this.pluralize, + positive: this.positive }); } static add(a, b) { @@ -76,10 +77,10 @@ export default class RegisterHandlebarsHelpers { /** * Pluralize helper that returns the appropriate localized string based on count - * @param {number} count - The number to check for plurality + * @param {number} count - The number to check for plurality * @param {string} baseKey - The base localization key (e.g., "DAGGERHEART.GENERAL.Target") * @returns {string} The localized singular or plural string - * + * * Usage: {{pluralize currentTargets.length "DAGGERHEART.GENERAL.Target"}} * Returns: "Target" if count is exactly 1, "Targets" if count is 0, 2+, or invalid */ @@ -89,4 +90,8 @@ export default class RegisterHandlebarsHelpers { const key = isSingular ? `${baseKey}.single` : `${baseKey}.plural`; return game.i18n.localize(key); } + + static positive(a) { + return Math.abs(Number(a)); + } } diff --git a/styles/less/ui/chat/damage-summary.less b/styles/less/ui/chat/damage-summary.less index 5b3fadac..02fdbadf 100644 --- a/styles/less/ui/chat/damage-summary.less +++ b/styles/less/ui/chat/damage-summary.less @@ -1,34 +1,71 @@ +@import '../../utils/colors.less'; + +#interface.theme-light { + .daggerheart.chat.damage-summary .token-target-container { + &:hover { + background: @dark-blue-10; + } + + header { + .actor-name { + color: @dark; + } + + &::after { + background: @dark-blue; + } + } + } +} + .daggerheart.chat.damage-summary { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4px; + display: flex; + flex-direction: column; + gap: 5px; + padding: 0; .token-target-container { display: flex; flex-direction: column; gap: 2px; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 6px; cursor: pointer; + transition: all 0.3s ease; + border-radius: 6px; + + &:hover { + background: @golden-10; + } header { display: flex; align-items: center; - gap: 2px; - border-bottom: 1px solid light-dark(@dark-blue, @golden); + gap: 5px; pointer-events: none; + position: relative; + margin-bottom: 10px; img { - flex: 0; width: 40px; height: 40px; - padding: 0 0 0 2px; + padding: 0; + border-radius: 50%; } - label { - flex: 1; - text-align: center; - padding: 0 2px 0 0; + .actor-name { + margin: 0; + color: @beige; + font-size: var(--font-size-20); + padding: 8px; + } + + &::after { + content: ''; + position: absolute; + bottom: -10px; + background: @golden; + mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%); + height: 2px; + width: 100%; } } @@ -36,18 +73,14 @@ display: flex; flex-direction: column; justify-content: center; - gap: 2px; + gap: 5px; pointer-events: none; + margin-top: 5px; + list-style: disc; .damage-row { - display: flex; - align-items: center; padding: 0 2px; gap: 4px; - - label { - font-weight: bold; - } } } } diff --git a/styles/less/ui/chat/effect-summary.less b/styles/less/ui/chat/effect-summary.less index 151c95e0..9bea1fd9 100644 --- a/styles/less/ui/chat/effect-summary.less +++ b/styles/less/ui/chat/effect-summary.less @@ -1,54 +1,166 @@ +@import '../../utils/colors.less'; + +#interface.theme-light { + .daggerheart.chat.effect-summary { + .effect-header, + .actor-header { + &::before, + &::after { + height: 2px; + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, @dark-blue 100%); + } + + &::after { + background: linear-gradient(90deg, @dark-blue 0%, rgba(0, 0, 0, 0) 100%); + } + + span { + color: @dark; + } + } + + .token-target-container, + .effect-target-container { + .effect-label .title, + .title { + color: @dark-blue; + } + + .effect-label { + border-color: @dark-blue; + } + + &:hover { + background: @dark-blue-10; + } + } + } +} + .daggerheart.chat.effect-summary { display: flex; flex-direction: column; - h5 { - color: light-dark(@dark, @beige); - margin: 0; - text-align: center; + .effect-header, + .actor-header { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 5px; + + &::before, + &::after { + content: ''; + flex: 1; + height: 2px; + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, @golden 100%); + } + + &::after { + background: linear-gradient(90deg, @golden 0%, rgba(0, 0, 0, 0) 100%); + } + + span { + color: @beige; + padding: 0 10px; + white-space: nowrap; + } } .effects-container { display: flex; flex-wrap: wrap; - gap: 4px; + gap: 5px; margin-bottom: 8px; } .targets-container { display: flex; flex-direction: column; - gap: 4px; + gap: 5px; } - .effect-target-container, .token-target-container { display: flex; align-items: center; - gap: 2px; - border: 1px solid light-dark(@dark-blue, @golden); + gap: 13px; border-radius: 6px; padding: 0 2px; + border-radius: 6px; + background: transparent; + transition: all 0.3s ease; + padding: 5px; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + background: @golden-10; + } img { - width: 24px; - height: 24px; - flex: 0; + width: 40px; + height: 40px; + border-radius: 50%; pointer-events: none; } - label { - flex: 1; - text-align: center; + .title { + font-size: var(--font-size-20); + color: @golden; + font-weight: 700; + margin: 0; pointer-events: none; } } - .token-target-container { + details[open] { + .fa-chevron-down { + transform: rotate(180deg); + transition: all 0.3s ease; + } + } + + .effect-target-container { + width: 100%; + transition: all 0.3s ease; cursor: pointer; &:hover { - filter: drop-shadow(0 0 3px @golden); + background: @golden-10; + } + + .fa-chevron-down { + transition: all 0.3s ease; + margin-left: auto; + } + + .effect-label { + display: flex; + flex-direction: row; + align-items: center; + margin: 8px 8px 0; + padding-bottom: 5px; + width: -webkit-fill-available; + gap: 13px; + border-bottom: 1px solid @golden; + + .effect-img { + width: 40px; + height: 40px; + border-radius: 3px; + object-fit: cover; + } + + .title { + font-size: var(--font-size-20); + color: @golden; + font-weight: 700; + margin: 0; + } + } + + .description { + padding: 8px; } } } diff --git a/templates/ui/chat/damageSummary.hbs b/templates/ui/chat/damageSummary.hbs index 902594f3..c88d0cbf 100644 --- a/templates/ui/chat/damageSummary.hbs +++ b/templates/ui/chat/damageSummary.hbs @@ -1,18 +1,33 @@ -
+ + {{/each}} -
\ No newline at end of file + \ No newline at end of file diff --git a/templates/ui/chat/effectSummary.hbs b/templates/ui/chat/effectSummary.hbs index c908d5ff..047a524e 100644 --- a/templates/ui/chat/effectSummary.hbs +++ b/templates/ui/chat/effectSummary.hbs @@ -1,21 +1,33 @@
-
{{localize "DAGGERHEART.GENERAL.Effect.plural"}}
+
+ {{localize "DAGGERHEART.GENERAL.Effect.plural"}} +
{{#each effects}} -
- - -
+
+ + +

{{this.name}}

+ + +
+ {{{this.description}}} +
+
{{/each}}
-
{{localize "DAGGERHEART.UI.Chat.appliedTo"}}
-
- {{#each targets}} -
- - -
- {{/each}} -
+ {{#if targets}} +
+ {{localize "DAGGERHEART.UI.Chat.appliedTo"}} +
+
+ {{#each targets}} +
+ +

{{this.name}}

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