Added collapsible skill group & volatile storage.

CHANGELOG.md

@@ -4,7 +4,10 @@
 - NPC Sheet :
     - Added a random generator feature (Demeanor, Clan and Families names courteously authorized by Edge).
     - This is random by design, don't expect clan logic in values.
+- PC sheet :
+    - Added collapsible skill group.
 - PC/NPC sheet :
+    - Added a volatile storage to keep collapsible (Skills/Inventory) in theirs state on sheet update.
     - Added the ability for technique with a skill set, to open the DicePicker with presets values.
     - Some can interact with targets, but do the default difficulty if none.
     - Notes : Techniques in sheet need to be re-imported from the compendium or manually updated for this to work.

system/scripts/actors/base-character-sheet.js

@@ -31,6 +31,9 @@ export class BaseCharacterSheetL5r5e extends BaseSheetL5r5e {
         // Split Items by types
         sheetData.data.splitItemsList = this._splitItems(sheetData);
 
+        // Store infos for this app (collapsible)
+        sheetData.data.storeInfos = game.l5r5e.storage.getAppKeys(this.id);
+
         return sheetData;
     }
 

system/scripts/handlebars.js

@@ -58,6 +58,12 @@ export const RegisterHandlebars = function () {
         return a === b ? new Handlebars.SafeString('checked="checked"') : "";
     });
 
+    // Concatenation
+    Handlebars.registerHelper("concat", function (...objects) {
+        objects.pop(); // remove this function call
+        return objects.join("");
+    });
+
     // Add a setter
     Handlebars.registerHelper("setVar", function (varName, varValue, options) {
         options.data.root[varName] = varValue;

system/scripts/helpers.js

@@ -442,7 +442,12 @@ export class HelpersL5r5e {
         html.find(".toggle-on-click").on("click", (event) => {
             const elmt = $(event.currentTarget).data("toggle");
             const tgt = html.find("." + elmt);
-            tgt.toggleClass("toggle-active");
+            tgt.toggleClass("toggle-hidden");
+
+            const appId = $(event.currentTarget).closest(".window-app").attr("id");
+            if (appId) {
+                game.l5r5e.storage.toggleKey(appId, elmt.toString());
+            }
         });
 
         // Compendium folder link

system/scripts/main-l5r5e.js

@@ -42,6 +42,7 @@ import { BaseJournalSheetL5r5e } from "./journals/base-journal-sheet.js";
 import { MigrationL5r5e } from "./migration.js";
 import { GmToolbox } from "./gm/gm-toolbox.js";
 import { GmMonitor } from "./gm/gm-monitor.js";
+import { Storage } from "./storage.js";
 
 /* ------------------------------------ */
 /* Initialize system                    */
@@ -91,6 +92,7 @@ Hooks.once("init", async () => {
         GmToolbox,
         GmMonitor,
         HelpDialog,
+        storage: new Storage(),
         sockets: new SocketHandlerL5r5e(),
         migrations: MigrationL5r5e,
     };

system/scripts/storage.js

@@ -0,0 +1,39 @@
+/**
+ * Volatile Storage - Store things like collapsible state (refresh kill it)
+ */
+export class Storage {
+    store = new Map();
+
+    /**
+     * Get list of active keys for this app
+     * @param  {string} app
+     * @return {string[]}
+     */
+    getAppKeys(app) {
+        if (!this.store.has(app)) {
+            return [];
+        }
+        return Array.from(this.store.get(app).keys());
+    }
+
+    /**
+     * Toggle a key for this app
+     * @param {string} app app name, ex "actor-Zca44Nv7ydMcNN9p"
+     * @param {string} key Key name, ex "toggle-skill-category-martial"
+     */
+    toggleKey(app, key) {
+        if (this.store.has(app)) {
+            const appMap = this.store.get(app);
+            if (appMap.has(key)) {
+                appMap.delete(key);
+            } else {
+                appMap.set(key, true);
+            }
+        } else {
+            // Create app map
+            const appMap = new Map();
+            appMap.set(key, true);
+            this.store.set(app, appMap);
+        }
+    }
+}

system/styles/scss/fonts.scss

@@ -263,14 +263,16 @@ i.i_shugenja:before {
 i.i_ring {
     content: "";
     background: transparent url("../assets/dices/default/ring_blank.svg") no-repeat 0 center;
+    background-size: 1rem;
     display: inline-block;
     height: 1rem;
-    width: 0.75rem;
+    width: 1rem;
 }
 // Skill
 i.i_skill {
     content: "";
     background: transparent url("../assets/dices/default/skill_blank.svg") no-repeat 0 0;
+    background-size: 1rem;
     display: inline-block;
     height: 1rem;
     width: 1rem;

system/styles/scss/global.scss

@@ -10,6 +10,10 @@ body {
     }
 }
 
+.toggle-hidden {
+    display: none !important;
+}
+
 /* Windows */
 .window-app {
     .window-content {

system/styles/scss/items.scss

@@ -493,17 +493,6 @@
                 padding: 0;
             }
         }
-        .toggle-active {
-            height: 6rem;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            border: 1px solid $l5r5e-title;
-        }
-        p {
-            &.toggle-active {
-                padding: 0.25rem;
-            }
-        }
         &:hover,
         &:active {
             .item-description {
@@ -524,7 +513,7 @@
             display: none;
             height: auto;
         }
-        .toggle-active {
+        .stance-active {
             display: block;
             height: auto;
             border: 0 none;
@@ -534,7 +523,7 @@
                 height: auto;
                 border: 0 none;
             }
-            .toggle-active {
+            .stance-active {
                 display: block;
             }
         }

system/styles/scss/sheets.scss

@@ -807,9 +807,6 @@
             }
             .item-list {
                 display: block;
-                &.toggle-active {
-                    display: none;
-                }
             }
         }
     }

system/templates/actors/character/category.html

@@ -1,11 +1,11 @@
-<li class="skill-category-wrapper skill-category-content">
+<li class="skill-category-wrapper skill-category-content toggle-on-click" data-toggle="toggle-skill-category-{{categoryId}}">
     <h4 class="section-header">{{localizeSkill categoryId 'title'}}</h4>
-    <ul class="skill-category-skills-list">
+    <ul class="skill-category-skills-list toggle-skill-category-{{categoryId}} {{#ifCond data.storeInfos 'includes' (concat 'toggle-skill-category-' categoryId)}}toggle-hidden{{/ifCond}}">
         {{#each category as |skill id|}}
             {{> 'systems/l5r5e/templates/actors/character/skill.html' categoryId=../categoryId skill=skill skillId=id data=../data}}
         {{/each}}
     </ul>
-    <ul class="skill-category-ring-actions">
+    <ul class="skill-category-ring-actions toggle-skill-category-{{categoryId}} {{#ifCond data.storeInfos 'includes' (concat 'toggle-skill-category-' categoryId)}}toggle-hidden{{/ifCond}}">
         <li name="air" class="air"><i class="i_air"></i> {{localizeSkill categoryId 'air'}} </li>
         <li name="earth" class="earth"><i class="i_earth"></i> {{localizeSkill categoryId 'earth'}} </li>
         <li name="fire" class="fire"><i class="i_fire"></i> {{localizeSkill categoryId 'fire'}} </li>

system/templates/actors/character/stance.html

@@ -3,5 +3,5 @@
         {{localizeRing ringId}}
         <input id="stance_{{ringId}}" type="radio" name="data.stance" value="{{ringId}}" {{radioChecked ringId stance}}/>
     </label>
-    <p class="item-description {{#ifCond ringId '==' stance}}toggle-active{{/ifCond}}">{{localizeStanceTip ringId}}</p>
+    <p class="item-description {{#ifCond ringId '==' stance}}stance-active{{/ifCond}}">{{localizeStanceTip ringId}}</p>
 </li>

system/templates/items/item/items.html

@@ -5,7 +5,7 @@
             <a data-item-type="{{type}}" class="item-control item-add" title="{{localize 'l5r5e.global.add'}}"><i class="fas fa-plus"></i></a>
         {{/if}}
     </h3>
-    <ul class="item-list inventory-item-list-{{type}}">
+    <ul class="item-list inventory-item-list-{{type}} {{#ifCond ../data.storeInfos 'includes' (concat 'inventory-item-list-' type)}}toggle-hidden{{/ifCond}}">
         {{#each cat as |item id|}}
             {{> 'systems/l5r5e/templates/items/item/item-entry.html' item=item id=id editable=../../options.editable soft_locked=../../data.data.soft_locked}}
         {{/each}}