sorting with local and npc fix

system/scripts/dice/dice-picker-dialog.js

@@ -196,7 +196,11 @@ export class DicePickerDialog extends FormApplication {
         }
         this.object.skill.list = this.parseSkillsList(skillsList);
         if (this.object.skill.list.length > 0) {
-            this.skillId = this.object.skill.list[0];
+            if (this.actorIsPc) {
+                this.skillId = this.object.skill.list[0].id;
+            } else {
+                this.skillCatId = this.object.skill.list[0].id;
+            }
         }
     }
 
@@ -348,7 +352,11 @@ export class DicePickerDialog extends FormApplication {
         html.find("select[name=skill]").on("change", async (event) => {
             event.preventDefault();
             event.stopPropagation();
+            if (this.actorIsPc) {
                 this.skillId = event.target.value;
+            } else {
+                this.skillCatId = event.target.value;
+            }
             this.render(false);
         });
 
@@ -728,20 +736,34 @@ export class DicePickerDialog extends FormApplication {
      */
     parseSkillsList(skillList) {
         const categories = game.l5r5e.HelpersL5r5e.getCategoriesSkillsList();
-        const out = new Set();
+
+        // Sanitize and uniques values
+        const unqSkillList = new Set();
         skillList.split(",").forEach((s) => {
             s = s.trim();
 
             if (CONFIG.l5r5e.skills.has(s)) {
-                out.add(this.actorIsPc ? s : CONFIG.l5r5e.skills.get(s));
+                unqSkillList.add(this.actorIsPc ? s : CONFIG.l5r5e.skills.get(s));
             } else if (categories.has(s)) {
                 if (this.actorIsPc) {
-                    categories.get(s).forEach((e) => out.add(e));
+                    categories.get(s).forEach((e) => unqSkillList.add(e));
                 } else {
-                    out.add(s);
+                    unqSkillList.add(s);
                 }
             }
         });
-        return [...out];
+
+        // Sort by the translated label
+        const array = [...unqSkillList].map((id) => {
+            return {
+                id: id,
+                label: this.actorIsPc
+                    ? game.i18n.localize(`l5r5e.skills.${CONFIG.l5r5e.skills.get(id)}.${id}`)
+                    : game.i18n.localize(`l5r5e.skills.${id}.title`),
+            };
+        });
+        array.sort((a, b) => a.label.localeCompare(b.label));
+
+        return array;
     }
 }

system/styles/scss/dices.scss

@@ -95,6 +95,7 @@
     }
     select {
         text-align: center;
+        width: 134px;
     }
 
     img {

system/templates/dice/dice-picker-dialog.html

@@ -23,14 +23,22 @@
                     {{#if data.skill.list}}
                         {{#if actorIsPc}}
                             <label>{{localizeSkill data.skill.cat 'title'}}</label>
-                        {{/if}}
                             <select class="attribute-dtype" name="skill">
                                 {{#select data.skill.id}}
-                            {{#each data.skill.list as |id|}}
+                                {{#each data.skill.list as |item|}}
-                                <option value="{{id}}">{{localizeSkillId id}}</option>
+                                    <option value="{{item.id}}">{{item.label}}</option>
                                 {{/each}}
                                 {{/select}}
                             </select>
+                        {{else}}
+                            <select class="attribute-dtype" name="skill">
+                                {{#select data.skill.cat}}
+                                {{#each data.skill.list as |item|}}
+                                    <option value="{{item.id}}">{{item.label}}</option>
+                                {{/each}}
+                                {{/select}}
+                            </select>
+                        {{/if}}
                     {{else}}
                         <label>{{localizeSkill data.skill.cat 'title'}}</label>
                         {{#if actorIsPc}}
@@ -39,6 +47,7 @@
                         </div>
                         {{/if}}
                     {{/if}}
+                    <div>
                         <label id="stance_label">{{localizeSkill data.skill.cat data.ring.id}}</label>
                         <div id="skill_default_value" class="dice-container pointer-choice">
                             <img src="systems/l5r5e/assets/dices/default/skill_blank.svg" alt="1">
@@ -46,6 +55,7 @@
                                 <span class="dice-skill" type="text" name="skill_{{data.skill.name}}">{{data.skill.defaultValue}}</span>
                             </div>
                         </div>
+                    </div>
                 {{else}}
                     <img class="profile-img" src="systems/l5r5e/assets/imgs/noskill.webp" data-edit="img" alt="no skill selected" />
                 {{/if}}