Updated NpcRollSelectionDialog.mjs to ApplicationV2

lang/en.json

@@ -711,6 +711,9 @@
                 "Title": "{actor} - Death Move",
                 "TakeMove": "Take Death Move"
             },
+            "RollSelection": {
+                "Title": "Roll Options"
+            },
             "Settings": {
                 "Title": "Daggerheart Settings"
             },

module/applications/damageSelectionDialog.mjs

@@ -122,64 +122,3 @@ export default class DamageSelectionDialog extends HandlebarsApplicationMixin(Ap
         this.close();
     }
 }
-
-// export default class DamageSelectionDialog extends FormApplication {
-//     constructor(rollString, bonusDamage, resolve){
-//         super({}, {});
-
-//         this.data = {
-//             rollString,
-//             bonusDamage: bonusDamage.map(x => ({
-//                 ...x,
-//                 hopeUses: 0
-//             })),
-//         }
-//         this.resolve = resolve;
-//     }
-
-//     get title (){
-//       return 'Damage Options';
-//     }
-
-//     static get defaultOptions() {
-//         const defaults = super.defaultOptions;
-//         const overrides = {
-//           height: 'auto',
-//           width: 400,
-//           id: 'damage-selection',
-//           template: 'systems/daggerheart/templates/views/damageSelection.hbs',
-//           closeOnSubmit: false,
-//           classes: ["daggerheart", "views", "damage-selection"],
-//         };
-
-//         const mergedOptions = foundry.utils.mergeObject(defaults, overrides);
-
-//         return mergedOptions;
-//     }
-
-//     async getData(){
-//         const context = super.getData();
-//         context.rollString = this.data.rollString;
-//         context.bonusDamage = this.data.bonusDamage;
-
-//         return context;
-//     }
-
-//     activateListeners(html) {
-//         super.activateListeners(html);
-
-//         html.find('.roll-button').click(this.finish.bind(this));
-//         html.find('.').change();
-//     }
-
-//     // async _updateObject(_, formData) {
-//     //     const data = foundry.utils.expandObject(formData);
-//     //     this.data = foundry.utils.mergeObject(this.data, data);
-//     //     this.render(true);
-//     // }
-
-//     finish(){
-//       this.resolve(this.data);
-//       this.close();
-//     }
-//   }

module/applications/npcRollSelectionDialog.mjs

@@ -1,9 +1,12 @@
-export default class NpcRollSelectionDialog extends FormApplication {
-    constructor(experiences, resolve, isNpc) {
-        super({}, {});
+const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+
+export default class NpcRollSelectionDialog extends HandlebarsApplicationMixin(ApplicationV2) {
+    constructor(experiences, resolve, reject) {
+        super({});
 
         this.experiences = experiences;
         this.resolve = resolve;
+        this.reject = reject;
         this.selectedExperiences = [];
         this.data = {
             advantage: null
@@ -11,28 +14,30 @@ export default class NpcRollSelectionDialog extends FormApplication {
     }
 
     get title() {
-        return 'Roll Options';
+        return game.i18n.localize('DAGGERHEART.Application.Settings.Title');
     }
 
-    static get defaultOptions() {
-        const defaults = super.defaultOptions;
-        const overrides = {
-            height: 'auto',
-            width: 500,
-            id: 'roll-selection',
-            template: 'systems/daggerheart/templates/views/npcRollSelection.hbs',
-            closeOnSubmit: false,
-            submitOnChange: true,
-            classes: ['daggerheart', 'views', 'npc-roll-selection']
-        };
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        id: 'roll-selection',
+        classes: ['daggerheart', 'views', 'npc-roll-selection'],
+        position: { width: '500', height: 'auto' },
+        actions: {
+            updateIsAdvantage: this.updateIsAdvantage,
+            selectExperience: this.selectExperience
+        },
+        form: { handler: this.updateData, submitOnChange: false }
+    };
 
-        const mergedOptions = foundry.utils.mergeObject(defaults, overrides);
+    static PARTS = {
+        main: {
+            id: 'main',
+            template: 'systems/daggerheart/templates/views/npcRollSelection.hbs'
+        }
+    };
 
-        return mergedOptions;
-    }
-
-    async getData() {
-        const context = super.getData();
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
         context.advantage = this.data.advantage;
         context.experiences = Object.values(this.experiences).map(x => ({
             ...x,
@@ -43,22 +48,14 @@ export default class NpcRollSelectionDialog extends FormApplication {
         return context;
     }
 
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        html.find('.advantage').click(_ => this.updateIsAdvantage(true));
-        html.find('.disadvantage').click(_ => this.updateIsAdvantage(false));
-        html.find('.roll-button').click(this.finish.bind(this));
-        html.find('.experience-chip').click(this.selectExperience.bind(this));
-    }
-
-    updateIsAdvantage(advantage) {
+    static updateIsAdvantage(_, button) {
+        const advantage = Boolean(button.dataset.advantage);
         this.data.advantage = this.data.advantage === advantage ? null : advantage;
         this.render();
     }
 
-    selectExperience(event) {
-        const experience = Object.values(this.experiences).find(experience => experience.id === event.currentTarget.id);
+    static selectExperience(_, button) {
+        const experience = Object.values(this.experiences).find(experience => experience.id === button.id);
         this.selectedExperiences = this.selectedExperiences.find(x => x.id === experience.id)
             ? this.selectedExperiences.filter(x => x.id !== experience.id)
             : [...this.selectedExperiences, experience];
@@ -66,8 +63,17 @@ export default class NpcRollSelectionDialog extends FormApplication {
         this.render();
     }
 
-    finish() {
+    static async updateData() {
         this.resolve({ ...this.data, experiences: this.selectedExperiences });
-        this.close();
+        this.close({ updateClose: true });
+    }
+
+    async close(options = {}) {
+        const { updateClose, ...baseOptions } = options;
+        if (!updateClose) {
+            this.reject();
+        }
+
+        await super.close(baseOptions);
     }
 }

templates/views/npcRollSelection.hbs

@@ -7,21 +7,17 @@
                 <div class="dice-number">d20</div>
             </div>
             <div class="advantage-container">
-                <button class="advantage-button {{#if this.advantage}}active{{/if}} advantage">{{localize "DAGGERHEART.General.Advantage.Full"}}</button>
-                <button class="advantage-button {{#if (eq this.advantage false)}}active{{/if}} disadvantage">{{localize "DAGGERHEART.General.Disadvantage.Full"}}</button>
+                <button class="advantage-button {{#if this.advantage}}active{{/if}} advantage" data-action="updateIsAdvantage" data-advantage="true">{{localize "DAGGERHEART.General.Advantage.Full"}}</button>
+                <button class="advantage-button {{#if (eq this.advantage false)}}active{{/if}} disadvantage" data-action="updateIsAdvantage">{{localize "DAGGERHEART.General.Disadvantage.Full"}}</button>
             </div>
         </div>
         <div class="roll-dialog-experience-container">
             {{#each this.experiences as |experience|}}
                 <button class="experience-chip {{#if experience.selected}}active{{/if}}" data-action="selectExperience" id="{{id}}">{{experience.name}} {{experience.value}}</button>
-                {{!-- <div class="roll-dialog-chip {{#if experience.selected}}selected{{/if}}" data-action="selectExperience" data-key="{{key}}">
-                    <span>{{experience.name}}</span>
-                    <i class="fa-solid fa-circle-check"></i>
-                </div> --}}
             {{/each}}
         </div>
     </div>
-    <footer>
-        <button class="roll-button">Roll</button>
+    <footer class="flexrow">
+        <button type="submit" class="roll-button">Roll</button>
     </footer>
 </div>