feature/Dice-So-Nice-Settings-Improvements

lang/en.json

@@ -1549,7 +1549,9 @@
                         "foreground": "Foreground",
                         "background": "Background",
                         "outline": "Outline",
-                        "edge": "Edge"
+                        "edge": "Edge",
+                        "texture": "Texture",
+                        "colorset": "Colorset"
                     }
                 },
                 "variantRules": {

module/applications/settings/appearanceSettings.mjs

@@ -36,10 +36,37 @@ export default class DHAppearanceSettings extends HandlebarsApplicationMixin(App
         }
     };
 
+    /** @inheritdoc */
+    static TABS = {
+        diceSoNice: {
+            tabs: [
+                { id: 'hope', label: 'DAGGERHEART.GENERAL.hope' },
+                { id: 'fear', label: 'DAGGERHEART.GENERAL.fear' },
+                { id: 'advantage', label: 'DAGGERHEART.GENERAL.Advantage.full' },
+                { id: 'disadvantage', label: 'DAGGERHEART.GENERAL.Advantage.full' }
+            ],
+            initial: 'hope'
+        }
+    };
+
+    changeTab(tab, group, options) {
+        super.changeTab(tab, group, options);
+
+        this.render();
+    }
+
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
         context.settingFields = this.settings;
 
+        context.diceSoNiceTextures = game.dice3d?.exports?.TEXTURELIST ?? {};
+        context.diceSoNiceColorsets = game.dice3d?.exports?.COLORSETS ?? {};
+        context.diceTab = {
+            key: this.tabGroups.diceSoNice,
+            source: this.settings._source.diceSoNice[this.tabGroups.diceSoNice],
+            fields: this.settings.schema.fields.diceSoNice.fields[this.tabGroups.diceSoNice].fields
+        };
+
         return context;
     }
 
@@ -65,4 +92,13 @@ export default class DHAppearanceSettings extends HandlebarsApplicationMixin(App
 
         this.close();
     }
+
+    _getTabs(tabs) {
+        for (const v of Object.values(tabs)) {
+            v.active = this.tabGroups[v.group] ? this.tabGroups[v.group] === v.id : v.active;
+            v.cssClass = v.active ? 'active' : '';
+        }
+
+        return tabs;
+    }
 }

module/data/settings/Appearance.mjs

@@ -20,25 +20,33 @@ export default class DhAppearance extends foundry.abstract.DataModel {
                     foreground: new fields.ColorField({ required: true, initial: '#ffffff' }),
                     background: new fields.ColorField({ required: true, initial: '#ffe760' }),
                     outline: new fields.ColorField({ required: true, initial: '#000000' }),
-                    edge: new fields.ColorField({ required: true, initial: '#ffffff' })
+                    edge: new fields.ColorField({ required: true, initial: '#ffffff' }),
+                    texture: new fields.StringField({ initial: 'bloodmoon' }),
+                    colorset: new fields.StringField({ initial: 'inspired' })
                 }),
                 fear: new fields.SchemaField({
                     foreground: new fields.ColorField({ required: true, initial: '#000000' }),
                     background: new fields.ColorField({ required: true, initial: '#0032b1' }),
                     outline: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    edge: new fields.ColorField({ required: true, initial: '#000000' })
+                    edge: new fields.ColorField({ required: true, initial: '#000000' }),
+                    texture: new fields.StringField({ initial: 'bloodmoon' }),
+                    colorset: new fields.StringField({ initial: 'inspired' })
                 }),
                 advantage: new fields.SchemaField({
                     foreground: new fields.ColorField({ required: true, initial: '#ffffff' }),
                     background: new fields.ColorField({ required: true, initial: '#008000' }),
                     outline: new fields.ColorField({ required: true, initial: '#000000' }),
-                    edge: new fields.ColorField({ required: true, initial: '#ffffff' })
+                    edge: new fields.ColorField({ required: true, initial: '#ffffff' }),
+                    texture: new fields.StringField({ initial: 'bloodmoon' }),
+                    colorset: new fields.StringField({ initial: 'inspired' })
                 }),
                 disadvantage: new fields.SchemaField({
                     foreground: new fields.ColorField({ required: true, initial: '#000000' }),
                     background: new fields.ColorField({ required: true, initial: '#b30000' }),
                     outline: new fields.ColorField({ required: true, initial: '#ffffff' }),
-                    edge: new fields.ColorField({ required: true, initial: '#000000' })
+                    edge: new fields.ColorField({ required: true, initial: '#000000' }),
+                    texture: new fields.StringField({ initial: 'bloodmoon' }),
+                    colorset: new fields.StringField({ initial: 'inspired' })
                 })
             }),
             showGenericStatusEffects: new fields.BooleanField({

templates/settings/appearance-settings.hbs

@@ -14,30 +14,56 @@
         <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>
 
         <fieldset>
-            <legend>{{localize "DAGGERHEART.GENERAL.hope"}}</legend>
+            <section class='tab-navigation'>
+                <div class='navigation-container'>
+                    <div class="navigation-inner-container">
+                        <line-div></line-div>
+                        <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
+                            {{#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>
+                        <line-div></line-div>
+                    </div>
+                </div>
+            </section>
 
             <div class="field-section">
                 <div class="split-section">
                     <div class="label-container">
                         <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.foreground"}}</label>
-                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.foreground value=settingFields._source.diceSoNice.hope.foreground localize=true}}
+                        {{formInput diceTab.fields.foreground value=diceTab.source.foreground localize=true}}
                     </div>
                     <div class="label-container">
                         <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.background"}}</label>
-                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.background value=settingFields._source.diceSoNice.hope.background localize=true}}
+                        {{formInput diceTab.fields.background value=diceTab.source.background localize=true}}
                     </div>
                     <div class="label-container">
                         <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.outline"}}</label>
-                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.outline value=settingFields._source.diceSoNice.hope.outline localize=true}}
+                        {{formInput diceTab.fields.outline value=diceTab.source.outline localize=true}}
                     </div>
                     <div class="label-container">
                         <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.edge"}}</label>
-                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.edge value=settingFields._source.diceSoNice.hope.edge localize=true}}
+                        {{formInput diceTab.fields.edge value=diceTab.source.edge localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.texture"}}</label>
+                        <select name={{concat "diceSoNice." diceTab.key ".texture"}}>
+                            {{selectOptions diceSoNiceTextures selected=diceTab.source.texture labelAttr="name" localize=true }}
+                        </select>
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.colorset"}}</label>
+                        <select name="diceSoNice." {{diceTab.key}} ".colorset">
+                            {{selectOptions diceSoNiceColorsets selected=diceTab.source.colorset labelAttr="name" localize=true }}
+                        </select>
                     </div>
                 </div>
             </div>
         </fieldset>
-        <fieldset>
+        {{!-- <fieldset>
             <legend>{{localize "DAGGERHEART.GENERAL.fear"}}</legend>
 
             <div class="field-section">
@@ -108,7 +134,7 @@
                     </div>
                 </div>
             </div>
-        </fieldset>
+        </fieldset> --}}
     </fieldset>
 
     <footer class="form-footer">