Merge branch 'hud-menu' into 'dev_1.1'

Possibilité d'afficher/masquer les menus HUD

See merge request LeRatierBretonnien/foundryvtt-reve-de-dragon!83

module/actor-sheet.js

@@ -234,7 +234,7 @@ export class RdDActorSheet extends ActorSheet {
 	activateListeners(html) {
     super.activateListeners(html);
     
-    HtmlUtility._showControlWhen(".gm-only", game.user.isGM);
+    HtmlUtility._showControlWhen($(".gm-only"), game.user.isGM);
 
     // Everything below here is only needed if the sheet is editable
     if (!this.options.editable) return;

module/html-utility.js

@@ -1,10 +1,10 @@
 export class HtmlUtility{
   static _showControlWhen(control, condition) {
     if (condition) {
-      $(control).show();
+      control.show();
     }
     else {
-      $(control).hide();
+      control.hide();
     }
   }
 }

module/rdd-calendrier.js

@@ -387,7 +387,7 @@ export class RdDCalendrier extends Application {
 	activateListeners(html) {
     super.activateListeners(html);
 
-    HtmlUtility._showControlWhen(".gm-only", game.user.isGM);
+    HtmlUtility._showControlWhen($(".gm-only"), game.user.isGM);
 
     this.updateDisplay();
 

module/rdd-combat.js

@@ -238,35 +238,35 @@ export class RdDCombat {
   /* -------------------------------------------- */
   async _onAttaqueNormale(rollData) {
     console.log("RdDCombat.onAttaqueNormale >>>", rollData);
-    if (!await this.accorderEntite('avant-defense')) {
-      return;
-    }
-
     let explications = "";
-
+    
     rollData.dmg = RdDBonus.dmg(rollData, this.attacker.getBonusDegat(), this.defender.isEntiteCauchemar());
-
+    
     if (this.target) {
       explications += "<br><strong>Cible</strong> : " + this.defender.data.name;
     }
     explications += "<br>Encaissement à " + Misc.toSignedString(rollData.dmg.total) + " (" + rollData.dmg.loc.label + ")";
-
+    
     // Save rollData for defender
     game.system.rdd.rollDataHandler[this.attackerId] = duplicate(rollData);
-
+    
     // Message spécial pour la rapidité, qui reste difficile à gérer automatiquement
     if (rollData.particuliereAttaque == 'rapidite') {
       explications += "<br>Vous avez attaqué en Rapidité. Vous pourrez faire une deuxième attaque, ou utiliser votre arme pour vous défendre.";
     }
-
+    
     // Final chat message
     let chatOptions = {
       content: "<strong>Test : " + rollData.selectedCarac.label + " / " + rollData.competence.name + "</strong>"
-        + RdDResolutionTable.explainRollData(rollData)
+      + RdDResolutionTable.explainRollData(rollData)
-        + explications
+      + explications
     }
     ChatUtility.chatWithRollMode(chatOptions, this.attacker.name)
-
+    
+    if (!await this.accorderEntite('avant-defense')) {
+      return;
+    }
+    
     if (this.target) {
       this._sendMessageDefense(rollData);
     }

module/rdd-roll.js

@@ -118,15 +118,15 @@ export class RdDRoll extends Dialog {
         dmgText = '(' + dmgText + ')';
       }
 
-      HtmlUtility._showControlWhen(".diffMoral", rollData.selectedCarac == actor.data.data.carac.volonte);
+      HtmlUtility._showControlWhen($(".diffMoral"), rollData.selectedCarac == actor.data.data.carac.volonte);
-      HtmlUtility._showControlWhen(".etat-general", !dialog._isIgnoreEtatGeneral(rollData));
+      HtmlUtility._showControlWhen($(".etat-general"), !dialog._isIgnoreEtatGeneral(rollData));
 
       // Sort management
       if (rollData.selectedSort) {
         rollData.bonus = RdDItemSort.getCaseBonus(rollData.selectedSort, rollData.coord),
         //console.log("Toggle show/hide", rollData.selectedSort);
-        HtmlUtility._showControlWhen("#div-sort-difficulte", RdDItemSort.isDifficulteVariable(rollData.selectedSort))
+        HtmlUtility._showControlWhen($("#div-sort-difficulte"), RdDItemSort.isDifficulteVariable(rollData.selectedSort))
-        HtmlUtility._showControlWhen("#div-sort-ptreve", RdDItemSort.isCoutVariable(rollData.selectedSort))
+        HtmlUtility._showControlWhen($("#div-sort-ptreve"), RdDItemSort.isCoutVariable(rollData.selectedSort))
       }
 
       // Mise à jour valeurs

module/rdd-token-hud.js

@@ -1,62 +1,66 @@
 /* -------------------------------------------- */
+import { HtmlUtility } from "./html-utility.js";
 import { RdDUtility } from "./rdd-utility.js";
 
 /* -------------------------------------------- */
 export class RdDTokenHud {
-  
+
-  /* -------------------------------------------- */
-  static addTokenHudExtensions( app, html, data ) {
-    let token = canvas.tokens.get(data._id);    
-    
-    // Affichage seulement si le token est un combat
-    if ( token.inCombat) {
-      this.addInitiativeTokenTip(html, token);
-    }
-  }
 
   /* -------------------------------------------- */
-  static async addInitiativeTokenTip(html, token ) {
+  static addTokenHudExtensions(app, html, data) {
-    // Helper actor and sanity check
+    let token = canvas.tokens.get(data._id);
-    let actor = token.actor;    
+    let actor = token.actor;
-    if (actor === undefined) return;    
+    let combatant = game.combat.data.combatants.find(c => c.tokenId == token.data._id);
-    
-    // Get combatant stuff 
-    let combatant = game.combat.data.combatants.find(c => c.tokenId == token.data._id );
-    if ( combatant ) {
-      let armesList = RdDUtility.buildArmeList( combatant );
-      // Create space for Hud Extensions next to combat icon
-      let htmlInit = '<div class="tokenhudext right">'; 
-      let htmlCombat = '<div class="tokenhudext rightright">';
-      console.log("Token !!!", combatant, armesList);
-      for( let armeIndex=0; armeIndex<armesList.length; armeIndex++) {
-        let arme = armesList[armeIndex];
-        htmlInit += '<div class="control-icon tokenhudicon right" title="'+ arme.name +'">';
-        htmlInit += '<label class="hud-text-small" data-combatant-id="'+combatant._id+'" data-arme-id="'+armeIndex+'"></i>I:'+arme.name+'</label></div>';
-        if ( !arme.data.initOnly) { 
-          htmlCombat += '<div class="control-icon tokenhudicon right" title="'+ arme.name +'">';
-          htmlCombat += '<label class="hud-text-small" data-combatant-id="'+combatant._id+'" data-arme-id="'+armeIndex+'"></i>C:'+arme.name+'</label></div>';
-        }
-      }
-      htmlInit += "</div>";
-      htmlCombat += "</div>";
-      let hudInitiative = $(htmlInit);
-      html.find('.control-icon.combat').after(hudInitiative); // Add Initiative and Agility token tip
-      let hudCombat = $(htmlCombat);
-      html.find('.control-icon.combat').after(hudCombat); // Add Initiative and Agility token tip
 
-      // Add interactions for Initiative
+    // Affichage seulement si le token est un combat et a un actor
-      hudInitiative.find('label').click(async (event) => {
+    if (actor === undefined) return;
+    if (!token.inCombat) return;
+    if (!combatant) return;
+
+    const data = { combatant: combatant, armes: RdDTokenHud.buildListeActionsCombat(combatant) };
+
+    // initiative
+    await RdDTokenHud._configureSubMenu(html.find('.control-icon.combat'), 'systems/foundryvtt-reve-de-dragon/templates/hud-actor-init.html', data,
+      (event) => {
         let armeIndex = event.currentTarget.attributes['data-arme-id'].value;
-        let combatantId = event.currentTarget.attributes['data-combatant-id'].value;        
+        let combatantId = event.currentTarget.attributes['data-combatant-id'].value;
-        let arme = armesList[armeIndex];
+        let arme = listeArmes[armeIndex];
-        RdDUtility.rollInitiativeCompetence( combatantId, arme );
+        RdDUtility.rollInitiativeCompetence(combatantId, arme);
       });
-      // Add interactions for Combat
+
-      hudCombat.find('label').click(async (event) => {
+    // combat
+    await RdDTokenHud._configureSubMenu(html.find('.control-icon.target'), 'systems/foundryvtt-reve-de-dragon/templates/hud-actor-attaque.html', data,
+      (event) => {
         let armeIndex = event.currentTarget.attributes['data-arme-id'].value;
         let arme = armesList[armeIndex];
-        actor.rollArme( arme.data.competence, arme.name);
+        actor.rollArme(arme.data.competence, arme.name);
       });
-    }
   }
+
+  static buildListeActionsCombat(combatant) {
+    let armesList = RdDUtility.buildArmeList(combatant);
+    for (let armeIndex = 0; armeIndex < armesList.length; armeIndex++) {
+      armesList[armeIndex] = duplicate(armesList[armeIndex]);
+      armesList[armeIndex].index = armeIndex;
+    }
+    return armesList;
+  }
+
+  static async _configureSubMenu(insertionPoint, template, data, onMenuItem) {
+    const hud = $(await renderTemplate(template, data));
+    const imgHud = hud.find('img.rdd-hud-togglebutton');
+    const list = hud.find('div.rdd-hud-list');
+
+    HtmlUtility._showControlWhen(list, hud.hasClass('active'));
+
+    imgHud.click(event => {
+      hud.toggleClass('active');
+      HtmlUtility._showControlWhen(list, hud.hasClass('active'));
+    });
+
+    list.find('.rdd-hud-menu').click(onMenuItem);
+
+    insertionPoint.after(hud);
+  }
+
 }

module/rdd-utility.js

@@ -187,7 +187,10 @@ export class RdDUtility  {
       'systems/foundryvtt-reve-de-dragon/templates/heures-select-option.html',
       // Conteneur/item in Actor sheet
       'systems/foundryvtt-reve-de-dragon/templates/actor-inventaire-conteneur.html',
-      'systems/foundryvtt-reve-de-dragon/templates/editor-notes-mj.html'
+      'systems/foundryvtt-reve-de-dragon/templates/editor-notes-mj.html',
+      // HUD
+      'systems/foundryvtt-reve-de-dragon/templates/hud-actor-init.html',
+      'systems/foundryvtt-reve-de-dragon/templates/hud-actor-attaque.html'
     ];
 
     return loadTemplates(templatePaths);

styles/simple.css

@@ -667,6 +667,13 @@ ul, li {
   font-family: CaslonPro;
   font-weight: 600;
 }
+.tokenhudext.left {
+  justify-content: flex-start;
+  flex-direction: column;
+  position: absolute;
+  top: 2.75rem;
+  right: 4rem;
+}
 .tokenhudext.right {
   justify-content: flex-start;
   flex-direction: column;
@@ -674,13 +681,6 @@ ul, li {
   top: 2.75rem;
   right: -6rem;
 }
-.tokenhudext.rightright {
-  justify-content: flex-start;
-  flex-direction: column;
-  position: absolute;
-  top: 2.75rem;
-  right: -13rem;
-}
 .control-icon.tokenhudicon {
   width: fit-content;
   height: fit-content;
@@ -693,7 +693,7 @@ ul, li {
 .control-icon.tokenhudicon.right {
 	margin-left: 8px;
 }
-.hud-text-small {
+.rdd-hud-menu {
   font-size: 0.75rem;
 }
 /* ======================================== */

templates/hud-actor-attaque.html

@@ -0,0 +1,13 @@
+<div class="control-icon rdd-combat ">
+  <img class="rdd-hud-togglebutton" src="systems/foundryvtt-reve-de-dragon/icons/heures/hd06.svg" width="36" height="36" title="Attaque"/>
+  <div class="rdd-hud-list tokenhudext left">
+    {{#each armes as |arme key|}}
+    {{#unless arme.data.initOnly}}
+    <div class="control-icon tokenhudicon rdd-attaque" title="{{arme.name}}">
+      <label class="rdd-hud-menu" data-combatant-id="{{../combatant._id}}"
+        data-arme-id="{{arme.index}}"></i>C:{{arme.name}}</label>
+    </div>
+    {{/unless}}
+    {{/each}}
+  </div>
+</div>

templates/hud-actor-init.html

@@ -0,0 +1,11 @@
+<div class="control-icon rdd-initiative ">
+  <img class="rdd-hud-togglebutton" src="icons/svg/sword.svg" width="36" height="36" title="Initiative" />
+  <div class="rdd-hud-list tokenhudext right">
+    {{#each armes as |arme key|}}
+      <div class="control-icon tokenhudicon" title="{{arme.name}}">
+      <label class="rdd-hud-menu" data-combatant-id="{{../combatant._id}}"
+        data-arme-id="{{arme.index}}">I:{{arme.name}}</label>
+      </div>
+    {{/each}}
+  </div>
+</div>