Implementation of Dice So Nice settings preview #710 (#732)

* Fix for #695

* Implements DiceSoNice preview in config settings #710

* Remove incorrect class

* Fix Preview button position

* Remove extra line

* Fix formatting

---------

Co-authored-by: Chris Ryan <chrisr@blackhole>

module/applications/settings/appearanceSettings.mjs

@@ -1,4 +1,5 @@
 import DhAppearance from '../../data/settings/Appearance.mjs';
+import { getDiceSoNicePreset } from '../../config/generalConfig.mjs';
 
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
 
@@ -25,7 +26,8 @@ export default class DHAppearanceSettings extends HandlebarsApplicationMixin(App
         },
         actions: {
             reset: this.reset,
-            save: this.save
+            save: this.save,
+            preview: this.preview
         },
         form: { handler: this.updateData, submitOnChange: true }
     };
@@ -89,6 +91,22 @@ export default class DHAppearanceSettings extends HandlebarsApplicationMixin(App
         this.render();
     }
 
+    static async preview() {
+        const source = this.settings._source.diceSoNice[this.tabGroups.diceSoNice];
+        let faces = 'd12';
+        switch (this.tabGroups.diceSoNice) {
+            case 'advantage':
+            case 'disadvantage':
+                faces = 'd6';
+        }
+        const preset = await getDiceSoNicePreset(source, faces);
+        const diceSoNiceRoll = await new Roll(`1${faces}`).evaluate();
+        diceSoNiceRoll.dice[0].options.appearance = preset.appearance;
+        diceSoNiceRoll.dice[0].options.modelFile = preset.modelFile;
+
+        await game.dice3d.showForRoll(diceSoNiceRoll, game.user, false);
+    }
+
     static async reset() {
         this.settings = new DhAppearance();
         this.render();

module/config/generalConfig.mjs

@@ -494,9 +494,7 @@ export const diceSetNumbers = {
     flat: 'Flat'
 };
 
-export const getDiceSoNicePresets = async (hopeFaces, fearFaces, advantageFaces = 'd6', disadvantageFaces = 'd6') => {
+export const getDiceSoNicePreset = async (type, faces) => {
-    const { diceSoNice } = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance);
-    const getPreset = async (type, faces) => {
         const system = game.dice3d.DiceFactory.systems.get(type.system).dice.get(faces);
         if (!system) {
             ui.notifications.error(
@@ -523,11 +521,14 @@ export const getDiceSoNicePresets = async (hopeFaces, fearFaces, advantageFaces
         };
     };
 
+export const getDiceSoNicePresets = async (hopeFaces, fearFaces, advantageFaces = 'd6', disadvantageFaces = 'd6') => {
+    const { diceSoNice } = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.appearance);
+
     return {
-        hope: await getPreset(diceSoNice.hope, hopeFaces),
+        hope: await getDiceSoNicePreset(diceSoNice.hope, hopeFaces),
-        fear: await getPreset(diceSoNice.fear, fearFaces),
+        fear: await getDiceSoNicePreset(diceSoNice.fear, fearFaces),
-        advantage: await getPreset(diceSoNice.advantage, advantageFaces),
+        advantage: await getDiceSoNicePreset(diceSoNice.advantage, advantageFaces),
-        disadvantage: await getPreset(diceSoNice.disadvantage, disadvantageFaces)
+        disadvantage: await getDiceSoNicePreset(diceSoNice.disadvantage, disadvantageFaces)
     };
 };
 

styles/less/global/elements.less

@@ -571,6 +571,16 @@
                 white-space: nowrap;
             }
         }
+
+        .button-container {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 10px;
+            text-align: center;
+	        display: flex;
+	        justify-content: center;
+	        width: 100%
+        }
     }
 
     footer {

templates/settings/appearance-settings.hbs

@@ -69,7 +69,13 @@
                             {{selectOptions diceSoNiceMaterials selected=diceTab.source.material valueAttr="key" labelAttr="name" localize=true}}
                         </select>
                     </div>
-                </div>
+                    <div class="button-container">
+                        <button data-action="preview">
+                            <i class="fa-solid fa-dice"></i>
+                            <span>{{localize "Preview"}}</span>
+                        </button>
+                    </div>
+               </div>
             </div>
         </fieldset>
     {{/if}}