Possiblilité d'afficher/masquer les menus HUD

Afin de voir les "activve effects", ou autres sous menus du HUD
This commit is contained in:
Vincent Vandemeulebrouck 2020-12-20 02:07:27 +01:00
parent a93b34d2ce
commit ae3ac0a00f
5 changed files with 87 additions and 56 deletions

View File

@ -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 ) {
// Helper actor and sanity check
let actor = token.actor;
if (actor === undefined) return;
// 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
hudInitiative.find('label').click(async (event) => {
// Affichage seulement si le token est un combat et a un actor
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 arme = armesList[armeIndex];
let arme = listeArmes[armeIndex];
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);
});
}
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);
}
}

View File

@ -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);

View File

@ -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;
}
/* ======================================== */

View File

@ -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>

View File

@ -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>