Added Colorful/Normal DualityRoll color settings

daggerheart.mjs

@@ -213,7 +213,16 @@ 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();
-                resolve({ roll, attribute, title });
+                resolve({
+                    roll,
+                    attribute: attribute
+                        ? {
+                              value: attribute.data.value,
+                              label: `${game.i18n.localize(abilities[attributeValue].label)} ${attribute.data.value >= 0 ? `+` : `-`}${attribute.data.value}`
+                          }
+                        : undefined,
+                    title
+                });
             }).then(({ roll, attribute, title }) => {
                 const cls = getDocumentClass('ChatMessage');
                 const msgData = {
@@ -223,7 +232,7 @@ Hooks.on('chatMessage', (_, message) => {
                         title: title,
                         origin: target?.id,
                         roll: roll._formula,
-                        modifiers: attribute ? [{ value: attribute.data.value }] : [],
+                        modifiers: attribute ? [attribute] : [],
                         hope: { dice: rollCommand.hope ?? 'd12', value: roll.dice[0].total },
                         fear: { dice: rollCommand.fear ?? 'd12', value: roll.dice[1].total },
                         advantage:

lang/en.json

@@ -77,6 +77,14 @@
                     "Name": "Enable Range Measurement",
                     "Hint": "Enable measuring of ranges with the ruler according to set distances."
                 }
+            },
+            "DualityRollColor": {
+                "Name": "Duality Roll Colour Scheme",
+                "Hint": "The display type for Duality Rolls",
+                "Options": {
+                    "Colorful": "Colorful",
+                    "Normal": "Normal"
+                }
             }
         },
         "Notification": {

module/applications/chatMessage.mjs

@@ -1,3 +1,6 @@
+import { DualityRollColor } from '../config/settingsConfig.mjs';
+import DhpDualityRoll from '../data/dualityRoll.mjs';
+
 export default class DhpChatMesssage extends ChatMessage {
     async renderHTML() {
         if (
@@ -9,6 +12,20 @@ export default class DhpChatMesssage extends ChatMessage {
             this.content = await foundry.applications.handlebars.renderTemplate(this.content, this.system);
         }
 
-        return super.renderHTML();
+        /* We can change to fully implementing the renderHTML function if needed, instead of augmenting it. */
+        const html = await super.renderHTML();
+        if (
+            this.type === 'dualityRoll' &&
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor) ===
+                DualityRollColor.colorful.value
+        ) {
+            html.classList.add('duality');
+            const dualityResult = this.system.dualityResult;
+            if (dualityResult === DhpDualityRoll.dualityResult.hope) html.classList.add('hope');
+            else if (dualityResult === DhpDualityRoll.dualityResult.fear) html.classList.add('fear');
+            else html.classList.add('critical');
+        }
+
+        return html;
     }
 }

module/applications/settings.mjs

@@ -1,3 +1,5 @@
+import { DualityRollColor } from '../config/settingsConfig.mjs';
+
 class DhpAutomationSettings extends FormApplication {
     constructor(object = {}, options = {}) {
         super(object, options);
@@ -213,6 +215,16 @@ 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.registerMenu(SYSTEM.id, SYSTEM.SETTINGS.menu.Automation.Name, {
         name: game.i18n.localize('DAGGERHEART.Settings.Menu.Automation.Name'),
         label: game.i18n.localize('DAGGERHEART.Settings.Menu.Automation.Label'),

module/applications/sheets/pc.mjs

@@ -567,7 +567,7 @@ export default class PCSheet extends DaggerheartSheet(ActorSheetV2) {
 
         const { roll, hope, fear, advantage, disadvantage, modifiers, bonusDamageString } =
             await this.document.dualityRoll(
-                { title: 'Attribute Modifier', value: modifier },
+                { title: game.i18n.localize(abilities[weapon.system.trait].label), value: modifier },
                 event.shiftKey,
                 damage.bonusDamage
             );

module/config/settingsConfig.mjs

@@ -24,5 +24,17 @@ export const gameSettings = {
     General: {
         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'
     }
 };

module/data/dualityRoll.mjs

@@ -1,3 +1,5 @@
+import { DualityRollColor } from '../config/settingsConfig.mjs';
+
 const fields = foundry.data.fields;
 const diceField = () =>
     new fields.SchemaField({
@@ -6,6 +8,12 @@ const diceField = () =>
     });
 
 export default class DhpDualityRoll extends foundry.abstract.TypeDataModel {
+    static dualityResult = {
+        hope: 1,
+        fear: 2,
+        critical: 3
+    };
+
     static defineSchema() {
         return {
             title: new fields.StringField(),
@@ -57,19 +65,34 @@ export default class DhpDualityRoll extends foundry.abstract.TypeDataModel {
     }
 
     get total() {
-        const modifiers = this.modifiers.reduce((acc, x) => acc + x.value, 0);
         const advantage = this.advantage.value
             ? this.advantage.value
             : this.disadvantage.value
               ? -this.disadvantage.value
               : 0;
-        return this.diceTotal + advantage + modifiers;
+        return this.diceTotal + advantage + this.modifierTotal.value;
     }
 
     get diceTotal() {
         return this.hope.value + this.fear.value;
     }
 
+    get modifierTotal() {
+        const total = this.modifiers.reduce((acc, x) => acc + x.value, 0);
+        return {
+            value: total,
+            label: total > 0 ? `+${total}` : total < 0 ? `-${total}` : ''
+        };
+    }
+
+    get dualityResult() {
+        return this.hope.value > this.fear.value
+            ? this.constructor.dualityResult.hope
+            : this.fear.value > this.hope.value
+              ? this.constructor.dualityResult.fear
+              : this.constructor.dualityResult.critical;
+    }
+
     get totalLabel() {
         const label =
             this.hope.value > this.fear.value
@@ -81,6 +104,13 @@ export default class DhpDualityRoll extends foundry.abstract.TypeDataModel {
         return game.i18n.localize(label);
     }
 
+    get colorful() {
+        return (
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor) ===
+            DualityRollColor.colorful.value
+        );
+    }
+
     prepareDerivedData() {
         const total = this.total;
 

module/documents/actor.mjs

@@ -119,7 +119,10 @@ export default class DhpActor extends Actor {
         const modifiers = [
             {
                 value: modifier.value ? Number.parseInt(modifier.value) : 0,
-                label: modifier.value >= 0 ? `+${modifier.value}` : `-${modifier.value}`,
+                label:
+                    modifier.value >= 0
+                        ? `${modifier.title} +${modifier.value}`
+                        : `${modifier.title} -${modifier.value}`,
                 title: modifier.title
             }
         ];

module/ui/chatLog.mjs

@@ -14,7 +14,7 @@ export default class DhpChatLog extends foundry.applications.sidebar.tabs.ChatLo
     }
 
     addChatListeners = async (app, html, data) => {
-        html.querySelectorAll('.roll-damage-button').forEach(element =>
+        html.querySelectorAll('.duality-action').forEach(element =>
             element.addEventListener('click', event => this.onRollDamage(event, data.message))
         );
         html.querySelectorAll('.target-container').forEach(element => {

styles/chat.less

@@ -1,3 +1,287 @@
+.chat-message {
+    &.duality {
+        border-color: black;
+        padding: 8px 0 0 0;
+
+        .message-header {
+            color: var(--color-light-3);
+            padding: 0 8px;
+        }
+
+        .duality-data {
+            display: flex;
+            flex-direction: column;
+
+            .duality-title {
+                color: var(--color-light-1);
+                text-shadow: 0 0 1px black;
+                border-bottom: 1px solid;
+                margin-bottom: 2px;
+                display: flex;
+                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 {
+                display: flex;
+                gap: 2px;
+                margin-bottom: 4px;
+                padding: 0 8px;
+
+                .duality-modifier {
+                    padding: 2px;
+                    border-radius: 6px;
+                    border: 1px solid;
+                    background: var(--color-dark-6);
+                    font-size: 12px;
+                }
+            }
+
+            .duality-line {
+                display: flex;
+                align-items: end;
+                justify-content: space-between;
+                padding: 0 8px;
+
+                &.simple {
+                    padding-right: 0;
+                }
+
+                .dice-outer-container {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    margin-bottom: 4px;
+
+                    .dice-container {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 2px;
+
+                        .dice-title {
+                            color: var(--color-light-1);
+                            text-shadow: 0 0 1px black;
+                        }
+
+                        .dice-inner-container {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            position: relative;
+
+                            .dice-wrapper {
+                                height: 24px;
+                                width: 24px;
+                                position: relative;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                clip-path: polygon(
+                                    50% 0%,
+                                    80% 10%,
+                                    100% 35%,
+                                    100% 70%,
+                                    80% 90%,
+                                    50% 100%,
+                                    20% 90%,
+                                    0% 70%,
+                                    0% 35%,
+                                    20% 10%
+                                );
+
+                                .dice {
+                                    height: 26px;
+                                    width: 26px;
+                                    max-width: unset;
+                                    position: absolute;
+                                }
+                            }
+
+                            .dice-value {
+                                position: absolute;
+                                font-weight: bold;
+                                font-size: 16px;
+                            }
+
+                            &.hope {
+                                .dice-wrapper {
+                                    background: black;
+
+                                    .dice {
+                                        filter: brightness(0) saturate(100%) invert(79%) sepia(79%) saturate(333%)
+                                            hue-rotate(352deg) brightness(102%) contrast(103%);
+                                    }
+                                }
+
+                                .dice-value {
+                                    color: var(--color-dark-1);
+                                    text-shadow: 0 0 4px white;
+                                }
+                            }
+
+                            &.fear {
+                                .dice-wrapper {
+                                    background: white;
+
+                                    .dice {
+                                        filter: brightness(0) saturate(100%) invert(12%) sepia(88%) saturate(4321%)
+                                            hue-rotate(221deg) brightness(92%) contrast(110%);
+                                    }
+                                }
+
+                                .dice-value {
+                                    color: var(--color-light-1);
+                                    text-shadow: 0 0 4px black;
+                                }
+                            }
+                        }
+                    }
+
+                    .advantage-container {
+                        padding-top: 21px;
+
+                        .dice-wrapper {
+                            height: 24px;
+                            width: 24px;
+                            position: relative;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            .dice {
+                                height: 26px;
+                                width: 26px;
+                                max-width: unset;
+                                position: absolute;
+                            }
+
+                            .dice-value {
+                                position: absolute;
+                                font-weight: bold;
+                                font-size: 16px;
+                            }
+                        }
+
+                        &.advantage {
+                            .dice-wrapper {
+                                .dice {
+                                    filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(4133%)
+                                        hue-rotate(96deg) brightness(104%) contrast(107%);
+                                }
+                            }
+                        }
+
+                        &.disadvantage {
+                            .dice-wrapper {
+                                .dice {
+                                    filter: brightness(0) saturate(100%) invert(9%) sepia(78%) saturate(6903%)
+                                        hue-rotate(11deg) brightness(93%) contrast(117%);
+                                }
+                            }
+                        }
+                    }
+
+                    .duality-modifier {
+                        padding-top: 21px;
+                        color: var(--color-light-1);
+                        text-shadow: 0 0 1px black;
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+
+        .duality-result {
+            display: flex;
+            flex-direction: column;
+            align-items: end;
+            justify-content: center;
+            gap: 2px;
+            color: var(--color-light-1);
+            text-shadow: 0 0 1px black;
+            font-weight: bold;
+            background: var(--color-dark-1);
+            padding: 4px;
+            border-radius: 6px 0 0 0;
+        }
+
+        .duality-actions {
+            display: flex;
+            justify-content: space-between;
+
+            .duality-action {
+                color: var(--color-light-1);
+                text-shadow: 0 0 1px black;
+                font-weight: bold;
+                background: var(--color-dark-1);
+                padding: 4px;
+                border-radius: 0 6px 0 0;
+                border-color: black;
+                min-height: unset;
+                height: 26px;
+            }
+        }
+
+        &.hope {
+            background: linear-gradient(0, @hopeBackgroundEnd 40px, @hopeBackgroundStart);
+
+            // .dice-result {
+            //     color: @hope;
+            //     text-shadow: 0 0 3px black;
+            // }
+
+            // .dice-total, .dice-formula {
+            //     border-color: @hope;
+            //     background: rgba(@hope, 0.5);
+            // }
+        }
+        &.fear {
+            background: linear-gradient(0, @fearBackgroundEnd, @fearBackgroundStart);
+
+            // .dice-result {
+            //     color: var(--color-dark-1);
+            //     text-shadow: 0 0 1px var(--color-light-1);
+            // }
+
+            // .dice-total, .dice-formula {
+            //     border-color: @fear;
+            //     background: @fearAccent;
+            // }
+        }
+        &.critical {
+            background: linear-gradient(0, @criticalBackgroundEnd, @criticalBackgroundStart);
+
+            // .dice-result {
+            //     color: var(--color-dark-1);
+            //     text-shadow: 0 0 1px var(--color-light-1);
+            // }
+
+            // .dice-total, .dice-formula {
+            //     border-color: @critical;
+            //     background: @criticalAccent;
+            // }
+        }
+
+        .dice-roll {
+            color: var(--color-dark-1);
+
+            .dice-flavor {
+                color: var(--color-light-1);
+            }
+        }
+    }
+}
+
 .daggerheart.chat {
     &.downtime {
         display: flex;

styles/daggerheart.css

@@ -6,6 +6,7 @@
 /* General */
 /* Drop Shadows */
 /* Background */
+/* Duality */
 @import '../node_modules/@yaireo/tagify/dist/tagify.css';
 .daggerheart.sheet.class .editor {
   height: 500px;
@@ -1346,6 +1347,196 @@
   cursor: pointer;
   filter: drop-shadow(0 0 3px red);
 }
+.chat-message.duality {
+  border-color: black;
+  padding: 8px 0 0 0;
+}
+.chat-message.duality .message-header {
+  color: var(--color-light-3);
+  padding: 0 8px;
+}
+.chat-message.duality .duality-data {
+  display: flex;
+  flex-direction: column;
+}
+.chat-message.duality .duality-data .duality-title {
+  color: var(--color-light-1);
+  text-shadow: 0 0 1px black;
+  border-bottom: 1px solid;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: end;
+  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;
+  margin-bottom: 4px;
+  padding: 0 8px;
+}
+.chat-message.duality .duality-data .duality-modifiers .duality-modifier {
+  padding: 2px;
+  border-radius: 6px;
+  border: 1px solid;
+  background: var(--color-dark-6);
+  font-size: 12px;
+}
+.chat-message.duality .duality-data .duality-line {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+.chat-message.duality .duality-data .duality-line.simple {
+  padding-right: 0;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-title {
+  color: var(--color-light-1);
+  text-shadow: 0 0 1px black;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container .dice-wrapper {
+  height: 24px;
+  width: 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container .dice-wrapper .dice {
+  height: 26px;
+  width: 26px;
+  max-width: unset;
+  position: absolute;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container .dice-value {
+  position: absolute;
+  font-weight: bold;
+  font-size: 16px;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container.hope .dice-wrapper {
+  background: black;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container.hope .dice-wrapper .dice {
+  filter: brightness(0) saturate(100%) invert(79%) sepia(79%) saturate(333%) hue-rotate(352deg) brightness(102%) contrast(103%);
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container.hope .dice-value {
+  color: var(--color-dark-1);
+  text-shadow: 0 0 4px white;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container.fear .dice-wrapper {
+  background: white;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container.fear .dice-wrapper .dice {
+  filter: brightness(0) saturate(100%) invert(12%) sepia(88%) saturate(4321%) hue-rotate(221deg) brightness(92%) contrast(110%);
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .dice-container .dice-inner-container.fear .dice-value {
+  color: var(--color-light-1);
+  text-shadow: 0 0 4px black;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .advantage-container {
+  padding-top: 21px;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .advantage-container .dice-wrapper {
+  height: 24px;
+  width: 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .advantage-container .dice-wrapper .dice {
+  height: 26px;
+  width: 26px;
+  max-width: unset;
+  position: absolute;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .advantage-container .dice-wrapper .dice-value {
+  position: absolute;
+  font-weight: bold;
+  font-size: 16px;
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .advantage-container.advantage .dice-wrapper .dice {
+  filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(4133%) hue-rotate(96deg) brightness(104%) contrast(107%);
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .advantage-container.disadvantage .dice-wrapper .dice {
+  filter: brightness(0) saturate(100%) invert(9%) sepia(78%) saturate(6903%) hue-rotate(11deg) brightness(93%) contrast(117%);
+}
+.chat-message.duality .duality-data .duality-line .dice-outer-container .duality-modifier {
+  padding-top: 21px;
+  color: var(--color-light-1);
+  text-shadow: 0 0 1px black;
+  font-size: 16px;
+}
+.chat-message.duality .duality-result {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: center;
+  gap: 2px;
+  color: var(--color-light-1);
+  text-shadow: 0 0 1px black;
+  font-weight: bold;
+  background: var(--color-dark-1);
+  padding: 4px;
+  border-radius: 6px 0 0 0;
+}
+.chat-message.duality .duality-actions {
+  display: flex;
+  justify-content: space-between;
+}
+.chat-message.duality .duality-actions .duality-action {
+  color: var(--color-light-1);
+  text-shadow: 0 0 1px black;
+  font-weight: bold;
+  background: var(--color-dark-1);
+  padding: 4px;
+  border-radius: 0 6px 0 0;
+  border-color: black;
+  min-height: unset;
+  height: 26px;
+}
+.chat-message.duality.hope {
+  background: linear-gradient(0, brown 40px, black);
+}
+.chat-message.duality.fear {
+  background: linear-gradient(0, blue, #0f0f61);
+}
+.chat-message.duality.critical {
+  background: linear-gradient(0, purple, #250825);
+}
+.chat-message.duality .dice-roll {
+  color: var(--color-dark-1);
+}
+.chat-message.duality .dice-roll .dice-flavor {
+  color: var(--color-light-1);
+}
 .daggerheart.chat.downtime {
   display: flex;
   flex-direction: column;
@@ -1391,7 +1582,7 @@
 }
 .daggerheart.chat.roll .dice-tooltip .dice-rolls.duality .roll.die.hope {
   color: white;
-  -webkit-text-stroke-color: #ffd700;
+  -webkit-text-stroke-color: #ffe760;
   -webkit-text-stroke-width: 1.5px;
   font-weight: 400;
 }
@@ -1415,7 +1606,7 @@
 }
 .daggerheart.chat.roll .dice-tooltip .dice-rolls.duality .roll.die.advantage {
   color: white;
-  -webkit-text-stroke-color: green;
+  -webkit-text-stroke-color: #008000;
   -webkit-text-stroke-width: 1.5px;
   font-weight: 400;
 }
@@ -1432,9 +1623,9 @@
   font-weight: bold;
 }
 .daggerheart.chat.roll .dice-total.duality.hope {
-  border-color: #ffd700;
+  border-color: #ffe760;
   border-width: 3px;
-  background: rgba(255, 215, 0, 0.5);
+  background: rgba(255, 231, 96, 0.5);
 }
 .daggerheart.chat.roll .dice-total.duality.fear {
   border-color: #0032b1;
@@ -1447,7 +1638,7 @@
   background: rgba(67, 0, 112, 0.5);
 }
 .daggerheart.chat.roll .dice-total .dice-total-value .hope {
-  color: #ffd700;
+  color: #ffe760;
 }
 .daggerheart.chat.roll .dice-total .dice-total-value .fear {
   color: #0032b1;

styles/variables/colors.less

@@ -1,8 +1,5 @@
 /* General */
-@hope: #ffd700;
+@advantage: #008000;
-@fear: #0032b1;
-@critical: #430070;
-@advantage: green;
 @disadvantage: #b30000;
 @miss: rgb(255, 0, 0);
 @hit: rgb(0, 128, 0);
@@ -22,3 +19,16 @@
 @secondaryAccent: #708090;
 @formBackground: #782e22;
 @hoverBackground: #2f4f4f40;
+
+/* Duality */
+@hope: #ffe760;
+@hopeBackgroundStart: black;
+@hopeBackgroundEnd: brown;
+@fear: #0032b1;
+@fearAccent: #2555cd;
+@fearBackgroundStart: #0f0f61;
+@fearBackgroundEnd: blue;
+@critical: #430070;
+@criticalAccent: #66159c;
+@criticalBackgroundStart: #250825;
+@criticalBackgroundEnd: purple;

templates/chat/attack-roll.hbs

@@ -1,80 +1,160 @@
 <div class="dice-roll daggerheart chat roll" data-action="expandRoll">
-    <div class="dice-flavor">{{localize "DAGGERHEART.Chat.AttackRoll.Title" attack=this.title}}</div>
+    {{#if this.colorful}}
-    <div class="dice-result">
+        <div class="duality-data">
-        <div class="dice-formula">{{roll}}</div>
+            <div class="duality-title">
-
+                <div>{{localize "DAGGERHEART.Chat.AttackRoll.Title" attack=this.title}}</div>
-        <div class="dice-tooltip">
+                <div class="duality-result-value">{{this.total}}</div>
-            <div class="wrapper">
-                <section class="tooltip-part">
-                    <div class="dice">
-                        <header class="part-header flexrow">
-                            <span class="part-formula">
-                                <span>1{{hope.dice}}</span>
-                                |
-                                <span>1{{fear.dice}}</span>
-                            </span>
-                            <span class="part-total">{{this.diceTotal}}</span>
-                        </header>
-                        <div class="flexrow">
-                            <ol class="dice-rolls duality">
-                                <li class="roll die {{hope.dice}} {{#if hope.discarded}}discarded{{/if}} hope min" title="{{localize "DAGGERHEART.General.Hope"}}">{{hope.value}}</li>
-                                <li class="roll die {{fear.dice}} {{#if fear.discarded}}discarded{{/if}} fear min" title="{{localize "DAGGERHEART.General.Fear"}}">{{fear.value}}</li>
-                            </ol>
-                        </div>  
-                    </div>
-                    {{#if advantage.value}}
-                        <div class="dice">
-                            <header class="part-header flexrow">
-                                <span class="part-formula">
-                                    <span>1{{advantage.dice}}</span>
-                                </span>
-                                <span class="part-total">{{advantage.value}}</span>
-                            </header>
-                            <div class="flexrow">
-                                <ol class="dice-rolls">
-                                    <li class="roll die {{advantage.dice}} hope min">{{advantage.value}}</li>
-                                </ol>
-                            </div>  
-                        </div>
-                    {{/if}}
-                    {{#if disadvantage.value}}
-                        <div class="dice">
-                            <header class="part-header flexrow">
-                                <span class="part-formula">
-                                    <span>1{{disadvantage.dice}}</span>
-                                </span>
-                                <span class="part-total">{{disadvantage.value}}</span>
-                            </header>
-                            <div class="flexrow">
-                                <ol class="dice-rolls">
-                                    <li class="roll die {{disadvantage.dice}} hope min">{{disadvantage.value}}</li>
-                                </ol>
-                            </div>  
-                        </div>
-                    {{/if}}
-                </section>
             </div>
-        </div>
+            <div class="duality-modifiers">
-        <div class="dice-total">
+                {{#each this.modifiers}}
-            <div class="dice-total-label">{{totalLabel}}</div>
+                    <div class="duality-modifier">
-            <div class="dice-total-value">
+                        {{this.label}}
-                {{this.total}}
-            </div>
-        </div>
-        {{#if (gt targets.length 0)}}
-            <div class="target-section">
-                {{#each targets as |target|}}
-                    <div class="dice-total target-container {{#if target.hit}}hit{{else}}{{#if (not ../total.alternate)}}miss{{/if}}{{/if}}" data-token="{{target.id}}">
-                            <img src="{{target.img}}" />
-                            <div class="target-inner-container">
-                                {{#if target.hit}}{{localize "Hit"}}{{else}}{{#if (not ../total.alternate)}}{{localize "Miss"}}{{else}}?{{/if}}{{/if}}
-                            </div>
                     </div>
                 {{/each}}
+                {{#if this.advantage.value}}
+                    <div class="duality-modifier">
+                        {{localize "DAGGERHEART.General.Advantage.Full"}}
+                    </div>
+                {{/if}}
+                {{#if this.disadvantage.value}}
+                    <div class="duality-modifier">
+                        {{localize "DAGGERHEART.General.Disadvantage.Full"}}
+                    </div>
+                {{/if}}
+            </div>
+            <div class="duality-line {{#if (not this.damage.value)}}simple{{/if}}">
+                <div class="dice-outer-container">
+                    <div class="dice-container">
+                        <div class="dice-title">{{localize "DAGGERHEART.General.Hope"}}</div>
+                        <div class="dice-inner-container hope" title="{{localize "DAGGERHEART.General.Hope"}}">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d12-grey.svg"/>
+                            </div>
+                            <div class="dice-value">{{hope.value}}</div>
+                        </div>
+                    </div>
+                    <div class="dice-container">
+                        <div class="dice-title">{{localize "DAGGERHEART.General.Fear"}}</div>
+                        <div class="dice-inner-container fear" title="{{localize "DAGGERHEART.General.Fear"}}">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d12-grey.svg"/>
+                            </div>
+                            <div class="dice-value">{{fear.value}}</div>
+                        </div>
+                    </div>
+                    {{#if this.advantage.value}}
+                        <div class="advantage-container advantage">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d6-grey.svg"/>
+                                <div class="dice-value">{{this.advantage.value}}</div>
+                            </div>
+                        </div>
+                    {{/if}}
+                    {{#if this.disadvantage.value}}
+                        <div class="advantage-container disadvantage">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d6-grey.svg"/>
+                                <div class="dice-value">{{this.disadvantage.value}}</div>
+                            </div>
+                        </div>
+                    {{/if}}
+                    {{#if this.modifierTotal.value}}<div class="duality-modifier">{{this.modifierTotal.label}}</div>{{/if}}
+                </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>
+                {{/if}}
+            </div>
+        </div>
+        {{#if this.damage.value}}
+            <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>
             </div>
         {{/if}}
-        <div class="flexrow">
+    {{else}}
-            <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-roll daggerheart chat roll" data-action="expandRoll">
+            <div class="dice-flavor">{{localize "DAGGERHEART.Chat.AttackRoll.Title" attack=this.title}}</div>
+            <div class="dice-result">
+                <div class="dice-formula">{{roll}}</div>
+
+                <div class="dice-tooltip">
+                    <div class="wrapper">
+                        <section class="tooltip-part">
+                            <div class="dice">
+                                <header class="part-header flexrow">
+                                    <span class="part-formula">
+                                        <span>1{{hope.dice}}</span>
+                                        |
+                                        <span>1{{fear.dice}}</span>
+                                    </span>
+                                    <span class="part-total">{{this.diceTotal}}</span>
+                                </header>
+                                <div class="flexrow">
+                                    <ol class="dice-rolls duality">
+                                        <li class="roll die {{hope.dice}} {{#if hope.discarded}}discarded{{/if}} hope min" title="{{localize "DAGGERHEART.General.Hope"}}">{{hope.value}}</li>
+                                        <li class="roll die {{fear.dice}} {{#if fear.discarded}}discarded{{/if}} fear min" title="{{localize "DAGGERHEART.General.Fear"}}">{{fear.value}}</li>
+                                    </ol>
+                                </div>  
+                            </div>
+                            {{#if advantage.value}}
+                                <div class="dice">
+                                    <header class="part-header flexrow">
+                                        <span class="part-formula">
+                                            <span>1{{advantage.dice}}</span>
+                                        </span>
+                                        <span class="part-total">{{advantage.value}}</span>
+                                    </header>
+                                    <div class="flexrow">
+                                        <ol class="dice-rolls">
+                                            <li class="roll die {{advantage.dice}} hope min">{{advantage.value}}</li>
+                                        </ol>
+                                    </div>  
+                                </div>
+                            {{/if}}
+                            {{#if disadvantage.value}}
+                                <div class="dice">
+                                    <header class="part-header flexrow">
+                                        <span class="part-formula">
+                                            <span>1{{disadvantage.dice}}</span>
+                                        </span>
+                                        <span class="part-total">{{disadvantage.value}}</span>
+                                    </header>
+                                    <div class="flexrow">
+                                        <ol class="dice-rolls">
+                                            <li class="roll die {{disadvantage.dice}} hope min">{{disadvantage.value}}</li>
+                                        </ol>
+                                    </div>  
+                                </div>
+                            {{/if}}
+                        </section>
+                    </div>
+                </div>
+                <div class="dice-total duality {{#if fear.discarded}}hope{{else}}{{#if hope.discarded}}fear{{else}}critical{{/if}}{{/if}}">
+                    <div class="dice-total-label">{{totalLabel}}</div>
+                    <div class="dice-total-value">
+                        {{this.total}}
+                    </div>
+                </div>
+                {{#if (gt targets.length 0)}}
+                    <div class="target-section">
+                        {{#each targets as |target|}}
+                            <div class="dice-total target-container {{#if target.hit}}hit{{else}}{{#if (not ../total.alternate)}}miss{{/if}}{{/if}}" data-token="{{target.id}}">
+                                    <img src="{{target.img}}" />
+                                    <div class="target-inner-container">
+                                        {{#if target.hit}}{{localize "Hit"}}{{else}}{{#if (not ../total.alternate)}}{{localize "Miss"}}{{else}}?{{/if}}{{/if}}
+                                    </div>
+                            </div>
+                        {{/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>
+            </div>
         </div>
-    </div>
+    {{/if}}
 </div>

templates/chat/duality-roll.hbs

@@ -1,64 +1,142 @@
 <div class="dice-roll daggerheart chat roll" data-action="expandRoll">
-    <div class="dice-flavor">{{this.title}}</div>
+    {{#if this.colorful}}
-    <div class="dice-result">
+        <div class="duality-data">
-        <div class="dice-formula">{{roll}}</div>
+            <div class="duality-title">
-        <div class="dice-tooltip">
+                <div>{{this.title}}</div>
-            <div class="wrapper">
+                <div class="duality-result-value">{{this.total}}</div>
-                <section class="tooltip-part">
+            </div>
-                    <div class="dice">
+            <div class="duality-modifiers">
-                        <header class="part-header flexrow">
+                {{#each this.modifiers}}
-                            <span class="part-formula">
+                    <div class="duality-modifier">
-                                <span>1{{hope.dice}}</span>
+                        {{this.label}}
-                                |
-                                <span>1{{fear.dice}}</span>
-                            </span>
-                            <span class="part-total">{{this.diceTotal}}</span>
-                        </header>
-                        <div class="flexrow">
-                            <ol class="dice-rolls duality">
-                                <li class="roll die {{hope.dice}} {{#if hope.discarded}}discarded{{/if}} hope min" title="{{localize "DAGGERHEART.General.Hope"}}">{{hope.value}}</li>
-                                <li class="roll die {{fear.dice}} {{#if fear.discarded}}discarded{{/if}} fear min" title="{{localize "DAGGERHEART.General.Fear"}}">{{fear.value}}</li>
-                            </ol>
-                        </div>  
                     </div>
-                    {{#if advantage.value}}
+                {{/each}}
+                {{#if this.advantage.value}}
+                    <div class="duality-modifier">
+                        {{localize "DAGGERHEART.General.Advantage.Full"}}
+                    </div>
+                {{/if}}
+                {{#if this.disadvantage.value}}
+                    <div class="duality-modifier">
+                        {{localize "DAGGERHEART.General.Disadvantage.Full"}}
+                    </div>
+                {{/if}}
+            </div>
+            <div class="duality-line {{#if (not this.damage.value)}}simple{{/if}}">
+                <div class="dice-outer-container">
+                    <div class="dice-container">
+                        <div class="dice-title">{{localize "DAGGERHEART.General.Hope"}}</div>
+                        <div class="dice-inner-container hope" title="{{localize "DAGGERHEART.General.Hope"}}">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d12-grey.svg"/>
+                            </div>
+                            <div class="dice-value">{{hope.value}}</div>
+                        </div>
+                    </div>
+                    <div class="dice-container">
+                        <div class="dice-title">{{localize "DAGGERHEART.General.Fear"}}</div>
+                        <div class="dice-inner-container fear" title="{{localize "DAGGERHEART.General.Fear"}}">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d12-grey.svg"/>
+                            </div>
+                            <div class="dice-value">{{fear.value}}</div>
+                        </div>
+                    </div>
+                    {{#if this.advantage.value}}
+                        <div class="advantage-container advantage">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d6-grey.svg"/>
+                                <div class="dice-value">{{this.advantage.value}}</div>
+                            </div>
+                        </div>
+                    {{/if}}
+                    {{#if this.disadvantage.value}}
+                        <div class="advantage-container disadvantage">
+                            <div class="dice-wrapper">
+                                <img class="dice" src="../icons/svg/d6-grey.svg"/>
+                                <div class="dice-value">{{this.disadvantage.value}}</div>
+                            </div>
+                        </div>
+                    {{/if}}
+                    {{#if this.modifierTotal.value}}<div class="duality-modifier">{{this.modifierTotal.label}}</div>{{/if}}
+                </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>
+                {{/if}}
+            </div>
+        </div>
+        {{#if this.damage.value}}
+            <div class="duality-actions">
+                <div></div>
+                <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>
+            </div>
+        {{/if}}
+    {{else}}
+        <div class="dice-flavor">{{this.title}}</div>
+        <div class="dice-result">
+            <div class="dice-formula">{{roll}}</div>
+            <div class="dice-tooltip">
+                <div class="wrapper">
+                    <section class="tooltip-part">
                         <div class="dice">
                             <header class="part-header flexrow">
                                 <span class="part-formula">
-                                    <span>1{{advantage.dice}}</span>
+                                    <span>1{{hope.dice}}</span>
+                                    |
+                                    <span>1{{fear.dice}}</span>
                                 </span>
-                                <span class="part-total">{{advantage.value}}</span>
+                                <span class="part-total">{{this.diceTotal}}</span>
                             </header>
                             <div class="flexrow">
-                                <ol class="dice-rolls">
+                                <ol class="dice-rolls duality">
-                                    <li class="roll die {{advantage.dice}} hope min">{{advantage.value}}</li>
+                                    <li class="roll die {{hope.dice}} {{#if hope.discarded}}discarded{{/if}} hope min" title="{{localize "DAGGERHEART.General.Hope"}}">{{hope.value}}</li>
+                                    <li class="roll die {{fear.dice}} {{#if fear.discarded}}discarded{{/if}} fear min" title="{{localize "DAGGERHEART.General.Fear"}}">{{fear.value}}</li>
                                 </ol>
                             </div>  
                         </div>
-                    {{/if}}
+                        {{#if advantage.value}}
-                    {{#if disadvantage.value}}
+                            <div class="dice">
-                        <div class="dice">
+                                <header class="part-header flexrow">
-                            <header class="part-header flexrow">
+                                    <span class="part-formula">
-                                <span class="part-formula">
+                                        <span>1{{advantage.dice}}</span>
-                                    <span>1{{disadvantage.dice}}</span>
+                                    </span>
-                                </span>
+                                    <span class="part-total">{{advantage.value}}</span>
-                                <span class="part-total">{{disadvantage.value}}</span>
+                                </header>
-                            </header>
+                                <div class="flexrow">
-                            <div class="flexrow">
+                                    <ol class="dice-rolls">
-                                <ol class="dice-rolls">
+                                        <li class="roll die {{advantage.dice}} hope min">{{advantage.value}}</li>
-                                    <li class="roll die {{disadvantage.dice}} hope min">{{disadvantage.value}}</li>
+                                    </ol>
-                                </ol>
+                                </div>  
-                            </div>  
+                            </div>
-                        </div>
+                        {{/if}}
-                    {{/if}}
+                        {{#if disadvantage.value}}
-                </section>
+                            <div class="dice">
+                                <header class="part-header flexrow">
+                                    <span class="part-formula">
+                                        <span>1{{disadvantage.dice}}</span>
+                                    </span>
+                                    <span class="part-total">{{disadvantage.value}}</span>
+                                </header>
+                                <div class="flexrow">
+                                    <ol class="dice-rolls">
+                                        <li class="roll die {{disadvantage.dice}} hope min">{{disadvantage.value}}</li>
+                                    </ol>
+                                </div>  
+                            </div>
+                        {{/if}}
+                    </section>
+                </div>
+            </div>
+            <div class="dice-total duality {{#if fear.discarded}}hope{{else}}{{#if hope.discarded}}fear{{else}}critical{{/if}}{{/if}}">
+                <div class="dice-total-label">{{totalLabel}}</div>
+                <div class="dice-total-value">
+                    {{total}}
+                </div>
             </div>
         </div>
-        <div class="dice-total duality {{#if fear.discarded}}hope{{else}}{{#if hope.discarded}}fear{{else}}critical{{/if}}{{/if}}">
+    {{/if}}
-            <div class="dice-total-label">{{totalLabel}}</div>
-            <div class="dice-total-value">
-                {{total}}
-            </div>
-        </div>
-    </div>
 </div>