REady for v14, with included tools

scripts/NpcDialog.js

@@ -2,11 +2,33 @@ import { formatCredits } from './tradeHelper.js';
 import { createNpcActor, generateClientMission, generateEncounter, generateQuickNpc } from './npcHelper.js';
 import { NPC_RELATIONS } from './data/npcTables.js';
 
+const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
 const MODULE_ID = 'mgt2-compendium-amiral-denisov';
 
-export class NpcDialog extends FormApplication {
+export class NpcDialog extends HandlebarsApplicationMixin(ApplicationV2) {
+  static DEFAULT_OPTIONS = {
+    id: 'mgt2-npc',
+    classes: ['mgt2-npc-dialog'],
+    position: {
+      width: 720,
+      height: 'auto',
+    },
+    window: {
+      title: 'PNJ & Rencontres – MgT2e',
+      resizable: true,
+    },
+  };
+
+  static PARTS = {
+    main: {
+      template: `modules/${MODULE_ID}/templates/npc-dialog.hbs`,
+      root: true,
+    },
+  };
+
   constructor(options = {}) {
-    super({}, options);
+    super(options);
+    this._activeTab = options.initialTab ?? 'npc';
     this._formData = {
       npc: {
         relation: options.relation ?? 'contact',
@@ -22,33 +44,22 @@ export class NpcDialog extends FormApplication {
     };
   }
 
-  static get defaultOptions() {
-    return foundry.utils.mergeObject(super.defaultOptions, {
-      id: 'mgt2-npc',
-      title: 'PNJ & Rencontres – MgT2e',
-      template: `modules/${MODULE_ID}/templates/npc-dialog.hbs`,
-      width: 720,
-      height: 'auto',
-      resizable: true,
-      tabs: [{
-        navSelector: '.tabs',
-        contentSelector: '.tab-content',
-        initial: 'npc',
-      }],
-      classes: ['mgt2-npc-dialog'],
-    });
-  }
-
-  getData() {
+  async _prepareContext() {
     registerHandlebarsHelpers();
-    return foundry.utils.mergeObject(super.getData(), {
+    return {
       ...this._formData,
+      activeTab: this._activeTab,
       relations: Object.entries(NPC_RELATIONS).map(([key, value]) => ({ key, label: value.label })),
-    });
+    };
   }
 
-  activateListeners(html) {
-    super.activateListeners(html);
+  async _onRender(context, options) {
+    await super._onRender(context, options);
+    const html = this._getForm();
+    if (!html?.length) return;
+    html.addClass('mgt2-npc-form');
+
+    this._applyThemeStyles(html);
 
     html.find('[data-action="generate-npc"]').on('click', async (event) => {
       event.preventDefault();
@@ -64,12 +75,58 @@ export class NpcDialog extends FormApplication {
 
     html.find('[data-action="generate-mission"]').on('click', async (event) => {
       event.preventDefault();
+      this._readForm(html);
       await this._handleMission();
     });
 
-    if (this.options.initialTab) {
-      this._tabs?.[0]?.activate(this.options.initialTab);
-    }
+    html.find('.tabs .item').on('click', (event) => {
+      event.preventDefault();
+      this._readForm(html);
+      this._activateTab($(event.currentTarget).data('tab'));
+    });
+  }
+
+  _getForm() {
+    return $(this.element).find('.window-content');
+  }
+
+  _activateTab(tabId) {
+    const html = this._getForm();
+    if (!html?.length) return;
+
+    this._activeTab = tabId;
+    html.find('.tabs .item').removeClass('active');
+    html.find(`.tabs .item[data-tab="${tabId}"]`).addClass('active');
+    html.find('.tab-content .tab').removeClass('active');
+    html.find(`.tab-content .tab[data-tab="${tabId}"]`).addClass('active');
+    this._applyThemeStyles(html);
+  }
+
+  _applyThemeStyles(html) {
+    html.find('.tabs .item').css({
+      color: '#d8c79a',
+      'text-shadow': 'none',
+      'background-color': '',
+      'border-bottom-color': 'transparent'
+    });
+
+    html.find('.tabs .item.active').css({
+      color: '#d9b24c',
+      'text-shadow': 'none',
+      'background-color': 'rgba(201, 162, 39, 0.18)',
+      'border-bottom-color': '#c9a227'
+    });
+
+    html.find('h3').css({
+      color: '#5f4300',
+      'border-bottom-color': '#b78f26',
+      'text-shadow': 'none'
+    });
+
+    html.find('legend').css({
+      color: '#7a5c00',
+      'text-shadow': 'none'
+    });
   }
 
   _readForm(html) {
@@ -89,10 +146,7 @@ export class NpcDialog extends FormApplication {
         name: this._formData.npc.actorName,
         openSheet: this._formData.npc.openCreatedActor,
       });
-      result.createdActor = {
-        id: actor.id,
-        name: actor.name,
-      };
+      result.createdActor = { id: actor.id, name: actor.name };
       ui.notifications.info(`Fiche PNJ créée : ${actor.name}`);
     }
     await this._postToChatResult(result);
@@ -110,8 +164,7 @@ export class NpcDialog extends FormApplication {
 
   async _postToChatResult(data) {
     registerHandlebarsHelpers();
-    const renderHbs = foundry.applications?.handlebars?.renderTemplate ?? renderTemplate;
-    const html = await renderHbs(`modules/${MODULE_ID}/templates/npc-result.hbs`, data);
+    const html = await foundry.applications.handlebars.renderTemplate(`modules/${MODULE_ID}/templates/npc-result.hbs`, data);
 
     await ChatMessage.create({
       content: html,
@@ -119,8 +172,6 @@ export class NpcDialog extends FormApplication {
       flags: { [MODULE_ID]: { type: 'npc-result' } },
     });
   }
-
-  async _updateObject(_event, _formData) {}
 }
 
 let helpersRegistered = false;