Finished homebrew settings

lang/en.json

@@ -2141,6 +2141,14 @@
                     "handfullName": "Handfull Name",
                     "bagName": "Bag Name",
                     "chestName": "Chest Name"
+                },
+                "domains": {
+                    "domainsTitle": "Base Domains",
+                    "homebrewDomains": "Homebrew Domains",
+                    "newDomain": "New Domain",
+                    "editDomain": "Active Domain",
+                    "deleteDomain": "Delete Domain",
+                    "deleteDomainText": "Are you sure you want to delete the {name} domain?"
                 }
             },
             "Menu": {

module/applications/settings/homebrewSettings.mjs

@@ -8,6 +8,10 @@ export default class DhHomebrewSettings extends HandlebarsApplicationMixin(Appli
         this.settings = new DhHomebrew(
             game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Homebrew).toObject()
         );
+
+        this.selected = {
+            domain: null
+        };
     }
 
     get title() {
@@ -17,7 +21,7 @@ export default class DhHomebrewSettings extends HandlebarsApplicationMixin(Appli
     static DEFAULT_OPTIONS = {
         tag: 'form',
         id: 'daggerheart-homebrew-settings',
-        classes: ['daggerheart', 'dh-style', 'dialog', 'setting'],
+        classes: ['daggerheart', 'dh-style', 'dialog', 'setting', 'homebrew-settings'],
         position: { width: '600', height: 'auto' },
         window: {
             icon: 'fa-solid fa-gears'
@@ -27,6 +31,9 @@ export default class DhHomebrewSettings extends HandlebarsApplicationMixin(Appli
             editItem: this.editItem,
             removeItem: this.removeItem,
             resetMoves: this.resetMoves,
+            addDomain: this.addDomain,
+            toggleSelectedDomain: this.toggleSelectedDomain,
+            deleteDomain: this.deleteDomain,
             save: this.save,
             reset: this.reset
         },
@@ -37,7 +44,8 @@ export default class DhHomebrewSettings extends HandlebarsApplicationMixin(Appli
         tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
         settings: { template: 'systems/daggerheart/templates/settings/homebrew-settings/settings.hbs' },
         domains: { template: 'systems/daggerheart/templates/settings/homebrew-settings/domains.hbs' },
-        downtime: { template: 'systems/daggerheart/templates/settings/homebrew-settings/downtime.hbs' }
+        downtime: { template: 'systems/daggerheart/templates/settings/homebrew-settings/downtime.hbs' },
+        footer: { template: 'systems/daggerheart/templates/settings/homebrew-settings/footer.hbs' }
     };
 
     /** @inheritdoc */
@@ -56,6 +64,25 @@ export default class DhHomebrewSettings extends HandlebarsApplicationMixin(Appli
         return context;
     }
 
+    async _preparePartContext(partId, context) {
+        await super._preparePartContext(partId, context);
+
+        switch (partId) {
+            case 'domains':
+                const selectedDomain = this.selected.domain ? this.settings.domains[this.selected.domain] : null;
+                const enrichedDescription = selectedDomain
+                    ? await foundry.applications.ux.TextEditor.implementation.enrichHTML(selectedDomain.description)
+                    : null;
+
+                if (enrichedDescription !== null) context.selectedDomain = { ...selectedDomain, enrichedDescription };
+                context.configDomains = CONFIG.DH.DOMAIN.domains;
+                context.homebrewDomains = this.settings.domains;
+                break;
+        }
+
+        return context;
+    }
+
     static async updateData(event, element, formData) {
         const updatedSettings = foundry.utils.expandObject(formData.object);
 
@@ -172,6 +199,34 @@ export default class DhHomebrewSettings extends HandlebarsApplicationMixin(Appli
         this.render();
     }
 
+    static async addDomain(_, target) {
+        const id = foundry.utils.randomID();
+        this.settings.updateSource({
+            [`domains.${id}`]: {
+                id: id,
+                label: game.i18n.localize('DAGGERHEART.SETTINGS.Homebrew.domains.newDomain'),
+                src: 'icons/svg/portal.svg'
+            }
+        });
+
+        this.selected.domain = id;
+        this.render();
+    }
+
+    static toggleSelectedDomain(_, target) {
+        this.selected.domain = this.selected.domain === target.id ? null : target.id;
+        this.render();
+    }
+
+    static async deleteDomain() {
+        await this.settings.updateSource({
+            [`domains.-=${this.selected.domain}`]: null
+        });
+
+        this.selected.domain = null;
+        this.render();
+    }
+
     static async save() {
         await game.settings.set(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Homebrew, this.settings.toObject());
         this.close();

module/data/settings/Homebrew.mjs

@@ -97,16 +97,18 @@ export default class DhHomebrew extends foundry.abstract.DataModel {
                     )
                 })
             }),
-            domains: new fields.SchemaField({
+            domains: new fields.TypedObjectField(
-                id: new fields.StringField({ required: true }),
+                new fields.SchemaField({
-                label: new fields.StringField({ required: true, initial: '', label: 'DAGGERHEART.GENERAL.label' }),
+                    id: new fields.StringField({ required: true }),
-                src: new fields.FilePathField({
+                    label: new fields.StringField({ required: true, initial: '', label: 'DAGGERHEART.GENERAL.label' }),
-                    categories: ['IMAGE'],
+                    src: new fields.FilePathField({
-                    base64: false,
+                        categories: ['IMAGE'],
-                    label: 'Image'
+                        base64: false,
-                }),
+                        label: 'Image'
-                description: new fields.StringField({ label: 'DAGGERHEART.GENERAL.description' })
+                    }),
-            })
+                    description: new fields.HTMLField()
+                })
+            )
         };
     }
 }

styles/less/ui/index.less

@@ -17,4 +17,6 @@
 
 @import './resources/resources.less';
 
-@import './settings/settings.less';
+@import './settings/settings.less';
+
+@import './settings/homebrew-settings/domains.less';

styles/less/ui/settings/homebrew-settings/domains.less

@@ -0,0 +1,140 @@
+.theme-light .daggerheart.dh-style.setting.homebrew-settings .domains-tab {
+    .domains-container .domain-container {
+        .domain-label {
+            background-image: url('../assets/parchments/dh-parchment-light.png');
+        }
+    }
+}
+
+.daggerheart.dh-style.setting.homebrew-settings {
+    .domains.tab {
+        .title-wrapper {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+
+            &:not(:first-child) {
+                margin-top: 16px;
+            }
+
+            h4 {
+                position: relative;
+                width: auto;
+
+                .add-button {
+                    position: absolute;
+                    top: 0;
+                    right: -28px;
+                    border-radius: 50%;
+                    width: 24px;
+                    height: 24px;
+                    font-size: 12px;
+                }
+            }
+        }
+
+        .domains-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+            gap: 8px;
+
+            .domain-container {
+                position: relative;
+                display: flex;
+                justify-content: center;
+                border: 1px solid light-dark(@dark-blue, @golden);
+                border-radius: 6px;
+
+                &.selectable {
+                    height: 100%;
+                    background: inherit;
+                    padding: 0;
+                }
+
+                &.inactive {
+                    opacity: 0.5;
+                }
+
+                .domain-label {
+                    position: absolute;
+                    top: 4px;
+                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border-radius: 6px;
+                    padding: 0 2px;
+                    color: light-dark(@dark, @beige);
+                    background-image: url('../assets/parchments/dh-parchment-dark.png');
+                    white-space: nowrap;
+                    text-wrap: auto;
+                    text-align: center;
+                }
+
+                .domain-icon {
+                    &:before {
+                        content: ' ';
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        z-index: -1;
+                        mask: var(--domain-icon) no-repeat center;
+                        mask-size: contain;
+                        background: linear-gradient(139.01deg, #efe6d8 3.51%, #372e1f 96.49%);
+                    }
+                }
+                img {
+                    border-radius: 6px;
+                }
+            }
+        }
+
+        .domain-edit-container {
+            display: grid;
+            grid-template-rows: 0fr;
+            transition: grid-template-rows 0.3s ease-in-out;
+            overflow: hidden;
+
+            &.extended {
+                grid-template-rows: 1fr;
+
+                fieldset {
+                    opacity: 1;
+                }
+            }
+
+            fieldset {
+                overflow: hidden;
+                opacity: 0;
+                transition: opacity 0.3s ease-in-out;
+
+                legend {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+
+                    button {
+                        border-radius: 50%;
+                        font-size: 12px;
+                        height: 24px;
+                        width: 24px;
+                        margin-right: 4px;
+                    }
+                }
+
+                .domain-filepicker-row {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: 8px;
+
+                    .form-group {
+                        flex: 1;
+                        gap: 8px;
+                    }
+                }
+
+                textarea {
+                    width: 100%;
+                    height: 120px;
+                }
+            }
+        }
+    }
+}

templates/settings/homebrew-settings/domains.hbs

@@ -3,5 +3,43 @@
     data-tab="{{tabs.domains.id}}"
     data-group="{{tabs.domains.group}}"
 >
-    
+    <div class="title-wrapper">
+        <h4>{{localize "DAGGERHEART.SETTINGS.Homebrew.domains.domainsTitle"}}</h4>
+    </div>
+    <div class="domains-container">
+        {{#each configDomains as | domain |}}
+            <div class="domain-container">
+                <div class="domain-label">{{localize domain.label}}</div>
+                <img src="{{domain.src}}" class="domain-icon" style="--domain-icon: url({{domain.src}})" />
+            </div>
+        {{/each}}
+    </div>
+
+    <div class="title-wrapper">
+        <h4>
+            {{localize "DAGGERHEART.SETTINGS.Homebrew.domains.homebrewDomains"}}
+            <button class="add-button" data-action="addDomain"><i class="fa-solid fa-plus"></i></button>
+        </h4>
+    </div>
+    <div class="domains-container">
+        {{#each homebrewDomains as | domain id |}}
+            <button class="domain-container selectable {{#unless (eq @root.selectedDomain.id id)}}inactive{{/unless}}" id="{{id}}" data-action="toggleSelectedDomain">
+                <div class="domain-label">{{localize domain.label}}</div>
+                <img src="{{domain.src}}" class="domain-icon" style="--domain-icon: url({{domain.src}})" />
+            </button>
+        {{/each}}
+    </div>
+
+    <div class="domain-edit-container {{#if @root.selectedDomain}}extended{{/if}}">
+        <fieldset>
+            <legend>{{localize "DAGGERHEART.SETTINGS.Homebrew.domains.editDomain"}} <button class="add-button" data-action="deleteDomain"><i class="fa-solid fa-x"></i></button></legend>
+
+            <div class="domain-filepicker-row">
+                {{formGroup settingFields.schema.fields.domains.element.fields.label value=selectedDomain.label name=(concat "domains." selectedDomain.id ".label") localize=true}}
+                {{formGroup settingFields.schema.fields.domains.element.fields.src value=selectedDomain.src name=(concat "domains." selectedDomain.id ".src") localize=true}}
+            </div>
+
+            <textarea name="{{concat "domains." selectedDomain.id ".description"}}">{{selectedDomain.description}}</textarea>
+        </fieldset>
+    </div>
 </section>

templates/settings/homebrew-settings/footer.hbs

@@ -1,9 +1,9 @@
  <footer class="form-footer">
-    <button data-action="reset">
+    <button type="button" data-action="reset">
         <i class="fa-solid fa-arrow-rotate-left"></i>
         <span>{{localize "Reset"}}</span>
     </button>
-    <button data-action="save" >
+    <button type="button" data-action="save" >
         <i class="fa-solid fa-floppy-disk"></i>
         <span>{{localize "Save Changes"}}</span>
     </button>