Split techniques in actor sheet for better readability

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added confirm dialog on item's deletion (Hold "ctrl" on the click, if you want to bypass it)
 - Added "Sleep" & "Scene End" buttons in "GM ToolBox" (old "difficulty" box)
 - Added an option to reverse the token's bar on fatigue (thanks to Jzrzmy), and colorize in red the strife bar if compromise
+- Split techniques in actor sheet for better readability
 
 ## 1.1.2 - One Compendium to bring them all
 - Added compendiums (Thanks to Stéfano Fara for the English version !) Partial for French as PoW and CR are not translated yet

system/scripts/actors/base-sheet.js

@@ -27,9 +27,46 @@ export class BaseSheetL5r5e extends ActorSheet {
         sheetData.data.stances = CONFIG.l5r5e.stances;
         sheetData.data.techniquesList = CONFIG.l5r5e.techniques;
 
+        // Sort Items by name
+        sheetData.items.sort((a, b) => {
+            return a.name.localeCompare(b.name);
+        });
+
+        // Split techniques by types
+        sheetData.data.splitTechniquesList = this._splitTechniques(sheetData);
+
         return sheetData;
     }
 
+    /**
+     * Split techniques by types for better readability
+     * @private
+     */
+    _splitTechniques(sheetData) {
+        const out = {};
+
+        // Build the list order
+        [...CONFIG.l5r5e.techniques, ...CONFIG.l5r5e.techniques_school].forEach((tech) => {
+            out[tech] = [];
+        });
+
+        // Add tech the character knows
+        sheetData.items.forEach((item) => {
+            if (item.type === "technique") {
+                out[item.data.technique_type].push(item);
+            }
+        });
+
+        // Remove unused techs
+        Object.keys(out).forEach((tech) => {
+            if (out[tech].length < 1 && !sheetData.data.techniques[tech]) {
+                delete out[tech];
+            }
+        });
+
+        return out;
+    }
+
     /**
      * Return a light sheet if in "limited" state
      * @override
@@ -252,7 +289,7 @@ export class BaseSheetL5r5e extends ActorSheet {
         const created = await this.actor.createEmbeddedEntity("OwnedItem", {
             name: game.i18n.localize(titles[type]),
             type: type,
-            img: "icons/svg/mystery-man.svg",
+            img: `${CONFIG.l5r5e.paths.assets}icons/items/${type}.svg`,
         });
         const item = this.actor.getOwnedItem(created._id);
 
@@ -262,6 +299,15 @@ export class BaseSheetL5r5e extends ActorSheet {
             item.data.data.bought_at_rank = this.actor.data.data.identity.school_rank;
         }
 
+        // If technique, select the current type
+        if (item.data.type === "technique") {
+            const techType = $(event.currentTarget).data("tech-type");
+            if (CONFIG.l5r5e.techniques.includes(techType)) {
+                item.data.data.technique_type = techType;
+                item.data.img = `${CONFIG.l5r5e.paths.assets}/icons/techs/${techType}.svg`;
+            }
+        }
+
         item.sheet.render(true);
     }
 

system/scripts/actors/character-sheet.js

@@ -49,11 +49,6 @@ export class CharacterSheetL5r5e extends BaseSheetL5r5e {
         // Split Money
         sheetData.data.money = this._zeniToMoney(this.actor.data.data.zeni);
 
-        // Sort Items by name
-        sheetData.items.sort((a, b) => {
-            return a.name.localeCompare(b.name);
-        });
-
         // split advancements list by rank, and calculate xp spent
         this._prepareAdvancement(sheetData);
         sheetData.data.xp_saved = Math.floor(parseInt(sheetData.data.xp_total) - parseInt(sheetData.data.xp_spent));

system/templates/actors/character/techniques.html

@@ -8,19 +8,19 @@
             </label>
         {{/each}}
     </div>
-    <fieldset class="section-header flexrow">
+    {{#each actor.data.splitTechniquesList as |list technique|}}
-        <legend class="technique-controls">
+        <fieldset class="section-header flexrow">
-            {{ localize 'l5r5e.techniques.title' }}
+            <legend class="technique-controls">
-            {{#if editable}}
+                {{localize (localize 'l5r5e.techniques.{technique}' technique=technique) }}
-            <a data-item-type="technique" class="technique-control item-add" title="{{ localize 'l5r5e.global.add' }}"><i class="fas fa-plus"></i></a>
+                {{#ifCond ../editable '&&' (lookup ../actor.data.techniques technique)}}
-            {{/if}}
+                    <a data-item-type="technique" class="technique-control item-add" data-tech-type="{{technique}}" title="{{ localize 'l5r5e.global.add' }}"><i class="fas fa-plus"></i></a>
-        </legend>
-        <ul class="item-list">
-            {{#each actor.items as |item id|}}
-                {{#ifCond item.type '==' 'technique'}}
-                    {{> 'systems/l5r5e/templates/items/technique/technique-entry.html' technique=item editable=../editable }}
                 {{/ifCond}}
-            {{/each}}
+            </legend>
-        </ul>
+            <ul class="item-list">
-    </fieldset>
+                {{#each list as |item id|}}
+                    {{> 'systems/l5r5e/templates/items/technique/technique-entry.html' technique=item editable=../../editable }}
+                {{/each}}
+            </ul>
+        </fieldset>
+    {{/each}}
 </div>

system/templates/actors/npc/techniques.html

@@ -1,13 +1,29 @@
 <fieldset class="techniques-wrapper section-header flexrow">
     <legend class="technique-controls">
         {{ localize 'l5r5e.techniques.title' }}
-        <a data-item-type="technique" class="technique-control item-add" title="{{ localize 'l5r5e.global.add' }}"><i class="fas fa-plus"></i></a>
     </legend>
-    <ul class="item-list">
+    <div class="checklist">
-        {{#each actor.items as |item id|}}
+        <i>{{ localize 'l5r5e.techniques.type'}}</i>
-            {{#ifCond item.type '==' 'technique'}}
+        {{#each actor.data.techniquesList as |technique|}}
-                {{> 'systems/l5r5e/templates/items/technique/technique-entry.html' technique=item editable=../editable }}
+            <label>
-            {{/ifCond}}
+                <input type="checkbox" name="data.techniques.{{technique}}" {{checked (lookup ../actor.data.techniques technique)}} />
+                {{localizeTechnique technique}}
+            </label>
         {{/each}}
-    </ul>
+    </div>
+    {{#each actor.data.splitTechniquesList as |list technique|}}
+        <fieldset class="section-header flexrow">
+            <legend class="technique-controls">
+                {{localize (localize 'l5r5e.techniques.{technique}' technique=technique) }}
+                {{#ifCond ../editable '&&' (lookup ../actor.data.techniques technique)}}
+                    <a data-item-type="technique" class="technique-control item-add" data-tech-type="{{technique}}" title="{{ localize 'l5r5e.global.add' }}"><i class="fas fa-plus"></i></a>
+                {{/ifCond}}
+            </legend>
+            <ul class="item-list">
+                {{#each list as |item id|}}
+                    {{> 'systems/l5r5e/templates/items/technique/technique-entry.html' technique=item editable=../../editable }}
+                {{/each}}
+            </ul>
+        </fieldset>
+    {{/each}}
 </fieldset>