mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-17 23:49:02 +01:00
style items and action chat messages
This commit is contained in:
parent
dddee78356
commit
a9fca36ed5
17 changed files with 365 additions and 102 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"Bonuses": {
|
||||
"rest": {
|
||||
"downtimeAction": "Downtime Action",
|
||||
"shortRest": {
|
||||
"shortRestMoves": {
|
||||
"label": "Short Rest: Bonus Short Rest Moves",
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
18
styles/less/global/chat.less
Normal file
18
styles/less/global/chat.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
84
styles/less/ui/chat/ability-use.less
Normal file
84
styles/less/ui/chat/ability-use.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
77
styles/less/ui/chat/action.less
Normal file
77
styles/less/ui/chat/action.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
98
styles/less/ui/chat/downtime.less
Normal file
98
styles/less/ui/chat/downtime.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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}}">
|
||||
|
|
|
|||
12
templates/ui/chat/action.hbs
Normal file
12
templates/ui/chat/action.hbs
Normal 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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue