Finished Evolved

lang/en.json

@@ -13,6 +13,9 @@
             "armor": "Armor",
             "beastform": "Beastform"
         },
+        "ActiveEffect": {
+            "beastform": "Beastform"
+        },
         "Actor": {
             "character": "Character",
             "companion": "Companion",
@@ -1298,6 +1301,7 @@
                 "FIELDS": {
                     "beastformType": { "label": "Beastform Type" },
                     "tier": { "label": "Tier" },
+                    "mainTrait": { "label": "Main Trait" },
                     "examples": { "label": "Examples" },
                     "advantageOn": { "label": "Gain Advantage On" },
                     "tokenImg": { "label": "Token Image" },
@@ -1308,7 +1312,8 @@
                         "width": { "label": "Width" }
                     },
                     "evolved": {
-                        "maximumTier": { "label": "Maximum Tier" }
+                        "maximumTier": { "label": "Maximum Tier" },
+                        "mainTraitBonus": { "label": "Main Trait Bonus" }
                     },
                     "hybrid": {
                         "beastformOptions": { "label": "Nr Beastforms" },
@@ -1319,7 +1324,11 @@
                 "dialogTitle": "Beastform Selection",
                 "tokenTitle": "Beastform Token",
                 "transform": "Transform",
-                "beastformEffect": "Beastform Transformation"
+                "beastformEffect": "Beastform Transformation",
+                "evolve": "Evolve",
+                "evolvedFeatureTitle": "Evolved",
+                "hybridize": "Hybridize",
+                "hybridFeatureTitle": "Hybrid Features"
             },
             "Class": {
                 "hopeFeatures": "Hope Features",
@@ -1563,7 +1572,8 @@
                 "featureNotSecondary": "This feature is used as something else than a Secondary feature and cannot be used here.",
                 "featureNotFoundation": "This feature is used as something else than a Foundation feature and cannot be used here.",
                 "featureNotSpecialization": "This feature is used as something else than a Specialization feature and cannot be used here.",
-                "featureNotMastery": "This feature is used as something else than a Mastery feature and cannot be used here."
+                "featureNotMastery": "This feature is used as something else than a Mastery feature and cannot be used here.",
+                "beastformMissingEffect": "The Beastform is missing a Beastform Effect. Cannot be used."
             },
             "Tooltip": {
                 "openItemWorld": "Open Item World",

module/applications/dialogs/beastformDialog.mjs

@@ -6,13 +6,17 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat
 
         this.configData = configData;
         this.selected = null;
+        this.evolved = { form: null };
+        this.hybrid = null;
+
+        this._dragDrop = this._createDragDropHandlers();
     }
 
     static DEFAULT_OPTIONS = {
         tag: 'form',
         classes: ['daggerheart', 'views', 'dh-style', 'beastform-selection'],
         position: {
-            width: 600,
+            width: 'auto',
             height: 'auto'
         },
         actions: {
@@ -23,7 +27,8 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat
             handler: this.updateBeastform,
             submitOnChange: true,
             submitOnClose: false
-        }
+        },
+        dragDrop: [{ dragSelector: '.beastform-container', dropSelector: '.advanced-form-container' }]
     };
 
     get title() {
@@ -37,29 +42,73 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat
         }
     };
 
-    // _attachPartListeners(partId, htmlElement, options) {
+    _createDragDropHandlers() {
-    //     super._attachPartListeners(partId, htmlElement, options);
+        return this.options.dragDrop.map(d => {
+            d.callbacks = {
+                dragstart: this._onDragStart.bind(this),
+                drop: this._onDrop.bind(this)
+            };
+            return new foundry.applications.ux.DragDrop.implementation(d);
+        });
+    }
 
-    //     htmlElement.querySelector('');
+    _attachPartListeners(partId, htmlElement, options) {
-    // }
+        super._attachPartListeners(partId, htmlElement, options);
+
+        this._dragDrop.forEach(d => d.bind(htmlElement));
+    }
 
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
 
-        context.beastformTiers = game.items.reduce((acc, x) => {
+        context.selected = this.selected;
-            const tier = CONFIG.DH.GENERAL.tiers[x.system.tier];
+        context.selectedBeastformEffect = this.selected?.effects?.find?.(x => x.type === 'beastform');
-            if (x.type !== 'beastform' || tier.value > this.configData.tierLimit) return acc;
 
-            if (!acc[tier.value]) acc[tier.value] = { label: game.i18n.localize(tier.label), values: {} };
+        context.evolved = this.evolved;
-            acc[tier.value].values[x.uuid] = { selected: this.selected == x.uuid, value: x };
+        context.hybrid = this.hybrid;
 
-            return acc;
+        const maximumDragTier = Math.max(
-        }, {}); // Also get from compendium when added
+            this.selected?.system?.evolved?.maximumTier ?? 0,
-        context.canSubmit = this.selected;
+            this.selected?.system?.hybrid?.maximumTier ?? 0
+        );
+
+        const compendiumBeastforms = await game.packs.get(`daggerheart.beastforms`)?.getDocuments();
+        context.beastformTiers = [...(compendiumBeastforms ? compendiumBeastforms : []), ...game.items].reduce(
+            (acc, x) => {
+                const tier = CONFIG.DH.GENERAL.tiersAlternate[x.system.tier];
+                if (x.type !== 'beastform' || tier.id > this.configData.tierLimit) return acc;
+
+                if (!acc[tier.id]) acc[tier.id] = { label: game.i18n.localize(tier.label), values: {} };
+
+                acc[tier.id].values[x.uuid] = {
+                    selected: this.selected?.uuid == x.uuid,
+                    value: x,
+                    draggable: maximumDragTier ? x.system.tier <= maximumDragTier : false
+                };
+
+                return acc;
+            },
+            {}
+        ); // Also get from compendium when added
+
+        context.canSubmit = this.canSubmit();
 
         return context;
     }
 
+    canSubmit() {
+        if (this.selected) {
+            switch (this.selected.system.beastformType) {
+                case 'normal':
+                    return true;
+                case 'evolved':
+                    return this.evolved.form;
+            }
+        }
+
+        return false;
+    }
+
     static updateBeastform(event, _, formData) {
         this.selected = foundry.utils.mergeObject(this.selected, formData.object);
 
@@ -67,12 +116,26 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat
     }
 
     static async selectBeastform(_, target) {
-        this.selected = this.selected === target.dataset.uuid ? null : target.dataset.uuid;
+        this.element.querySelectorAll('.beastform-container ').forEach(element => {
-        const beastform = this.selected ? await foundry.utils.fromUuid(this.selected) : null;
+            if (element.dataset.uuid === target.dataset.uuid && this.selected?.uuid !== target.dataset.uuid) {
-        if (beastform && beastform.system.beastformType !== CONFIG.DH.ITEM.beastformTypes.normal.id) {
+                element.classList.remove('inactive');
-            this.element.classList.add('expanded');
+            } else {
+                element.classList.add('inactive');
+            }
+        });
+
+        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.classList.remove('expanded');
+            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') this.hybrid = null;
         }
 
         this.render();
@@ -84,14 +147,55 @@ export default class BeastformDialog extends HandlebarsApplicationMixin(Applicat
 
     /** @override */
     _onClose(options = {}) {
-        if (!options.submitted) this.config = false;
+        if (!options.submitted) this.selected = null;
     }
 
     static async configure(configData) {
         return new Promise(resolve => {
             const app = new this(configData);
-            app.addEventListener('close', () => resolve(app.selected), { once: true });
+            app.addEventListener(
+                'close',
+                () => resolve({ selected: app.selected, evolved: app.evolved, hybrid: app.hybrid }),
+                { once: true }
+            );
             app.render({ force: true });
         });
     }
+
+    async _onDragStart(event) {
+        const target = event.currentTarget;
+        if (!this.selected) {
+            event.preventDefault();
+            return;
+        }
+
+        const draggedForm = await foundry.utils.fromUuid(target.dataset.uuid);
+        if (this.selected.system.beastformType === 'evolved') {
+            if (draggedForm.system.tier > this.selected.system.evolved.maximumTier) {
+                event.preventDefault();
+                return;
+            }
+        }
+        if (this.selected.system.beastformType === 'hybrid') {
+            if (draggedForm.system.tier > this.selected.system.hybrid.maximumTier) {
+                event.preventDefault();
+                return;
+            }
+        }
+
+        event.dataTransfer.setData('text/plain', JSON.stringify(target.dataset));
+        event.dataTransfer.setDragImage(target, 60, 0);
+    }
+
+    async _onDrop(event) {
+        event.stopPropagation();
+        const data = foundry.applications.ux.TextEditor.getDragEventData(event);
+        const item = await fromUuid(data.uuid);
+
+        if (event.target.closest('.advanced-form-container.evolved')) {
+            this.evolved.form = item;
+        }
+
+        this.render();
+    }
 }

module/applications/sheets/items/beastform.mjs

@@ -1,4 +1,5 @@
 import DHBaseItemSheet from '../api/base-item.mjs';
+import Tagify from '@yaireo/tagify';
 
 export default class BeastformSheet extends DHBaseItemSheet {
     /**@inheritdoc */
@@ -30,6 +31,17 @@ export default class BeastformSheet extends DHBaseItemSheet {
         }
     };
 
+    _attachPartListeners(partId, htmlElement, options) {
+        super._attachPartListeners(partId, htmlElement, options);
+
+        const advantageOnInput = htmlElement.querySelector('.advantageon-input');
+        if (advantageOnInput) {
+            const tagifyElement = new Tagify(advantageOnInput);
+            tagifyElement.on('add', this.advantageOnAdd.bind(this));
+            tagifyElement.on('remove', this.advantageOnRemove.bind(this));
+        }
+    }
+
     /**@inheritdoc */
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
@@ -52,4 +64,16 @@ export default class BeastformSheet extends DHBaseItemSheet {
 
         return context;
     }
+
+    async advantageOnAdd(event) {
+        await this.document.update({
+            'system.advantageOn': [...this.document.system.advantageOn, event.detail.data.value]
+        });
+    }
+
+    async advantageOnRemove(event) {
+        await this.document.update({
+            'system.advantageOn': this.document.system.advantageOn.filter(x => x !== event.detail.data.value)
+        });
+    }
 }

module/applications/ui/hotbar.mjs

@@ -99,7 +99,7 @@ export default class DhHotbar extends foundry.applications.ui.Hotbar {
 
     async createItemMacro(data, slot) {
         const macro = await Macro.implementation.create({
-            name: `${game.i18n.localize('Display')} ${name}`,
+            name: data.name,
             type: CONST.MACRO_TYPES.SCRIPT,
             img: data.img,
             command: `await game.system.api.applications.ui.DhHotbar.useItem("${data.uuid}");`
@@ -109,7 +109,7 @@ export default class DhHotbar extends foundry.applications.ui.Hotbar {
 
     async createActionMacro(data, slot) {
         const macro = await Macro.implementation.create({
-            name: `${game.i18n.localize('Display')} ${name}`,
+            name: data.data.name,
             type: CONST.MACRO_TYPES.SCRIPT,
             img: data.data.img,
             command: `await game.system.api.applications.ui.DhHotbar.useAction("${data.data.itemUuid}", "${data.data.id}");`
@@ -119,7 +119,7 @@ export default class DhHotbar extends foundry.applications.ui.Hotbar {
 
     async createAttackMacro(data, slot) {
         const macro = await Macro.implementation.create({
-            name: `${game.i18n.localize('Display')} ${name}`,
+            name: data.name,
             type: CONST.MACRO_TYPES.SCRIPT,
             img: data.img,
             command: `await game.system.api.applications.ui.DhHotbar.useAttack("${data.actorUuid}");`

module/config/actorConfig.mjs

@@ -1,5 +1,6 @@
 export const abilities = {
     agility: {
+        id: 'agility',
         label: 'DAGGERHEART.CONFIG.Traits.agility.name',
         verbs: [
             'DAGGERHEART.CONFIG.Traits.agility.verb.sprint',
@@ -8,6 +9,7 @@ export const abilities = {
         ]
     },
     strength: {
+        id: 'strength',
         label: 'DAGGERHEART.CONFIG.Traits.strength.name',
         verbs: [
             'DAGGERHEART.CONFIG.Traits.strength.verb.lift',
@@ -16,6 +18,7 @@ export const abilities = {
         ]
     },
     finesse: {
+        id: 'finesse',
         label: 'DAGGERHEART.CONFIG.Traits.finesse.name',
         verbs: [
             'DAGGERHEART.CONFIG.Traits.finesse.verb.control',
@@ -24,6 +27,7 @@ export const abilities = {
         ]
     },
     instinct: {
+        id: 'instinct',
         label: 'DAGGERHEART.CONFIG.Traits.instinct.name',
         verbs: [
             'DAGGERHEART.CONFIG.Traits.instinct.verb.perceive',
@@ -32,6 +36,7 @@ export const abilities = {
         ]
     },
     presence: {
+        id: 'presence',
         label: 'DAGGERHEART.CONFIG.Traits.presence.name',
         verbs: [
             'DAGGERHEART.CONFIG.Traits.presence.verb.charm',
@@ -40,6 +45,7 @@ export const abilities = {
         ]
     },
     knowledge: {
+        id: 'knowledge',
         label: 'DAGGERHEART.CONFIG.Traits.knowledge.name',
         verbs: [
             'DAGGERHEART.CONFIG.Traits.knowledge.verb.recall',

module/config/generalConfig.mjs

@@ -279,6 +279,25 @@ export const tiers = {
     }
 };
 
+export const tiersAlternate = {
+    1: {
+        id: 1,
+        label: 'DAGGERHEART.GENERAL.Tiers.tier1'
+    },
+    2: {
+        id: 2,
+        label: 'DAGGERHEART.GENERAL.Tiers.tier2'
+    },
+    3: {
+        id: 3,
+        label: 'DAGGERHEART.GENERAL.Tiers.tier3'
+    },
+    4: {
+        id: 4,
+        label: 'DAGGERHEART.GENERAL.Tiers.tier4'
+    }
+};
+
 export const diceTypes = {
     d4: 'd4',
     d6: 'd6',

module/data/action/beastformAction.mjs

@@ -10,10 +10,10 @@ export default class DhBeastformAction extends DHBaseAction {
         const abort = await this.handleActiveTransformations();
         if (abort) return;
 
-        const beastformUuid = await BeastformDialog.configure(beastformConfig);
+        const { selected, evolved, hybrid } = await BeastformDialog.configure(beastformConfig);
-        if (!beastformUuid) return;
+        if (!selected) return;
 
-        await this.transform(beastformUuid);
+        await this.transform(selected, evolved, hybrid);
     }
 
     prepareBeastformConfig(config) {
@@ -29,9 +29,26 @@ export default class DhBeastformAction extends DHBaseAction {
         };
     }
 
-    async transform(beastformUuid) {
+    async transform(selectedForm, evolvedData, hybridData) {
-        const beastform = await foundry.utils.fromUuid(beastformUuid);
+        const formData = evolvedData?.form ? evolvedData.form.toObject() : selectedForm.toObject();
-        this.actor.createEmbeddedDocuments('Item', [beastform.toObject()]);
+        const beastformEffect = formData.effects.find(x => x.type === 'beastform');
+        if (!beastformEffect) {
+            ui.notifications.error('DAGGERHEART.UI.Notifications.beastformMissingEffect');
+            return;
+        }
+
+        if (evolvedData?.form) {
+            const evolvedForm = selectedForm.effects.find(x => x.type === 'beastform');
+            if (!evolvedForm) {
+                ui.notifications.error('DAGGERHEART.UI.Notifications.beastformMissingEffect');
+                return;
+            }
+
+            beastformEffect.changes = [...beastformEffect.changes, ...evolvedForm.changes];
+            formData.system.features = [...formData.system.features, ...selectedForm.system.features.map(x => x.uuid)];
+        }
+
+        this.actor.createEmbeddedDocuments('Item', [formData]);
     }
 
     async handleActiveTransformations() {

module/data/item/beastform.mjs

@@ -24,10 +24,11 @@ export default class DHBeastform extends BaseDataItem {
                 choices: CONFIG.DH.ITEM.beastformTypes,
                 initial: CONFIG.DH.ITEM.beastformTypes.normal.id
             }),
-            tier: new fields.StringField({
+            tier: new fields.NumberField({
                 required: true,
-                choices: CONFIG.DH.GENERAL.tiers,
+                integer: true,
-                initial: CONFIG.DH.GENERAL.tiers.tier1.id
+                choices: CONFIG.DH.GENERAL.tiersAlternate,
+                initial: CONFIG.DH.GENERAL.tiersAlternate[1].id
             }),
             tokenImg: new fields.FilePathField({
                 initial: 'icons/svg/mystery-man.svg',
@@ -43,21 +44,30 @@ export default class DHBeastform extends BaseDataItem {
                 height: new fields.NumberField({ integer: true, min: 1, initial: null, nullable: true }),
                 width: new fields.NumberField({ integer: true, min: 1, initial: null, nullable: true })
             }),
+            mainTrait: new fields.StringField({
+                required: true,
+                choices: CONFIG.DH.ACTOR.abilities,
+                initial: CONFIG.DH.ACTOR.abilities.agility.id
+            }),
             examples: new fields.StringField(),
-            advantageOn: new fields.StringField(),
+            advantageOn: new fields.ArrayField(new fields.StringField()),
             features: new ForeignDocumentUUIDArrayField({ type: 'Item' }),
             evolved: new fields.SchemaField({
-                maximumTier: new fields.StringField({
+                maximumTier: new fields.NumberField({
+                    integer: true,
+                    choices: CONFIG.DH.GENERAL.tiersAlternate
+                }),
+                mainTraitBonus: new fields.NumberField({
                     required: true,
-                    choices: CONFIG.DH.GENERAL.tiers,
+                    integer: true,
-                    initial: CONFIG.DH.GENERAL.tiers.tier1.id
+                    min: 0,
+                    initial: 0
                 })
             }),
             hybrid: new fields.SchemaField({
-                maximumTier: new fields.StringField({
+                maximumTier: new fields.NumberField({
-                    required: true,
+                    integer: true,
-                    choices: CONFIG.DH.GENERAL.tiers,
+                    choices: CONFIG.DH.GENERAL.tiersAlternate,
-                    initial: CONFIG.DH.GENERAL.tiers.tier1.id,
                     label: 'DAGGERHEART.ITEMS.Beastform.FIELDS.evolved.maximumTier.label'
                 }),
                 beastformOptions: new fields.NumberField({ required: true, integer: true, initial: 2, min: 2 }),
@@ -92,7 +102,10 @@ export default class DHBeastform extends BaseDataItem {
 
         const beastformEffect = this.parent.effects.find(x => x.type === 'beastform');
         await beastformEffect.updateSource({
-            changes: [...beastformEffect.changes, { key: 'system.advantageSources', mode: 2, value: this.advantageOn }],
+            changes: [
+                ...beastformEffect.changes,
+                { key: 'system.advantageSources', mode: 2, value: this.advantageOn.join(', ') }
+            ],
             system: {
                 characterTokenData: {
                     tokenImg: this.parent.parent.prototypeToken.texture.src,

module/helpers/utils.mjs

@@ -1,80 +1,10 @@
 import { diceTypes, getDiceSoNicePresets, range } from '../config/generalConfig.mjs';
 import Tagify from '@yaireo/tagify';
 
-export const loadCompendiumOptions = async compendiums => {
-    const compendiumValues = [];
-
-    for (var compendium of compendiums) {
-        const values = await getCompendiumOptions(compendium);
-        compendiumValues.push(values);
-    }
-
-    return compendiumValues;
-};
-
-const getCompendiumOptions = async compendium => {
-    const compendiumPack = await game.packs.get(compendium);
-
-    const values = [];
-    for (var value of compendiumPack.index) {
-        const document = await compendiumPack.getDocument(value._id);
-        values.push(document);
-    }
-
-    return values;
-};
-
-export const getWidthOfText = (txt, fontsize, allCaps, bold) => {
-    const text = allCaps ? txt.toUpperCase() : txt;
-    if (getWidthOfText.c === undefined) {
-        getWidthOfText.c = document.createElement('canvas');
-        getWidthOfText.ctx = getWidthOfText.c.getContext('2d');
-    }
-    var fontspec = `${bold ? 'bold' : ''} ${fontsize}px` + ' ' + 'Signika, sans-serif';
-    if (getWidthOfText.ctx.font !== fontspec) getWidthOfText.ctx.font = fontspec;
-
-    return getWidthOfText.ctx.measureText(text).width;
-};
-
-export const padArray = (arr, len, fill) => {
-    return arr.concat(Array(len).fill(fill)).slice(0, len);
-};
-
-export const getTier = (level, asNr) => {
-    switch (Math.floor((level + 1) / 3)) {
-        case 1:
-            return asNr ? 1 : 'tier1';
-        case 2:
-            return asNr ? 2 : 'tier2';
-        case 3:
-            return asNr ? 3 : 'tier3';
-        default:
-            return asNr ? 0 : 'tier0';
-    }
-};
-
 export const capitalize = string => {
     return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
-export const getPathValue = (path, entity, numeric) => {
-    const pathValue = foundry.utils.getProperty(entity, path);
-    if (pathValue) return numeric ? Number.parseInt(pathValue) : pathValue;
-
-    return numeric ? Number.parseInt(path) : path;
-};
-
-export const generateId = (title, length) => {
-    const id = title
-        .split(' ')
-        .map((w, i) => {
-            const p = w.slugify({ replacement: '', strict: true });
-            return i ? p.titleCase() : p;
-        })
-        .join('');
-    return Number.isNumeric(length) ? id.slice(0, length).padEnd(length, '0') : id;
-};
-
 export function rollCommandToJSON(text) {
     if (!text) return {};
 

styles/less/dialog/beastform/sheet.less

@@ -3,32 +3,37 @@
 
 .appTheme({
     &.beastform-selection {
-        .beastforms-container .beastforms-tier .beastform-container .beastform-title {
+        .beastforms-outer-container .beastform-title {
-            background-image: url('../assets/parchments/dh-parchment-dark.png');
+            background-image: url('../assets/parchments/dh-parchment-light.png');
         }
     }
 }, {});
 
 .application.daggerheart.dh-style.views.beastform-selection {
-    transition: all 0.3s ease;
-
-    &.expanded {
-        width: 900px !important;
-
-        .beastforms-outer-container .advanced-container {
-            max-width: 300px;
-        }
-    }
-
     .beastforms-outer-container {
         display: flex;
         overflow: hidden;
 
+        .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-container {
             display: flex;
             flex-direction: column;
             gap: 4px;
-            max-width: 566px;
+            width: 600px;
 
             .beastforms-tier {
                 display: grid;
@@ -42,48 +47,84 @@
                     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: absolute;
-                        top: 4px;
-                        display: flex;
-                        flex-wrap: wrap;
-                        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-light.png');
-                    }
                 }
             }
         }
 
         .advanced-container {
-            max-width: 0;
+            width: 0;
-            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 12px;
+            transition: width 0.3s ease;
+
+            &.expanded {
+                width: 300px;
+            }
+
+            .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;
+
+                .empty-form {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+            }
+
+            .form-features {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                padding: 0 16px;
+                margin-top: 8px;
+
+                .form-feature {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 4px;
+                    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');
+
+                    h4 {
+                        text-align: center;
+                        margin: 0;
+                    }
+                }
+            }
         }
     }
 
-    // .advanced-container {
-    //     position: absolute;
-    //     top: 0;
-    //     right: -300px;
-    //     height: 100%;
-    //     width: 300px;
-    //     border: 1px solid @golden;
-    //     background: url("../systems/daggerheart/assets/parchments/dh-parchment-light.png") no-repeat center;
-    // }
-
     footer {
         margin-top: 8px;
         display: flex;

styles/less/sheets/index.less

@@ -18,6 +18,7 @@
 @import './actors/environment/header.less';
 @import './actors/environment/sheet.less';
 
+@import './items/beastform.less';
 @import './items/class.less';
 @import './items/domain-card.less';
 @import './items/feature.less';

styles/less/sheets/items/beastform.less

@@ -0,0 +1,9 @@
+.application.sheet.daggerheart.dh-style.beastform {
+    .settings.tab {
+        .advantage-on-section {
+            display: flex;
+            flex-direction: column;
+            margin-top: 10px;
+        }
+    }
+}

system.json

@@ -138,6 +138,15 @@
             "type": "Item",
             "private": false,
             "flags": {}
+        },
+        {
+            "name": "beastforms",
+            "label": "Beastforms",
+            "system": "daggerheart",
+            "path": "packs/beastforms.db",
+            "type": "Item",
+            "private": false,
+            "flags": {}
         }
     ],
     "packFolders": [
@@ -151,7 +160,7 @@
                     "name": "Character Options",
                     "sorting": "m",
                     "color": "#000000",
-                    "packs": ["ancestries", "communities", "classes", "subclasses", "domains"]
+                    "packs": ["ancestries", "communities", "classes", "subclasses", "domains", "beastforms"]
                 },
                 {
                     "name": "Items",

templates/dialogs/beastformDialog.hbs

@@ -5,7 +5,7 @@
                 <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 {{#if (and @root.canSubmit (not form.selected))}}inactive{{/if}}">
+                        <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>
@@ -13,8 +13,29 @@
                 </fieldset>
             {{/each}}
         </div>
-        <div class="advanced-container">
+        <div class="advanced-container {{#if (or (eq selected.system.beastformType 'evolved') (eq selected.system.beastformType 'hybrid'))}}expanded{{/if}}">
-            Test
+            {{#if (eq selected.system.beastformType 'evolved')}}
+                <h2>{{localize "DAGGERHEART.ITEMS.Beastform.evolve"}}</h2>
+                <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 "Drag a form here to evolve it"}}</label>
+                        </div>
+                    {{/if}}
+                </div>
+                <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>
+            {{/if}}
         </div>
     </div>
 

templates/sheets/items/beastform/advanced.hbs

@@ -6,9 +6,11 @@
     {{formGroup systemFields.beastformType value=source.system.beastformType localize=true blank=false}}
 
     {{#if (eq source.system.beastformType 'evolved')}}
-        <fieldset class="one-column">
+        <fieldset class="two-columns even">
             <legend>{{localize "DAGGERHEART.CONFIG.BeastformType.evolved"}}</legend>
+
             {{formGroup systemFields.evolved.fields.maximumTier value=source.system.evolved.maximumTier localize=true blank=false}}
+            {{formGroup systemFields.evolved.fields.mainTraitBonus value=source.system.evolved.mainTraitBonus localize=true}}
         </fieldset>
     {{/if}}
 

templates/sheets/items/beastform/settings.hbs

@@ -3,12 +3,22 @@
     data-tab='{{tabs.settings.id}}'
     data-group='{{tabs.settings.group}}'
 >
-    <div class="two-columns">
+    {{#if (eq source.system.beastformType 'evolved')}}
         {{formGroup systemFields.tier value=source.system.tier localize=true}}
-        {{formGroup systemFields.examples value=source.system.examples localize=true}}
+    {{else}}
-    </div>
+        <div class="two-columns even">
+            {{formGroup systemFields.tier value=source.system.tier localize=true}}
+            {{formGroup systemFields.mainTrait value=source.system.mainTrait blank=false localize=true}}
+        </div>
+
+        {{formGroup systemFields.examples value=source.system.examples localize=true}}
+
+        <div class="advantage-on-section">
+            <label>{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</label>
+            <input class="advantageon-input" value="{{source.system.advantageOn}}" />
+        </div>
+    {{/if}}
 
-    {{formGroup systemFields.advantageOn value=source.system.advantageOn localize=true}}
     <fieldset class="two-columns even">
         <legend>{{localize "DAGGERHEART.ITEMS.Beastform.tokenTitle"}}</legend>