Duality Roll Followup (#65)

* Moved the roll total to bottom right. A bunch of label fixes
* Fixed broken attack-roll damage button
* Added AppearanceMenu allowing modification of DiceSoNice Duality presets

daggerheart.mjs

@@ -5,13 +5,13 @@ import * as documents from './module/documents/_module.mjs';
 import RegisterHandlebarsHelpers from './module/helpers/handlebarsHelper.mjs';
 import DhpCombatTracker from './module/ui/combatTracker.mjs';
 import { GMUpdateEvent, handleSocketEvent, socketEvent } from './module/helpers/socket.mjs';
-import { registerDHPSettings } from './module/applications/settings.mjs';
+import { registerDHSettings } from './module/applications/settings.mjs';
 import DhpChatLog from './module/ui/chatLog.mjs';
 import DhpPlayers from './module/ui/players.mjs';
 import DhpRuler from './module/ui/ruler.mjs';
 import DhpTokenRuler from './module/ui/tokenRuler.mjs';
-import { dualityRollEnricher, getDualityMessage } from './module/enrichers/DualityRollEnricher.mjs';
-import { getCommandTarget, rollCommandToJSON } from './module/helpers/utils.mjs';
+import { dualityRollEnricher } from './module/enrichers/DualityRollEnricher.mjs';
+import { getCommandTarget, rollCommandToJSON, setDiceSoNiceForDualityRoll } from './module/helpers/utils.mjs';
 import { abilities } from './module/config/actorConfig.mjs';
 
 globalThis.SYSTEM = SYSTEM;
@@ -97,7 +97,7 @@ Hooks.once('init', () => {
 
     game.socket.on(`system.${SYSTEM.id}`, handleSocketEvent);
 
-    registerDHPSettings();
+    registerDHSettings();
     RegisterHandlebarsHelpers.registerHelpers();
 
     return preloadHandlebarsTemplates();
@@ -213,12 +213,19 @@ Hooks.on('chatMessage', (_, message) => {
                 const attributeRoll = `${attribute?.data?.value ? `${attribute.data.value > 0 ? `+${attribute.data.value}` : `${attribute.data.value}`}` : ''}`;
                 const roll = new Roll(`${hopeAndFearRoll}${advantageRoll}${attributeRoll}`);
                 await roll.evaluate();
+
+                setDiceSoNiceForDualityRoll(
+                    roll,
+                    rollCommand.advantage && !rollCommand.disadvantage,
+                    rollCommand.disadvantage && !rollCommand.advantage
+                );
+
                 resolve({
                     roll,
                     attribute: attribute
                         ? {
                               value: attribute.data.value,
-                              label: `${game.i18n.localize(abilities[attributeValue].label)} ${attribute.data.value >= 0 ? `+` : `-`}${attribute.data.value}`
+                              label: `${game.i18n.localize(abilities[attributeValue].label)} ${attribute.data.value >= 0 ? `+` : ``}${attribute.data.value}`
                           }
                         : undefined,
                     title

lang/en.json

@@ -46,6 +46,21 @@
                     "CloseLabel": "Close",
                     "FarLabel": "Far",
                     "VeryFarLabel": "Very Far"
+                },
+                "Appearance": {
+                    "title": "Appearance Settings",
+                    "label": "Appearance Settings",
+                    "hint": "Modify the look of various parts of the system",
+                    "name": "Appearance Settings",
+                    "duality": "Duality Rolls",
+                    "DiceSoNice": {
+                        "title": "Dice So Nice",
+                        "hint": "Coloration of Hope and Fear dice if the Dice So Nice module is used.",
+                        "foreground": "Foreground",
+                        "background": "Background",
+                        "outline": "Outline",
+                        "edge": "Edge"
+                    }
                 }
             },
             "Automation": {

module/applications/chatMessage.mjs

@@ -1,5 +1,5 @@
-import { DualityRollColor } from '../config/settingsConfig.mjs';
 import DhpDualityRoll from '../data/dualityRoll.mjs';
+import { DualityRollColor } from '../data/settings/Appearance.mjs';
 
 export default class DhpChatMesssage extends ChatMessage {
     async renderHTML() {
@@ -16,7 +16,7 @@ export default class DhpChatMesssage extends ChatMessage {
         const html = await super.renderHTML();
         if (
             this.type === 'dualityRoll' &&
-            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor) ===
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance).dualityColorScheme ===
                 DualityRollColor.colorful.value
         ) {
             html.classList.add('duality');

module/applications/settings.mjs

@@ -1,4 +1,5 @@
-import { DualityRollColor } from '../config/settingsConfig.mjs';
+import DhAppearance from '../data/settings/Appearance.mjs';
+import DHAppearanceSettings from './settings/appearanceSettings.mjs';
 
 class DhpAutomationSettings extends FormApplication {
     constructor(object = {}, options = {}) {
@@ -160,7 +161,7 @@ class DhpRangeSettings extends FormApplication {
     }
 }
 
-export const registerDHPSettings = () => {
+export const registerDHSettings = () => {
     // const debouncedReload = foundry.utils.debounce(() => window.location.reload(), 100);
 
     game.settings.register(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.General.AbilityArray, {
@@ -215,14 +216,11 @@ export const registerDHPSettings = () => {
         }
     });
 
-    game.settings.register(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor, {
-        name: game.i18n.localize('DAGGERHEART.Settings.DualityRollColor.Name'),
-        hint: game.i18n.localize('DAGGERHEART.Settings.DualityRollColor.Hint'),
-        scope: 'world',
-        config: true,
-        type: Number,
-        choices: Object.values(DualityRollColor),
-        default: DualityRollColor.colorful.value
+    game.settings.register(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance, {
+        scope: 'client',
+        config: false,
+        type: DhAppearance,
+        default: DhAppearance.defaultSchema
     });
 
     game.settings.registerMenu(SYSTEM.id, SYSTEM.SETTINGS.menu.Automation.Name, {
@@ -249,53 +247,13 @@ export const registerDHPSettings = () => {
         type: DhpRangeSettings,
         restricted: true
     });
+
+    game.settings.registerMenu(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance, {
+        name: game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.title'),
+        label: game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.label'),
+        hint: game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.hint'),
+        icon: 'fa-solid fa-palette',
+        type: DHAppearanceSettings,
+        restricted: false
+    });
 };
-
-// const {HandlebarsApplicationMixin, ApplicationV2} = foundry.applications.api;
-
-// export default class DhpSettings extends HandlebarsApplicationMixin(ApplicationV2) {
-//     constructor(actor, shortrest){
-//         super({});
-
-//         this.actor = actor;
-//         this.selectedActivity = null;
-//         this.shortrest = shortrest;
-
-//         this.customActivity = SYSTEM.GENERAL.downtime.custom;
-//     }
-
-//     get title(){
-//         return game.i18n.localize("DAGGERHEART.Application.Settings.Title");
-//     }
-
-//     static DEFAULT_OPTIONS = {
-//         tag: 'form',
-//         classes: ["daggerheart", "application", "settings"],
-//         position: { width: 800, height: 'auto' },
-//         actions: {
-//             selectActivity: this.selectActivity,
-//         },
-//         form: { handler: this.updateData }
-//     };
-
-//     static PARTS = {
-//         application: {
-//             id: "settings",
-//             template: "systems/daggerheart/templates/application/settings.hbs"
-//         }
-//     }
-
-//     async _prepareContext(_options) {
-//         const context = await super._prepareContext(_options);
-
-//         return context;
-//     }
-
-//     static async updateData(event, element, formData){
-//         this.render();
-//     }
-
-//     static close(){
-//         super.close();
-//     }
-// }

module/applications/settings/appearanceSettings.mjs

@@ -0,0 +1,59 @@
+import DhAppearance from '../../data/settings/Appearance.mjs';
+
+const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+
+export default class DHAppearanceSettings extends HandlebarsApplicationMixin(ApplicationV2) {
+    constructor() {
+        super({});
+
+        this.settings = new DhAppearance(
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance).toObject()
+        );
+    }
+
+    get title() {
+        return game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.name');
+    }
+
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        id: 'daggerheart-appearance-settings',
+        classes: ['daggerheart', 'setting', 'dh-style'],
+        position: { width: '600', height: 'auto' },
+        actions: {
+            reset: this.reset,
+            save: this.save
+        },
+        form: { handler: this.updateData, submitOnChange: true }
+    };
+
+    static PARTS = {
+        main: {
+            template: 'systems/daggerheart/templates/settings/appearance-settings.hbs'
+        }
+    };
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.settingFields = this.settings;
+
+        return context;
+    }
+
+    static async updateData(event, element, formData) {
+        const updatedSettings = foundry.utils.expandObject(formData.object);
+
+        await this.settings.updateSource(updatedSettings);
+        this.render();
+    }
+
+    static async reset() {
+        this.settings = new DhAppearance();
+        this.render();
+    }
+
+    static async save() {
+        await game.settings.set(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance, this.settings.toObject());
+        this.close();
+    }
+}

module/applications/sheets/pc.mjs

@@ -489,7 +489,7 @@ export default class PCSheet extends DaggerheartSheet(ActorSheetV2) {
 
     static async rollAttribute(event, button) {
         const { roll, hope, fear, advantage, disadvantage, modifiers } = await this.document.dualityRoll(
-            { title: 'Attribute Bonus', value: button.dataset.value },
+            { title: game.i18n.localize(abilities[button.dataset.attribute].label), value: button.dataset.value },
             event.shiftKey
         );
 

module/config/generalConfig.mjs

@@ -247,6 +247,45 @@ export const diceTypes = {
     d20: 'd20'
 };
 
+export const getDiceSoNicePresets = () => {
+    const { diceSoNice } = game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance);
+
+    return {
+        hope: {
+            ...diceSoNice.hope,
+            colorset: 'inspired',
+            texture: 'bloodmoon',
+            material: 'metal',
+            font: 'Arial Black',
+            system: 'standard'
+        },
+        fear: {
+            ...diceSoNice.fear,
+            colorset: 'bloodmoon',
+            texture: 'bloodmoon',
+            material: 'metal',
+            font: 'Arial Black',
+            system: 'standard'
+        },
+        advantage: {
+            ...diceSoNice.advantage,
+            colorset: 'bloodmoon',
+            texture: 'bloodmoon',
+            material: 'metal',
+            font: 'Arial Black',
+            system: 'standard'
+        },
+        disadvantage: {
+            ...diceSoNice.disadvantage,
+            colorset: 'bloodmoon',
+            texture: 'bloodmoon',
+            material: 'metal',
+            font: 'Arial Black',
+            system: 'standard'
+        }
+    };
+};
+
 export const refreshTypes = {
     session: {
         id: 'session',

module/config/settingsConfig.mjs

@@ -25,16 +25,5 @@ export const gameSettings = {
         AbilityArray: 'AbilityArray',
         RangeMeasurement: 'RangeMeasurement'
     },
-    DualityRollColor: 'DualityRollColor'
-};
-
-export const DualityRollColor = {
-    colorful: {
-        value: 0,
-        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Colorful'
-    },
-    normal: {
-        value: 1,
-        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Normal'
-    }
+    appearance: 'Appearance'
 };

module/data/dualityRoll.mjs

@@ -1,4 +1,4 @@
-import { DualityRollColor } from '../config/settingsConfig.mjs';
+import { DualityRollColor } from './settings/Appearance.mjs';
 
 const fields = foundry.data.fields;
 const diceField = () =>
@@ -81,7 +81,7 @@ export default class DhpDualityRoll extends foundry.abstract.TypeDataModel {
         const total = this.modifiers.reduce((acc, x) => acc + x.value, 0);
         return {
             value: total,
-            label: total > 0 ? `+${total}` : total < 0 ? `-${total}` : ''
+            label: total > 0 ? `+${total}` : total < 0 ? `${total}` : ''
         };
     }
 
@@ -106,7 +106,7 @@ export default class DhpDualityRoll extends foundry.abstract.TypeDataModel {
 
     get colorful() {
         return (
-            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor) ===
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance).dualityColorScheme ===
             DualityRollColor.colorful.value
         );
     }

module/data/settings/Appearance.mjs

@@ -0,0 +1,51 @@
+export default class DhAppearance extends foundry.abstract.DataModel {
+    static defineSchema() {
+        const fields = foundry.data.fields;
+        return {
+            dualityColorScheme: new fields.StringField({
+                required: true,
+                choices: DualityRollColor,
+                initial: DualityRollColor.normal.value
+            }),
+            diceSoNice: new fields.SchemaField({
+                hope: new fields.SchemaField({
+                    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' })
+                }),
+                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' })
+                }),
+                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' })
+                }),
+                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' })
+                })
+            })
+        };
+    }
+
+    static defaultSchema = {};
+}
+
+export const DualityRollColor = {
+    colorful: {
+        value: 'colorful',
+        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Colorful'
+    },
+    normal: {
+        value: 'normal',
+        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Normal'
+    }
+};

module/documents/actor.mjs

@@ -2,6 +2,7 @@ import DamageSelectionDialog from '../applications/damageSelectionDialog.mjs';
 import NpcRollSelectionDialog from '../applications/npcRollSelectionDialog.mjs';
 import RollSelectionDialog from '../applications/rollSelectionDialog.mjs';
 import { GMUpdateEvent, socketEvent } from '../helpers/socket.mjs';
+import { setDiceSoNiceForDualityRoll } from '../helpers/utils.mjs';
 
 export default class DhpActor extends Actor {
     _preCreate(data, changes, user) {
@@ -116,16 +117,19 @@ export default class DhpActor extends Actor {
             disadvantageDice = null,
             bonusDamageString = '';
 
-        const modifiers = [
+        const modifiers =
+            modifier.value !== null
+                ? [
                       {
                           value: modifier.value ? Number.parseInt(modifier.value) : 0,
                           label:
                               modifier.value >= 0
                                   ? `${modifier.title} +${modifier.value}`
-                        : `${modifier.title} -${modifier.value}`,
+                                  : `${modifier.title} ${modifier.value}`,
                           title: modifier.title
                       }
-        ];
+                  ]
+                : [];
         if (!shiftKey) {
             const dialogClosed = new Promise((resolve, _) => {
                 new RollSelectionDialog(
@@ -161,53 +165,7 @@ export default class DhpActor extends Actor {
             `1${hopeDice} + 1${fearDice}${advantageDice ? ` + 1${advantageDice}` : disadvantageDice ? ` - 1${disadvantageDice}` : ''} ${modifiers.map(x => `+ ${x.value}`).join(' ')}`
         );
         let rollResult = await roll.evaluate();
-        rollResult.dice[0].options.appearance = {
-            colorset: 'inspired',
-            foreground: '#FFFFFF',
-            background: '#008080',
-            outline: '#000000',
-            edge: '#806400',
-            texture: 'bloodmoon',
-            material: 'metal',
-            font: 'Arial Black',
-            system: 'standard'
-        };
-        if (advantageDice || disadvantageDice) {
-            rollResult.dice[1].options.appearance = {
-                colorset: 'inspired',
-                foreground: disadvantageDice ? '#b30000' : '#FFFFFF',
-                background: '#008080',
-                outline: disadvantageDice ? '#000000' : '#000000',
-                edge: '#806400',
-                texture: 'bloodmoon',
-                material: 'metal',
-                font: 'Arial Black',
-                system: 'standard'
-            };
-            rollResult.dice[2].options.appearance = {
-                colorset: 'bloodmoon',
-                foreground: '#000000',
-                background: '#430070',
-                outline: '#b30000',
-                edge: '#000000',
-                texture: 'bloodmoon',
-                material: 'metal',
-                font: 'Arial Black',
-                system: 'standard'
-            };
-        } else {
-            rollResult.dice[1].options.appearance = {
-                colorset: 'bloodmoon',
-                foreground: '#000000',
-                background: '#430070',
-                outline: '#b30000',
-                edge: '#000000',
-                texture: 'bloodmoon',
-                material: 'metal',
-                font: 'Arial Black',
-                system: 'standard'
-            };
-        }
+        setDiceSoNiceForDualityRoll(rollResult, advantageDice, disadvantageDice);
 
         const hope = rollResult.dice[0].results[0].result;
         const fear = rollResult.dice[1].results[0].result;

module/helpers/utils.mjs

@@ -1,3 +1,5 @@
+import { diceSoNicePresets, getDiceSoNicePresets } from '../config/generalConfig.mjs';
+
 export const loadCompendiumOptions = async compendiums => {
     const compendiumValues = [];
 
@@ -118,3 +120,14 @@ export const getCommandTarget = () => {
 
     return target;
 };
+
+export const setDiceSoNiceForDualityRoll = (rollResult, advantage, disadvantage) => {
+    const diceSoNicePresets = getDiceSoNicePresets();
+    rollResult.dice[0].options.appearance = diceSoNicePresets.hope;
+    rollResult.dice[1].options.appearance = diceSoNicePresets.fear;
+    if (advantage) {
+        rollResult.dice[2].options.appearance = diceSoNicePresets.advantage;
+    } else if (disadvantage) {
+        rollResult.dice[2].options.appearance = diceSoNicePresets.disadvantage;
+    }
+};

styles/chat.less

@@ -21,15 +21,6 @@
                 align-items: end;
                 justify-content: space-between;
                 padding: 0 8px;
-
-                .duality-result-value {
-                    border: 1px solid var(--color-dark-5);
-                    padding: 2px;
-                    font-weight: bold;
-                    background: var(--color-dark-1);
-                    margin-bottom: 4px;
-                    font-size: 16px;
-                }
             }
 
             .duality-modifiers {
@@ -211,7 +202,7 @@
             text-shadow: 0 0 1px black;
             font-weight: bold;
             background: var(--color-dark-1);
-            padding: 4px;
+            padding: 4px 4px 0 4px;
             border-radius: 6px 0 0 0;
         }
 
@@ -506,6 +497,15 @@
                 margin-top: 5px;
             }
         }
+
+        .dice-actions {
+            margin-top: 5px;
+            display: flex;
+
+            button {
+                flex: 1;
+            }
+        }
     }
 
     &.domain-card {

styles/daggerheart.css

@@ -1369,14 +1369,6 @@
   justify-content: space-between;
   padding: 0 8px;
 }
-.chat-message.duality .duality-data .duality-title .duality-result-value {
-  border: 1px solid var(--color-dark-5);
-  padding: 2px;
-  font-weight: bold;
-  background: var(--color-dark-1);
-  margin-bottom: 4px;
-  font-size: 16px;
-}
 .chat-message.duality .duality-data .duality-modifiers {
   display: flex;
   gap: 2px;
@@ -1504,7 +1496,7 @@
   text-shadow: 0 0 1px black;
   font-weight: bold;
   background: var(--color-dark-1);
-  padding: 4px;
+  padding: 4px 4px 0 4px;
   border-radius: 6px 0 0 0;
 }
 .chat-message.duality .duality-actions {
@@ -1736,6 +1728,13 @@
 .daggerheart.chat.roll .dice-result .damage-button {
   margin-top: 5px;
 }
+.daggerheart.chat.roll .dice-actions {
+  margin-top: 5px;
+  display: flex;
+}
+.daggerheart.chat.roll .dice-actions button {
+  flex: 1;
+}
 .daggerheart.chat.domain-card {
   display: flex;
   flex-direction: column;
@@ -3095,6 +3094,39 @@ div.daggerheart.views.multiclass {
   transform: translateY(-20px);
   transform-origin: top;
 }
+.application.setting.dh-style fieldset h2,
+.application.setting.dh-style fieldset h3,
+.application.setting.dh-style fieldset h4 {
+  margin: 8px 0 4px;
+  text-align: center;
+}
+.application.setting.dh-style fieldset .title-hint {
+  font-size: 12px;
+  font-variant: small-caps;
+  text-align: center;
+}
+.application.setting.dh-style fieldset .field-section .split-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.application.setting.dh-style fieldset .label-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.application.setting.dh-style fieldset .label-container label {
+  align-self: center;
+  text-align: center;
+}
+.application.setting.dh-style footer {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+.application.setting.dh-style footer button {
+  flex: 1;
+}
 .sheet.daggerheart.dh-style .tab-navigation {
   margin: 5px 0;
   height: 40px;

styles/less/global/elements.less

@@ -159,3 +159,48 @@
         transform-origin: top;
     }
 }
+
+.application.setting.dh-style {
+    fieldset {
+        h2,
+        h3,
+        h4 {
+            margin: 8px 0 4px;
+            text-align: center;
+        }
+        .title-hint {
+            font-size: 12px;
+            font-variant: small-caps;
+            text-align: center;
+        }
+
+        .field-section {
+            .split-section {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+            }
+        }
+
+        .label-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+
+            label {
+                align-self: center;
+                text-align: center;
+            }
+        }
+    }
+
+    footer {
+        margin-top: 8px;
+        display: flex;
+        gap: 8px;
+
+        button {
+            flex: 1;
+        }
+    }
+}

templates/chat/attack-roll.hbs

@@ -1,9 +1,8 @@
-<div class="daggerheart chat roll" data-action="expandRoll">
-    {{#if this.colorful}}
+{{#if this.colorful}}
+    <div class="daggerheart chat roll" data-action="expandRoll">
         <div class="duality-data">
             <div class="duality-title">
                 <div>{{localize "DAGGERHEART.Chat.AttackRoll.Title" attack=this.title}}</div>
-                <div class="duality-result-value">{{this.total}}</div>
             </div>
             <div class="duality-modifiers">
                 {{#each this.modifiers}}
@@ -62,7 +61,7 @@
                 </div>
                 {{#if (not this.damage.value)}}
                     <div class="duality-result">
-                        <div>{{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
+                        <div>{{this.total}} {{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
                     </div>
                 {{/if}}
             </div>
@@ -83,11 +82,12 @@
             <div class="duality-actions">
                 <button class="duality-action" data-value="{{this.total}}" data-damage="{{this.damage.value}}" data-damage-type="{{this.damage.type}}" {{#if this.damage.disabled}}disabled{{/if}}><span>Roll Damage</span></button>  
                 <div class="duality-result">
-                    <div>{{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
+                    <div>{{this.total}} {{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
                 </div>
             </div>
         {{/if}}
-    {{else}}
+    </div>
+{{else}}
     <div class="dice-roll daggerheart chat roll" data-action="expandRoll">
         <div class="dice-flavor">{{localize "DAGGERHEART.Chat.AttackRoll.Title" attack=this.title}}</div>
         <div class="dice-result">
@@ -163,10 +163,9 @@
                     {{/each}}
                 </div>
             {{/if}}
-                <div class="flexrow">
-                    <button class="roll-damage-button" data-value="{{this.total}}" data-damage="{{this.damage.value}}" data-damage-type="{{this.damage.type}}" {{#if this.damage.disabled}}disabled{{/if}}><span>Roll Damage</span></button>  
+            <div class="dice-actions">
+                <button class="duality-action" data-value="{{this.total}}" data-damage="{{this.damage.value}}" data-damage-type="{{this.damage.type}}" {{#if this.damage.disabled}}disabled{{/if}}><span>Roll Damage</span></button>  
             </div>
         </div>
     </div>
-    {{/if}}
-</div>
+{{/if}}

templates/chat/duality-roll.hbs

@@ -1,9 +1,8 @@
-<div class="daggerheart chat roll" data-action="expandRoll">
-    {{#if this.colorful}}
+{{#if this.colorful}}
+    <div class="daggerheart chat roll" data-action="expandRoll">
         <div class="duality-data">
             <div class="duality-title">
                 <div>{{this.title}}</div>
-                <div class="duality-result-value">{{this.total}}</div>
             </div>
             <div class="duality-modifiers">
                 {{#each this.modifiers}}
@@ -62,7 +61,7 @@
                 </div>
                 {{#if (not this.damage.value)}}
                     <div class="duality-result">
-                        <div>{{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
+                        <div>{{this.total}} {{#if (eq dualityResult 1)}}With Hope{{else}}{{#if (eq dualityResult 2)}}With Fear{{else}}Critical Success{{/if}}{{/if}}</div>
                     </div>
                 {{/if}}
             </div>
@@ -75,7 +74,9 @@
                 </div>
             </div>
         {{/if}}
-    {{else}}
+    </div>
+{{else}}
+    <div class="dice-roll daggerheart chat roll" data-action="expandRoll">
         <div class="dice-flavor">{{this.title}}</div>
         <div class="dice-result">
             <div class="dice-formula">{{roll}}</div>
@@ -138,5 +139,5 @@
                 </div>
             </div>
         </div>
-    {{/if}}
-</div>
+    </div>
+{{/if}}

templates/settings/appearance-settings.hbs

@@ -0,0 +1,119 @@
+<div>
+    <fieldset>
+        <legend>{{localize "DAGGERHEART.Settings.Menu.Appearance.duality"}}</legend>
+
+        {{formInput settingFields.schema.fields.dualityColorScheme value=settingFields._source.dualityColorScheme localize=true}}
+
+        <h2>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.title"}}</h2>
+        <div class="title-hint">{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.hint"}}</div>
+
+        <fieldset>
+            <legend>{{localize "DAGGERHEART.General.Hope"}}</legend>
+
+            <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}}
+                    </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}}
+                    </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}}
+                    </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}}
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <legend>{{localize "DAGGERHEART.General.Fear"}}</legend>
+
+            <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.fear.fields.foreground value=settingFields._source.diceSoNice.fear.foreground localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.background value=settingFields._source.diceSoNice.fear.background localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.outline value=settingFields._source.diceSoNice.fear.outline localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.edge value=settingFields._source.diceSoNice.fear.edge localize=true}}
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <legend>{{localize "DAGGERHEART.General.Advantage.Full"}}</legend>
+
+            <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.advantage.fields.foreground value=settingFields._source.diceSoNice.advantage.foreground localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.background value=settingFields._source.diceSoNice.advantage.background localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.outline value=settingFields._source.diceSoNice.advantage.outline localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.edge value=settingFields._source.diceSoNice.advantage.edge localize=true}}
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <legend>{{localize "DAGGERHEART.General.Disadvantage.Full"}}</legend>
+
+            <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.disadvantage.fields.foreground value=settingFields._source.diceSoNice.disadvantage.foreground localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.background value=settingFields._source.diceSoNice.disadvantage.background localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.outline value=settingFields._source.diceSoNice.disadvantage.outline localize=true}}
+                    </div>
+                    <div class="label-container">
+                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
+                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.edge value=settingFields._source.diceSoNice.disadvantage.edge localize=true}}
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    </fieldset>
+
+    <footer class="form-footer">
+        <button data-action="reset">
+            <i class="fa-solid fa-arrow-rotate-left"></i>
+            <span>{{localize "Reset"}}</span>
+        </button>
+        <button data-action="save" >
+            <i class="fa-solid fa-floppy-disk"></i>
+            <span>{{localize "Save Changes"}}</span>
+        </button>
+    </footer>
+</div>
+