Dialog picker 1st usable version

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

@@ -11,27 +11,33 @@ export class DicePickerDialog extends Application {
     actor = {};
 
     /**
-     * Skill data from actor
+     * Selected Skill data from actor
      */
-    skillData = {};
+    skillData = {
-
+        id: "",
-    elementsList = [];
+        value: 0,
+        cat: "",
+        name: "",
+    };
 
     /**
      * Assign the default options
      * @override
      */
     static get defaultOptions() {
-        const options = super.defaultOptions;
+        return mergeObject(super.defaultOptions, {
-        options.id = "dice-picker";
+            id: "l5r5e-dice-picker-dialog",
-        options.template = "systems/l5r5e/templates/dice/dice-picker-dialog.html";
+            classes: ["l5r5e", "dice-picker-dialog"],
-        options.width = 400;
+            template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
-        return options;
+            width: 360,
+            // height: 400,
+            // title: "L5R Dice Roller",
+        });
     }
 
     /**
      * Create dialog
-     * @param options actor
+     * @param options actor, skillId
      */
     constructor(options = null) {
         super(options);
@@ -39,15 +45,10 @@ export class DicePickerDialog extends Application {
         // Get Actor from: sheet, selected token, nothing
         this.actor = options?.actor || canvas.tokens.controlled[0]?.actor.data || null;
 
-        if (!!this.actor && options?.skillId) {
+        // Skill ?
-            this._loadSkillData(options?.skillId);
+        if (!!this.actor && !!options?.skillId) {
+            this.setSkillData(options.skillId);
         }
-
-        this.elementsList = ["air", "earth", "fire", "water", "void"].map((e) => {
-            return { element: e, label: game.i18n.localize(`L5r5e.Rings.${e.capitalize()}`) };
-        });
-
-        console.log("DicePickerDialog.constructor", options, this);
     }
 
     /**
@@ -65,8 +66,10 @@ export class DicePickerDialog extends Application {
      */
     getData(options = null) {
         return {
-            elementsList: this.elementsList,
+            elementsList: this._getElements(),
-            dicesList: [1, 2, 3, 4, 5, 6],
+            dicesList: [0, 1, 2, 3, 4, 5, 6],
+            skillData: this.skillData,
+            actor: this.actor,
         };
     }
 
@@ -77,181 +80,96 @@ export class DicePickerDialog extends Application {
      * @returns {Application}
      */
     render(force, options) {
-        console.log("DicePickerDialog.render !", force, options);
+        options = {
+            ...options,
+        };
 
         if (force === undefined) {
             force = true;
         }
 
-        options = {};
-
         return super.render(force, options);
     }
-    //
-    // /**
-    //  * Display dialog for rolling dices
-    //  */
-    // async show(params) {
-    //     const unqId = randomID();
-    //
-    //
-    //     // Dialog Template
-    //     let content = await renderTemplate("systems/l5r5e/templates/dice/dice-picker-dialog.html", {
-    //         id: unqId,
-    //         elementsList: ["air", "earth", "fire", "water", "void"].map(e => {
-    //             return { element: e, label: game.i18n.localize(`L5r5e.Rings.${e.capitalize()}`) };
-    //         }),
-    //         dicesList: [1, 2, 3, 4, 5, 6],
-    //         currentActor: currentActor
-    //     });
-    //
-    //     new Dialog({
-    //         title: "L5R Dice Roller" + (currentActor ? " - " + currentActor.name : ""),
-    //         content: content,
-    //         buttons: {
-    //             yes: {
-    //                 icon: "<i class='fas fa-check'></i>",
-    //                 label: "Roll !",
-    //                 callback: async (html) => {
-    //                     const approach = html.find("input[name=\"approach\"]:checked")[0].value || null;
-    //                     const ring = html.find("input[name=\"ring\"]:checked")[0].value || null;
-    //                     const skill = html.find("input[name=\"skill\"]:checked")[0].value || null;
-    //
-    //                     if (!approach || !skill || !ring || (skill < 1 && ring < 1)) {
-    //                         return false;
-    //                     }
-    //
-    //                     // TODO skill
-    //                     await new RollL5r5e(
-    //                         `${ring}dr[${approach}]`
-    //                         + ` + ${skill}ds[unknown skill]`
-    //                     ).roll().toMessage();
-    //
-    //                     // const message = await roll.toMessage();
-    //                     //
-    //                     // // const message = game.specialDiceRoller.l5r.rollFormula(
-    //                     // //     "r".repeat(ring) + "s".repeat(skill)
-    //                     // //     , `${game.i18n.localize("L5R.Rings." + approach)}` + (!!skillData?.name ? ` (${skillData?.name})` : "")
-    //                     // // );
-    //                     //
-    //                     // ChatMessage.create({
-    //                     //     flags: {},
-    //                     //     // isRoll: true,
-    //                     //     user: game.user._id,
-    //                     //     speaker: ChatMessage.getSpeaker(),
-    //                     //     content: message,
-    //                     // }, currentActor ?? {});
-    //
-    //                 }
-    //             },
-    //             no: {
-    //                 icon: "<i class='fas fa-times'></i>",
-    //                 label: "Cancel"
-    //             }
-    //         },
-    //         default: "no"
-    //     }).render(true);
-    // }
 
     /**
      * Listen to html elements
      * @override
      */
     activateListeners(html) {
-        console.log("activateListeners", html);
-
         super.activateListeners(html);
 
         // on change approaches
-        html.find('input[name="approach"]:checked').on("click", async (event) => {
+        html.find('input[name="approach"]').on("click", async (event) => {
+            $("#ring_" + event.target.dataset.dice).prop("checked", true);
+        });
+
+        // Roll button
+        html.find('button[name="roll"]').on("click", async (event) => {
             event.preventDefault();
             event.stopPropagation();
 
-            console.log("approach clicked !");
+            const approach = html.find('input[name="approach"]:checked')[0].value || null;
+            const ring = html.find('input[name="ring"]:checked')[0].value || null;
+            const skill = html.find('input[name="skill"]:checked')[0].value || null;
 
-            this.close();
+            if (!approach || !skill || !ring || (skill < 1 && ring < 1)) {
+                return false;
+            }
+
+            await new RollL5r5e(
+                `${ring}dr[${approach}] + ${skill}ds` + (this.skillData.id ? `[${this.skillData.id}]` : "")
+            )
+                .roll()
+                .toMessage();
+
+            await this.close();
         });
+
+        // Default Selected
+        html.find("#approach_air").trigger("click");
+        html.find("#skill_" + this.skillData.value).trigger("click");
     }
 
     /**
      * Load skill's required data from actor and skillId
-     *
-     * @param skillId
-     * @private
      */
-    _loadSkillData(skillId) {
+    setSkillData(skillId) {
-        if (!this.actor || typeof skillId == "undefined") {
+        if (!skillId) {
             return;
         }
 
-        this.skillData = {
+        const skillData = {
             id: skillId.trim(),
-            dices: 0,
+            value: 0,
             cat: "",
             name: "",
         };
 
-        this.skillData.cat = Object.keys(this.actor.data.skills).find(
+        if (!this.actor) {
-            (e) => !!this.actor.data.skills[e][this.skillData.id]
+            return;
-        );
+        }
-        this.skillData.dices = this.actor.data.skills[this.skillData.cat][this.skillData.id].value ?? 0;
+
-        this.skillData.name = game.i18n.localize("L5r5e.Skills." + this.skillData.cat + "." + this.skillData.id);
+        skillData.cat = Object.keys(this.actor.data.skills).find((e) => !!this.actor.data.skills[e][skillData.id]);
+        skillData.value = this.actor.data.skills[skillData.cat][skillData.id].value ?? 0;
+        skillData.name = game.i18n.localize("L5r5e.Skills." + skillData.cat + "." + skillData.id);
+
+        return skillData;
     }
 
-    // static changeElementsByToken(sElmt) {
-    //     if (DicePickerDialog.currentActor?.data) {
-    //         $("#ring_dices_" + DicePickerDialog.currentActor.data.rings[sElmt]).prop("checked", true);
-    //     }
-    // }
-
     /**
-     * Helper for dices radios
+     * Load elements (id, label, value)
+     * @private
      */
-    // static fctRadioDice(params) {
+    _getElements() {
-    //     let defaults = { name: "radio", min: 0, max: 6, selected: null };
+        return ["air", "earth", "fire", "water", "void"].map((e) => {
-    //     params = { ...defaults, ...params };
+            return {
-    //     if (params.selected === null) {
+                id: e,
-    //         params.selected = params.min;
+                label: game.i18n.localize(`L5r5e.Rings.${e.capitalize()}`),
-    //     }
+                value: this.actor ? this.actor.data.rings[e] : 0,
-    //     let s = "";
+            };
-    //     let id = "";
+        });
-    //     for (let idx = 0; idx <= params.max; idx++) {
+    }
-    //         id = `${params.name.toLowerCase()}_${idx}`;
-    //         s += ` <input type="radio" id="${id}" name="${params.name}" value="${idx}" ${idx === params.selected ? "checked" : ""} ${idx < params.min ? "disabled" : ""}>`;
-    //         s += ` <label for="${id}">${idx}</label>`;
-    //     }
-    //     return s;
-    // }
 
-    /**
-     * Helper for element radios
-     */
-    // static fctRadioElements(name) {
-    //     let s = "";
-    //     let id = "";
-    //     ["air", "earth", "fire", "water", "void"].forEach((element, idx) => {
-    //         id = `${name.toLowerCase()}_${element}`;
-    //         s += ` <input type="radio" id="${id}" name="${name}" value="${element}" ${idx === 0 ? "checked" : ""} onclick="DicePickerDialog.changeElementsByToken('${element}')">`;
-    //         s += ` <label for="${id}"><i class="i_${element} ${element}" title="${game.i18n.localize("L5R.Rings." + element)}"></i></label>`;
-    //     });
-    //     return s;
-    // }
-
-    // /** @override */
-    // static get defaultOptions() {
-    //
-    //     console.log('L5R.DicePickerDialog.defaultOptions', this); // TODO tmp
-    //
-    //     return mergeObject(super.defaultOptions, {
-    //         id: "l5r5e-dice-picker-dialog",
-    //         classes: ["l5r5e", "dice-picker-dialog"],
-    //         title: "Skill List Importer",
-    //         width: 400,
-    //         height: 400,
-    //         template: "systems/l5r5e/templates/dice/dice-picker-dialog.html"
-    //     });
-    // }
-    //
     // /**
     //  * Return a reference to the target attribute
     //  * @type {String}
@@ -261,49 +179,4 @@ export class DicePickerDialog extends Application {
     //
     //     return this.options.name;
     // }
-    //
-    // /** @override */
-    // async getData() {
-    //
-    //     console.log('L5R.DicePickerDialog.getData', this); // TODO tmp
-    //
-    //     // $(".import-progress").addClass("import-hidden");
-    //
-    //     // if (!CONFIG?.temporary) {
-    //     //     CONFIG.temporary = {};
-    //     // }
-    //
-    //     return {
-    //         cssClass: "dice-picker-dialog"
-    //     };
-    // }
-    //
-    // /** @override */
-    // activateListeners(html) {
-    //     console.log('L5R.DicePickerDialog.activateListeners', this); // TODO tmp
-    //
-    //     super.activateListeners(html);
-    //
-    //     html.find(".reset-button").on("click", async (event) => {
-    //         event.preventDefault();
-    //         event.stopPropagation();
-    //         this.close();
-    //     });
-    //
-    //
-    //     html.find(".dialog-button").on("click", async (event) => {
-    //         event.preventDefault();
-    //         event.stopPropagation();
-    //
-    //         const form = html[0];
-    //         if (!form.data.files.length) return ui.notifications.error("You did not upload a data file!");
-    //
-    //         // let currentSkillList = await JSON.parse(game.settings.get("starwarsffg", "arraySkillList"));
-    //         // const newSkillList = JSON.parse(text);
-    //         // const newMasterSkillListData = JSON.stringify(currentSkillList);
-    //         // window.location.reload();
-    //
-    //         this.close();
-    //     });
-    // }
 }

system/templates/dice/chat-roll.html

@@ -6,7 +6,7 @@
     {{#if l5r5e.stance}}
     <div class="l5r5e dice-stance">
         <!-- TODO localization -->
-        {{l5r5e.skillId}} (<i class="i_{{l5r5e.stance}}"></i>)
+        <i class="i_{{l5r5e.stance}}"></i> {{l5r5e.skillId}}
     </div>
     {{/if}}
 

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

@@ -1,43 +1,51 @@
 <div class="dice-picker-dialog">
-    {{json this}}
     <form class="noflex" autocomplete="off">
         <div class="form-group">
-            <label>Approaches:</label>
+            <label>{{localize "L5r5e.Approaches"}}:</label>
             <div class="form-fields">
                 {{#each elementsList}}
-                <input type="radio" id="{{this.element}}" name="approach" value="{{this.element}}">
+                <input type="radio" id="approach_{{this.id}}" name="approach" value="{{this.id}}" data-dice="{{this.value}}">
-                <label for="{{this.element}}">
+                <label for="approach_{{this.id}}">
-                    <i class="i_{{this.element}} {{this.element}}" title="{{this.label}}"></i>
+                    <i class="i_{{this.id}} {{this.id}}" title="{{this.label}}"></i>
                 </label>
                 {{/each}}
             </div>
         </div>
         <hr>
         <div class="form-group">
-            <label><i class="d6"></i> Rings:</label>
+            <label><i class="d6"></i> {{localize "L5r5e.Rings.Title"}}:</label>
             <div class="form-fields">
-
                 {{#each dicesList}}
-                <input type="radio" id="{{this}}" name="ring" value="{{this}}">
+                <input type="radio" id="ring_{{this}}" name="ring" value="{{this}}">
-                <label for="{{this}}">
+                <label for="ring_{{this}}">
                     {{this}}
                 </label>
                 {{/each}}
-
             </div>
         </div>
         <hr>
         <div class="form-group">
-            <label><i class="d12"></i> Skill:</label>
+            <label><i class="d12"></i> {{localize "L5r5e.Skills.Title"}}: {{skillData.name}}</label>
             <div class="form-fields">
                 {{#each dicesList}}
-                <input type="radio" id="{{this}}" name="skill" value="{{this}}">
+                <input type="radio" id="skill_{{this}}" name="skill" value="{{this}}">
-                <label for="{{this}}">
+                <label for="skill_{{this}}">
                     {{this}}
                 </label>
                 {{/each}}
             </div>
         </div>
+
+        {{#if skillData.name}}
+        <hr>
+        <div class="form-group">
+            <label>{{skillData.name}}</label>
+        </div>
+        {{/if}}
+
+        <hr>
+        <div class="form-group">
+            <button name="roll">Roll <i class='fas fa-arrow-circle-right'></i></button>
+        </div>
     </form>
-    <!--<script>VlyL5rToolbox.changeElementsByToken('air');</script>-->
 </div>