mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-17 07:36:26 +01:00
Initial downtime layout rework
This commit is contained in:
WBHarry
parent
475a63f120
commit
15ca55bacf
5 changed files with 46 additions and 72 deletions
|
|
@ -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."
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -2,67 +2,41 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.views {
|
||||
.downtime-header {
|
||||
margin: 0;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.downtime-container {
|
||||
.activities-container {
|
||||
width: 100%;
|
||||
|
||||
.activity-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
|
||||
.activity-title {
|
||||
flex: 1;
|
||||
.activity-inner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.activity-title-text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.activity-image {
|
||||
width: 80px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.activity-marker {
|
||||
font-size: 8px;
|
||||
flex: none;
|
||||
color: light-dark(#18162e, #f3c267);
|
||||
margin-right: 8px;
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<fieldset class="one-column">
|
||||
<legend>{{localize (concat "DAGGERHEART.APPLICATIONS.Downtime." category ".moves") max=nrChoices.max current=nrChoices.current}}</legend>
|
||||
|
||||
<div class="activities-container">
|
||||
{{#each moves as |move key|}}
|
||||
<div class="activity-container">
|
||||
<div class="activity-title">
|
||||
<div class="activity-image {{#if move.selected}}selected{{/if}}" data-action="selectMove" data-category="{{../category}}" data-move="{{key}}">
|
||||
{{#if move.selected}}<div class="activity-select-label">{{move.selected}}</div>{{/if}}
|
||||
<img src="{{move.img}}" />
|
||||
</div>
|
||||
|
||||
<span class="activity-title-text">{{localize move.name}}</span>
|
||||
</div>
|
||||
<div class="activity-body">
|
||||
{{localize move.description}}
|
||||
<div class="activity-inner-container">
|
||||
<i class="fa-solid fa-circle activity-marker"></i>
|
||||
<a class="activity-select-section" data-action="selectMove" data-category="{{../category}}" data-move="{{key}}">
|
||||
<i class="fa-solid fa-hammer activtiy-icon"></i>
|
||||
<div>{{move.name}}{{#if move.selected}} ({{move.selected}}){{/if}}</div>
|
||||
</a>
|
||||
</div>
|
||||
<a><i class="fa-solid fa-chevron-up expand-icon"></i></a>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<div>
|
||||
<div class="downtime-container">
|
||||
<h2 class="downtime-header">{{localize "DAGGERHEART.APPLICATIONS.Downtime.downtimeHeader"}}</h2>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue