diff --git a/lang/en.json b/lang/en.json index db025713..ef8fb69e 100755 --- a/lang/en.json +++ b/lang/en.json @@ -1256,7 +1256,11 @@ "setup": "Setup", "equipment": "Equipment", "attachments": "Attachments", - "advanced": "Advanced" + "advanced": "Advanced", + "tier1": "Tier 1", + "tier2": "Tier 2", + "tier3": "Tier 3", + "tier4": "tier 4" }, "Tiers": { "singular": "Tier", diff --git a/module/applications/dialogs/beastformDialog.mjs b/module/applications/dialogs/beastformDialog.mjs index 78354f82..1d6725ad 100644 --- a/module/applications/dialogs/beastformDialog.mjs +++ b/module/applications/dialogs/beastformDialog.mjs @@ -16,7 +16,7 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat tag: 'form', classes: ['daggerheart', 'views', 'dh-style', 'beastform-selection'], position: { - width: 'auto', + width: 600, height: 'auto' }, actions: { @@ -39,11 +39,27 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat /** @override */ static PARTS = { - beastform: { - template: 'systems/daggerheart/templates/dialogs/beastform/beastformDialog.hbs' + tabs: { template: 'systems/daggerheart/templates/dialogs/beastform/tabs.hbs' }, + beastformTier: { template: 'systems/daggerheart/templates/dialogs/beastform/beastformTier.hbs' }, + advanced: { template: 'systems/daggerheart/templates/dialogs/beastform/advanced.hbs' }, + footer: { template: 'systems/daggerheart/templates/dialogs/beastform/footer.hbs' } + }; + + /** @inheritdoc */ + static TABS = { + primary: { + tabs: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], + initial: '1', + labelPrefix: 'DAGGERHEART.GENERAL.Tiers' } }; + changeTab(tab, group, options) { + super.changeTab(tab, group, options); + + this.render(); + } + _createDragDropHandlers() { return this.options.dragDrop.map(d => { d.callbacks = { @@ -101,7 +117,7 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat ); const compendiumBeastforms = await game.packs.get(`daggerheart.beastforms`)?.getDocuments(); - context.beastformTiers = [...(compendiumBeastforms ? compendiumBeastforms : []), ...game.items].reduce( + const beastformTiers = [...(compendiumBeastforms ? compendiumBeastforms : []), ...game.items].reduce( (acc, x) => { const tier = CONFIG.DH.GENERAL.tiers[x.system.tier]; if (x.type !== 'beastform' || tier.id > this.configData.tierLimit) return acc; @@ -122,6 +138,9 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat {} ); + context.tier = beastformTiers[this.tabGroups.primary]; + context.tierKey = this.tabGroups.primary; + context.canSubmit = this.canSubmit(); return context; @@ -171,12 +190,6 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat const uuid = this.selected?.uuid === target.dataset.uuid ? null : target.dataset.uuid; this.selected = uuid ? await foundry.utils.fromUuid(uuid) : null; - if (this.selected && this.selected.system.beastformType !== CONFIG.DH.ITEM.beastformTypes.normal.id) { - this.element.querySelector('.advanced-container').classList.add('expanded'); - } else { - this.element.querySelector('.advanced-container').classList.remove('expanded'); - } - if (this.selected) { if (this.selected.system.beastformType !== 'evolved') this.evolved.form = null; if (this.selected.system.beastformType !== 'hybrid') { diff --git a/styles/less/dialog/beastform/sheet.less b/styles/less/dialog/beastform/sheet.less index 0f1a150e..ce2e990d 100644 --- a/styles/less/dialog/beastform/sheet.less +++ b/styles/less/dialog/beastform/sheet.less @@ -23,188 +23,181 @@ } .application.daggerheart.dh-style.views.beastform-selection { - .beastforms-outer-container { - display: flex; - overflow: hidden; + .beastform-nav { + nav { + flex: 1; - .beastform-title { - position: absolute; - top: 4px; - padding: 0 2px; + a { + white-space: nowrap; + } + } + } + + .beastform-title { + position: absolute; + top: 4px; + padding: 0 2px; + display: flex; + flex-wrap: wrap; + text-align: center; + font-size: 16px; + margin: 0 4px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 6px; + color: light-dark(@dark, @beige); + background-image: url('../assets/parchments/dh-parchment-dark.png'); + } + + .beastforms-tier { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 4px; + + .beastform-container { + position: relative; display: flex; - flex-wrap: wrap; - text-align: center; - font-size: 16px; - margin: 0 4px; + justify-content: center; border: 1px solid light-dark(@dark-blue, @golden); border-radius: 6px; + cursor: pointer; + width: 120px; + height: 120px; + + &.inactive { + opacity: 0.4; + cursor: default; + } + + &.draggable { + cursor: pointer; + filter: drop-shadow(0 0 15px light-dark(@dark-blue, @golden)); + } + + img { + width: 100%; + border-radius: 6px; + } + } + } + + .advanced-container { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 12px; + transition: width 0.3s ease; + + h2 { + margin: 0; + } + + .advanced-forms-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 16px; + } + + .advanced-form-container { + position: relative; + display: flex; + justify-content: center; + border: 1px solid light-dark(#18162e, #f3c267); + border-radius: 6px; + cursor: pointer; + width: 120px; + height: 120px; + align-items: center; + text-align: center; color: light-dark(@dark, @beige); background-image: url('../assets/parchments/dh-parchment-dark.png'); - } - .beastforms-container { - display: flex; - flex-direction: column; - gap: 4px; - width: 600px; + &.hybridized { + flex-direction: column; + justify-content: start; + padding-top: 4px; + height: 200px; + width: 100%; + overflow: hidden; - .beastforms-tier { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 4px; - - .beastform-container { - position: relative; - display: flex; + &.empty { justify-content: center; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 6px; - cursor: pointer; - width: 120px; - height: 120px; + } - &.inactive { - opacity: 0.4; - cursor: default; - } - - &.draggable { - cursor: pointer; - filter: drop-shadow(0 0 15px light-dark(@dark-blue, @golden)); - } - - img { - width: 100%; - border-radius: 6px; - } + .beastform-title { + position: initial; } } - } - .advanced-container { - width: 0; - display: flex; - flex-direction: column; - align-items: center; - padding-top: 12px; - transition: width 0.3s ease; - - &.expanded { - width: 300px; - } - - h2 { - margin: 0; - } - - .advanced-forms-container { + .empty-form { display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 16px; - } - - .advanced-form-container { - position: relative; - display: flex; - justify-content: center; - border: 1px solid light-dark(#18162e, #f3c267); - border-radius: 6px; - cursor: pointer; - width: 120px; - height: 120px; + flex-direction: column; align-items: center; - text-align: center; - color: light-dark(@dark, @beige); - background-image: url('../assets/parchments/dh-parchment-dark.png'); - &.hybridized { - flex-direction: column; - justify-content: start; - padding-top: 4px; - height: 200px; - overflow: hidden; - - &.empty { - justify-content: center; - } - - .beastform-title { - position: initial; - } + i { + font-size: 24px; } + } - .empty-form { + .beastform-title-wrapper { + height: 44px; + } + + .hybrid-data-wrapper { + overflow: auto; + + .hybrid-data-container { display: flex; flex-direction: column; - align-items: center; + gap: 2px; + padding: 0 4px; - i { - font-size: 24px; + label { + font-weight: bold; } - } - .beastform-title-wrapper { - height: 44px; - } - - .hybrid-data-wrapper { - overflow: auto; - - .hybrid-data-container { + .hybrid-data-inner-container { display: flex; - flex-direction: column; - gap: 2px; - padding: 0 4px; + justify-content: center; + flex-wrap: wrap; + gap: 4px; - label { - font-weight: bold; - } + .hybrid-data { + padding: 0 2px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 6px; + color: light-dark(@dark, @beige); + background-image: url('../assets/parchments/dh-parchment-dark.png'); + opacity: 0.4; - .hybrid-data-inner-container { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 4px; - - .hybrid-data { - padding: 0 2px; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 6px; - color: light-dark(@dark, @beige); - background-image: url('../assets/parchments/dh-parchment-dark.png'); - opacity: 0.4; - - &.active { - opacity: 1; - } + &.active { + opacity: 1; } } } } } + } - .form-features { + .form-features { + display: flex; + flex-direction: column; + gap: 8px; + padding: 0 16px; + margin: 8px 0; + + .form-feature { display: flex; flex-direction: column; - gap: 8px; - padding: 0 16px; - margin: 8px 0; + gap: 4px; + padding: 0 4px; + border: 1px solid light-dark(@dark-blue, @golden); + border-radius: 6px; + color: light-dark(@dark, @beige); + background-image: url('../assets/parchments/dh-parchment-dark.png'); - .form-feature { - display: flex; - flex-direction: column; - gap: 4px; - padding: 0 4px; - border: 1px solid light-dark(@dark-blue, @golden); - border-radius: 6px; - color: light-dark(@dark, @beige); - background-image: url('../assets/parchments/dh-parchment-dark.png'); - - h4 { - text-align: center; - margin: 0; - } + h4 { + text-align: center; + margin: 0; } } } diff --git a/templates/dialogs/beastform/advanced.hbs b/templates/dialogs/beastform/advanced.hbs new file mode 100644 index 00000000..78a690da --- /dev/null +++ b/templates/dialogs/beastform/advanced.hbs @@ -0,0 +1,73 @@ +
+ {{#if (eq selected.system.beastformType 'evolved')}} +

{{localize "DAGGERHEART.ITEMS.Beastform.evolve"}}

+ +
+ {{#if selectedBeastformEffect}} +
+

{{localize "DAGGERHEART.ITEMS.Beastform.evolvedFeatureTitle"}}

+
{{{selectedBeastformEffect.description}}}
+
+ {{/if}} +
+ +
+ {{#if evolved.form}} +
{{concat (localize "DAGGERHEART.CONFIG.BeastformType.evolved") " " evolved.form.name}}
+ + {{else}} +
+ + +
+ {{/if}} +
+ {{/if}} + {{#if (eq selected.system.beastformType 'hybrid')}} +

{{localize "DAGGERHEART.ITEMS.Beastform.hybridize"}}

+ +
+ {{#if selectedBeastformEffect}} +
+

{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeFeatureTitle"}}

+
{{{selectedBeastformEffect.description}}}
+
+ {{/if}} +
+ +
+ {{#each hybridForms as | form key |}} +
+ {{#if form}} +
+
{{form.name}}
+
+
+
+ +
+ {{#each form.system.features as | feature |}} +
{{feature.name}}
+ {{/each}} +
+
+
+ +
+ {{#each form.system.advantageOn as | advantage id |}} +
{{advantage.value}}
+ {{/each}} +
+
+
+ {{else}} +
+ + +
+ {{/if}} +
+ {{/each}} +
+ {{/if}} +
\ No newline at end of file diff --git a/templates/dialogs/beastform/beastformDialog.hbs b/templates/dialogs/beastform/beastformDialog.hbs deleted file mode 100644 index f5e772cf..00000000 --- a/templates/dialogs/beastform/beastformDialog.hbs +++ /dev/null @@ -1,94 +0,0 @@ -
-
-
- {{#each beastformTiers as |tier tierKey|}} -
- {{tier.label}} - {{#each tier.values as |form uuid|}} -
- -
{{form.value.name}}
-
- {{/each}} -
- {{/each}} -
-
- {{#if (eq selected.system.beastformType 'evolved')}} -

{{localize "DAGGERHEART.ITEMS.Beastform.evolve"}}

- -
- {{#if selectedBeastformEffect}} -
-

{{localize "DAGGERHEART.ITEMS.Beastform.evolvedFeatureTitle"}}

-
{{{selectedBeastformEffect.description}}}
-
- {{/if}} -
- -
- {{#if evolved.form}} -
{{concat (localize "DAGGERHEART.CONFIG.BeastformType.evolved") " " evolved.form.name}}
- - {{else}} -
- - -
- {{/if}} -
- {{/if}} - {{#if (eq selected.system.beastformType 'hybrid')}} -

{{localize "DAGGERHEART.ITEMS.Beastform.hybridize"}}

- -
- {{#if selectedBeastformEffect}} -
-

{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeFeatureTitle"}}

-
{{{selectedBeastformEffect.description}}}
-
- {{/if}} -
- -
- {{#each hybridForms as | form key |}} -
- {{#if form}} -
-
{{form.name}}
-
-
-
- -
- {{#each form.system.features as | feature |}} -
{{feature.name}}
- {{/each}} -
-
-
- -
- {{#each form.system.advantageOn as | advantage id |}} -
{{advantage.value}}
- {{/each}} -
-
-
- {{else}} -
- - -
- {{/if}} -
- {{/each}} -
- {{/if}} -
-
- - -
\ No newline at end of file diff --git a/templates/dialogs/beastform/beastformTier.hbs b/templates/dialogs/beastform/beastformTier.hbs new file mode 100644 index 00000000..db307158 --- /dev/null +++ b/templates/dialogs/beastform/beastformTier.hbs @@ -0,0 +1,8 @@ +
+ {{#each tier.values as |form uuid|}} +
+ +
{{form.value.name}}
+
+ {{/each}} +
\ No newline at end of file diff --git a/templates/dialogs/beastform/footer.hbs b/templates/dialogs/beastform/footer.hbs new file mode 100644 index 00000000..8ad53964 --- /dev/null +++ b/templates/dialogs/beastform/footer.hbs @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/templates/dialogs/beastform/tabs.hbs b/templates/dialogs/beastform/tabs.hbs new file mode 100644 index 00000000..25bb2180 --- /dev/null +++ b/templates/dialogs/beastform/tabs.hbs @@ -0,0 +1,11 @@ +
+ +
\ No newline at end of file