enhance chat messages styles

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?"

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

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;
+    display: flex;
-    grid-template-columns: 1fr 1fr;
+    flex-direction: column;
-    gap: 4px;
+    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;
+            gap: 5px;
-            border-bottom: 1px solid light-dark(@dark-blue, @golden);
             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 {
+            .actor-name {
-                flex: 1;
+                margin: 0;
-                text-align: center;
+                color: @beige;
-                padding: 0 2px 0 0;
+                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;
-                }
             }
         }
     }

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 {
+    .effect-header,
-        color: light-dark(@dark, @beige);
+    .actor-header {
-        margin: 0;
+        display: flex;
-        text-align: center;
+        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;
+        gap: 13px;
-        border: 1px solid light-dark(@dark-blue, @golden);
         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;
+            width: 40px;
-            height: 24px;
+            height: 40px;
-            flex: 0;
+            border-radius: 50%;
             pointer-events: none;
         }
 
-        label {
+        .title {
-            flex: 1;
+            font-size: var(--font-size-20);
-            text-align: center;
+            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;
         }
     }
 }

templates/ui/chat/damageSummary.hbs

@@ -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">
+                    <li class="damage-row">
-                        <label>{{localize (concat "DAGGERHEART.CONFIG.HealingType." this.key ".name")}}:</label>
+                        {{#if (gte this.value)}}
-                        <div>{{this.value}}</div>
+                            <span>
-                    </div>
+                                {{
+                                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>
+            </ul>
-        </div>    
+        </li>    
     {{/each}}
-</div>
+</ul>

templates/ui/chat/effectSummary.hbs

@@ -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}}">
+            <details class="effect-target-container">
-                <img src="{{this.img}}" />
+                <summary class="effect-label">
-                <label>{{this.name}}</label>
+                    <img class="effect-img" src="{{this.img}}" />
-            </div>
+                    <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>
+    {{#if targets}}
-    <div class="targets-container">
+        <div class="actor-header">
-        {{#each targets}}
+            <span>{{localize "DAGGERHEART.UI.Chat.appliedTo"}}</span>
-            <div class="token-target-container" data-token-uuid="{{this.uuid}}">
+        </div>
-                <img src="{{this.texture.src}}" />
+        <div class="targets-container">
-                <label>{{this.name}}</label>
+            {{#each targets}}
-            </div>
+                <div class="token-target-container" data-token-uuid="{{this.uuid}}">
-        {{/each}}
+                    <img src="{{this.texture.src}}" />
-    </div>
+                    <h2 class="title">{{this.name}}</h2>
+                </div>
+            {{/each}}
+        </div>
+    {{/if}}
 </div>