Army sheet : added ability to drag n drop a cohort on a map

Cohort sheet : added ability to drag n drop an actor and some css

system/scripts/actors/army-sheet.js

@@ -17,6 +17,7 @@ export class ArmySheetL5r5e extends BaseSheetL5r5e {
         });
     }
 
+    /** @override */
     constructor(options = {}) {
         super(options);
         this._initialize();
@@ -81,7 +82,9 @@ export class ArmySheetL5r5e extends BaseSheetL5r5e {
             return;
         }
 
-        // Delete the linked Actor (warlod/commander)
+        html.find(".entity-link").on("dragstart", this._onDragEntityLink.bind(this));
+
+        // Delete the linked Actor (warlord/commander)
         html.find(".actor-remove-control").on("click", this._removeLinkedActor.bind(this));
     }
 
@@ -114,6 +117,24 @@ export class ArmySheetL5r5e extends BaseSheetL5r5e {
         return out;
     }
 
+    /**
+     * Callback actions which occur at the beginning of a drag start workflow.
+     * @param {DragEvent} event	The originating DragEvent
+     */
+    _onDragEntityLink(event) {
+        const actorId = $(event.currentTarget).data("actor-id");
+        if (!actorId) {
+            return;
+        }
+        event.originalEvent.dataTransfer.setData(
+            "text/plain",
+            JSON.stringify({
+                type: "Actor",
+                id: actorId,
+            })
+        );
+    }
+
     /**
      * Handle dropped Item data on the Actor sheet (cohort, fortification)
      * @param {DragEvent} event

system/scripts/items/army-cohort-sheet.js

@@ -10,8 +10,104 @@ export class ArmyCohortSheetL5r5e extends ItemSheetL5r5e {
             classes: ["l5r5e", "sheet", "army-cohort"],
             template: CONFIG.l5r5e.paths.templates + "items/army-cohort/army-cohort-sheet.html",
             width: 520,
-            height: 480,
-            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description" }],
+            height: 520,
+            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "infos" }],
+            dragDrop: [{ dragSelector: ".item", dropSelector: null }],
+        });
+    }
+
+    /** @override */
+    constructor(options = {}) {
+        super(options);
+        this._initialize();
+    }
+
+    /**
+     * Initialize once
+     * @private
+     */
+    _initialize() {
+        const data = this.object.data.data;
+
+        // update linked actor datas
+        if (data.leader_actor_id) {
+            const actor = game.actors.get(data.leader_actor_id);
+            if (actor) {
+                this._updateLinkedActorData(actor);
+            } else {
+                this._removeLinkedActor();
+            }
+        }
+    }
+
+    /**
+     * Subscribe to events from the sheet.
+     * @param {jQuery} html HTML content of the sheet.
+     */
+    activateListeners(html) {
+        super.activateListeners(html);
+
+        // *** Everything below here is only needed if the sheet is editable ***
+        if (!this.isEditable) {
+            return;
+        }
+
+        // Delete the linked Actor
+        html.find(".actor-remove-control").on("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const id = $(event.currentTarget).data("actor-id");
+            if (id) {
+                this._removeLinkedActor();
+            }
+        });
+    }
+
+    /**
+     * Handle dropped Item data on the Actor sheet (cohort, fortification)
+     * @param {DragEvent} event
+     */
+    async _onDrop(event) {
+        // *** Everything below here is only needed if the sheet is editable ***
+        if (!this.isEditable) {
+            return;
+        }
+
+        const droppedActor = await game.l5r5e.HelpersL5r5e.getDragnDropTargetObject(event);
+        return this._updateLinkedActorData(droppedActor);
+    }
+
+    /**
+     * Update actor datas for this army sheet
+     * @param {ActorL5r5e} actor actor object
+     * @return {Promise<abstract.Document>}
+     * @private
+     */
+    async _updateLinkedActorData(actor) {
+        if (!actor || actor.documentName !== "Actor" || !["character", "npc"].includes(actor.data?.type)) {
+            console.warn("L5R5E | Wrong actor type", actor?.data?.type, actor);
+            return;
+        }
+
+        return this.object.update({
+            img: actor.data.img,
+            data: {
+                leader: actor.data.name,
+                leader_actor_id: actor.data._id,
+            },
+        });
+    }
+
+    /**
+     * Remove the linked actor (commander/warlord)
+     * @return {Promise<void>}
+     * @private
+     */
+    async _removeLinkedActor() {
+        return this.object.update({
+            data: {
+                leader_actor_id: null,
+            },
         });
     }
 }

system/styles/scss/items.scss

@@ -411,16 +411,29 @@
     }
     article {
         &.attributes {
-            height: 10.5rem;
+            height: 7rem;
             input[type="text"] {
                 width: 100%;
             }
+            .actor-remove-control {
+                font-size: 12px;
+            }
             .flx50 {
                 flex: 0 0 calc(50% - 0.5rem);
             }
             .flx100 {
                 flex: 0 0 calc(100% - 0.5rem);
             }
+            .editor-content {
+                min-height: 8rem;
+                max-height: 14rem;
+            }
+        }
+        &.abilities {
+            align-self: stretch;
+            height: calc(100% - 8rem);
+            width: 100%;
+            box-sizing: content-box;
         }
     }
 }

system/template.json

@@ -272,6 +272,7 @@
         "army_cohort": {
             "templates": ["basics"],
             "leader": "",
+            "leader_actor_id": null,
             "equipment": "",
             "abilities": "",
             "battle_readiness": {

system/templates/items/army-cohort/army-cohort-entry.html

@@ -1,4 +1,4 @@
-<li class="item cohort flexcol">
+<li class="item cohort flexcol entity-link actor" {{#if cohort.data.leader_actor_id}}draggable="true" data-actor-id="{{cohort.data.leader_actor_id}}"{{/if}}>
     <ul class="item-header item-control">
         <li class="item-img"><img src="{{cohort.img}}" title="{{cohort.name}}" width="32px" height="32px"/></li>
         <li class="item-name l5r5e-tooltip" data-item-id="{{cohort._id}}">{{cohort.name}}</li>
@@ -14,8 +14,7 @@
         {{/if}}
     </ul>
     <ul class="item-properties">
-        {{#if cohort.data.leader}}<li>{{localize 'l5r5e.army.cohort.leader'}} : {{cohort.data.leader}}</li>{{/if}}
+        {{#if cohort.data.leader}}<li>{{localize 'l5r5e.army.cohort.leader'}} : {{#if cohort.data.leader_actor_id}}<a data-actor-id="{{cohort.data.leader_actor_id}}" class="open-sheet-actor-id">{{cohort.data.leader}}</a>{{else}}{{cohort.data.leader}}{{/if}}</li>{{/if}}
         {{#if cohort.data.equipment}}<li>{{localize 'l5r5e.equipment'}} : {{cohort.data.equipment}}</li>{{/if}}
-        {{#if cohort.data.abilities}}<li>{{localize 'l5r5e.army.cohort.abilities'}} : {{cohort.data.abilities}}</li>{{/if}}
     </ul>
-</li>
+</li>

system/templates/items/army-cohort/army-cohort-sheet.html

@@ -6,20 +6,7 @@
     {{!-- Sheet Body --}}
     <section class="sheet-body">
         {{!-- properties Tab --}}
-        <article class="attributes" data-group="primary" data-tab="description">
-            <label class="attribute army-cohort-types flx50">
-                {{localize 'l5r5e.army.cohort.leader'}}
-                <input class="select-on-focus" type="text" name="data.leader" value="{{data.data.leader}}" data-dtype="String"/>
-            </label>
-            <label class="attribute army-cohort-types flx50">
-                {{localize 'l5r5e.equipment'}}
-                <input class="select-on-focus" type="text" name="data.equipment" value="{{data.data.equipment}}" data-dtype="String"/>
-            </label>
-            <label class="attribute army-cohort-types flx100">
-                {{localize 'l5r5e.army.cohort.abilities'}}
-                <input class="select-on-focus" type="text" name="data.abilities" value="{{data.data.abilities}}" data-dtype="String"/>
-            </label>
-
+        <article class="attributes">
             {{!-- battle readiness --}}
             <label class="attribute army-cohort-types">
                 {{localize 'l5r5e.army.battle_readiness.casualties'}}
@@ -37,7 +24,39 @@
                 {{localize 'l5r5e.army.battle_readiness.discipline'}}
                 <input class="select-on-focus" type="number" name="data.battle_readiness.panic_discipline.max" value="{{data.data.battle_readiness.panic_discipline.max}}" data-dtype="Number"/>
             </label>
+
+            <label class="attribute army-cohort-types flx50">
+                {{localize 'l5r5e.army.cohort.leader'}}
+                {{#if data.data.leader_actor_id}}
+                <div>
+                    <span data-actor-id="{{data.data.leader_actor_id}}" class="actor-remove-control pointer" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></span>
+                    <a data-actor-id="{{data.data.leader_actor_id}}" class="open-sheet-actor-id">{{data.data.leader}}</a>
+                </div>
+                {{else}}
+                    <input class="select-on-focus" type="text" name="data.leader" value="{{data.data.leader}}" data-dtype="String"/>
+                {{/if}}
+            </label>
+            <label class="attribute army-cohort-types flx50">
+                {{localize 'l5r5e.equipment'}}
+                <input class="select-on-focus" type="text" name="data.equipment" value="{{data.data.equipment}}" data-dtype="String"/>
+            </label>
         </article>
+
+        {{!-- Sheet Tab Navigation --}}
+        <nav class="sheet-tabs tabs" data-group="primary">
+            <a class="item" data-tab="infos">{{localize 'l5r5e.description'}}</a>
+            <a class="item" data-tab="abilities">{{localize 'l5r5e.army.cohort.abilities'}}</a>
+        </nav>
+
+        {{!-- abilities --}}
+        <article class="tab abilities" data-group="primary" data-tab="abilities">
+            <fieldset class="attribute army-cohort-types flx100">
+                    <legend class="text-block-header">{{localize 'l5r5e.army.cohort.abilities'}}</legend>
+                {{editor content=data.data.abilities target="data.abilities" button=true owner=owner editable=editable}}
+            </fieldset>
+        </article>
+
+        {{!-- Description --}}
         {{> 'systems/l5r5e/templates/items/item/item-infos.html'}}
     </section>
 </form>

system/templates/items/army-cohort/army-cohort-text.html

@@ -6,13 +6,14 @@
         <ul>
             <li><strong>{{localize 'l5r5e.army.cohort.leader'}}</strong> : {{data.data.leader}}</li>
             <li><strong>{{localize 'l5r5e.equipment'}}</strong> : {{data.data.equipment}}</li>
-            <li><strong>{{localize 'l5r5e.army.cohort.abilities'}}</strong> : {{data.data.abilities}}</li>
             {{!-- battle readiness --}}
             <li><strong>{{localize 'l5r5e.army.battle_readiness.casualties'}}</strong> : {{data.data.battle_readiness.casualties_strength.value}}</li>
             <li><strong>{{localize 'l5r5e.army.battle_readiness.strength'}}</strong> : {{data.data.battle_readiness.casualties_strength.max}}</li>
             <li><strong>{{localize 'l5r5e.army.battle_readiness.panic'}}</strong> : {{data.data.battle_readiness.panic_discipline.value}}</li>
             <li><strong>{{localize 'l5r5e.army.battle_readiness.discipline'}}</strong> : {{data.data.battle_readiness.panic_discipline.max}}</li>
         </ul>
+        {{!-- abilities --}}
+        <p><strong>{{localize 'l5r5e.army.cohort.abilities'}}</strong> : {{{data.data.abilities}}}</p>
         {{!--item-infos--}}
         <p><strong>{{localize 'l5r5e.description'}}</strong> : {{{data.data.description}}}</p>
         <p><strong>{{localize 'l5r5e.book_reference'}}</strong> : {{data.data.book_reference}}</p>