Dialog templating and logic

lang/en.json

@@ -615,9 +615,11 @@
                 "rerollDice": "Reroll Dice"
             },
             "RiskItAllDialog": {
-                "title": "Character: {name} - Risk It All - Clear Stress and/or Hit Points",
+                "title": "{name} - Risk It All",
-                "subtitle": "Clear {hope} Stress and/or Hit Points",
+                "subtitle": "Clear Stress and Hit Points",
-                "submit": "Submit"
+                "remainingTitle": "Remaining Points",
+                "clearResource": "Clear {resource}",
+                "finalTitle": "Final Character Resources"
             },
             "TagTeamSelect": {
                 "title": "Tag Team Roll",
@@ -2675,9 +2677,9 @@
                     "riskItAllCritical": "Critical Rolled, clearing all marked Stress and Hit Points.",
                     "riskItAllFailure": "The fear die rolled higher. You have crossed through the veil of death.",
                     "blazeOfGlory": "Blaze of Glory Effect Added!",
-                    "riskItAllClearStressAndHitPoints": "Clear {hope} Stress Or Hit Points.",
+                    "riskItAllDialogButton": "Clear Stress And Hit Points.",
-                    "riskItAllSuccessWithEnoughHope": "Hope roll value is more than the marked Stress and Hit Points, clearing both.",
+                    "riskItAllSuccessWithEnoughHope": "Hope roll value is more than the marked Stress and Hit Points. Both are cleared fully.",
-                    "riskItAllSuccess": "The hope die rolled higher, clear up to {hope} Stress Or Hit Points."
+                    "riskItAllSuccess": "The hope die rolled higher, clear up to {hope} Stress And Hit Points."
                 },
                 "dicePool": {
                     "title": "Dice Pool"

module/applications/dialogs/_module.mjs

@@ -14,3 +14,4 @@ export { default as ResourceDiceDialog } from './resourceDiceDialog.mjs';
 export { default as ActionSelectionDialog } from './actionSelectionDialog.mjs';
 export { default as GroupRollDialog } from './group-roll-dialog.mjs';
 export { default as TagTeamDialog } from './tagTeamDialog.mjs';
+export { default as RiskItAllDialog } from './riskItAllDialog.mjs';

module/applications/dialogs/deathMove.mjs

@@ -9,7 +9,7 @@ export default class DhDeathMove extends HandlebarsApplicationMixin(ApplicationV
         this.actor = actor;
         this.selectedMove = null;
         this.showRiskItAllButton = false;
-        this.riskItAllButtonLabel = "";
+        this.riskItAllButtonLabel = '';
         this.riskItAllHope = 0;
     }
 
@@ -108,10 +108,12 @@ export default class DhDeathMove extends HandlebarsApplicationMixin(ApplicationV
                 config.resourceUpdates.addResources(clearAllStressAndHitpointsUpdates);
                 chatMessage = game.i18n.localize('DAGGERHEART.UI.Chat.deathMove.riskItAllSuccessWithEnoughHope');
             } else {
-                chatMessage = game.i18n.format('DAGGERHEART.UI.Chat.deathMove.riskItAllSuccess', { hope: config.roll.hope.value })
+                chatMessage = game.i18n.format('DAGGERHEART.UI.Chat.deathMove.riskItAllSuccess', {
+                    hope: config.roll.hope.value
+                });
                 this.showRiskItAllButton = true;
                 this.riskItAllHope = config.roll.hope.value;
-                this.riskItAllButtonLabel = game.i18n.format('DAGGERHEART.UI.Chat.deathMove.riskItAllClearStressAndHitPoints', { hope: config.roll.hope.value })
+                this.riskItAllButtonLabel = game.i18n.format('DAGGERHEART.UI.Chat.deathMove.riskItAllDialogButton');
             }
         }
 

module/applications/dialogs/riskItAllDialog.mjs

@@ -1,11 +1,14 @@
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
 export default class RiskItAllDialog extends HandlebarsApplicationMixin(ApplicationV2) {
-    constructor(actor, config) {
+    constructor(actor, resourceValue) {
         super({});
 
         this.actor = actor;
-        this.validChoices = null;
+        this.resourceValue = resourceValue;
-        this.config = config;
+        this.choices = {
+            hitPoints: 0,
+            stress: 0
+        };
     }
 
     get title() {
@@ -14,10 +17,10 @@ export default class RiskItAllDialog extends HandlebarsApplicationMixin(Applicat
 
     static DEFAULT_OPTIONS = {
         classes: ['daggerheart', 'dh-style', 'dialog', 'views', 'risk-it-all'],
-        position: { width: 'auto', height: 'auto' },
+        position: { width: 280, height: 'auto' },
-        window: { icon: 'fa-solid fa-skull' },
+        window: { icon: 'fa-solid fa-dice fa-xl' },
         actions: {
-            submit: this.submit
+            finish: RiskItAllDialog.#finish
         }
     };
 
@@ -28,42 +31,62 @@ export default class RiskItAllDialog extends HandlebarsApplicationMixin(Applicat
         }
     };
 
+    _attachPartListeners(partId, htmlElement, options) {
+        super._attachPartListeners(partId, htmlElement, options);
+
+        for (const input of htmlElement.querySelectorAll('.resource-container input'))
+            input.addEventListener('change', this.updateChoice.bind(this));
+    }
+
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
-        context.RiskItAllDialog = this.RiskItAllDialog;
+        context.resourceValue = this.resourceValue;
-        context.title = game.i18n.format('DAGGERHEART.APPLICATIONS.RiskItAllDialog.subtitle', { hope: this.config.hope });
+        context.remainingResource = this.resourceValue - this.choices.hitPoints - this.choices.stress;
-        context.currentHitPointsLabel = "Current Marked Hit Points: " + this.actor.system.resources.hitPoints.value;
+        context.unfinished = context.remainingResource !== 0;
-        context.currentStressLabel = "Current Marked Stress: " + this.actor.system.resources.stress.value;
 
-        context.newHitPoints = this.actor.system.resources.hitPoints.value;
+        context.choices = this.choices;
-        context.newStress = this.actor.system.resources.stress.value;
+        context.final = {
+            hitPoints: {
+                value: this.actor.system.resources.hitPoints.value - this.choices.hitPoints,
+                max: this.actor.system.resources.hitPoints.max
+            },
+            stress: {
+                value: this.actor.system.resources.stress.value - this.choices.stress,
+                max: this.actor.system.resources.stress.max
+            }
+        };
+
+        context;
 
         return context;
     }
 
-    static checkForValidChoice() {
+    updateChoice(event) {
-        /*
+        let value = Number.parseInt(event.target.value);
-        TODO:
+        const choiceKey = event.target.dataset.choice;
+        const actorValue = this.actor.system.resources[choiceKey].value;
+        const remaining = this.resourceValue - this.choices.hitPoints - this.choices.stress;
+        const changeAmount = value - this.choices[choiceKey];
 
-        return (this.config.hope == (this.actor.system.resources.hitPoints.value - newHitPointValue) + (this.actor.system.resources.stress.value - newStressValue));
+        /* If trying to increase beyond remaining resource points, just increase to max available */
-        */
+        if (remaining - changeAmount < 0) value = this.choices[choiceKey] + remaining;
-       return true;
+        else if (actorValue - value < 0) value = actorValue;
+
+        this.choices[choiceKey] = value;
+        this.render();
     }
 
-    static async submit() {
+    static async #finish() {
-        this.close();
+        const resourceUpdate = Object.keys(this.choices).reduce((acc, resourceKey) => {
-        // TODO: Update actor with changes.
+            const value = this.actor.system.resources[resourceKey].value - this.choices[resourceKey];
+            acc[resourceKey] = { value };
+            return acc;
+        }, {});
+
         await this.actor.update({
-            system: {
+            'system.resources': resourceUpdate
-                resources: {
-                    hitPoints: {
-                        value: 0 // TODO put editted value here
-                    },
-                    stress: {
-                        value: 0 // TODO put editted value here
-                    }
-                }
-            }
         });
+
+        this.close();
     }
 }

module/applications/ui/chatLog.mjs

@@ -1,6 +1,5 @@
 import { abilities } from '../../config/actorConfig.mjs';
 import { emitAsGM, GMUpdateEvent, RefreshType, socketEvent } from '../../systemRegistration/socket.mjs';
-import RiskItAllDialog from '../dialogs/riskItAllDialog.mjs';
 
 export default class DhpChatLog extends foundry.applications.sidebar.tabs.ChatLog {
     constructor(options) {
@@ -98,15 +97,17 @@ export default class DhpChatLog extends foundry.applications.sidebar.tabs.ChatLo
 
     /** Ensure the chat theme inherits the interface theme */
     _replaceHTML(result, content, options) {
-        const themedElement = result.log?.querySelector(".chat-log");
+        const themedElement = result.log?.querySelector('.chat-log');
-        themedElement?.classList.remove("themed", "theme-light", "theme-dark");
+        themedElement?.classList.remove('themed', 'theme-light', 'theme-dark');
         super._replaceHTML(result, content, options);
     }
 
     /** Remove chat log theme from notifications area */
     async _onFirstRender(result, content) {
         await super._onFirstRender(result, content);
-        document.querySelector("#chat-notifications .chat-log")?.classList.remove("themed", "theme-light", "theme-dark")
+        document
+            .querySelector('#chat-notifications .chat-log')
+            ?.classList.remove('themed', 'theme-light', 'theme-dark');
     }
 
     async onRollSimple(event, message) {
@@ -388,14 +389,8 @@ export default class DhpChatLog extends foundry.applications.sidebar.tabs.ChatLo
         event.target.closest('.group-roll-section').querySelector('.group-roll-content').classList.toggle('closed');
     }
 
-
     async riskItAllClearStressAndHitPoints(event, data) {
-        const hopeValue = event.target.dataset.hope;
+        const resourceValue = event.target.dataset.resourceValue;
-        const config = {
+        new game.system.api.applications.dialogs.RiskItAllDialog(data.actor, resourceValue).render({ force: true });
-            hope: hopeValue
-        }
-        await new RiskItAllDialog(data.actor, config).render({ force: true });
     }
-    
-    
 }

styles/less/dialog/index.less

@@ -39,3 +39,5 @@
 @import './item-transfer/sheet.less';
 
 @import './settings/change-currency-icon.less';
+
+@import './risk-it-all/sheet.less';

styles/less/dialog/risk-it-all/sheet.less

@@ -0,0 +1,60 @@
+.daggerheart.dialog.dh-style.views.risk-it-all {
+    .risk-it-all-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
+
+        header {
+            font-weight: bold;
+            font-size: var(--font-size-20);
+        }
+
+        .section-label {
+            font-size: var(--font-size-18);
+            text-decoration: underline;
+        }
+
+        .remaining-section {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .resource-section {
+            width: 100%;
+            display: flex;
+            gap: 8px;
+        }
+
+        .final-section {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+
+            .final-section-values-container {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+
+                .final-section-value-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 2px;
+                }
+            }
+        }
+    }
+
+    footer {
+        width: 100%;
+        display: flex;
+
+        button {
+            flex: 1;
+        }
+    }
+}

templates/dialogs/riskItAllDialog.hbs

@@ -1,33 +1,39 @@
 <div>
-    <header class="dialog-header">
-        <h1>{{title}}</h1>
-    </header>
-    <div>
-        <span>Remaining points to use here.</span>
-    </div>
     <div class="risk-it-all-container">
-        <div class="two-columns even">
+        <header>{{localize "DAGGERHEART.APPLICATIONS.RiskItAllDialog.subtitle"}}</header>
-            <span>{{currentHitPointsLabel}}</span>
-            <div>
-                <span>New Hit Points Value</span>
-                <input type="text" data-dtype="Number" name="newHitPoints" value="{{newHitPoints}}" />
-            </div>
 
-            <span>{{currentStressLabel}}</span>
+        <div class="remaining-section">
-            <div>
+            <label class="section-label">{{localize "DAGGERHEART.APPLICATIONS.RiskItAllDialog.remainingTitle"}}</label>
-                <span>New Stress Value</span>
+            <div>{{this.remainingResource}}</div>
-                <input type="text" data-dtype="Number" name="newStress" value="{{newStress}}" />
+        </div>
+
+        <div class="resource-section">
+            <div class="resource-container">
+                <label>{{localize "DAGGERHEART.APPLICATIONS.RiskItAllDialog.clearResource" resource=(localize "DAGGERHEART.GENERAL.HitPoints.short")}}: {{this.choices.hitPoints}}</label>
+                <input type="range" step="1" min="0" max="{{this.resourceValue}}" value="{{this.choices.hitPoints}}" name="choices.hitPoints" data-choice="hitPoints" />
+            </div>
+            <div class="resource-container">
+                <label>{{localize "DAGGERHEART.APPLICATIONS.RiskItAllDialog.clearResource" resource=(localize "DAGGERHEART.GENERAL.stress")}}: {{this.choices.stress}}</label>
+                <input type="range" step="1" min="0" max="{{this.resourceValue}}" value="{{this.choices.stress}}" name="choices.stress" data-choice="stress" />
             </div>
         </div>
+
+        <div class="final-section">
+            <label class="section-label">{{localize "DAGGERHEART.APPLICATIONS.RiskItAllDialog.finalTitle"}}</label>
+            <div class="final-section-values-container">
+                <div class="final-section-value-container">
+                    <label>{{localize "DAGGERHEART.GENERAL.HitPoints.plural"}}</label>
+                    <span>{{this.final.hitPoints.value}}/{{this.final.hitPoints.max}}</span>
+                </div>
+                <div class="final-section-value-container">
+                    <label>{{localize "DAGGERHEART.GENERAL.stress"}}</label>
+                    <span>{{this.final.stress.value}}/{{this.final.stress.max}}</span>
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            <button type="button" data-action="finish" {{disabled this.unfinished}}>{{localize "Submit"}}</button>
+        </footer>
     </div>
-    <footer class="flexrow">
-        <button data-action="close">
-            <span>{{localize "Cancel"}}</span>
-        </button>
-        <button data-action="submit" {{#if (not this.validChoices)}}disabled{{/if}}>
-            <span>
-                {{localize "DAGGERHEART.APPLICATIONS.RiskItAllDialog.submit"}}
-            </span>
-        </button>
-    </footer>
 </div>

templates/ui/chat/deathMove.hbs

@@ -19,7 +19,7 @@
     </div>
     {{#if this.showRiskItAllButton}}
     <div>
-        <button class="risk-it-all-button" data-hope="{{this.riskItAllHope}}">
+        <button class="risk-it-all-button" data-resource-value="{{this.riskItAllHope}}">
             <span>
                 {{this.riskItAllButtonLabel}}
             </span>