Split the BeastformDialog into parts with tabs

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",

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: {
+        tabs: { template: 'systems/daggerheart/templates/dialogs/beastform/tabs.hbs' },
-            template: 'systems/daggerheart/templates/dialogs/beastform/beastformDialog.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') {

styles/less/dialog/beastform/sheet.less

@@ -23,188 +23,181 @@
 }
 
 .application.daggerheart.dh-style.views.beastform-selection {
-    .beastforms-outer-container {
+    .beastform-nav {
-        display: flex;
+        nav {
-        overflow: hidden;
+            flex: 1;
 
-        .beastform-title {
+            a {
-            position: absolute;
+                white-space: nowrap;
-            top: 4px;
+            }
-            padding: 0 2px;
+        }
+    }
+
+    .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;
+            justify-content: center;
-            text-align: center;
-            font-size: 16px;
-            margin: 0 4px;
             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 {
+            &.hybridized {
-            display: flex;
+                flex-direction: column;
-            flex-direction: column;
+                justify-content: start;
-            gap: 4px;
+                padding-top: 4px;
-            width: 600px;
+                height: 200px;
+                width: 100%;
+                overflow: hidden;
 
-            .beastforms-tier {
+                &.empty {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr 1fr;
-                gap: 4px;
-
-                .beastform-container {
-                    position: relative;
-                    display: flex;
                     justify-content: center;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                }
-                    border-radius: 6px;
-                    cursor: pointer;
-                    width: 120px;
-                    height: 120px;
 
-                    &.inactive {
+                .beastform-title {
-                        opacity: 0.4;
+                    position: initial;
-                        cursor: default;
-                    }
-
-                    &.draggable {
-                        cursor: pointer;
-                        filter: drop-shadow(0 0 15px light-dark(@dark-blue, @golden));
-                    }
-
-                    img {
-                        width: 100%;
-                        border-radius: 6px;
-                    }
                 }
             }
-        }
 
-        .advanced-container {
+            .empty-form {
-            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 {
                 display: flex;
-                flex-wrap: wrap;
+                flex-direction: column;
-                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;
                 align-items: center;
-                text-align: center;
-                color: light-dark(@dark, @beige);
-                background-image: url('../assets/parchments/dh-parchment-dark.png');
 
-                &.hybridized {
+                i {
-                    flex-direction: column;
+                    font-size: 24px;
-                    justify-content: start;
-                    padding-top: 4px;
-                    height: 200px;
-                    overflow: hidden;
-
-                    &.empty {
-                        justify-content: center;
-                    }
-
-                    .beastform-title {
-                        position: initial;
-                    }
                 }
+            }
 
-                .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 {
+                    label {
-                        font-size: 24px;
+                        font-weight: bold;
                     }
-                }
 
-                .beastform-title-wrapper {
+                    .hybrid-data-inner-container {
-                    height: 44px;
-                }
-
-                .hybrid-data-wrapper {
-                    overflow: auto;
-
-                    .hybrid-data-container {
                         display: flex;
-                        flex-direction: column;
+                        justify-content: center;
-                        gap: 2px;
+                        flex-wrap: wrap;
-                        padding: 0 4px;
+                        gap: 4px;
 
-                        label {
+                        .hybrid-data {
-                            font-weight: bold;
+                            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 {
+                            &.active {
-                            display: flex;
+                                opacity: 1;
-                            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;
-                                }
                             }
                         }
                     }
                 }
             }
+        }
 
-            .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;
+                gap: 4px;
-                padding: 0 16px;
+                padding: 0 4px;
-                margin: 8px 0;
+                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 {
+                h4 {
-                    display: flex;
+                    text-align: center;
-                    flex-direction: column;
+                    margin: 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');
-
-                    h4 {
-                        text-align: center;
-                        margin: 0;
-                    }
                 }
             }
         }

templates/dialogs/beastform/advanced.hbs

@@ -0,0 +1,73 @@
+<div class="advanced-container">
+    {{#if (eq selected.system.beastformType 'evolved')}}
+        <h2>{{localize "DAGGERHEART.ITEMS.Beastform.evolve"}}</h2>
+
+        <div class="form-features">   
+            {{#if selectedBeastformEffect}}
+                <div class="form-feature" data-tooltip="{{concat "#item#" selectedBeastformEffect.uuid}}">
+                    <h4>{{localize "DAGGERHEART.ITEMS.Beastform.evolvedFeatureTitle"}}</h4>
+                    <div>{{{selectedBeastformEffect.description}}}</div>
+                </div>
+            {{/if}}
+        </div>
+
+        <div class="advanced-form-container evolved">
+            {{#if evolved.form}}
+                <div class="beastform-title">{{concat (localize "DAGGERHEART.CONFIG.BeastformType.evolved") " " evolved.form.name}}</div>
+                <img src="{{evolved.form.img}}" />                        
+            {{else}}
+                <div class="empty-form">
+                    <i class="fa-solid fa-plus"></i>
+                    <label>{{localize "DAGGERHEART.ITEMS.Beastform.evolvedDrag"}}</label>
+                </div>
+            {{/if}}
+        </div>
+    {{/if}}
+    {{#if (eq selected.system.beastformType 'hybrid')}}
+        <h2>{{localize "DAGGERHEART.ITEMS.Beastform.hybridize"}}</h2>
+
+        <div class="form-features">   
+            {{#if selectedBeastformEffect}}
+                <div class="form-feature" data-tooltip="{{concat "#item#" selectedBeastformEffect.uuid}}">
+                    <h4>{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeFeatureTitle"}}</h4>
+                    <div>{{{selectedBeastformEffect.description}}}</div>
+                </div>
+            {{/if}}
+        </div>
+
+        <div class="advanced-forms-container">
+            {{#each hybridForms as | form key |}}
+                <div class="advanced-form-container hybridized {{#unless form}}empty{{/unless}}" id="{{key}}">
+                    {{#if form}}
+                        <div class="beastform-title-wrapper">
+                            <div class="beastform-title">{{form.name}}</div>
+                        </div>
+                        <div class="hybrid-data-wrapper">
+                            <div class="hybrid-data-container">
+                                <label>{{localize "DAGGERHEART.GENERAL.features"}}</label>
+                                <div class="hybrid-data-inner-container">
+                                    {{#each form.system.features as | feature |}}
+                                        <a data-action="toggleHybridFeature" id="{{feature.uuid}}" data-form="{{@../key}}"><div class="hybrid-data {{#if feature.selected}}active{{/if}}" data-tooltip="{{concat "#item#" feature.uuid}}">{{feature.name}}</div></a>
+                                    {{/each}}
+                                </div>
+                            </div>    
+                            <div class="hybrid-data-container">
+                                <label>{{localize "DAGGERHEART.GENERAL.Advantage.plural"}}</label>
+                                <div class="hybrid-data-inner-container">
+                                    {{#each form.system.advantageOn as | advantage id |}}
+                                        <a data-action="toggleHybridAdvantage" id="{{id}}" data-form="{{@../key}}"><div class="hybrid-data {{#if advantage.selected}}active{{/if}}">{{advantage.value}}</div></a>
+                                    {{/each}}
+                                </div>
+                            </div>     
+                        </div>               
+                    {{else}}
+                        <div class="empty-form">
+                            <i class="fa-solid fa-plus"></i>
+                            <label>{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeDrag"}}</label>
+                        </div>
+                    {{/if}}
+                </div>
+            {{/each}}
+        </div>
+    {{/if}}
+</div>

templates/dialogs/beastform/beastformDialog.hbs

@@ -1,94 +0,0 @@
-<div>
-    <div class="beastforms-outer-container">
-        <div class="beastforms-container">
-            {{#each beastformTiers as |tier tierKey|}}
-                <fieldset class="beastforms-tier">
-                    <legend>{{tier.label}}</legend>
-                    {{#each tier.values as |form uuid|}}
-                        <div data-action="selectBeastform" data-uuid="{{uuid}}" data-tooltip="{{concat "#item#" uuid}}" class="beastform-container {{#unless form.selected}}inactive{{/unless}} {{#if form.draggable}}draggable{{/if}}">
-                            <img src="{{form.value.img}}" />
-                            <div class="beastform-title">{{form.value.name}}</div>
-                        </div>
-                    {{/each}}
-                </fieldset>
-            {{/each}}
-        </div>
-        <div class="advanced-container {{#if (or (eq selected.system.beastformType 'evolved') (eq selected.system.beastformType 'hybrid'))}}expanded{{/if}}">
-            {{#if (eq selected.system.beastformType 'evolved')}}
-                <h2>{{localize "DAGGERHEART.ITEMS.Beastform.evolve"}}</h2>
-
-                <div class="form-features">   
-                    {{#if selectedBeastformEffect}}
-                        <div class="form-feature" data-tooltip="{{concat "#item#" selectedBeastformEffect.uuid}}">
-                            <h4>{{localize "DAGGERHEART.ITEMS.Beastform.evolvedFeatureTitle"}}</h4>
-                            <div>{{{selectedBeastformEffect.description}}}</div>
-                        </div>
-                    {{/if}}
-                </div>
-
-                <div class="advanced-form-container evolved">
-                    {{#if evolved.form}}
-                        <div class="beastform-title">{{concat (localize "DAGGERHEART.CONFIG.BeastformType.evolved") " " evolved.form.name}}</div>
-                        <img src="{{evolved.form.img}}" />                        
-                    {{else}}
-                        <div class="empty-form">
-                            <i class="fa-solid fa-plus"></i>
-                            <label>{{localize "DAGGERHEART.ITEMS.Beastform.evolvedDrag"}}</label>
-                        </div>
-                    {{/if}}
-                </div>
-            {{/if}}
-            {{#if (eq selected.system.beastformType 'hybrid')}}
-                <h2>{{localize "DAGGERHEART.ITEMS.Beastform.hybridize"}}</h2>
-
-                <div class="form-features">   
-                    {{#if selectedBeastformEffect}}
-                        <div class="form-feature" data-tooltip="{{concat "#item#" selectedBeastformEffect.uuid}}">
-                            <h4>{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeFeatureTitle"}}</h4>
-                            <div>{{{selectedBeastformEffect.description}}}</div>
-                        </div>
-                    {{/if}}
-                </div>
-
-                <div class="advanced-forms-container">
-                    {{#each hybridForms as | form key |}}
-                        <div class="advanced-form-container hybridized {{#unless form}}empty{{/unless}}" id="{{key}}">
-                            {{#if form}}
-                                <div class="beastform-title-wrapper">
-                                    <div class="beastform-title">{{form.name}}</div>
-                                </div>
-                                <div class="hybrid-data-wrapper">
-                                    <div class="hybrid-data-container">
-                                        <label>{{localize "DAGGERHEART.GENERAL.features"}}</label>
-                                        <div class="hybrid-data-inner-container">
-                                            {{#each form.system.features as | feature |}}
-                                                <a data-action="toggleHybridFeature" id="{{feature.uuid}}" data-form="{{@../key}}"><div class="hybrid-data {{#if feature.selected}}active{{/if}}" data-tooltip="{{concat "#item#" feature.uuid}}">{{feature.name}}</div></a>
-                                            {{/each}}
-                                        </div>
-                                    </div>    
-                                    <div class="hybrid-data-container">
-                                        <label>{{localize "DAGGERHEART.GENERAL.Advantage.plural"}}</label>
-                                        <div class="hybrid-data-inner-container">
-                                            {{#each form.system.advantageOn as | advantage id |}}
-                                                <a data-action="toggleHybridAdvantage" id="{{id}}" data-form="{{@../key}}"><div class="hybrid-data {{#if advantage.selected}}active{{/if}}">{{advantage.value}}</div></a>
-                                            {{/each}}
-                                        </div>
-                                    </div>     
-                                </div>               
-                            {{else}}
-                                <div class="empty-form">
-                                    <i class="fa-solid fa-plus"></i>
-                                    <label>{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeDrag"}}</label>
-                                </div>
-                            {{/if}}
-                        </div>
-                    {{/each}}
-                </div>
-            {{/if}}
-        </div>
-    </div>
-
-    <footer>
-        <button type="button" data-action="submitBeastform" {{#if (not canSubmit)}}disabled{{/if}}>{{localize "DAGGERHEART.ITEMS.Beastform.transform"}}</button>
-    </footer>
-</div>

templates/dialogs/beastform/beastformTier.hbs

@@ -0,0 +1,8 @@
+<div class="beastforms-tier">
+    {{#each tier.values as |form uuid|}}
+        <div data-action="selectBeastform" data-uuid="{{uuid}}" data-tooltip="{{concat "#item#" uuid}}" class="beastform-container {{#unless form.selected}}inactive{{/unless}} {{#if form.draggable}}draggable{{/if}}">
+            <img src="{{form.value.img}}" />
+            <div class="beastform-title">{{form.value.name}}</div>
+        </div>
+    {{/each}}
+</div>

templates/dialogs/beastform/footer.hbs

@@ -0,0 +1,3 @@
+<footer>
+    <button type="button" data-action="submitBeastform" {{#if (not canSubmit)}}disabled{{/if}}>{{localize "DAGGERHEART.ITEMS.Beastform.transform"}}</button>
+</footer>

templates/dialogs/beastform/tabs.hbs

@@ -0,0 +1,11 @@
+<section class='tab-navigation'>
+    <div class='navigation-container beastform-nav'>
+        <nav class='feature-tab sheet-tabs tabs' data-group='primary'>
+            {{#each tabs as |tab|}}
+                <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
+                    {{localize tab.label}}
+                </a>
+            {{/each}}
+        </nav>
+    </div>
+</section>