REady for v14, with included tools

scripts/CommerceDialog.js

@@ -1,7 +1,7 @@
 /**
  * MGT2 Commerce – CommerceDialog
  *
- * Boîte de dialogue principale (FormApplication FoundryVTT).
+ * Boîte de dialogue principale (ApplicationV2 FoundryVTT).
  * Trois onglets : Passagers / Cargaison / Commerce spéculatif.
  * Les résultats sont postés dans le chat.
  */
@@ -10,13 +10,33 @@ import { calculatePassengers, calculateCargo, findAvailableGoods, calculatePrice
 import { searchWorlds, fetchWorldDetail, fetchWorldCoordinates, calcParsecs } from './travellerMapApi.js';
 import { buildActiveActorContext, COMMERCE_SKILLS, getActiveTravellerActor, rollActorSkillEffect, getActorSkillSummary } from './mgt2eSkills.js';
 
+const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
 const MODULE_ID = 'mgt2-compendium-amiral-denisov';
 
-export class CommerceDialog extends FormApplication {
+export class CommerceDialog extends HandlebarsApplicationMixin(ApplicationV2) {
+  static DEFAULT_OPTIONS = {
+    id: 'mgt2-commerce',
+    classes: ['mgt2-commerce-dialog'],
+    position: {
+      width: 780,
+      height: 'auto',
+    },
+    window: {
+      title: 'Commerce – MgT2e',
+      resizable: true,
+    },
+  };
+
+  static PARTS = {
+    main: {
+      template: `modules/${MODULE_ID}/templates/commerce-dialog.hbs`,
+      root: true,
+    },
+  };
 
   constructor(options = {}) {
-    super({}, options);
-    // Valeurs par défaut du formulaire
+    super(options);
+    this._activeTab = options.initialTab ?? 'passengers';
     this._formData = {
       pax: {
         uwpDep: '', uwpDest: '', zoneDep: 'normal', zoneDest: 'normal',
@@ -30,61 +50,48 @@ export class CommerceDialog extends FormApplication {
         uwp: '', zone: 'normal', brokerSkill: 0, previousAttempts: 0, blackMarket: false,
       },
     };
-    this._tradeGoods = null; // résultats de findAvailableGoods, conservés pour le calcul des prix
+    this._tradeGoods = null;
   }
 
-  static get defaultOptions() {
-    return foundry.utils.mergeObject(super.defaultOptions, {
-      id:       'mgt2-commerce',
-      title:    'Commerce – MgT2e',
-      template: `modules/${MODULE_ID}/templates/commerce-dialog.hbs`,
-      width:    780,
-      height:   'auto',
-      resizable: true,
-      tabs: [{
-        navSelector:     '.tabs',
-        contentSelector: '.tab-content',
-        initial:         'passengers',
-      }],
-      classes: ['mgt2-commerce-dialog'],
-    });
-  }
-
-  getData() {
+  async _prepareContext() {
     _registerHandlebarsHelpers();
-    return foundry.utils.mergeObject(super.getData(), {
+    return {
       ...this._formData,
       activeActor: buildActiveActorContext(),
-    });
+      activeTab: this._activeTab,
+    };
   }
 
-  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-commerce-form');
+
+    this._applyThemeStyles(html);
 
-    // Bouton "Calculer les passagers"
     html.find('[data-action="calculate-passengers"]').on('click', async (ev) => {
       ev.preventDefault();
       this._readForm(html);
       await this._handlePassengers();
     });
 
-    // Bouton "Calculer la cargaison"
     html.find('[data-action="calculate-cargo"]').on('click', async (ev) => {
       ev.preventDefault();
       this._readForm(html);
       await this._handleCargo();
     });
 
-    // Bouton "Trouver un fournisseur & marchandises"
     html.find('[data-action="find-goods"]').on('click', async (ev) => {
       ev.preventDefault();
       this._readForm(html);
       await this._handleFindGoods(html);
     });
 
-    // Bouton "Calculer les prix d'achat"
     html.on('click', '[data-action="calculate-buy-prices"]', async (ev) => {
       ev.preventDefault();
+      this._readForm(html);
       await this._handleBuyPrices();
     });
 
@@ -113,16 +120,74 @@ export class CommerceDialog extends FormApplication {
       this._applyTradeActorData(html);
     });
 
-    // ─── Recherche de monde (Traveller Map API) ───────────────────────────────
+    html.find('.tabs .item').on('click', (ev) => {
+      ev.preventDefault();
+      this._readForm(html);
+      this._activateTab($(ev.currentTarget).data('tab'));
+    });
+
+    this._bindWorldSearch(html);
+
+    html.on('click', (ev) => {
+      if (!$(ev.target).closest('.world-search-widget').length) {
+        html.find('.world-search-results').empty();
+      }
+    });
+  }
+
+  _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'
+    });
+  }
+
+  _bindWorldSearch(html) {
     html.find('.world-search-widget').each((_, widget) => {
-      const $widget  = $(widget);
-      const $input   = $widget.find('.world-search-input');
-      const $btn     = $widget.find('.btn-world-search');
+      const $widget = $(widget);
+      const $input = $widget.find('.world-search-input');
+      const $btn = $widget.find('.btn-world-search');
       const $results = $widget.find('.world-search-results');
-      const uwpTarget    = $widget.data('uwp-target');
-      const zoneTarget   = $widget.data('zone-target');
+      const uwpTarget = $widget.data('uwp-target');
+      const zoneTarget = $widget.data('zone-target');
       const parsecsTarget = $widget.data('parsecs-target') || null;
-      const role          = $widget.data('role') || null;
+      const role = $widget.data('role') || null;
 
       const doSearch = async () => {
         const query = $input.val().trim();
@@ -134,27 +199,23 @@ export class CommerceDialog extends FormApplication {
           if (!worlds.length) {
             $results.append('<li class="no-result">Aucun monde trouvé</li>');
           } else {
-            worlds.slice(0, 10).forEach(w => {
+            worlds.slice(0, 10).forEach((w) => {
               const $li = $(`<li data-sector="${w.sector}" data-hex="${w.hex}"><span class="world-name">${w.name}</span> <span class="world-uwp">${w.uwp}</span> <span class="world-sector">${w.sector}</span></li>`);
               $li.on('click', async () => {
                 $results.empty();
                 $input.val(w.name);
-                // Récupère les détails (UWP précis + zone) et les coordonnées en parallèle
                 const [detail, coords] = await Promise.all([
                   fetchWorldDetail(w.sector, w.hex).catch(() => null),
                   fetchWorldCoordinates(w.sector, w.hex).catch(() => null),
                 ]);
 
-                const resolvedUwp  = detail ? detail.uwp  : w.uwp;
+                const resolvedUwp = detail ? detail.uwp : w.uwp;
                 const resolvedZone = detail ? detail.zone : 'normal';
 
                 html.find(`[name="${uwpTarget}"]`).val(resolvedUwp);
                 html.find(`[name="${zoneTarget}"]`).val(resolvedZone);
-
-                // Stocker les coordonnées dans le widget courant
                 $widget.data('coords', coords);
 
-                // Synchronisation inter-onglets : départ Passagers → départ Cargaison + monde Commerce
                 if (uwpTarget === 'pax.uwpDep') {
                   const $cargoDep = html.find('.world-search-widget[data-uwp-target="cargo.uwpDep"]');
                   $cargoDep.find('.world-search-input').val(w.name);
@@ -168,70 +229,62 @@ export class CommerceDialog extends FormApplication {
                   html.find('[name="trade.zone"]').val(resolvedZone);
                 }
 
-                // Calculer les parsecs si le widget partenaire a aussi ses coordonnées
                 if (parsecsTarget) {
                   const partnerRole = role === 'dep' ? 'dest' : 'dep';
-                  const $partner = html.find(
-                    `.world-search-widget[data-parsecs-target="${parsecsTarget}"][data-role="${partnerRole}"]`
-                  );
+                  const $partner = html.find(`.world-search-widget[data-parsecs-target="${parsecsTarget}"][data-role="${partnerRole}"]`);
                   const partnerCoords = $partner.data('coords');
                   if (coords && partnerCoords) {
                     const dist = calcParsecs(coords, partnerCoords);
                     html.find(`[name="${parsecsTarget}"]`).val(dist);
                   }
                 }
+
+                this._readForm(html);
               });
               $results.append($li);
             });
           }
-        } catch (err) {
+        } catch (_err) {
           $results.append('<li class="no-result">Erreur de connexion à Traveller Map</li>');
         }
         $btn.prop('disabled', false).html('<i class="fas fa-globe"></i> Chercher');
       };
 
       $btn.on('click', doSearch);
-      $input.on('keydown', (ev) => { if (ev.key === 'Enter') { ev.preventDefault(); doSearch(); } });
-    });
-
-    // Fermer les listes de résultats en cliquant ailleurs
-    html.on('click', (ev) => {
-      if (!$(ev.target).closest('.world-search-widget').length) {
-        html.find('.world-search-results').empty();
-      }
+      $input.on('keydown', (ev) => {
+        if (ev.key === 'Enter') {
+          ev.preventDefault();
+          doSearch();
+        }
+      });
     });
   }
 
-  // ─── Lecture du formulaire ─────────────────────────────────────────────────
-
   _readForm(html) {
-    // Passagers
-    this._formData.pax.uwpDep       = html.find('[name="pax.uwpDep"]').val();
-    this._formData.pax.uwpDest      = html.find('[name="pax.uwpDest"]').val();
-    this._formData.pax.zoneDep      = html.find('[name="pax.zoneDep"]').val();
-    this._formData.pax.zoneDest     = html.find('[name="pax.zoneDest"]').val();
-    this._formData.pax.parsecs      = parseInt(html.find('[name="pax.parsecs"]').val()) || 1;
-    this._formData.pax.skillEffect  = parseInt(html.find('[name="pax.skillEffect"]').val()) || 0;
-    this._formData.pax.stewardLevel = parseInt(html.find('[name="pax.stewardLevel"]').val()) || 0;
+    this._formData.pax.uwpDep = html.find('[name="pax.uwpDep"]').val();
+    this._formData.pax.uwpDest = html.find('[name="pax.uwpDest"]').val();
+    this._formData.pax.zoneDep = html.find('[name="pax.zoneDep"]').val();
+    this._formData.pax.zoneDest = html.find('[name="pax.zoneDest"]').val();
+    this._formData.pax.parsecs = parseInt(html.find('[name="pax.parsecs"]').val(), 10) || 1;
+    this._formData.pax.skillEffect = parseInt(html.find('[name="pax.skillEffect"]').val(), 10) || 0;
+    this._formData.pax.stewardLevel = parseInt(html.find('[name="pax.stewardLevel"]').val(), 10) || 0;
 
-    // Cargaison
-    this._formData.cargo.uwpDep      = html.find('[name="cargo.uwpDep"]').val();
-    this._formData.cargo.uwpDest     = html.find('[name="cargo.uwpDest"]').val();
-    this._formData.cargo.zoneDep     = html.find('[name="cargo.zoneDep"]').val();
-    this._formData.cargo.zoneDest    = html.find('[name="cargo.zoneDest"]').val();
-    this._formData.cargo.parsecs     = parseInt(html.find('[name="cargo.parsecs"]').val()) || 1;
-    this._formData.cargo.skillEffect = parseInt(html.find('[name="cargo.skillEffect"]').val()) || 0;
-    this._formData.cargo.navyRank    = parseInt(html.find('[name="cargo.navyRank"]').val()) || 0;
-    this._formData.cargo.scoutRank   = parseInt(html.find('[name="cargo.scoutRank"]').val()) || 0;
-    this._formData.cargo.socMod      = parseInt(html.find('[name="cargo.socMod"]').val()) || 0;
-    this._formData.cargo.armed       = html.find('[name="cargo.armed"]').is(':checked');
+    this._formData.cargo.uwpDep = html.find('[name="cargo.uwpDep"]').val();
+    this._formData.cargo.uwpDest = html.find('[name="cargo.uwpDest"]').val();
+    this._formData.cargo.zoneDep = html.find('[name="cargo.zoneDep"]').val();
+    this._formData.cargo.zoneDest = html.find('[name="cargo.zoneDest"]').val();
+    this._formData.cargo.parsecs = parseInt(html.find('[name="cargo.parsecs"]').val(), 10) || 1;
+    this._formData.cargo.skillEffect = parseInt(html.find('[name="cargo.skillEffect"]').val(), 10) || 0;
+    this._formData.cargo.navyRank = parseInt(html.find('[name="cargo.navyRank"]').val(), 10) || 0;
+    this._formData.cargo.scoutRank = parseInt(html.find('[name="cargo.scoutRank"]').val(), 10) || 0;
+    this._formData.cargo.socMod = parseInt(html.find('[name="cargo.socMod"]').val(), 10) || 0;
+    this._formData.cargo.armed = html.find('[name="cargo.armed"]').is(':checked');
 
-    // Commerce spéculatif
-    this._formData.trade.uwp               = html.find('[name="trade.uwp"]').val();
-    this._formData.trade.zone              = html.find('[name="trade.zone"]').val();
-    this._formData.trade.brokerSkill       = parseInt(html.find('[name="trade.brokerSkill"]').val()) || 0;
-    this._formData.trade.previousAttempts  = parseInt(html.find('[name="trade.previousAttempts"]').val()) || 0;
-    this._formData.trade.blackMarket       = html.find('[name="trade.blackMarket"]').is(':checked');
+    this._formData.trade.uwp = html.find('[name="trade.uwp"]').val();
+    this._formData.trade.zone = html.find('[name="trade.zone"]').val();
+    this._formData.trade.brokerSkill = parseInt(html.find('[name="trade.brokerSkill"]').val(), 10) || 0;
+    this._formData.trade.previousAttempts = parseInt(html.find('[name="trade.previousAttempts"]').val(), 10) || 0;
+    this._formData.trade.blackMarket = html.find('[name="trade.blackMarket"]').is(':checked');
   }
 
   _getActiveActorOrWarn() {
@@ -297,12 +350,9 @@ export class CommerceDialog extends FormApplication {
       const label = normalized > 0 ? `+${normalized}` : `${normalized}`;
       select.append(`<option value="${normalized}">${label}</option>`);
     }
-
     select.val(`${normalized}`);
   }
 
-  // ─── Passagers ─────────────────────────────────────────────────────────────
-
   async _handlePassengers() {
     const p = this._formData.pax;
     if (!p.uwpDep || !p.uwpDest) {
@@ -310,24 +360,19 @@ export class CommerceDialog extends FormApplication {
     }
 
     const result = await calculatePassengers({
-      uwpDep:      p.uwpDep,
-      uwpDest:     p.uwpDest,
-      zoneDep:     p.zoneDep,
-      zoneDest:    p.zoneDest,
-      parsecs:     p.parsecs,
+      uwpDep: p.uwpDep,
+      uwpDest: p.uwpDest,
+      zoneDep: p.zoneDep,
+      zoneDest: p.zoneDest,
+      parsecs: p.parsecs,
       skillEffect: p.skillEffect,
       stewardLevel: p.stewardLevel,
     });
 
-    if (!result.success) {
-      return ui.notifications.error(result.errors.join(' | '));
-    }
-
+    if (!result.success) return ui.notifications.error(result.errors.join(' | '));
     await this._postToChatResult(result);
   }
 
-  // ─── Cargaison ─────────────────────────────────────────────────────────────
-
   async _handleCargo() {
     const c = this._formData.cargo;
     if (!c.uwpDep || !c.uwpDest) {
@@ -335,30 +380,23 @@ export class CommerceDialog extends FormApplication {
     }
 
     const result = await calculateCargo({
-      uwpDep:      c.uwpDep,
-      uwpDest:     c.uwpDest,
-      zoneDep:     c.zoneDep,
-      zoneDest:    c.zoneDest,
-      parsecs:     c.parsecs,
+      uwpDep: c.uwpDep,
+      uwpDest: c.uwpDest,
+      zoneDep: c.zoneDep,
+      zoneDest: c.zoneDest,
+      parsecs: c.parsecs,
       skillEffect: c.skillEffect,
-      navyRank:    c.navyRank,
-      scoutRank:   c.scoutRank,
-      socMod:      c.socMod,
-      armed:       c.armed,
+      navyRank: c.navyRank,
+      scoutRank: c.scoutRank,
+      socMod: c.socMod,
+      armed: c.armed,
     });
 
-    if (!result.success) {
-      return ui.notifications.error(result.errors.join(' | '));
-    }
-
-    // Calcule le sous-total cargaison pour le template
+    if (!result.success) return ui.notifications.error(result.errors.join(' | '));
     result.cargoRevenue = result.lots.reduce((s, l) => s + l.revenue, 0);
-
     await this._postToChatResult(result);
   }
 
-  // ─── Commerce spéculatif – trouver les marchandises ────────────────────────
-
   async _handleFindGoods(html) {
     const t = this._formData.trade;
     if (!t.uwp) {
@@ -366,27 +404,23 @@ export class CommerceDialog extends FormApplication {
     }
 
     const result = await findAvailableGoods({
-      uwp:              t.uwp,
-      zone:             t.zone,
-      blackMarket:      t.blackMarket,
-      brokerSkill:      t.brokerSkill,
+      uwp: t.uwp,
+      zone: t.zone,
+      blackMarket: t.blackMarket,
+      brokerSkill: t.brokerSkill,
       previousAttempts: t.previousAttempts,
     });
 
-    if (!result.success) {
-      return ui.notifications.error(result.errors.join(' | '));
-    }
+    if (!result.success) return ui.notifications.error(result.errors.join(' | '));
 
     this._tradeGoods = result;
-
-    // Affiche un aperçu inline dans l'onglet
     const goodsDiv = html.find('.trade-goods-result');
-    const listDiv  = html.find('.trade-goods-list');
+    const listDiv = html.find('.trade-goods-list');
 
     if (result.goods.length === 0) {
       listDiv.html('<p><em>Aucune marchandise disponible sur ce monde.</em></p>');
     } else {
-      const rows = result.goods.map(g => `
+      const rows = result.goods.map((g) => `
         <div class="trade-good-item">
           <label>
             <input type="checkbox" class="good-select" data-d66="${g.d66}" checked>
@@ -404,8 +438,6 @@ export class CommerceDialog extends FormApplication {
     await this._postToChatResult(result);
   }
 
-  // ─── Commerce spéculatif – calculer les prix d'achat ───────────────────────
-
   async _handleBuyPrices() {
     if (!this._tradeGoods || !this._tradeGoods.goods.length) {
       return ui.notifications.warn('Veuillez d\'abord trouver les marchandises disponibles.');
@@ -413,57 +445,42 @@ export class CommerceDialog extends FormApplication {
 
     const brokerSkill = this._formData.trade.brokerSkill;
     const prices = [];
-
     for (const g of this._tradeGoods.goods) {
       const priceResult = await calculatePrice({
-        basePrice:   g.basePrice,
-        buyMod:      g.buyMod,
-        sellMod:     g.sellMod,
+        basePrice: g.basePrice,
+        buyMod: g.buyMod,
+        sellMod: g.sellMod,
         brokerSkill,
         mode: 'buy',
       });
       prices.push({
-        name:        g.name,
-        tons:        g.tons,
-        basePrice:   g.basePrice,
-        diceResult:  priceResult.diceResult,
-        modifier:    priceResult.modifier,
-        total:       priceResult.total,
-        percent:     priceResult.percent,
+        name: g.name,
+        tons: g.tons,
+        basePrice: g.basePrice,
+        diceResult: priceResult.diceResult,
+        modifier: priceResult.modifier,
+        total: priceResult.total,
+        percent: priceResult.percent,
         actualPrice: priceResult.actualPrice,
-        totalCost:   priceResult.actualPrice * g.tons,
+        totalCost: priceResult.actualPrice * g.tons,
       });
     }
 
     const grandTotal = prices.reduce((s, p) => s + p.totalCost, 0);
-
     await this._postToChatResult({ type: 'buy-prices', prices, grandTotal });
   }
 
-  // ─── Post en chat ───────────────────────────────────────────────────────────
-
   async _postToChatResult(data) {
-    // Ajoute les helpers Handlebars nécessaires (si pas déjà enregistrés)
     _registerHandlebarsHelpers();
-
-    const html = await renderTemplate(
-      `modules/${MODULE_ID}/templates/commerce-result.hbs`,
-      data,
-    );
-
+    const html = await foundry.applications.handlebars.renderTemplate(`modules/${MODULE_ID}/templates/commerce-result.hbs`, data);
     await ChatMessage.create({
       content: html,
       speaker: ChatMessage.getSpeaker(),
-      flags:   { [MODULE_ID]: { type: 'commerce-result' } },
+      flags: { [MODULE_ID]: { type: 'commerce-result' } },
     });
   }
-
-  /** Nécessaire pour FormApplication : ne soumet rien (tout est piloté par boutons). */
-  async _updateObject(_event, _formData) {}
 }
 
-// ─── Helpers Handlebars ───────────────────────────────────────────────────────
-
 let _helpersRegistered = false;
 
 function _registerHandlebarsHelpers() {
@@ -472,19 +489,15 @@ function _registerHandlebarsHelpers() {
 
   Handlebars.registerHelper('formatCredits', (amount) => formatCredits(amount));
   Handlebars.registerHelper('join', (arr, sep) => (Array.isArray(arr) ? arr.join(sep) : ''));
-  Handlebars.registerHelper('gt',  (a, b) => a > b);
+  Handlebars.registerHelper('gt', (a, b) => a > b);
   Handlebars.registerHelper('gte', (a, b) => a >= b);
-  Handlebars.registerHelper('eq',  (a, b) => a === b);
-
-  /** Classe CSS selon le signe du modificateur. */
-  Handlebars.registerHelper('modClass', (n) => Number(n) > 0 ? 'mod-pos' : Number(n) < 0 ? 'mod-neg' : 'mod-zero');
-
-  /** Génère un <select> numérique de min à max, avec +N pour les positifs. */
+  Handlebars.registerHelper('eq', (a, b) => a === b);
+  Handlebars.registerHelper('modClass', (n) => (Number(n) > 0 ? 'mod-pos' : Number(n) < 0 ? 'mod-neg' : 'mod-zero'));
   Handlebars.registerHelper('modSelect', function(id, name, value, min, max) {
     let opts = '';
     for (let i = min; i <= max; i++) {
       const label = i > 0 ? `+${i}` : `${i}`;
-      const sel   = value === i ? ' selected' : '';
+      const sel = value === i ? ' selected' : '';
       opts += `<option value="${i}"${sel}>${label}</option>`;
     }
     return new Handlebars.SafeString(`<select id="${id}" name="${name}">${opts}</select>`);