style items and action chat messages

daggerheart.mjs

@@ -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) => {

lang/en.json

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

module/applications/dialogs/downtime.mjs

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

module/data/fields/actionField.mjs

@@ -249,19 +249,23 @@ export function ActionMixin(Base) {
             const systemData = {
                 title: game.i18n.localize('DAGGERHEART.CONFIG.ActionType.action'),
                 origin: origin,
-                img: this.img,
+                action: { name: this.name, img: this.img, tags: this.tags ? this.tags : ['Spell', 'Arcana', 'Lv 10'] },
-                name: this.name,
+                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);

module/documents/item.mjs

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

styles/less/global/chat.less

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

styles/less/global/elements.less

@@ -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'],

styles/less/global/index.less

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

styles/less/global/inventory-item.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 {

styles/less/ui/chat/ability-use.less

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

styles/less/ui/chat/action.less

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

styles/less/ui/chat/chat.less

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

styles/less/ui/chat/downtime.less

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

styles/less/ui/index.less

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

templates/ui/chat/ability-use.hbs

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

templates/ui/chat/action.hbs

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

templates/ui/chat/downtime.hbs

@@ -1,13 +1,28 @@
 <div class="daggerheart chat downtime">
-    <h2 class="downtime-title-container">
+    <div class="downtime-header">
-        <div>{{title}}</div>
+        <img class="profile" src="{{actor.img}}">
-    </h2>
+        <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 |}}
-        <strong>{{move.name}}</strong>
+            <li class="downtime-move">
+                <div class="downtime-label">
                     <img class="downtime-image" src="{{move.img}}" />
-        <div>{{{move.description}}}</div>
+                    <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}}
+    </ul>
 </div>