enhance death roll dialog style (#440)

lang/en.json

@@ -293,6 +293,7 @@
                 "usedMarks": "Used Marks"
             },
             "DeathMove": {
+                "selectMove": "Select Move",
                 "takeMove": "Take Death Move",
                 "title": "{actor} - Death Move"
             },

module/applications/dialogs/deathMove.mjs

@@ -13,8 +13,9 @@ export default class DhpDeathMove extends HandlebarsApplicationMixin(Application
     }
 
     static DEFAULT_OPTIONS = {
-        classes: ['daggerheart', 'views', 'death-move'],
-        position: { width: 800, height: 'auto' },
+        classes: ['daggerheart', 'dh-style', 'dialog', 'views', 'death-move'],
+        position: { width: 'auto', height: 'auto' },
+        window: { icon: 'fa-solid fa-skull' },
         actions: {
             selectMove: this.selectMove,
             takeMove: this.takeMove
@@ -32,6 +33,7 @@ export default class DhpDeathMove extends HandlebarsApplicationMixin(Application
         const context = await super._prepareContext(_options);
         context.selectedMove = this.selectedMove;
         context.options = CONFIG.DH.GENERAL.deathMoves;
+        context.title = game.i18n.localize('DAGGERHEART.APPLICATIONS.DeathMove.takeMove');
 
         return context;
     }

module/config/generalConfig.mjs

@@ -322,18 +322,21 @@ export const deathMoves = {
         id: 'avoidDeath',
         name: 'DAGGERHEART.CONFIG.DeathMoves.avoidDeath.name',
         img: 'icons/magic/time/hourglass-yellow-green.webp',
+        icon: 'fa-person-running',
         description: 'DAGGERHEART.CONFIG.DeathMoves.avoidDeath.description'
     },
     riskItAll: {
         id: 'riskItAll',
         name: 'DAGGERHEART.CONFIG.DeathMoves.riskItAll.name',
         img: 'icons/sundries/gaming/dice-pair-white-green.webp',
+        icon: 'fa-dice',
         description: 'DAGGERHEART.CONFIG.DeathMoves.riskItAll.description'
     },
     blazeOfGlory: {
         id: 'blazeOfGlory',
         name: 'DAGGERHEART.CONFIG.DeathMoves.blazeOfGlory.name',
         img: 'icons/magic/life/heart-cross-strong-flame-purple-orange.webp',
+        icon: 'fa-burst',
         description: 'DAGGERHEART.CONFIG.DeathMoves.blazeOfGlory.description'
     }
 };

module/documents/tooltipManager.mjs

@@ -87,6 +87,26 @@ export default class DhTooltipManager extends foundry.helpers.interaction.Toolti
                     this.tooltip.innerHTML = html;
                 }
             }
+
+            const deathMove = element.dataset.tooltip?.startsWith('#deathMove#');
+            if (deathMove) {
+                const name = element.dataset.deathName;
+                const img = element.dataset.deathImg;
+                const description = element.dataset.deathDescription;
+
+                html = await foundry.applications.handlebars.renderTemplate(
+                    `systems/daggerheart/templates/ui/tooltip/death-move.hbs`,
+                    {
+                        move: { name: name, img: img, description: description }
+                    }
+                );
+
+                this.tooltip.innerHTML = html;
+                options.direction = this._determineItemTooltipDirection(
+                    element,
+                    this.constructor.TOOLTIP_DIRECTIONS.RIGHT
+                );
+            }
         }
 
         super.activate(element, { ...options, html: html });

styles/less/dialog/actions/action-list.less

@@ -1,4 +1,5 @@
 @import '../../utils/fonts.less';
+@import '../../utils/colors.less';
 
 .application.daggerheart.dh-style {
     .actions-list,
@@ -36,7 +37,8 @@
 
         .action-item {
             &:hover {
-                background-color: rgba(255, 255, 255, 0.05);
+                background-color: light-dark(@soft-shadow, @soft-white-shadow);
+                cursor: pointer;
             }
             padding: 5px;
             border-radius: 5px;
@@ -47,7 +49,6 @@
                 align-items: center;
                 gap: 10px;
                 font-family: @font-body;
-                cursor: pointer;
                 flex: 1;
                 i {
                     text-align: center;

styles/less/dialog/death-move/death-move-container.less

@@ -0,0 +1,57 @@
+@import '../../utils/spacing.less';
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+.daggerheart.dh-style.dialog.death-move {
+    .death-move-container {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        .moves-list {
+            .move-item {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                &:hover {
+                    background-color: light-dark(@soft-shadow, @soft-white-shadow);
+                    cursor: pointer;
+                }
+                padding: 5px;
+                border-radius: 5px;
+                transition: background-color 0.3s ease-in-out;
+
+                .label {
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                    font-family: @font-body;
+                    cursor: pointer;
+                    flex: 1;
+                    i {
+                        text-align: center;
+                        width: 30px;
+                    }
+                }
+
+                input[type='radio'] {
+                    margin-left: auto;
+                }
+            }
+        }
+    }
+
+    footer {
+        margin-top: 8px;
+        display: flex;
+        gap: 8px;
+
+        button {
+            flex: 1;
+            height: 40px;
+            font-family: @font-body;
+            font-weight: 600;
+        }
+    }
+}

styles/less/dialog/downtime/downtime-container.less

@@ -1,5 +1,6 @@
 @import '../../utils/spacing.less';
 @import '../../utils/colors.less';
+@import '../../utils/fonts.less';
 
 .theme-light .daggerheart.dh-style.views.downtime {
     .downtime-container .activity-container .activity-selected-marker {
@@ -69,7 +70,9 @@
 
         button {
             flex: 1;
-            font-family: 'Montserrat', sans-serif;
+            height: 40px;
+            font-family: @font-body;
+            font-weight: 600;
         }
     }
 }

styles/less/dialog/index.less

@@ -12,6 +12,8 @@
 
 @import './downtime/downtime-container.less';
 
+@import './death-move/death-move-container.less';
+
 @import './beastform/sheet.less';
 
 @import './character-creation/creation-action-footer.less';

styles/less/utils/colors.less

@@ -38,6 +38,8 @@
 @beige-15: #efe6d815;
 @beige-50: #efe6d850;
 
+@soft-white-shadow: rgba(255, 255, 255, 0.05);
+
 @light-black: rgba(0, 0, 0, 0.3);
 @soft-shadow: rgba(0, 0, 0, 0.05);
 

templates/dialogs/deathMove.hbs

@@ -1,19 +1,22 @@
 <div>
-    <div class="downtime-container">
-        {{#each this.options as |option key|}}
-            <div class="activity-container">
-                <div class="activity-title">
-                    <img class="activity-image {{#if (eq ../selectedMove.id key)}}selected{{/if}}" src="{{option.img}}" data-action="selectMove" data-move="{{key}}" />
-                    <span class="activity-title-text">{{localize this.name}}</span>
-                </div>
-                <div class="activity-body">
-                    {{localize this.description}}
-                </div>
-            </div>
-        {{/each}}
+    <header class="dialog-header">
+        <h1>{{title}}</h1>
+    </header>
+    <div class="death-move-container">
+        <ul class="moves-list">
+            {{#each this.options as |option key|}}
+                <li class="move-item" data-tooltip="{{concat "#" "deathMove" "#"}}" data-action="selectMove" data-move="{{key}}"data-death-img="{{option.img}}" data-death-name="{{this.name}}" data-death-description="{{this.description}}">
+                    <label class="label" for="{{id}}" data-tooltip="{{localize tooltip}}" data-tooltip-direction="LEFT">
+                        <i class="fa-solid {{icon}} fa-xl"></i>
+                        <span class="label">{{localize this.name}}</span>
+                    </label>
+                    <input type="radio" {{#if (eq ../this.selectedMove.id option.id)}}checked{{/if}}>
+                </li>
+            {{/each}}
+        </ul>
     </div>
     <footer class="flexrow">
-        <button data-action="takeMove" {{#if (not this.selectedMove)}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.DeathMove.takeMove"}}</button>
-        <button data-action="close">{{localize "DAGGERHEART.Application.Cancel"}}</button>
+        <button data-action="close">{{localize "Cancel"}}</button>
+        <button data-action="takeMove" {{#if (not this.selectedMove)}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.DeathMove.selectMove"}}</button>
     </footer>
 </div>

templates/ui/tooltip/death-move.hbs

@@ -0,0 +1,7 @@
+<div class="daggerheart dh-style tooltip">
+    <div class="tooltip-title-container">
+        <img class="tooltip-image" src="{{move.img}}" />
+        <h2 class="tooltip-title">{{localize move.name}}</h2>
+    </div>
+    <div class="tooltip-description">{{{localize move.description}}}</div>
+</div>