mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 11:41:08 +01:00
enhance chat messages styles
This commit is contained in:
moliloo
parent
30229407cd
commit
e139cd4dae
6 changed files with 244 additions and 65 deletions
|
|
@ -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?"
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,33 @@
|
|||
<div class="daggerheart chat damage-summary">
|
||||
<ul class="daggerheart chat damage-summary">
|
||||
{{#each targets}}
|
||||
<div class="token-target-container" data-token-uuid="{{this.token.uuid}}">
|
||||
<li class="token-target-container" data-token-uuid="{{this.token.uuid}}">
|
||||
<header>
|
||||
<img src="{{this.token.texture.src}}" />
|
||||
<label>{{this.token.name}}</label>
|
||||
<h2 class="actor-name">{{this.token.name}}</h2>
|
||||
</header>
|
||||
<div class="damage-container">
|
||||
<ul class="damage-container">
|
||||
{{#each this.updates}}
|
||||
<div class="damage-row">
|
||||
<label>{{localize (concat "DAGGERHEART.CONFIG.HealingType." this.key ".name")}}:</label>
|
||||
<div>{{this.value}}</div>
|
||||
</div>
|
||||
<li class="damage-row">
|
||||
{{#if (gte this.value)}}
|
||||
<span>
|
||||
{{
|
||||
localize "DAGGERHEART.UI.Chat.markResource"
|
||||
quantity=this.value
|
||||
resource=(localize (concat "DAGGERHEART.CONFIG.HealingType." this.key ".name"))
|
||||
}}
|
||||
</span>
|
||||
{{else}}
|
||||
<span>
|
||||
{{
|
||||
localize "DAGGERHEART.UI.Chat.clearResource"
|
||||
quantity=(positive this.value)
|
||||
resource=(localize (concat "DAGGERHEART.CONFIG.HealingType." this.key ".name"))
|
||||
}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
{{/each}}
|
||||
</div>
|
||||
</ul>
|
||||
|
|
@ -1,21 +1,33 @@
|
|||
<div class="daggerheart chat effect-summary">
|
||||
<h5>{{localize "DAGGERHEART.GENERAL.Effect.plural"}}</h5>
|
||||
<div class="effect-header">
|
||||
<span>{{localize "DAGGERHEART.GENERAL.Effect.plural"}}</span>
|
||||
</div>
|
||||
<div class="effects-container">
|
||||
{{#each effects}}
|
||||
<div class="effect-target-container" data-tooltip="{{concat "#item#" this.uuid}}">
|
||||
<img src="{{this.img}}" />
|
||||
<label>{{this.name}}</label>
|
||||
</div>
|
||||
<details class="effect-target-container">
|
||||
<summary class="effect-label">
|
||||
<img class="effect-img" src="{{this.img}}" />
|
||||
<h2 class="title">{{this.name}}</h2>
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</summary>
|
||||
<div class="description">
|
||||
{{{this.description}}}
|
||||
</div>
|
||||
</details>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<h5>{{localize "DAGGERHEART.UI.Chat.appliedTo"}}</h5>
|
||||
<div class="targets-container">
|
||||
{{#each targets}}
|
||||
<div class="token-target-container" data-token-uuid="{{this.uuid}}">
|
||||
<img src="{{this.texture.src}}" />
|
||||
<label>{{this.name}}</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#if targets}}
|
||||
<div class="actor-header">
|
||||
<span>{{localize "DAGGERHEART.UI.Chat.appliedTo"}}</span>
|
||||
</div>
|
||||
<div class="targets-container">
|
||||
{{#each targets}}
|
||||
<div class="token-target-container" data-token-uuid="{{this.uuid}}">
|
||||
<img src="{{this.texture.src}}" />
|
||||
<h2 class="title">{{this.name}}</h2>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue