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 @@ +