style items and action chat messages

This commit is contained in:
moliloo 2025-07-27 14:16:20 -03:00
parent dddee78356
commit a9fca36ed5
17 changed files with 365 additions and 102 deletions

View file

@ -174,8 +174,10 @@ Hooks.on('ready', () => {
Hooks.once('dicesoniceready', () => {});
Hooks.on('renderChatMessageHTML', (_, element) => {
Hooks.on('renderChatMessageHTML', (_, element, message) => {
enricherRenderSetup(element);
const cssClass = message.message.flags?.daggerheart?.cssClass;
if (cssClass) cssClass.split(' ').forEach(cls => element.classList.add(cls));
});
Hooks.on('renderJournalEntryPageProseMirrorSheet', (_, element) => {

View file

@ -1060,6 +1060,7 @@
},
"Bonuses": {
"rest": {
"downtimeAction": "Downtime Action",
"shortRest": {
"shortRestMoves": {
"label": "Short Rest: Bonus Short Rest Moves",

View file

@ -142,10 +142,18 @@ export default class DhpDowntime extends HandlebarsApplicationMixin(ApplicationV
content: await foundry.applications.handlebars.renderTemplate(
'systems/daggerheart/templates/ui/chat/downtime.hbs',
{
title: `${this.actor.name} - ${game.i18n.localize(`DAGGERHEART.APPLICATIONS.Downtime.${this.shortrest ? 'shortRest' : 'longRest'}.title`)}`,
title: game.i18n.localize(
`DAGGERHEART.APPLICATIONS.Downtime.${this.shortrest ? 'shortRest' : 'longRest'}.title`
),
actor: { name: this.actor.name, img: this.actor.img },
moves: moves
}
)
),
flags: {
daggerheart: {
cssClass: 'dh-chat-message dh-style'
}
}
});
cls.create(msg.toObject());

View file

@ -249,19 +249,23 @@ export function ActionMixin(Base) {
const systemData = {
title: game.i18n.localize('DAGGERHEART.CONFIG.ActionType.action'),
origin: origin,
img: this.img,
name: this.name,
action: { name: this.name, img: this.img, tags: this.tags ? this.tags : ['Spell', 'Arcana', 'Lv 10'] },
itemOrigin: this.item,
description: this.description,
actions: []
};
const msg = {
type: 'abilityUse',
user: game.user.id,
system: systemData,
content: await foundry.applications.handlebars.renderTemplate(
'systems/daggerheart/templates/ui/chat/ability-use.hbs',
'systems/daggerheart/templates/ui/chat/action.hbs',
systemData
)
),
flags: {
daggerheart: {
cssClass: 'dh-chat-message dh-style'
}
}
};
cls.create(msg);

View file

@ -121,9 +121,9 @@ export default class DHItem extends foundry.documents.Item {
: game.i18n.localize('DAGGERHEART.UI.Chat.foundationCard.subclassFeatureTitle'),
origin: origin,
img: this.img,
name: this.name,
item: { name: this.name, img: this.img, tags: this.tags ? this.tags : ['Spell', 'Arcana', 'Lv 10'] },
description: this.system.description,
actions: []
actions: this.system.actions
};
const msg = new cls({
type: 'abilityUse',
@ -132,7 +132,12 @@ export default class DHItem extends foundry.documents.Item {
content: await foundry.applications.handlebars.renderTemplate(
'systems/daggerheart/templates/ui/chat/ability-use.hbs',
systemData
)
),
flags: {
daggerheart: {
cssClass: 'dh-chat-message dh-style'
}
}
});
cls.create(msg.toObject());

View file

@ -0,0 +1,18 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
@import '../utils/mixin.less';
.dh-chat-message {
background-image: url('../assets/parchments/dh-parchment-dark.png');
border: none !important;
padding: 8px 0;
.message-header {
padding: 0 8px 8px;
color: @beige;
.message-sender,
.message-metadata {
font-family: @font-body;
}
}
}

View file

@ -1,7 +1,7 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
.application.dh-style {
.dh-style {
border: 1px solid light-dark(@dark-blue, @golden);
input[type='text'],

View file

@ -1,5 +1,6 @@
@import './sheet.less';
@import './dialog.less';
@import './chat.less';
@import './elements.less';
@import './tab-navigation.less';
@import './tab-form-footer.less';

View file

@ -1,5 +1,6 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
@import '../utils/mixin.less';
.theme-light .application.daggerheart.dh-style {
.inventory-item,
@ -50,6 +51,10 @@
.roll-img {
position: absolute;
transition: opacity 300ms ease-in;
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 3px;
}
.roll-img {

View file

@ -0,0 +1,84 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.daggerheart.chat {
&.domain-card {
display: flex;
flex-direction: column;
align-items: center;
.card-img {
width: 100%;
height: 200px;
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 90%, transparent 100%);
object-fit: cover;
}
.domain-card-header {
display: flex;
flex-direction: column;
width: 100%;
padding: 8px;
gap: 5px;
border-bottom: 1px solid @golden;
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.tags {
display: flex;
gap: 10px;
.tag {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: 12px;
font-family: @font-body;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
color: light-dark(@dark, @beige);
border-radius: 3px;
}
}
}
.description {
color: @beige;
padding: 8px;
font-family: @font-body;
}
.ability-card-footer {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
font-family: @font-body;
font-weight: 600;
height: 40px;
flex: 1 1 calc(50% - 5px);
&:nth-last-child(1):nth-child(odd) {
flex-basis: 100%;
}
}
.ability-card-action-cost {
margin: auto;
font-size: 1.5em;
}
}
}
}

View file

@ -0,0 +1,77 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.daggerheart.chat {
&.action {
display: flex;
flex-direction: column;
align-items: center;
.action-section {
display: flex;
flex-direction: row;
width: 100%;
padding: 8px;
gap: 5px;
border-bottom: 1px solid @golden;
.action-img {
width: 40px;
height: 40px;
border-radius: 3px;
object-fit: cover;
}
.action-header {
display: flex;
flex-direction: column;
gap: 5px;
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.label {
font-size: 12px;
color: @beige;
font-family: @font-body;
margin: 0;
}
}
}
.description {
color: @beige;
padding: 8px;
font-family: @font-body;
}
.ability-card-footer {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
padding: 0 8px;
button {
font-family: @font-body;
font-weight: 600;
height: 40px;
flex: 1 1 calc(50% - 5px);
&:nth-last-child(1):nth-child(odd) {
flex-basis: 100%;
}
}
.ability-card-action-cost {
margin: auto;
font-size: 1.5em;
}
}
}
}

View file

@ -1,31 +1,8 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.daggerheart.chat {
&.downtime {
display: flex;
flex-direction: column;
align-items: center;
.downtime-title-container {
display: flex;
flex-direction: column;
align-items: center;
.downtime-subtitle {
font-size: 17px;
}
}
.downtime-image {
width: 80px;
}
.action-use-button {
width: 100%;
}
}
&.resource-roll {
.reroll-message {
text-align: center;
@ -358,58 +335,6 @@
}
}
&.domain-card {
display: flex;
flex-direction: column;
align-items: center;
.domain-card-title {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
div {
font-size: 20px;
font-variant: small-caps;
font-weight: bold;
}
h2 {
width: 100%;
text-align: center;
margin: 0;
}
}
.ability-card-footer {
display: flex;
width: 100%;
margin-top: @fullMargin;
flex-wrap: wrap;
button {
border-radius: 6px;
background: @positive;
border-color: black;
flex-basis: calc(50% - 2px);
&:nth-of-type(n + 3) {
margin-top: @tinyMargin;
}
}
.ability-card-action-cost {
margin: auto;
font-size: 1.5em;
}
}
img {
width: 80px;
}
}
button {
&.inner-button {
--button-size: 1.25rem;

View file

@ -0,0 +1,98 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
@import '../../utils/spacing.less';
.daggerheart.chat {
&.downtime {
display: flex;
flex-direction: column;
align-items: center;
.downtime-header {
display: flex;
gap: 13px;
flex-direction: row;
align-items: center;
width: 100%;
padding-left: 8px;
margin-bottom: 12px;
.profile {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.header-label {
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.label {
font-size: 12px;
color: @beige;
font-family: @font-body;
margin: 0;
}
}
}
.downtime-moves-list {
display: flex;
flex-direction: column;
gap: 5px;
.downtime-move {
width: 100%;
.downtime-label {
display: flex;
align-items: center;
gap: 5px;
border-bottom: 1px solid @golden;
margin: 0 8px;
.downtime-image {
width: 40px;
height: 40px;
border-radius: 3px;
}
.header-label {
padding: 8px;
.title {
font-size: 16px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.label {
font-size: 12px;
color: @beige;
font-family: @font-body;
margin: 0;
}
}
}
.description {
padding: 8px;
color: beige;
font-family: @font-body;
font-size: 14px;
}
}
.action-use-button {
width: -webkit-fill-available;
margin: 0 8px;
font-family: @font-body;
font-weight: 600;
height: 40px;
}
}
}
}

View file

@ -1,4 +1,7 @@
@import './chat/ability-use.less';
@import './chat/action.less';
@import './chat/chat.less';
@import './chat/downtime.less';
@import './chat/sheet.less';
@import './chat/theme-colorful.less';

View file

@ -1,9 +1,14 @@
<div class="daggerheart chat domain-card">
<div class="domain-card-title">
<h2>{{name}}</h2>
<img class="card-img" src="{{item.img}}" />
<div class="domain-card-header">
<h2 class="title">{{item.name}}</h2>
<ul class="tags">
{{#each item.tags as |tag|}}
<li class="tag">{{tag}}</li>
{{/each}}
</ul>
</div>
<img src="{{img}}" />
<div>{{{description}}}</div>
<div class="description">{{{description}}}</div>
<footer class="ability-card-footer">
{{#each actions as |action index|}}
<button class="ability-use-button" data-index="{{index}}">

View file

@ -0,0 +1,12 @@
<div class="daggerheart chat action">
<div class="action-section">
<img class="action-img" src="{{action.img}}" />
<div class="action-header">
<h2 class="title">{{action.name}}</h2>
<span class="label">{{itemOrigin.name}}</span>
</div>
</div>
{{#if description}}
<div class="description">{{{description}}}</div>
{{/if}}
</div>

View file

@ -1,13 +1,28 @@
<div class="daggerheart chat downtime">
<h2 class="downtime-title-container">
<div>{{title}}</div>
</h2>
{{#each moves as | move index |}}
<strong>{{move.name}}</strong>
<img class="downtime-image" src="{{move.img}}" />
<div>{{{move.description}}}</div>
{{#each move.actions as | action index |}}
<button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
<div class="downtime-header">
<img class="profile" src="{{actor.img}}">
<div class="header-label">
<h2 class="title">{{title}}</h2>
<span class="label">{{actor.name}}</span>
</div>
</div>
<ul class="downtime-moves-list">
{{#each moves as | move index |}}
<li class="downtime-move">
<div class="downtime-label">
<img class="downtime-image" src="{{move.img}}" />
<div class="header-label">
<h2 class="title">{{move.name}}</h2>
<span class="label">{{localize 'DAGGERHEART.GENERAL.Bonuses.rest.downtimeAction'}}</span>
</div>
</div>
<div class="description">
{{{move.description}}}
</div>
{{#each move.actions as | action index |}}
<button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
{{/each}}
</li>
{{/each}}
{{/each}}
</ul>
</div>