cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-12 03:31:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

style level up application (#632)

Browse source
This commit is contained in:
Murilo Brito 2025-08-06 05:11:42 -03:00 • committed by GitHub
parent a8862d40d2
commit d8187ac521
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 290 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

10
module/applications/levelup/levelup.mjs
View file

@ -20,10 +20,11 @@ export default class DhlevelUp extends HandlebarsApplicationMixin(ApplicationV2)
static DEFAULT_OPTIONS = {
tag: 'form',
classes: ['daggerheart', 'levelup'],
classes: ['daggerheart', 'dialog', 'dh-style', 'levelup'],
position: { width: 1000, height: 'auto' },
window: {
resizable: true
resizable: true,
icon: 'fa-solid fa-arrow-turn-up'
},
actions: {
save: this.save,
@ -45,7 +46,10 @@ export default class DhlevelUp extends HandlebarsApplicationMixin(ApplicationV2)
static PARTS = {
tabs: { template: 'systems/daggerheart/templates/levelup/tabs/tab-navigation.hbs' },
advancements: { template: 'systems/daggerheart/templates/levelup/tabs/advancements.hbs' },
selections: { template: 'systems/daggerheart/templates/levelup/tabs/selections.hbs' },
selections: {
template: 'systems/daggerheart/templates/levelup/tabs/selections.hbs',
scrollable: ['.selections']
},
summary: { template: 'systems/daggerheart/templates/levelup/tabs/summary.hbs' },
footer: { template: 'systems/daggerheart/templates/levelup/tabs/footer.hbs' }
};

1
styles/less/dialog/index.less
View file

@ -3,6 +3,7 @@
@import './level-up/sheet.less';
@import './level-up/summary-container.less';
@import './level-up/tiers-container.less';
@import './level-up/footer.less';
@import './resource-dice/sheet.less';

19
styles/less/dialog/level-up/footer.less Normal file
View file

@ -0,0 +1,19 @@
@import '../../utils/fonts.less';
.daggerheart.levelup {
.tab-footer {
margin-top: 10px;
.levelup-navigation-actions,
.levelup-footer {
display: flex;
justify-content: end;
gap: 10px;
button {
font-family: @font-body;
font-weight: bold;
height: 40px;
}
}
}
}

20
styles/less/dialog/level-up/navigation-container.less
View file

@ -1,3 +1,6 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.daggerheart.levelup {
.levelup-navigation-container {
display: flex;
@ -7,23 +10,18 @@
nav {
flex: 1;
border: none;
.levelup-tab-container {
display: flex;
align-items: center;
gap: 4px;
}
}
.levelup-navigation-actions {
width: 306px;
display: flex;
justify-content: end;
gap: 16px;
margin-right: 4px;
* {
width: calc(50% - 8px);
a,
span {
font-family: @font-body;
color: light-dark(@dark-blue, @golden);
}
}
}
}

57
styles/less/dialog/level-up/selections-container.less
View file

@ -1,18 +1,38 @@
@import '../../utils/fonts.less';
@import '../../utils/colors.less';
.daggerheart.levelup {
.levelup-selections-container {
overflow: auto;
padding: 10px 0;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
max-height: 500px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
.achievement-experience-cards {
display: flex;
gap: 8px;
.achievement-experience-card {
border: 1px solid;
border-radius: 4px;
padding-right: 4px;
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
background: light-dark(@dark-blue-40, @golden-40);
border-radius: 3px;
padding: 5px;
font-size: 16px;
gap: 4px;
width: 100%;
input {
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
width: 80%;
}
span {
font-family: @font-body;
}
.achievement-experience-marker {
border: 1px solid;
@ -30,10 +50,13 @@
.levelup-card-selection {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
height: 190px;
.card-preview-container {
width: calc(100% * (1 / 5));
height: 100%;
max-width: 200px;
}
.levelup-domains-selection-container {
@ -89,10 +112,30 @@
}
}
.levelup-selections-title {
.card-section {
flex: 1 1 100%;
.card-section-header {
display: flex;
align-items: center;
gap: 4px;
gap: 20px;
margin-bottom: 10px;
h3 {
font-family: @font-subtitle;
color: light-dark(@dark, @beige);
margin: 0;
white-space: nowrap;
}
}
}
.levelup-selections-title {
margin-left: auto;
margin-right: auto;
font-size: 22px;
font-weight: bold;
padding: 0 12px;
}
.levelup-radio-choices {

6
styles/less/dialog/level-up/sheet.less
View file

@ -25,9 +25,11 @@
section {
.section-container {
display: flex;
flex-direction: column;
gap: 8px;
flex-direction: row;
justify-content: center;
gap: 20px 8px;
margin-top: 8px;
flex-wrap: wrap;
}
}

45
styles/less/dialog/level-up/summary-container.less
View file

@ -1,5 +1,28 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.daggerheart.levelup {
.summary-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 10px;
h3 {
font-family: @font-subtitle;
color: light-dark(@dark, @beige);
margin: 0;
white-space: nowrap;
}
}
.levelup-summary-container {
overflow: auto;
padding: 10px 0;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
max-height: 700px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
.level-achievements-container,
.level-advancements-container {
display: flex;
@ -11,7 +34,7 @@
h4,
h5 {
margin: 0;
color: var(--color-text-secondary);
color: light-dark(@dark, @beige);
}
}
@ -19,7 +42,19 @@
display: flex;
align-items: center;
gap: 4px;
font-size: 20px;
font-size: 14px;
font-family: @font-body;
color: light-dark(@dark, @beige);
}
h5.summary-section {
display: flex;
align-items: center;
gap: 4px;
font-size: 16px;
font-family: @font-subtitle;
color: light-dark(@dark, @beige);
margin-bottom: 5px;
}
.summary-selection-container {
@ -28,9 +63,11 @@
.summary-selection {
border: 2px solid;
border-radius: 6px;
border-radius: 3px;
padding: 0 4px;
font-size: 18px;
font-size: 14px;
font-family: @font-body;
color: light-dark(@dark, @beige);
}
}
}

8
styles/less/dialog/level-up/tiers-container.less
View file

@ -1,3 +1,6 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.daggerheart.levelup {
.tiers-container {
display: flex;
@ -38,7 +41,7 @@
height: min-content;
&.multi {
border: 2px solid grey;
border: 2px solid light-dark(@dark-blue-40, @golden-40);
padding: 2.4px 2.5px 0;
border-radius: 4px;
gap: 2px;
@ -56,7 +59,8 @@
}
.checkbox-group-label {
font-size: 14px;
font-family: @font-body;
font-size: 12px;
font-style: italic;
}
}

42
styles/less/global/elements.less
View file

@ -674,8 +674,8 @@
.application .component.dh-style.card-preview-container {
position: relative;
border-radius: 6px;
border: 2px solid var(--color-tabs-border);
border: 2px solid transparent;
display: flex;
flex-direction: column;
aspect-ratio: 0.75;
@ -697,31 +697,41 @@
justify-content: center;
}
.preview-selected-container {
display: flex;
flex-direction: column;
border: 2px solid light-dark(@dark-blue-50, @beige-50);
border-radius: 6px;
max-width: 200px;
height: 100%;
.preview-image-container {
flex: 1;
width: 100%;
flex-grow: 1;
object-fit: cover;
border-radius: 4px 4px 0 0;
}
.preview-text-container {
flex: 1;
border-radius: 0 0 4px 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 18px;
font-family: @font-body;
padding: 10px 0;
text-align: center;
color: var(--color-text-selection-bg);
font-size: 16px;
color: light-dark(@beige, @dark);
background-image: url(../assets/parchments/dh-parchment-light.png);
border-radius: 0 0 4px 4px;
}
}
.preview-empty-container {
border-radius: 6px;
pointer-events: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
border: 2px dashed light-dark(@dark-blue-50, @beige-50);
.preview-empty-inner-container {
width: 100%;
@ -729,15 +739,19 @@
justify-content: center;
.preview-add-icon {
font-size: 48px;
font-size: 40px;
color: light-dark(@dark-blue-50, @beige-50);
}
.preview-empty-subtext {
position: absolute;
top: 10%;
font-size: 18px;
bottom: 5%;
font-size: 10px;
font-variant: small-caps;
text-align: center;
font-family: @font-body;
font-style: italic;
color: light-dark(@dark-blue-60, @beige-80);
}
}
}

2
templates/components/card-preview.hbs
View file

@ -3,6 +3,7 @@
{{#if (not disabled)}}data-action="viewCompendium"{{/if}} data-compendium="{{this.compendium}}" data-path="{{this.path}}" data-limit="{{this.limit}}"
>
{{#if this.img}}
<div class="preview-selected-container">
<img class="preview-image-container" src="{{this.img}}" />
<div class="preview-text-container">
{{#if altPartialBlock}}
@ -11,6 +12,7 @@
{{this.name}}
{{/if}}
</div>
</div>
{{else}}
<div class="preview-empty-container">
<div class="preview-empty-inner-container">

19
templates/levelup/tabs/footer.hbs
View file

@ -1,4 +1,23 @@
<section class='tab-footer'>
{{#if this.levelupAuto}}
<div class="levelup-navigation-actions {{#if (not this.showTabs)}}test{{/if}}">
{{#if this.navigate.previous.fromSummary}}
<button data-action="activatePart" data-part="advancements">{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToLevelup"}}</button>
<button data-action="save" {{#if (not this.levelup.allLevelsFinished)}}disabled{{/if}}>{{localize "Finish Levelup"}}</button>
{{else}}
{{#if (not this.navigate.previous.disabled)}}
<button data-action="updateCurrentLevel" >{{this.navigate.previous.label}}</button>
{{/if}}
{{/if}}
{{#if this.navigate.next.show}}
{{#if this.navigate.next.toSummary}}
<button data-action="activatePart" data-part="summary" {{#if this.navigate.next.disabled}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToSummary"}}</button>
{{else}}
<button data-action="updateCurrentLevel" data-forward="true" {{#if this.navigate.next.disabled}}disabled{{/if}}>{{this.navigate.next.label}}</button>
{{/if}}
{{/if}}
</div>
{{/if}}
{{#unless levelupAuto}}
<div class="levelup-footer">
<button type="button" data-action="close">{{localize "Cancel"}}</button>

62
templates/levelup/tabs/selections.hbs
View file

@ -5,55 +5,60 @@
>
<div class="section-container levelup-selections-container">
{{#if (gt this.newExperiences.length 0)}}
<div>
<h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}</h3>
<fieldset class="new-experience">
<legend class="levelup-selections-title">
{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}
</legend>
<div class="achievement-experience-cards">
{{#each this.newExperiences}}
<div class="achievement-experience-card">
<div class="flexrow">
<input type="text" name="{{concat "levelup.levels." this.level ".achievements.experiences." this.key ".name"}}" value="{{this.name}}" placeholder="{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experiencePlaceholder"}}" />
<div class="flex0">{{numberFormat this.modifier sign=true}}</div>
</div>
<span>{{numberFormat this.modifier sign=true}}</span>
<div class="achievement-experience-marker">
{{#if this.name}}<i class="fa-solid fa-check"></i>{{/if}}
</div>
</div>
{{/each}}
</div>
</div>
</fieldset>
{{/if}}
{{#if this.traits.active}}
<div>
<h3 class="levelup-selections-title">
<div>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}}</div>
<div>{{this.traits.progress.selected}}/{{this.traits.progress.max}}</div>
</h3>
<fieldset>
<legend class="levelup-selections-title">
<span>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}} {{this.traits.progress.selected}}/{{this.traits.progress.max}}</span>
</legend>
<input type="text" class="levelup-trait-increases" value="{{this.traits.values}}" />
</div>
</fieldset>
{{/if}}
{{#if this.experienceIncreases.active}}
<div>
<h3 class="levelup-selections-title">
<div>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}}</div>
<div>{{this.experienceIncreases.progress.selected}}/{{this.experienceIncreases.progress.max}}</div>
</h3>
<fieldset>
<legend class="levelup-selections-title">
<span>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}} {{this.experienceIncreases.progress.selected}}/{{this.experienceIncreases.progress.max}}</span>
</legend>
<input type="text" class="levelup-experience-increases" value="{{this.experienceIncreases.values}}" />
</div>
</fieldset>
{{/if}}
{{#if (gt this.domainCards.length 0)}}
<div>
<div class="card-section">
<div class="card-section-header">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h3>
<side-line-div></side-line-div>
</div>
<div class="tip">
</div>
<div class="levelup-card-selection domain-cards">
{{#each this.domainCards}}
{{#> "systems/daggerheart/templates/components/card-preview.hbs" this }}
{{#each this.emptySubtexts}}
<div>{{this}}</div>
<div class="">{{this}}</div>
{{/each}}
{{/"systems/daggerheart/templates/components/card-preview.hbs"}}
{{/each}}
@ -62,8 +67,12 @@
{{/if}}
{{#if (gt this.subclassCards.length 0)}}
<div>
<div class="card-section">
<div class="card-section-header">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h3>
<side-line-div></side-line-div>
</div>
<div class="levelup-card-selection subclass-cards">
{{#each this.subclassCards}}
@ -74,13 +83,18 @@
{{/if}}
{{#if this.multiclass}}
<div>
<div class="card-section">
<div class="card-section-header">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h3>
<side-line-div></side-line-div>
</div>
<div class="levelup-card-selection multiclass-cards" data-path="{{this.multiclass.path}}" data-tier="{{this.multiclass.tier}}" data-min-cost="{{this.multiclass.minCost}}" data-amount="{{this.multiclass.amount}}" data-value="{{this.multiclass.value}}" data-type="{{this.multiclass.type}}">
{{#> "systems/daggerheart/templates/components/card-preview.hbs" this.multiclass }}
{{this.multiclass.emptySubtext}}
{{/"systems/daggerheart/templates/components/card-preview.hbs"}}
{{#if this.multiclass.domains}}
<div class="levelup-domains-selection-container">
{{#each this.multiclass.domains}}
<div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectDomain" data-uuid="{{../multiclass.uuid}}" data-domain="{{this.id}}" data-path="{{../multiclass.path}}" {{/if}}>
@ -94,7 +108,8 @@
</div>
{{/each}}
</div>
{{/if}}
{{#if this.multiclass.subclasses}}
<div class="levelup-domains-selection-container">
{{#each this.multiclass.subclasses}}
<div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectSubclass" data-uuid="{{../multiclass.uuid}}" data-subclass="{{this.uuid}}" data-path="{{../multiclass.path}}" {{/if}}>
@ -108,6 +123,7 @@
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
{{/if}}

25
templates/levelup/tabs/summary.hbs
View file

@ -3,6 +3,13 @@
data-tab='{{tabs.summary.id}}'
data-group='{{tabs.summary.group}}'
>
<div class="summary-header">
<side-line-div class="invert"></side-line-div>
<h3>{{localize tabs.summary.label}}</h3>
<side-line-div></side-line-div>
</div>
<div class="section-container levelup-summary-container">
{{#if this.achievements}}
<fieldset>
@ -35,7 +42,7 @@
{{/if}}
{{#if this.achievements.domainCards.shown}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
<div class="summary-selection-container">
{{#each this.achievements.domainCards.values}}
<div class="summary-selection">{{this.name}}</div>
@ -45,7 +52,7 @@
{{/if}}
{{#if this.achievements.experiences.shown}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}</h5>
<div class="summary-selection-container">
{{#each this.achievements.experiences.values}}
<div class="summary-selection">{{this.name}} {{numberFormat this.modifier sign=true}}</div>
@ -97,7 +104,7 @@
{{#if this.advancements.traits}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}}</h5>
{{#each this.advancements.traits}}
<div class="increase-container">
@ -111,7 +118,7 @@
{{#if this.advancements.domainCards}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
<div class="summary-selection-container">
{{#each this.advancements.domainCards}}
<div class="summary-selection">{{this.name}}</div>
@ -122,7 +129,7 @@
{{#if this.advancements.experiences}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}}</h5>
<div class="summary-selection-container">
{{#each this.advancements.experiences}}
<div class="summary-selection">{{this.name}} {{numberFormat this.modifier sign=true}}</div>
@ -133,7 +140,7 @@
{{#if this.advancements.subclass}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h5>
<div class="summary-selection-container">
{{#each this.advancements.subclass}}
<div class="summary-selection">{{this.name}} - {{this.featureLabel}}</div>
@ -145,7 +152,7 @@
{{#if this.advancements.multiclass}}
{{#with this.advancements.multiclass}}
<div>
<h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h5>
<h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h5>
<div class="summary-selection-container">
<div class="summary-selection">{{this.name}}</div>
<div class="summary-selection">{{this.domain}}</div>
@ -176,9 +183,5 @@
{{/each}}
</div>
</fieldset>
<footer class="levelup-footer">
<button data-action="save" {{#if (not this.levelup.allLevelsFinished)}}disabled{{/if}}>{{localize "Finish Levelup"}}</button>
</footer>
</div>
</section>

28
templates/levelup/tabs/tab-navigation.hbs
View file

@ -1,3 +1,4 @@
{{#unless tabs.summary.active}}
<section class='tab-navigation'>
{{#if levelupAuto}}
<line-div></line-div>
@ -9,36 +10,19 @@
<div class="levelup-tab-container">
<a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
{{localize tab.label}}
</a>
{{#if tab.progress}}
<div>{{tab.progress.selected}}/{{tab.progress.max}}</div>
<span>{{tab.progress.selected}}/{{tab.progress.max}}</span>
{{/if}}
</a>
</div>
{{/if}}
{{/each}}
</nav>
{{/if}}
{{#if this.levelupAuto}}
<div class="levelup-navigation-actions {{#if (not this.showTabs)}}test{{/if}}">
{{#if this.navigate.previous.fromSummary}}
<button data-action="activatePart" data-part="advancements">{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToLevelup"}}</button>
{{else}}
{{#if (not this.navigate.previous.disabled)}}
<button data-action="updateCurrentLevel" >{{this.navigate.previous.label}}</button>
{{/if}}
{{/if}}
{{#if this.navigate.next.show}}
{{#if this.navigate.next.toSummary}}
<button data-action="activatePart" data-part="summary" {{#if this.navigate.next.disabled}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToSummary"}}</button>
{{else}}
<button data-action="updateCurrentLevel" data-forward="true" {{#if this.navigate.next.disabled}}disabled{{/if}}>{{this.navigate.next.label}}</button>
{{/if}}
{{else}}
<div></div>
{{/if}}
</div>
{{/if}}
</div>
<line-div></line-div>
{{/if}}
</section>
{{else}}
<section></section>
{{/unless}}