From 15ca55bacfc363aff48d344b49d438b23fc0ca10 Mon Sep 17 00:00:00 2001 From: WBHarry Date: Thu, 17 Jul 2025 16:21:11 +0200 Subject: [PATCH] Initial downtime layout rework --- lang/en.json | 6 +- module/applications/dialogs/downtime.mjs | 4 +- .../dialog/downtime/downtime-container.less | 76 ++++++------------- templates/dialogs/downtime/activities.hbs | 27 ++++--- templates/dialogs/downtime/downtime.hbs | 5 +- 5 files changed, 46 insertions(+), 72 deletions(-) diff --git a/lang/en.json b/lang/en.json index dd63d219..bf15d6be 100755 --- a/lang/en.json +++ b/lang/en.json @@ -249,10 +249,10 @@ "title": "{actor} - Death Move" }, "Downtime": { - "downtimeHeader": "Downtime Moves ({current}/{max})", + "downtimeHeader": "Downtime Activities", "longRest": { "title": "Long Rest", - "moves": "Long Rest Moves ({current}/{max})", + "moves": "Long Rest ({current}/{max})", "clearStress": { "description": "Describe how you blow off steam or pull yourself together, and clear all marked Stress.", "name": "Clear Stress" @@ -276,7 +276,7 @@ }, "shortRest": { "title": "Short Rest", - "moves": "Short Rest Moves ({current}/{max})", + "moves": "Short Rest ({current}/{max})", "tendToWounds": { "name": "Tend to Wounds", "description": "Describe how you hastily patch yourself up, then clear a number of Hit Points equal to 1d4 + your tier. You can do this to an ally instead." diff --git a/module/applications/dialogs/downtime.mjs b/module/applications/dialogs/downtime.mjs index 6fe5b0a2..20faa428 100644 --- a/module/applications/dialogs/downtime.mjs +++ b/module/applications/dialogs/downtime.mjs @@ -45,7 +45,7 @@ export default class DhpDowntime extends HandlebarsApplicationMixin(ApplicationV super._attachPartListeners(partId, htmlElement, options); htmlElement - .querySelectorAll('.activity-image') + .querySelectorAll('.activity-select-section') .forEach(element => element.addEventListener('contextmenu', this.deselectMove.bind(this))); } @@ -103,7 +103,7 @@ export default class DhpDowntime extends HandlebarsApplicationMixin(ApplicationV } deselectMove(event) { - const button = event.target.closest('.activity-image'); + const button = event.target.closest('.activity-select-section'); const move = button.dataset.move; this.moveData[button.dataset.category].moves[move].selected = this.moveData[button.dataset.category].moves[move] .selected diff --git a/styles/less/dialog/downtime/downtime-container.less b/styles/less/dialog/downtime/downtime-container.less index 856b6eaa..d97b3d24 100644 --- a/styles/less/dialog/downtime/downtime-container.less +++ b/styles/less/dialog/downtime/downtime-container.less @@ -2,67 +2,41 @@ @import '../../utils/colors.less'; .daggerheart.views { - .downtime-container { - .activity-container { - display: flex; - align-items: center; - padding: 8px; + .downtime-header { + margin: 0; + color: light-dark(@dark-blue, @golden); + text-align: center; + width: 100%; + } - .activity-title { - flex: 1; + .downtime-container { + .activities-container { + width: 100%; + + .activity-container { display: flex; align-items: center; + justify-content: space-between; + padding: 8px; - .activity-title-text { - font-size: 24px; - font-weight: bold; - } - - .activity-image { - width: 80px; - position: relative; + .activity-inner-container { display: flex; - justify-content: center; - margin-right: 8px; - border: 2px solid black; - border-radius: 50%; - cursor: pointer; + align-items: center; + gap: 4px; - .activity-select-label { - position: absolute; - top: -9px; - 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; + .activity-marker { + font-size: 8px; + flex: none; + color: light-dark(#18162e, #f3c267); + margin-right: 8px; } - img { - border-radius: 50%; - } - - &:hover, - &.selected { - filter: drop-shadow(0 0 6px gold); + .activity-select-section { + display: flex; + align-items: center; + gap: 4px; } } - - .custom-name-input { - font-size: 24px; - font-weight: bold; - padding: 0; - background: transparent; - color: rgb(239, 230, 216); - } - } - - .activity-body { - flex: 1; - font-style: italic; } } } diff --git a/templates/dialogs/downtime/activities.hbs b/templates/dialogs/downtime/activities.hbs index a74ed090..ccfcbc81 100644 --- a/templates/dialogs/downtime/activities.hbs +++ b/templates/dialogs/downtime/activities.hbs @@ -1,19 +1,18 @@
{{localize (concat "DAGGERHEART.APPLICATIONS.Downtime." category ".moves") max=nrChoices.max current=nrChoices.current}} - - {{#each moves as |move key|}} -
-
-
- {{#if move.selected}}
{{move.selected}}
{{/if}} - -
- {{localize move.name}} +
+ {{#each moves as |move key|}} +
+
+ + + +
{{move.name}}{{#if move.selected}} ({{move.selected}}){{/if}}
+ +
+
-
- {{localize move.description}} -
-
- {{/each}} + {{/each}} +
\ No newline at end of file diff --git a/templates/dialogs/downtime/downtime.hbs b/templates/dialogs/downtime/downtime.hbs index 8da2de4d..26ac21cc 100644 --- a/templates/dialogs/downtime/downtime.hbs +++ b/templates/dialogs/downtime/downtime.hbs @@ -1,7 +1,8 @@
-
+

{{localize "DAGGERHEART.APPLICATIONS.Downtime.downtimeHeader"}}

+
{{#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}} + {{#if longRestMoves.moves}}{{> "systems/daggerheart/templates/dialogs/downtime/activities.hbs" moves=longRestMoves.moves category='longRest' nrChoices=nrChoices.longRest}}{{/if}}