more tooltips and color for "Gm Monitor"

system/scripts/actor.js

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

system/scripts/actors/base-sheet.js

@@ -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(() => {
+        return super._updateObject(event, formData);
-            // 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();
-                }
-            }
-        });
     }
 
     /**

system/scripts/gm/gm-monitor.js

@@ -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")
+        game.l5r5e.HelpersL5r5e.popupManager(html.find(".actor-infos-control"), async (event) => {
-            .on("mouseenter", async (event) => {
+            const type = $(event.currentTarget).data("type");
-                $(document.body).find("#l5r5e-tooltip-ct").remove();
+            if (!type) {
+                return;
+            }
+            if (type === "text") {
+                return $(event.currentTarget).data("text");
+            }
 
-                const id = $(event.currentTarget).data("actor-id");
+            const id = $(event.currentTarget).data("actor-id");
-                if (!id) {
+            if (!id) {
-                    return;
+                return;
-                }
+            }
+            const actor = this.object.actors.find((e) => e.id === id);
+            if (!actor) {
+                return;
+            }
 
-                const actor = this.object.actors.find((e) => e.id === id);
+            switch (type) {
-                if (!actor) {
+                case "armors":
-                    return;
+                    return await this._getTooltipArmors(actor);
-                }
+                case "weapons":
-                const tpl = await this._getTooltipForActor(actor);
+                    return await this._getTooltipWeapons(actor);
-
+                case "global":
-                $(document.body).append(
+                    return await this._getTooltipGlobal(actor);
-                    `<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
     }
 
     /**
@@ -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
+        // *** Template ***
-        const arm = actor.items
+        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>)`
+                    ` (<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(", ");
 
         // *** Template ***
-        return renderTemplate(`${CONFIG.l5r5e.paths.templates}gm/gm-monitor-tooltip.html`, {
+        return renderTemplate(`${CONFIG.l5r5e.paths.templates}gm/monitor-tooltips/armors.html`, {
-            actorData: data,
+            armors,
-            advantages: adv,
-            disadvantages: dis,
-            armors: arm,
-            weapons: wea,
         });
     }
 }

system/scripts/helpers.js

@@ -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);
+                const tpl = await callback(event);
-                if (!item) {
-                    return;
-                }
-
-                const tpl = await item.renderTextTemplate();
                 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

system/scripts/settings.js

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

system/styles/scss/dices.scss

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

system/templates/gm/gm-monitor.html

@@ -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>
-            <td><i data-actor-id="{{actor.id}}" class="fas fa-question-circle actor-infos-control"></i></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}}

system/templates/gm/monitor-tooltips/armors.html

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

system/templates/gm/monitor-tooltips/global.html

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

system/templates/gm/monitor-tooltips/weapons.html

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