Fixed styling for downtime tooltip

module/applications/dialogs/downtime.mjs

@@ -25,8 +25,8 @@ export default class DhpDowntime extends HandlebarsApplicationMixin(ApplicationV
 
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'views', 'dh-style', 'downtime'],
+        classes: ['daggerheart', 'views', 'dh-style', 'dialog', 'downtime'],
-        position: { width: 680, height: 'auto' },
+        position: { width: 600, height: 'auto' },
         actions: {
             selectMove: this.selectMove,
             takeDowntime: this.takeDowntime

module/config/generalConfig.mjs

@@ -130,6 +130,7 @@ export const defaultRestOptions = {
         tendToWounds: {
             id: 'tendToWounds',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.tendToWounds.name'),
+            icon: 'fa-solid fa-bandage',
             img: 'icons/magic/life/cross-worn-green.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.tendToWounds.description'),
             actions: [
@@ -153,6 +154,7 @@ export const defaultRestOptions = {
         clearStress: {
             id: 'clearStress',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.clearStress.name'),
+            icon: 'fa-regular fa-face-surprise',
             img: 'icons/magic/perception/eye-ringed-green.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.clearStress.description'),
             actions: [
@@ -176,6 +178,7 @@ export const defaultRestOptions = {
         repairArmor: {
             id: 'repairArmor',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.repairArmor.name'),
+            icon: 'fa-solid fa-hammer',
             img: 'icons/skills/trades/smithing-anvil-silver-red.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.repairArmor.description'),
             actions: []
@@ -183,6 +186,7 @@ export const defaultRestOptions = {
         prepare: {
             id: 'prepare',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.prepare.name'),
+            icon: 'fa-solid fa-dumbbell',
             img: 'icons/skills/trades/academics-merchant-scribe.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.shortRest.prepare.description'),
             actions: []
@@ -192,6 +196,7 @@ export const defaultRestOptions = {
         tendToWounds: {
             id: 'tendToWounds',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.tendToWounds.name'),
+            icon: 'fa-solid fa-bandage',
             img: 'icons/magic/life/cross-worn-green.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.tendToWounds.description'),
             actions: []
@@ -199,6 +204,7 @@ export const defaultRestOptions = {
         clearStress: {
             id: 'clearStress',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.clearStress.name'),
+            icon: 'fa-regular fa-face-surprise',
             img: 'icons/magic/perception/eye-ringed-green.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.clearStress.description'),
             actions: []
@@ -206,6 +212,7 @@ export const defaultRestOptions = {
         repairArmor: {
             id: 'repairArmor',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.repairArmor.name'),
+            icon: 'fa-solid fa-hammer',
             img: 'icons/skills/trades/smithing-anvil-silver-red.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.repairArmor.description'),
             actions: []
@@ -213,6 +220,7 @@ export const defaultRestOptions = {
         prepare: {
             id: 'prepare',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.prepare.name'),
+            icon: 'fa-solid fa-dumbbell',
             img: 'icons/skills/trades/academics-merchant-scribe.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.prepare.description'),
             actions: []
@@ -220,19 +228,12 @@ export const defaultRestOptions = {
         workOnAProject: {
             id: 'workOnAProject',
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.workOnAProject.name'),
+            icon: 'fa-solid fa-diagram-project',
             img: 'icons/skills/social/thumbsup-approval-like.webp',
             description: game.i18n.localize('DAGGERHEART.APPLICATIONS.Downtime.longRest.workOnAProject.description'),
             actions: []
         }
-    }),
+    })
-    custom: {
-        id: 'customActivity',
-        name: '',
-        img: 'icons/skills/trades/academics-investigation-puzzles.webp',
-        description: '',
-        namePlaceholder: 'DAGGERHEART.APPLICATIONS.Downtime.custom.namePlaceholder',
-        placeholder: 'DAGGERHEART.APPLICATIONS.Downtime.custom.placeholder'
-    }
 };
 
 export const deathMoves = {

module/data/settings/Homebrew.mjs

@@ -54,6 +54,7 @@ export default class DhHomebrew extends foundry.abstract.DataModel {
                     moves: new fields.TypedObjectField(
                         new fields.SchemaField({
                             name: new fields.StringField({ required: true }),
+                            icon: new fields.StringField({ required: true }),
                             img: new fields.FilePathField({
                                 initial: 'icons/magic/life/cross-worn-green.webp',
                                 categories: ['IMAGE'],
@@ -70,6 +71,7 @@ export default class DhHomebrew extends foundry.abstract.DataModel {
                     moves: new fields.TypedObjectField(
                         new fields.SchemaField({
                             name: new fields.StringField({ required: true }),
+                            icon: new fields.StringField({ required: true }),
                             img: new fields.FilePathField({
                                 initial: 'icons/magic/life/cross-worn-green.webp',
                                 categories: ['IMAGE'],

module/documents/tooltipManager.mjs

@@ -21,14 +21,61 @@ export default class DhTooltipManager extends foundry.helpers.interaction.Toolti
                 this.tooltip.innerHTML = html;
                 options.direction = this._determineItemTooltipDirection(element);
             }
+        } else {
+            const shortRest = element.dataset.tooltip?.startsWith('#shortRest#');
+            const longRest = element.dataset.tooltip?.startsWith('#longRest#');
+            if (shortRest || longRest) {
+                const key = element.dataset.tooltip.slice(shortRest ? 11 : 10);
+                const downtimeOptions = shortRest
+                    ? CONFIG.DH.GENERAL.defaultRestOptions.shortRest()
+                    : CONFIG.DH.GENERAL.defaultRestOptions.longRest();
+                const move = downtimeOptions[key];
+                html = await foundry.applications.handlebars.renderTemplate(
+                    `systems/daggerheart/templates/ui/tooltip/downtime.hbs`,
+                    {
+                        move: move
+                    }
+                );
+
+                this.tooltip.innerHTML = html;
+                options.direction = this._determineItemTooltipDirection(
+                    element,
+                    this.constructor.TOOLTIP_DIRECTIONS.UP
+                );
+            }
         }
 
         super.activate(element, { ...options, html: html });
     }
 
-    _determineItemTooltipDirection(element) {
+    _determineItemTooltipDirection(element, prefered = this.constructor.TOOLTIP_DIRECTIONS.LEFT) {
         const pos = element.getBoundingClientRect();
         const dirs = this.constructor.TOOLTIP_DIRECTIONS;
-        return dirs[pos.x - this.tooltip.offsetWidth < 0 ? 'DOWN' : 'LEFT'];
+        switch (prefered) {
+            case this.constructor.TOOLTIP_DIRECTIONS.LEFT:
+                return dirs[
+                    pos.x - this.tooltip.offsetWidth < 0
+                        ? this.constructor.TOOLTIP_DIRECTIONS.DOWN
+                        : this.constructor.TOOLTIP_DIRECTIONS.LEFT
+                ];
+            case this.constructor.TOOLTIP_DIRECTIONS.UP:
+                return dirs[
+                    pos.y - this.tooltip.offsetHeight < 0
+                        ? this.constructor.TOOLTIP_DIRECTIONS.RIGHT
+                        : this.constructor.TOOLTIP_DIRECTIONS.UP
+                ];
+            case this.constructor.TOOLTIP_DIRECTIONS.RIGHT:
+                return dirs[
+                    pos.x + this.tooltip.offsetWidth > document.body.clientWidth
+                        ? this.constructor.TOOLTIP_DIRECTIONS.DOWN
+                        : this.constructor.TOOLTIP_DIRECTIONS.RIGHT
+                ];
+            case this.constructor.TOOLTIP_DIRECTIONS.DOWN:
+                return dirs[
+                    pos.y + this.tooltip.offsetHeight > document.body.clientHeight
+                        ? this.constructor.TOOLTIP_DIRECTIONS.LEFT
+                        : this.constructor.TOOLTIP_DIRECTIONS.DOWN
+                ];
+        }
     }
 }

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

@@ -1,13 +1,14 @@
 @import '../../utils/spacing.less';
 @import '../../utils/colors.less';
 
-.daggerheart.views {
+.theme-light .daggerheart.dh-style.views.downtime {
-    .downtime-header {
+    .downtime-container .activity-container .activity-selected-marker {
-        margin: 0;
+        background-image: url(../assets/parchments/dh-parchment-dark.png);
-        color: light-dark(@dark-blue, @golden);
-        text-align: center;
-        width: 100%;
     }
+}
+
+.daggerheart.dh-style.views.downtime {
+    font-family: @font-body;
 
     .downtime-container {
         .activities-container {
@@ -28,15 +29,31 @@
                         font-size: 8px;
                         flex: none;
                         color: light-dark(#18162e, #f3c267);
-                        margin-right: 8px;
+                        margin-right: 4px;
                     }
 
                     .activity-select-section {
                         display: flex;
                         align-items: center;
                         gap: 4px;
+
+                        .activity-icon {
+                            min-width: 24px;
+                            text-align: center;
+                        }
                     }
                 }
+
+                .activity-selected-marker {
+                    font-size: 14px;
+                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border-radius: 6px;
+                    color: light-dark(@beige, @dark);
+                    background-image: url(../assets/parchments/dh-parchment-light.png);
+                    padding: 0 8px;
+                    line-height: 1;
+                    font-weight: bold;
+                }
             }
         }
     }
@@ -45,11 +62,10 @@
         margin-top: 8px;
         display: flex;
         gap: 8px;
-    }
 
-    &.downtime {
+        button {
-        .activity-text-area {
+            flex: 1;
-            resize: none;
+            font-family: 'Montserrat', sans-serif;
         }
     }
 }

styles/less/ux/tooltip/tooltip.less

@@ -4,6 +4,20 @@
     align-items: center;
     gap: 4px;
 
+    .tooltip-title-container {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        .tooltip-image {
+            height: 40px;
+            width: 40px;
+            border-radius: 6px;
+            border: 1px solid @golden;
+        }
+    }
+
     .tooltip-title {
         margin: 0;
         text-align: center;

templates/dialogs/downtime/activities.hbs

@@ -5,13 +5,13 @@
         {{#each moves as |move key|}}
             <div class="activity-container">
                 <div class="activity-inner-container">
-                    <i class="fa-solid fa-circle activity-marker"></i>
+                    <i class="{{#if move.selected}}fa-solid{{else}}fa-regular{{/if}} fa-circle activity-marker"></i>
-                    <a class="activity-select-section" data-action="selectMove" data-category="{{../category}}" data-move="{{key}}">
+                    <a class="activity-select-section" data-action="selectMove" data-category="{{../category}}" data-move="{{key}}" data-tooltip="{{concat "#" ../category "#" key}}">
-                        <i class="fa-solid fa-hammer activtiy-icon"></i>
+                        <i class="{{move.icon}} activity-icon"></i>
-                        <div>{{move.name}}{{#if move.selected}} ({{move.selected}}){{/if}}</div>
+                        <div>{{move.name}}</div>
                     </a>
                 </div>
-                <a><i class="fa-solid fa-chevron-up expand-icon"></i></a>
+                {{#if move.selected}}<div class="activity-selected-marker">{{move.selected}}</div>{{/if}}
             </div>
         {{/each}}
     </div>

templates/dialogs/downtime/downtime.hbs

@@ -1,10 +1,13 @@
 <div>
-    <h2 class="downtime-header">{{localize "DAGGERHEART.APPLICATIONS.Downtime.downtimeHeader"}}</h2>
+    <header class="dialog-header">
+        <h1>{{localize "DAGGERHEART.APPLICATIONS.Downtime.downtimeHeader"}}</h1>
+    </header>
+
     <div class="downtime-container two-columns even">
         {{#if shortRestMoves.moves}}{{> "systems/daggerheart/templates/dialogs/downtime/activities.hbs" moves=shortRestMoves.moves category='shortRest' nrChoices=nrChoices.shortRest}}{{/if}}
         {{#if longRestMoves.moves}}{{> "systems/daggerheart/templates/dialogs/downtime/activities.hbs" moves=longRestMoves.moves category='longRest' nrChoices=nrChoices.longRest}}{{/if}}
     </div>
-    <footer class="flexrow">
+    <footer>
         <button type="button" data-action="close">{{localize "Cancel"}}</button>
         <button type="button" data-action="takeDowntime" {{#if disabledDowntime}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.Downtime.takeDowntime"}}</button>
     </footer>

templates/settings/automation-settings.hbs

@@ -6,7 +6,7 @@
 
     </div>
     {{formGroup settingFields.schema.fields.actionPoints value=settingFields._source.actionPoints localize=true}}
-s    {{formGroup settingFields.schema.fields.hordeDamage value=settingFields._source.hordeDamage localize=true}}
+    {{formGroup settingFields.schema.fields.hordeDamage value=settingFields._source.hordeDamage localize=true}}
     
     <footer class="form-footer">
         <button data-action="reset">

templates/ui/tooltip/downtime.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">{{move.name}}</h2>
+    </div>
+    <div class="tooltip-description">{{{move.description}}}</div>
+</div>