dialog test v2

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

@@ -5,21 +5,33 @@
 import { RollL5r5e } from "./roll.js";
 
 export class DicePickerDialog extends Application {
+    static stances = ["earth", "air", "water", "fire", "void"];
+
     /**
      * Current Actor
      */
-    actor = null;
+    _actor = null;
 
     /**
-     * Selected Skill data from actor
+     * Preset ring (attribute / approach)
      */
-    skillData = {
+    _ringId = null;
+
+    /**
+     * Preset Skill (and data from actor if actor provided)
+     */
+    _skillData = {
         id: "",
         value: 0,
         cat: "",
         name: "",
     };
 
+    /**
+     * Difficulty
+     */
+    _difficulty = null;
+
     /**
      * Assign the default options
      * @override
@@ -29,31 +41,100 @@ export class DicePickerDialog extends Application {
             id: "l5r5e-dice-picker-dialog",
             classes: ["l5r5e", "dice-picker-dialog"],
             template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
-            width: 480,
+            width: 650,
             // height: 400,
             // title: "L5R Dice Roller",
             actor: null,
+            ringId: null,
             skillId: "",
+            difficulty: null,
         });
     }
 
     /**
      * Create dialog
-     * @param options actor, skillId
+     *
+     * ex: new game.l5r5e.DicePickerDialog({skillId: 'aesthetics', ringId: 'fire', actor: game.user.character}).render();
+     *
+     * @param options actor, ringId, skillId, difficulty
      */
     constructor(options = null) {
         super(options);
 
-        // Get Actor from: options, 1st selected token, selected character
+        // Try to get Actor from: options, first selected token or player's selected character
-        const actor = options?.actor || canvas.tokens.controlled[0]?.actor || game.user.character || null;
+        [options?.actor, canvas.tokens.controlled[0]?.actor, game.user.character].forEach((actor) => {
-        if (actor instanceof Actor && actor.owner) {
+            if (!this._actor) {
-            this.actor = actor;
+                this.actor = actor;
+            }
+        });
+
+        // Ring ?
+        if (options?.ringId) {
+            this.ringId = options.ringId;
         }
 
         // Skill ?
         if (options?.skillId) {
-            this.setSkillData(options.skillId);
+            this.skillId = options.skillId;
         }
+
+        // Difficulty
+        if (options?.difficulty) {
+            this.difficulty = options.difficulty;
+        }
+    }
+
+    /**
+     * Set actor
+     * @param actor
+     */
+    set actor(actor) {
+        this._actor = actor instanceof Actor && actor.owner ? actor : null;
+    }
+
+    /**
+     * Set ring preset
+     * @param ringId
+     */
+    set ringId(ringId) {
+        this._ringId = DicePickerDialog.stances.includes(ringId) || null;
+    }
+
+    /**
+     * Set and load skill's required data from actor and skillId
+     * @param skillId
+     */
+    set skillId(skillId) {
+        if (!skillId) {
+            return;
+        }
+
+        this._skillData = {
+            id: skillId.toLowerCase().trim(),
+            value: 0,
+            cat: "",
+            name: "",
+        };
+
+        const cat = RollL5r5e.getCategoryForSkillId(skillId);
+        if (!cat) {
+            return;
+        }
+        this._skillData.cat = cat;
+        this._skillData.name = game.i18n.localize("l5r5e.skills." + cat + "." + this._skillData.id);
+        this._skillData.value = this._actor?.data?.data?.skills[cat]?.[this._skillData.id].value || 0;
+    }
+
+    /**
+     * Set Difficulty level
+     * @param difficulty
+     */
+    set difficulty(difficulty) {
+        difficulty = parseInt(difficulty) || null;
+        if (difficulty < 0) {
+            difficulty = null;
+        }
+        this._difficulty = difficulty;
     }
 
     /**
@@ -61,7 +142,7 @@ export class DicePickerDialog extends Application {
      * @type {String}
      */
     get title() {
-        return `L5R Dice Roller` + (this.actor ? " - " + this.actor.data.name : "");
+        return `L5R Dice Roller` + (this._actor ? " - " + this._actor.data.name : "");
     }
 
     /**
@@ -73,8 +154,9 @@ export class DicePickerDialog extends Application {
         return {
             elementsList: this._getElements(),
             dicesList: [0, 1, 2, 3, 4, 5, 6],
-            skillData: this.skillData,
+            skillData: this._skillData,
-            actor: this.actor,
+            actor: this._actor,
+            difficulty: this._difficulty,
         };
     }
 
@@ -105,7 +187,29 @@ export class DicePickerDialog extends Application {
 
         // on change approaches
         html.find('input[name="approach"]').on("click", async (event) => {
-            $("#ring_" + event.target.dataset.dice).prop("checked", true);
+            $("#ring_value").val(event.target.value);
+            $(".ring-selection").removeClass("ring-selected");
+            $("." + event.target.dataset.ringid).addClass("ring-selected");
+        });
+
+        // Ring Add button
+        html.find("#ring_add").on("click", async (event) => {
+            this._quantityChange(event, "#ring_value", false);
+        });
+
+        // Ring Subtract button
+        html.find("#ring_sub").on("click", async (event) => {
+            this._quantityChange(event, "#ring_value", true);
+        });
+
+        // Skill Add button
+        html.find("#skill_add").on("click", async (event) => {
+            this._quantityChange(event, "#skill_value", false);
+        });
+
+        // Skill Subtract button
+        html.find("#skill_sub").on("click", async (event) => {
+            this._quantityChange(event, "#skill_value", true);
         });
 
         // Roll button
@@ -113,9 +217,9 @@ export class DicePickerDialog extends Application {
             event.preventDefault();
             event.stopPropagation();
 
-            const approach = html.find('input[name="approach"]:checked')[0].value || null;
+            const approach = $(html.find(".ring-selection.ring-selected > input")[0]).data("ringid") || null;
-            const ring = html.find('input[name="ring"]:checked')[0].value || null;
+            const ring = html.find("#ring_value")[0].value || null;
-            const skill = html.find('input[name="skill"]:checked')[0].value || null;
+            const skill = html.find("#skill_value")[0].value || null;
 
             if (!approach || !skill || !ring || (skill < 1 && ring < 1)) {
                 return false;
@@ -132,8 +236,8 @@ export class DicePickerDialog extends Application {
             const roll = await new RollL5r5e(formula.join("+"));
 
             roll.l5r5e.stance = approach;
-            roll.l5r5e.skillId = this.skillData.id;
+            roll.l5r5e.skillId = this._skillData.id;
-            roll.actor = this.actor;
+            roll.actor = this._actor;
 
             await roll.roll();
             await roll.toMessage();
@@ -142,39 +246,28 @@ export class DicePickerDialog extends Application {
 
         // Check if a stance is selected
         let selectedStance = "air";
-        if (this.actor) {
+        if (this._actor) {
-            ["air", "earth", "fire", "water", "void"].forEach((e) => {
+            DicePickerDialog.stances.forEach((e) => {
-                if (this.actor.data.data?.stances?.[e]?.isSelected?.value) {
+                if (this._actor.data.data?.stances?.[e]?.isSelected?.value) {
                     selectedStance = e;
                 }
             });
         }
-        html.find(`#approach_${selectedStance}`).trigger("click");
+        html.find(`.approach_${selectedStance}`).first().trigger("click");
-        html.find("#skill_" + this.skillData.value).trigger("click");
+        html.find("#skill_value").val(this._skillData.value);
     }
 
-    /**
+    _quantityChange(event, elmtSelector, isSubstract) {
-     * Load skill's required data from actor and skillId
+        event.preventDefault();
-     */
+        event.stopPropagation();
-    setSkillData(skillId) {
+        const elmt = $(elmtSelector);
-        if (!skillId) {
+        if (isSubstract) {
+            const val = parseInt(elmt.val()) - 1;
+            elmt.val(val >= 0 ? val : 0);
             return;
         }
-
+        const val = parseInt(elmt.val()) + 1;
-        this.skillData = {
+        elmt.val(val < 10 ? val : 9);
-            id: skillId.toLowerCase().trim(),
-            value: 0,
-            cat: "",
-            name: "",
-        };
-
-        const cat = RollL5r5e.getCategoryForSkillId(skillId);
-        if (!cat) {
-            return;
-        }
-        this.skillData.cat = cat;
-        this.skillData.name = game.i18n.localize("l5r5e.skills." + cat + "." + this.skillData.id);
-        this.skillData.value = this.actor?.data?.data?.skills[cat]?.[this.skillData.id].value || 0;
     }
 
     /**
@@ -182,11 +275,11 @@ export class DicePickerDialog extends Application {
      * @private
      */
     _getElements() {
-        return ["air", "earth", "fire", "water", "void"].map((e) => {
+        return DicePickerDialog.stances.map((e) => {
             return {
                 id: e,
                 label: game.i18n.localize(`l5r5e.rings.${e}`),
-                value: this.actor?.data?.data?.rings?.[e] || 0,
+                value: this._actor?.data?.data?.rings?.[e] || 0,
             };
         });
     }

system/scripts/dice/roll.js

@@ -45,7 +45,7 @@ export class RollL5r5e extends Roll {
     }
 
     set actor(actor) {
-        this.l5r5e.actor = (actor instanceof Actor && actor.owner) || null;
+        this.l5r5e.actor = actor instanceof Actor && actor.owner ? actor : null;
     }
 
     /**

system/styles/scss/dices.scss

@@ -18,11 +18,73 @@
     display: inline-block;
 }
 
+// Dice Picker
 .dice-picker-dialog {
-    .profil {
+    // Utility
-        float: left;
+    * {
+        transition: none;
     }
-    .dices {
+    input[type="text"]:focus,
-        float: right;
+    input[type="text"]:hover {
+        box-shadow: none !important;
+        border: none !important;
+        text-shadow: none !important;
+    }
+
+    img {
+        border: 0;
+    }
+    table {
+        .profil {
+            width: 200px;
+        }
+        .rings {
+            width: 240px;
+        }
+        .skill {
+            width: 200px;
+        }
+    }
+
+    // Approach choice
+    .ring-selection {
+        filter: contrast(10%);
+
+        &.ring-selected {
+            filter: drop-shadow(1px 1px 0 #151515);
+            //text-shadow: 1px 1px 0 #efefef;
+        }
+    }
+
+    .quantity {
+        font-size: xx-large;
+    }
+
+    .center {
+        text-align: center;
+    }
+    .third {
+        float: left;
+        width: 33.333333333%;
+    }
+    #ring_value {
+        width: 20px;
+        position: relative;
+        left: +34px;
+        top: -14px;
+        color: #f0f0e0;
+        background: none;
+        border: none;
+        font-size: large;
+    }
+    #skill_value {
+        width: 20px;
+        position: relative;
+        left: +34px;
+        top: -13px;
+        color: #0f0f0e;
+        background: none;
+        border: none;
+        font-size: large;
     }
 }

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

@@ -1,54 +1,80 @@
 <div class="l5r5e dice-picker-dialog">
 
-    <div class="form-group l5r5e profil">
-        <img class="profile-img" src="{{#if actor.img}}{{actor.img}}{{/if}}{{^if actor.img}}icons/svg/mystery-man.svg{{/if}}" data-edit="img" height="100" width="100">
-    </div>
-
     <form class="noflex l5r5e dices" autocomplete="off">
-        <div class="form-group">
+        <table>
-            <label>{{localize "l5r5e.approaches"}}:</label>
+            <tr>
-            <div class="form-fields">
+                <td class="profil center">
-                {{#each elementsList}}
+                    <img class="profile-img"
-                <input type="radio" id="approach_{{this.id}}" name="approach" value="{{this.id}}" data-dice="{{this.value}}">
+                         src="{{#if actor.img}}{{actor.img}}{{/if}}{{^if actor.img}}icons/svg/mystery-man.svg{{/if}}"
-                <label for="approach_{{this.id}}">
+                         data-edit="img"
-                    <i class="i_{{this.id}} {{this.id}}" title="{{this.label}}"></i>
+                         height="200"
-                </label>
+                         width="200"
-                {{/each}}
+                         alt="{{#if actor.name}}{{actor.name}}{{/if}}{{^if actor.name}}mystery-man{{/if}}"
-            </div>
+                    >
-        </div>
+                </td>
-        <hr>
+                <td class="rings center">
-        <div class="form-group">
+                    <ul class="rings">
-            <label><i class="d6"></i> {{localize "l5r5e.rings.title"}}:</label>
+                        {{#each elementsList}}
-            <div class="form-fields">
+                        <li id="{{this.id}}">
-                {{#each dicesList}}
+                            <label class="attribute-label {{this.id}} centered-input ring-selection">
-                <input type="radio" id="ring_{{this}}" name="ring" value="{{this}}">
+                                <i class="i_{{this.id}}"></i>
-                <label for="ring_{{this}}">
+                                <strong>{{this.label}}</strong>
-                    {{this}}
+                                <input class="centered-input approach_{{this.id}}"
-                </label>
+                                       type="text"
-                {{/each}}
+                                       name="approach"
-            </div>
+                                       data-ringid="{{this.id}}"
-        </div>
+                                       value="{{this.value}}"
-        <hr>
+                                       readonly="readonly"
-        <div class="form-group">
+                                />
-            <label><i class="d12"></i> {{localize "l5r5e.skills.title"}}:</label>
+                            </label>
-            <div class="form-fields">
+                        </li>
-                {{#each dicesList}}
+                        {{/each}}
-                <input type="radio" id="skill_{{this}}" name="skill" value="{{this}}">
+                    </ul>
-                <label for="skill_{{this}}">
+                </td>
-                    {{this}}
+                <td class="skill center">
-                </label>
+                    {{#if skillData.name}}
-                {{/each}}
+                    <label>{{skillData.name}} </label>
-            </div>
+
-        </div>
+                    {{skillData.value}}
+
+                    {{/if}}
+                </td>
+            </tr>
+            <tr>
+                <td class="center">
+                    <!--  TODO-->
+                    ND : {{difficulty}}
+                </td>
+                <td class="center">
+                    <div class="third">
+                        <i id="ring_sub" class="quantity fa fa-minus-square"></i>
+                    </div>
+                    <div class="third">
+                        <input id="ring_value" class="centered-input" type="text" name="ring" value="0"
+                               readonly="readonly">
+                        <img src="systems/l5r5e/assets/dices/default/ring_blank.png" alt="1">
+                    </div>
+                    <div class="third">
+                        <i id="ring_add" class="quantity fa fa-plus-square"></i>
+                    </div>
+                </td>
+                <td class="center">
+                    <div class="third">
+                        <i id="skill_sub" class="quantity fa fa-minus-square"></i>
+                    </div>
+                    <div class="third">
+                        <input id="skill_value" class="centered-input" type="text" name="skill"
+                               value="{{skillData.value}}" readonly="readonly">
+                        <img src="systems/l5r5e/assets/dices/default/skill_blank.png" alt="1">
+                    </div>
+                    <div class="third">
+                        <i id="skill_add" class="quantity fa fa-plus-square"></i>
+                    </div>
+                </td>
+            </tr>
+        </table>
 
-        {{#if skillData.name}}
-        <hr>
-        <div class="form-group">
-            <label><i class="d12"></i> {{skillData.value}} : {{skillData.name}} </label>
-        </div>
-        {{/if}}
 
-        <hr>
         <div class="form-group">
             <button name="roll">Roll <i class='fas fa-arrow-circle-right'></i></button>
         </div>