more tooltips and color for "Gm Monitor"

This commit is contained in:
Vlyan
2021-08-14 13:17:17 +02:00
parent c426e457ff
commit f4de1e9fc8
11 changed files with 219 additions and 117 deletions

View File

@@ -96,7 +96,17 @@ export class ActorL5r5e extends Actor {
}
// Now using updateDocuments
return Actor.updateDocuments([data], context);
return Actor.updateDocuments([data], context).then(() => {
// Notify the "Gm Monitor" if this actor is watched
if (game.settings.get("l5r5e", "gm-monitor-actors").find((e) => e === this.id)) {
game.l5r5e.sockets.refreshAppId("l5r5e-gm-monitor");
if (game.user.isGM) {
Object.values(ui.windows)
.find((e) => e.id === "l5r5e-gm-monitor")
?.refresh();
}
}
});
}
/** @override */
@@ -201,4 +211,28 @@ export class ActorL5r5e extends Actor {
}
return tpl;
}
/**
* Return true if a weapon is equipped
* @return {boolean}
*/
haveWeaponEquipped() {
return this.items.some((e) => e.type === "weapon" && !!e.data.data.equipped);
}
/**
* Return true if a weapon is readied
* @return {boolean}
*/
haveWeaponReadied() {
return this.items.some((e) => e.type === "weapon" && !!e.data.data.equipped && !!e.data.data.readied);
}
/**
* Return true if a armor is equipped
* @return {boolean}
*/
haveArmorEquipped() {
return this.items.some((e) => e.type === "armor" && !!e.data.data.equipped);
}
}

View File

@@ -187,17 +187,7 @@ export class BaseSheetL5r5e extends ActorSheet {
formData["data.description"] = game.l5r5e.HelpersL5r5e.convertSymbols(formData["data.description"], true);
}
return super._updateObject(event, formData).then(() => {
// Notify the "Gm Monitor" if this actor is watched
if (game.settings.get("l5r5e", "gm-monitor-actors").find((e) => e === this.actor.id)) {
game.l5r5e.sockets.refreshAppId("l5r5e-gm-monitor");
if (game.user.isGM) {
Object.values(ui.windows)
.find((e) => e.id === "l5r5e-gm-monitor")
?.refresh();
}
}
});
return super._updateObject(event, formData);
}
/**

View File

@@ -20,7 +20,7 @@ export class GmMonitor extends FormApplication {
classes: ["l5r5e", "gm-monitor"],
template: CONFIG.l5r5e.paths.templates + "gm/gm-monitor.html",
title: game.i18n.localize("l5r5e.gm_monitor.title"),
width: 640,
width: 700,
height: 300,
resizable: true,
closeOnSubmit: false,
@@ -120,34 +120,33 @@ export class GmMonitor extends FormApplication {
html.find(`.actor-remove-control`).on("click", this._removeActor.bind(this));
// Tooltips
html.find(".actor-infos-control")
.on("mouseenter", async (event) => {
$(document.body).find("#l5r5e-tooltip-ct").remove();
game.l5r5e.HelpersL5r5e.popupManager(html.find(".actor-infos-control"), async (event) => {
const type = $(event.currentTarget).data("type");
if (!type) {
return;
}
if (type === "text") {
return $(event.currentTarget).data("text");
}
const id = $(event.currentTarget).data("actor-id");
if (!id) {
return;
}
const id = $(event.currentTarget).data("actor-id");
if (!id) {
return;
}
const actor = this.object.actors.find((e) => e.id === id);
if (!actor) {
return;
}
const actor = this.object.actors.find((e) => e.id === id);
if (!actor) {
return;
}
const tpl = await this._getTooltipForActor(actor);
$(document.body).append(
`<div id="l5r5e-tooltip-ct" class="l5r5e-tooltip l5r5e-tooltip-ct">${tpl}</div>`
);
})
.on("mousemove", (event) => {
const popup = $(document.body).find("#l5r5e-tooltip-ct");
if (popup) {
popup.css(game.l5r5e.HelpersL5r5e.popupPosition(event, popup));
}
})
.on("mouseleave", () => {
$(document.body).find("#l5r5e-tooltip-ct").remove();
}); // tooltips
switch (type) {
case "armors":
return await this._getTooltipArmors(actor);
case "weapons":
return await this._getTooltipWeapons(actor);
case "global":
return await this._getTooltipGlobal(actor);
}
});
}
/**
@@ -176,7 +175,8 @@ export class GmMonitor extends FormApplication {
this.object.actors.push(actor[0]);
return this._saveAndRefresh();
await this._saveActorsIds();
return this.refresh();
}
/**
@@ -192,16 +192,6 @@ export class GmMonitor extends FormApplication {
);
}
/**
* Save ids and refresh the windows (local and socket)
* @return {Promise<void>}
*/
async _saveAndRefresh() {
await this._saveActorsIds();
game.l5r5e.sockets.refreshAppId("l5r5e-gm-monitor");
return this.refresh();
}
/**
* Open the Sheet for this actor
* @param {Event} event
@@ -237,7 +227,8 @@ export class GmMonitor extends FormApplication {
this.object.actors = this.object.actors.filter((e) => e.id !== id);
return this._saveAndRefresh();
await this._saveActorsIds();
return this.refresh();
}
/**
@@ -246,7 +237,7 @@ export class GmMonitor extends FormApplication {
* @return {string}
* @private
*/
async _getTooltipForActor(actor) {
async _getTooltipGlobal(actor) {
const data = actor.data.data;
// Peculiarities
@@ -260,33 +251,67 @@ export class GmMonitor extends FormApplication {
.map((e) => e.name)
.join(", ");
// Equipped Armors & Weapons
const arm = actor.items
// *** Template ***
return renderTemplate(`${CONFIG.l5r5e.paths.templates}gm/monitor-tooltips/global.html`, {
actorData: data,
advantages: adv,
disadvantages: dis,
});
}
/**
* Get weapons informations for this actor
* @param {BaseSheetL5r5e} actor
* @return {string}
* @private
*/
async _getTooltipWeapons(actor) {
const display = (e) => {
return (
e.name +
` (<i class="fas fa-arrows-alt-h"> ${e.data.data.range || 0}</i>` +
` / <i class="fas fa-tint"> ${e.data.data.damage}</i>` +
` / <i class="fas fa-skull"> ${e.data.data.deadliness}</i>)`
);
};
// Readied Weapons
const readied = actor.items
.filter((e) => e.type === "weapon" && e.data.data.equipped && !!e.data.data.readied)
.map((e) => display(e));
// Equipped Weapons
const sheathed = actor.items
.filter((e) => e.type === "weapon" && e.data.data.equipped && !e.data.data.readied)
.map((e) => display(e));
// *** Template ***
return renderTemplate(`${CONFIG.l5r5e.paths.templates}gm/monitor-tooltips/weapons.html`, {
readied,
sheathed,
});
}
/**
* Get armors informations for this actor
* @param {BaseSheetL5r5e} actor
* @return {string}
* @private
*/
async _getTooltipArmors(actor) {
// Equipped Armors
const armors = actor.items
.filter((e) => e.type === "armor" && e.data.data.equipped)
.map(
(e) =>
e.name +
`(<i class="fas fa-tint">${e.data.data.armor.physical}</i> / <i class="fas fa-bolt">${e.data.data.armor.supernatural}</i>)`
)
.join(", ");
const wea = actor.items
.filter((e) => e.type === "weapon" && e.data.data.equipped)
.map(
(e) =>
e.name +
`(<i class="fas fa-arrows-alt-h"> ${e.data.data.range || 0}</i> / <i class="fas fa-tint"> ${
e.data.data.damage
}</i> / <i class="fas fa-skull"> ${e.data.data.deadliness}</i>)`
)
.join(", ");
` (<i class="fas fa-tint">${e.data.data.armor.physical}</i>` +
` / <i class="fas fa-bolt">${e.data.data.armor.supernatural}</i>)`
);
// *** Template ***
return renderTemplate(`${CONFIG.l5r5e.paths.templates}gm/gm-monitor-tooltip.html`, {
actorData: data,
advantages: adv,
disadvantages: dis,
armors: arm,
weapons: wea,
return renderTemplate(`${CONFIG.l5r5e.paths.templates}gm/monitor-tooltips/armors.html`, {
armors,
});
}
}

View File

@@ -408,16 +408,42 @@ export class HelpersL5r5e {
});
// Item detail tooltips
html.find(".l5r5e-tooltip")
this.popupManager(html.find(".l5r5e-tooltip"), async (event) => {
const item = await HelpersL5r5e.getEmbedItemByEvent(event, actor);
if (!item) {
return;
}
return await item.renderTextTemplate();
});
}
/**
* Do the Popup for the selected element
* @param {Selector} selector HTML Selector
* @param {function} callback Callback function(event), must return the html to display
*/
static popupManager(selector, callback) {
const popupPosition = (event, popup) => {
let left = +event.clientX + 60,
top = +event.clientY;
let maxY = window.innerHeight - popup.outerHeight();
if (top > maxY) {
top = maxY - 10;
}
let maxX = window.innerWidth - popup.outerWidth();
if (left > maxX) {
left -= popup.outerWidth() + 100;
}
return { left: left + "px", top: top + "px", visibility: "visible" };
};
selector
.on("mouseenter", async (event) => {
$(document.body).find("#l5r5e-tooltip-ct").remove();
const item = await HelpersL5r5e.getEmbedItemByEvent(event, actor);
if (!item) {
return;
}
const tpl = await item.renderTextTemplate();
const tpl = await callback(event);
if (!tpl) {
return;
}
@@ -429,7 +455,7 @@ export class HelpersL5r5e {
.on("mousemove", (event) => {
const popup = $(document.body).find("#l5r5e-tooltip-ct");
if (popup) {
popup.css(HelpersL5r5e.popupPosition(event, popup));
popup.css(popupPosition(event, popup));
}
})
.on("mouseleave", () => {
@@ -437,28 +463,6 @@ export class HelpersL5r5e {
}); // tooltips
}
/**
* Return the Popup position avoiding screen borders
* @param {Event} event HTML Event
* @param popup
* @return {{top: string, visibility: string, left: string}}
*/
static popupPosition(event, popup) {
let left = +event.clientX + 60,
top = +event.clientY;
let maxY = window.innerHeight - popup.outerHeight();
if (top > maxY) {
top = maxY - 10;
}
let maxX = window.innerWidth - popup.outerWidth();
if (left > maxX) {
left -= popup.outerWidth() + 100;
}
return { left: left + "px", top: top + "px", visibility: "visible" };
}
/**
* Get a Item from a Actor Sheet
* @param {Event} event HTML Event

View File

@@ -110,5 +110,6 @@ export const RegisterSettings = function () {
config: false,
type: Array,
default: [],
onChange: () => game.l5r5e.sockets.refreshAppId("l5r5e-gm-monitor"),
});
};

File diff suppressed because one or more lines are too long

View File

@@ -404,6 +404,9 @@
min-width: 500px;
.window-content {
form {
padding: 0 0.5rem;
}
th,
td {
border: 1px solid #5a6e5a;
@@ -414,7 +417,10 @@
max-width: 28px;
max-height: 28px;
}
.overvalue {
.goodvalue {
color: rgba(0, 128, 0, 0.75);
}
.badvalue {
color: $red-dice;
}
}

View File

@@ -2,8 +2,10 @@
<table>
<thead>
<th class="img"></th>
<th class="stance"></th>
<th class="name">{{localize 'l5r5e.name'}}</th>
<th class="stance"><i class="i_fire"></i></th>
<th class="weapon"><i class="fas fa-fan"></i></th>
<th class="armor"><i class="fas fa-user-shield"></i></th>
<th class="rank"><i class="i_bushi"></i> / <i class="i_courtier"></i></th>
<th class="social">{{localize 'l5r5e.gm_monitor.honor_glory_status'}}</th>
<th class="fatigue">{{localize 'l5r5e.attributes.fatigue'}}</th>
@@ -17,11 +19,13 @@
{{#each data.actors as |actor|}}
<tr>
<td><img class="profile actor-profile" title="{{actor.name}}" src="{{actor.img}}"></td>
<td><i class="{{actor.data.data.stance}} i_{{actor.data.data.stance}}"></i></td>
<td>
<a data-actor-id="{{actor.id}}" class="actor-sheet-control">{{actor.name}}</a>
{{#if actor.data.data.attitude}}<br>({{actor.data.data.attitude}}){{/if}}
</td>
<td><i data-type="text" data-text="<h2>{{localize 'l5r5e.conflict.stance'}} ({{localizeRing actor.data.data.stance}})</h2>{{localizeStanceTip actor.data.data.stance}}" class="i_{{actor.data.data.stance}} actor-infos-control"></i></td>
<td>{{#if actor.haveWeaponEquipped}}<i data-type="weapons" data-actor-id="{{actor.id}}" class="fas fa-fan actor-infos-control {{#if actor.haveWeaponReadied}}badvalue{{/if}}"></i>{{/if}}</td>
<td>{{#if actor.haveArmorEquipped}}<i data-type="armors" data-actor-id="{{actor.id}}" class="fas fa-user-shield actor-infos-control"></i>{{/if}}</td>
<td>
{{#if actor.data.data.identity.school_rank}}
{{actor.data.data.identity.school_rank}}
@@ -30,15 +34,27 @@
{{/if}}
</td>
<td>
{{actor.data.data.social.honor}} / {{actor.data.data.social.glory}} / {{actor.data.data.social.status}}
<span class="{{#ifCond actor.data.data.social.honor '>' 64}}goodvalue{{/ifCond}}{{#ifCond actor.data.data.social.honor '<' 30}}badvalue{{/ifCond}}">{{actor.data.data.social.honor}}</span>
/ <span class="{{#ifCond actor.data.data.social.glory '>' 64}}goodvalue{{/ifCond}}{{#ifCond actor.data.data.social.glory '<' 20}}badvalue{{/ifCond}}">{{actor.data.data.social.glory}}</span>
/ {{actor.data.data.social.status}}
</td>
<td><span class="{{#ifCond actor.data.data.fatigue.value '>' actor.data.data.fatigue.max}}overvalue{{/ifCond}}">{{actor.data.data.fatigue.value}}</span> / {{actor.data.data.fatigue.max}}</td>
<td><span class="{{#ifCond actor.data.data.strife.value '>' actor.data.data.strife.max}}overvalue{{/ifCond}}">{{actor.data.data.strife.value}}</span> / {{actor.data.data.strife.max}}</td>
<td>
{{actor.data.data.focus}} / {{#if actor.data.data.is_compromised}}<span class="overvalue">1</span>{{else}}{{actor.data.data.vigilance}}{{/if}}
<span class="{{#ifCond actor.data.data.fatigue.value '>' actor.data.data.fatigue.max}}badvalue{{/ifCond}}">{{actor.data.data.fatigue.value}}</span>
/ {{actor.data.data.fatigue.max}}
</td>
<td>{{actor.data.data.void_points.value}} / {{actor.data.data.void_points.max}}</td>
<td><i data-actor-id="{{actor.id}}" class="fas fa-question-circle actor-infos-control"></i></td>
<td>
<span class="{{#ifCond actor.data.data.strife.value '>' actor.data.data.strife.max}}badvalue{{/ifCond}}">{{actor.data.data.strife.value}}</span>
/ {{actor.data.data.strife.max}}
</td>
<td>
{{actor.data.data.focus}}
/ {{#if actor.data.data.is_compromised}}<span class="badvalue">1</span>{{else}}{{actor.data.data.vigilance}}{{/if}}
</td>
<td>
{{actor.data.data.void_points.value}}
/ {{actor.data.data.void_points.max}}
</td>
<td><i data-actor-id="{{actor.id}}" data-type="global" class="fas fa-question-circle actor-infos-control"></i></td>
<td><span data-actor-id="{{actor.id}}" class="actor-remove-control pointer" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></span></td>
</tr>
{{/each}}

View File

@@ -0,0 +1,9 @@
{{!-- Equipped Armors --}}
<h2>{{localize 'l5r5e.armors.title'}}</h2>
<section>
<ul>
{{#each armors as |armor|}}
<li>{{{armor}}}</li>
{{/each}}
</ul>
</section>

View File

@@ -11,9 +11,5 @@
{{!-- Peculiarities --}}
<li><b>{{localize 'l5r5e.social.npc.advantages'}}</b> : {{advantages}}</li>
<li><b>{{localize 'l5r5e.social.npc.disadvantages'}}</b> : {{disadvantages}}</li>
{{!-- Equipped Armors & Weapons --}}
<li><b>{{localize 'l5r5e.armors.title'}}</b> : {{{armors}}}</li>
<li><b>{{localize 'l5r5e.weapons.title'}}</b> : {{{weapons}}}</li>
</ul>
</section>

View File

@@ -0,0 +1,21 @@
{{#if readied}}
<h2>{{localize 'l5r5e.weapons.readied'}}</h2>
<section>
<ul>
{{#each readied as |weapon|}}
<li>{{{weapon}}}</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if sheathed}}
<h2>{{localize 'l5r5e.weapons.sheathed'}}</h2>
<section>
<ul>
{{#each sheathed as |weapon|}}
<li>{{{weapon}}}</li>
{{/each}}
</ul>
</section>
{{/if}}