working on dice picker v2

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

@@ -30,7 +30,10 @@ export class DicePickerDialog extends Application {
     /**
      * Difficulty
      */
-    _difficulty = null;
+    _difficulty = {
+        difficulty: 2,
+        isHidden: false,
+    };
 
     /**
      * Assign the default options
@@ -43,11 +46,12 @@ export class DicePickerDialog extends Application {
             template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
             title: "L5R Dice Roller",
             width: 660,
-            height: 390,
+            height: 460,
             actor: null,
             ringId: null,
             skillId: "",
-            difficulty: null,
+            difficulty: 2,
+            difficultyHidden: false,
         });
     }
 
@@ -56,7 +60,7 @@ export class DicePickerDialog extends Application {
      *
      * ex: new game.l5r5e.DicePickerDialog({skillId: 'aesthetics', ringId: 'fire', actor: game.user.character}).render();
      *
-     * @param options actor, ringId, skillId, difficulty
+     * @param options actor, ringId, skillId, difficulty, difficultyHidden
      */
     constructor(options = null) {
         super(options);
@@ -82,6 +86,11 @@ export class DicePickerDialog extends Application {
         if (options?.difficulty) {
             this.difficulty = options.difficulty;
         }
+
+        // difficultyHidden
+        if (options?.difficultyHidden) {
+            this.difficultyHidden = options.difficultyHidden;
+        }
     }
 
     /**
@@ -126,7 +135,7 @@ export class DicePickerDialog extends Application {
     }
 
     /**
-     * Set Difficulty level
+     * Set Difficulty level (default 2)
      * @param difficulty
      */
     set difficulty(difficulty) {
@@ -134,7 +143,15 @@ export class DicePickerDialog extends Application {
         if (difficulty < 0) {
             difficulty = null;
         }
-        this._difficulty = difficulty;
+        this._difficulty.difficulty = difficulty;
+    }
+
+    /**
+     * Set if Difficulty is Hidden or not (default)
+     * @param isHidden
+     */
+    set difficultyHidden(isHidden) {
+        this._difficulty.isHidden = !!isHidden;
     }
 
     /**
@@ -158,6 +175,7 @@ export class DicePickerDialog extends Application {
             skillData: this._skillData,
             actor: this._actor,
             difficulty: this._difficulty,
+            canUseVoidPoint: !this._actor || this._actor.data.data.void_points.current > 0,
         };
     }
 
@@ -196,31 +214,71 @@ export class DicePickerDialog extends Application {
             );
         });
 
+        // ****************** DIFF ******************
+        // Difficulty - Add button
+        html.find("#diff_add").on("click", async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this._difficulty.difficulty = this._quantityChange("#diff_value", 1);
+        });
+
+        // Difficulty - Subtract button
+        html.find("#diff_sub").on("click", async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this._difficulty.difficulty = this._quantityChange("#diff_value", -1);
+        });
+
+        // Difficulty - hidden checkbox
+        html.find("#diff_hidden").on("click", async (event) => {
+            this._difficulty.isHidden = !this._difficulty.isHidden;
+            $("#difficulty_picker").toggle();
+        });
+
+        // ****************** RING ******************
         // Ring - Add button
         html.find("#ring_add").on("click", async (event) => {
-            this._quantityChange(event, "#ring_value", false);
+            event.preventDefault();
+            event.stopPropagation();
+            this._quantityChange("#ring_value", 1);
         });
 
         // Ring - Subtract button
         html.find("#ring_sub").on("click", async (event) => {
-            this._quantityChange(event, "#ring_value", true);
+            event.preventDefault();
+            event.stopPropagation();
+            this._quantityChange("#ring_value", -1);
         });
 
+        // Ring - Spend a Void point checkbox
+        html.find("#use_void_point").on("click", async (event) => {
+            this._quantityChange("#ring_value", event.target.checked ? 1 : -1);
+            html.find("#use_void_point").attr("checked", event.target.checked);
+        });
+
+        // ****************** SKILL ******************
         // Skill - Add button
         html.find("#skill_add").on("click", async (event) => {
-            this._quantityChange(event, "#skill_value", false);
+            event.preventDefault();
+            event.stopPropagation();
+            this._quantityChange("#skill_value", 1);
         });
 
         // Skill - Subtract button
         html.find("#skill_sub").on("click", async (event) => {
-            this._quantityChange(event, "#skill_value", true);
+            event.preventDefault();
+            event.stopPropagation();
+            this._quantityChange("#skill_value", -1);
         });
 
         // Skill - Default Dice div
         html.find("#skill_default_value").on("click", async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
             $("#skill_value").val(this._skillData.value);
         });
 
+        // ****************** ROLL ******************
         // Roll button
         html.find('button[name="roll"]').on("click", async (event) => {
             event.preventDefault();
@@ -242,38 +300,61 @@ export class DicePickerDialog extends Application {
                 formula.push(`${skill}ds`);
             }
 
-            // TODO update actor stance ? good idea or not, choice-able ?
+            // Update Actor
-            // this._actor.data.data.stance = approach;
+            if (this._actor) {
+                // TODO update actor stance ? good idea or not, choice-able ?
+                // this._actor.data.data.stance = approach;
+
+                // If Void point is used, minus the actor
+                if ($("#use_void_point").attr("checked")) {
+                    this._actor.data.data.void_points.current = Math.max(
+                        this._actor.data.data.void_points.current - 1,
+                        0
+                    );
+                }
+
+                // If hidden add void 1pt
+                if (this._difficulty.isHidden) {
+                    this._actor.data.data.void_points.current = Math.min(
+                        this._actor.data.data.void_points.current + 1,
+                        this._actor.data.data.void_points.max
+                    );
+                }
+            }
 
             // Let's roll !
             const roll = await new RollL5r5e(formula.join("+"));
 
+            roll.actor = this._actor;
             roll.l5r5e.stance = approach;
             roll.l5r5e.skillId = this._skillData.id;
-            roll.actor = this._actor;
+            roll.l5r5e.summary.difficulty = this._difficulty.difficulty;
+            roll.l5r5e.summary.difficultyHidden = this._difficulty.isHidden;
 
             await roll.roll();
             await roll.toMessage();
             await this.close();
         });
 
+        // ****************** INIT ******************
+        // Select current actor's stance
         html.find(`.approach_${this._actor ? this._actor.data.data.stance : "void"}`)
             .first()
             .trigger("click");
+
+        // Set skill point
         html.find("#skill_value").val(this._skillData.value);
     }
 
-    _quantityChange(event, elmtSelector, isSubstract) {
+    /**
-        event.preventDefault();
+     * Change quantity between 0-9 on the element, and return the new value
-        event.stopPropagation();
+     * @private
+     */
+    _quantityChange(elmtSelector, add) {
         const elmt = $(elmtSelector);
-        if (isSubstract) {
+        const value = Math.max(Math.min(parseInt(elmt.val()) + add, 9), 0);
-            const val = parseInt(elmt.val()) - 1;
+        elmt.val(value);
-            elmt.val(val >= 0 ? val : 0);
+        return value;
-            return;
-        }
-        const val = parseInt(elmt.val()) + 1;
-        elmt.val(val < 10 ? val : 9);
     }
 
     /**

system/scripts/dice/roll.js

@@ -23,6 +23,7 @@ export class RollL5r5e extends Roll {
             },
             summary: {
                 difficulty: 0,
+                difficultyHidden: false,
                 success: 0,
                 explosive: 0,
                 opportunity: 0,
@@ -215,10 +216,7 @@ export class RollL5r5e extends Roll {
             l5r5e: isPrivate
                 ? {}
                 : {
-                      stance: this.l5r5e.stance,
+                      ...this.l5r5e,
-                      skillName: skillName,
-                      dicesTypes: this.l5r5e.dicesTypes,
-                      summary: this.l5r5e.summary,
                       dices: this.dice.map((d) => {
                           return {
                               diceTypeL5r: d instanceof L5rBaseDie,

system/scripts/main-l5r5e.js

@@ -66,16 +66,16 @@ Hooks.once("init", async function () {
         return new Handlebars.SafeString(objects.map((e) => `<textarea>${JSON.stringify(e)}</textarea>`));
     });
 
-    Handlebars.registerHelper("localizeSkillCategory", function (skillName) {
-        const key = "l5r5e.skills." + skillName.toLowerCase() + ".title";
-        return game.i18n.localize(key);
-    });
-
     // Add props "checked" if a and b are equal ({{radioChecked a b}}
     Handlebars.registerHelper("radioChecked", function (a, b) {
         return a === b ? new Handlebars.SafeString('checked="checked"') : "";
     });
 
+    Handlebars.registerHelper("localizeSkillCategory", function (skillName) {
+        const key = "l5r5e.skills." + skillName.toLowerCase() + ".title";
+        return game.i18n.localize(key);
+    });
+
     Handlebars.registerHelper("localizeSkill", function (skillCategory, skillName) {
         const key = "l5r5e.skills." + skillCategory.toLowerCase() + "." + skillName.toLowerCase();
         return game.i18n.localize(key);

system/styles/scss/dices.scss

@@ -18,6 +18,25 @@
     display: inline-block;
 }
 
+.chat-profil {
+    text-align: center;
+    vertical-align: middle;
+
+    &-stance {
+        font-size: 40px;
+        position: relative;
+        top: 8px;
+    }
+    &-element {
+        flex-wrap: wrap;
+        flex-grow: 1;
+
+        &-skill {
+            flex-grow: 3;
+        }
+    }
+}
+
 // Dice Picker
 .dice-picker-dialog {
     // Utility
@@ -80,6 +99,11 @@
     .dice-container {
         position: relative;
         text-align: center;
+
+        & > img {
+            height: 40px;
+            width: 40px;
+        }
     }
 
     .dice-value {
@@ -89,19 +113,19 @@
         transform: translate(-50%, -50%);
     }
 
-    .dice-ring {
+    .input-dice {
-        width: 20px;
-        color: #f0f0e0;
-        background: none;
-        border: none;
-        font-size: large;
-    }
-
-    .dice-skill {
         width: 20px;
         color: #0f0f0e;
         background: none;
         border: none;
         font-size: large;
+
+        &-ring {
+            color: #f0f0e0;
+        }
+
+        &-skill {
+            color: #0f0f0e;
+        }
     }
 }

system/templates/dice/chat-roll.html

@@ -1,14 +1,37 @@
 <div class="l5r5e dice-roll">
     {{#if isPublicRoll }}
 
-    <div class="l5r5e dice-formula">{{formula}}</div>
-
     {{#if l5r5e.stance}}
-    <div class="l5r5e dice-stance">
+    <div class="l5r5e profil">
-        <i class="i_{{l5r5e.stance}}"></i> {{l5r5e.skillName}}
+        <header class="part-header flexrow chat-profil">
+            <span class="chat-profil-element">
+                <img class="profile-img"
+                     src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{/if}}{{^if l5r5e.actor.img}}icons/svg/mystery-man.svg{{/if}}"
+                     data-edit="img"
+                     height="40"
+                     width="40"
+                     alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{/if}}{{^if l5r5e.actor.name}}mystery-man{{/if}}"
+                >
+            </span>
+
+            <span class="chat-profil-element">
+                <i class="chat-profil-stance i_{{l5r5e.stance}}" title="{{localizeRing l5r5e.stance}}"></i>
+            </span>
+
+            <span class="chat-profil-element-skill">
+                {{#if l5r5e.skillId}}{{localizeSkillId l5r5e.skillId}}{{/if}}
+            </span>
+
+            <span class="chat-profil-element">
+                {{#if l5r5e.summary.difficultyHidden}}ND cachée{{/if}}
+                {{^if l5r5e.summary.difficultyHidden}}ND {{l5r5e.summary.difficulty}}{{/if}}
+            </span>
+        </header>
     </div>
     {{/if}}
 
+    <div class="l5r5e dice-formula">{{formula}}</div>
+
     <div class="l5r5e dice-result">
 
         {{#if l5r5e.dicesTypes.l5r}}

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

@@ -1,5 +1,6 @@
 <form class="l5r5e dice-picker-dialog" autocomplete="off">
     <table>
+        <!-- First line-->
         <tr>
             <td class="profil center">
                 <img class="profile-img"
@@ -58,11 +59,43 @@
                 {{/if}}
             </td>
         </tr>
+
+        <!-- Second line-->
         <tr>
             <td>
-                <!-- TODO -->
+                {{localize "l5r5e.chatdices.difficulty"}}
-                ND : {{difficulty}}
             </td>
+            <td>
+                {{localize "l5r5e.rings.title"}}
+            </td>
+            <td>
+                {{localize "l5r5e.skills.title"}}
+            </td>
+        </tr>
+
+        <!-- Third line-->
+        <tr>
+            <td>
+                <div id="difficulty_picker">
+                    <div class="third">
+                        <i id="diff_sub" class="quantity pointer-choice fa fa-minus-square"></i>
+                    </div>
+
+                    <div class="third">
+                        <div class="dice-container">
+                            <img src="systems/l5r5e/assets/dices/default/3d/blank.png" alt="1">
+                            <div class="dice-value">
+                                <input id="diff_value" class="input-dice" type="text" name="diff" value="{{difficulty.difficulty}}" readonly="readonly">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="third">
+                        <i id="diff_add" class="quantity pointer-choice fa fa-plus-square"></i>
+                    </div>
+                </div>
+            </td>
+
             <td>
                 <div class="third">
                     <i id="ring_sub" class="quantity pointer-choice fa fa-minus-square"></i>
@@ -72,7 +105,7 @@
                     <div class="dice-container">
                         <img src="systems/l5r5e/assets/dices/default/ring_blank.png" alt="1">
                         <div class="dice-value">
-                            <input id="ring_value" class="dice-ring" type="text" name="ring" value="0" readonly="readonly">
+                            <input id="ring_value" class="input-dice input-dice-ring" type="text" name="ring" value="0" readonly="readonly">
                         </div>
                     </div>
                 </div>
@@ -81,6 +114,7 @@
                     <i id="ring_add" class="quantity pointer-choice fa fa-plus-square"></i>
                 </div>
             </td>
+
             <td>
                 <div class="third">
                     <i id="skill_sub" class="quantity pointer-choice fa fa-minus-square"></i>
@@ -90,7 +124,7 @@
                     <div class="dice-container">
                         <img src="systems/l5r5e/assets/dices/default/skill_blank.png" alt="1">
                         <div class="dice-value">
-                            <input id="skill_value" class="dice-skill" type="text" name="skill" value="{{skillData.value}}" readonly="readonly">
+                            <input id="skill_value" class="input-dice input-dice-skill" type="text" name="skill" value="{{skillData.value}}" readonly="readonly">
                         </div>
                     </div>
                 </div>
@@ -100,8 +134,30 @@
                 </div>
             </td>
         </tr>
-    </table>
 
+        <!-- Fourth line -->
+        <tr>
+            <td>
+                <input type="checkbox" id="diff_hidden" name="diff_hidden" value="1">
+                <label for="diff_hidden">
+                    <!-- TODO lang-->
+                    Cachée
+                </label>
+            </td>
+            <td>
+                {{#if canUseVoidPoint}}
+                    <input type="checkbox" id="use_void_point" name="diff_hidden" value="1">
+                    <label for="use_void_point">
+                        <!-- TODO lang-->
+                        Dépenser un point de Vide
+                    </label>
+                {{/if}}
+            </td>
+            <td>
+            </td>
+        </tr>
+
+    </table>
 
     <div class="form-group">
         <button name="roll">Roll <i class='fas fa-arrow-circle-right'></i></button>