working on RnK

system/lang/en-en.json

@@ -84,7 +84,10 @@
             "dicepicker": "Dice Picker",
             "void_point_used": "Void point used",
             "roll_n_keep": "Roll & Keep",
-            "initiative_roll": "Initiative roll"
+            "initiative_roll": "Initiative roll",
+            "success_text": "Success!",
+            "bonus_text": "bonus successes",
+            "fail_text": "Fail!"
         },
         "dicepicker": {
             "difficulty_title": "Difficulty",
@@ -99,6 +102,7 @@
             "discard_drop_here": "Discard",
             "reroll_drop_here": "Re-roll",
             "reroll_chat": "Re-rolled dice",
+            "swap_drop_here": "Swap",
             "keep_drop_here": "Keep",
             "keep_chat": "New roll from an exploding die",
             "bt_validate": "Finalize"

system/lang/es-es.json

@@ -84,7 +84,10 @@
             "dicepicker": "Dice Picker",
             "void_point_used": "Punto de vacío utilizado",
             "roll_n_keep": "Tirar y guardar",
-            "initiative_roll": "Tirada de Iniciativa"
+            "initiative_roll": "Tirada de Iniciativa",
+            "success_text": "Éxitos!",
+            "bonus_text": "bonus successes",
+            "fail_text": "Fail!"
         },
         "dicepicker": {
             "difficulty_title": "Dificultad",
@@ -99,6 +102,7 @@
             "discard_drop_here": "Descartar",
             "reroll_drop_here": "Relanzar",
             "reroll_chat": "Dados relanzados",
+            "swap_drop_here": "Swap",
             "keep_drop_here": "Guardar",
             "keep_chat": "Nueva tirada de un dado relanzable",
             "bt_validate": "Finalizar"

system/lang/fr-fr.json

@@ -84,7 +84,10 @@
             "dicepicker": "Dice Picker",
             "void_point_used": "Point de vide utilisé",
             "roll_n_keep": "Roll & Keep",
-            "initiative_roll": "Jet d'initiative"
+            "initiative_roll": "Jet d'initiative",
+            "success_text": "Succès !",
+            "bonus_text": "succès bonus",
+            "fail_text": "Échec !"
         },
         "dicepicker": {
             "difficulty_title": "Difficulté",
@@ -99,6 +102,7 @@
             "discard_drop_here": "Discard",
             "reroll_drop_here": "Re-roll",
             "reroll_chat": "Re-rolled dice",
+            "swap_drop_here": "Swap",
             "keep_drop_here": "Keep",
             "keep_chat": "New roll from a exploding dice",
             "bt_validate": "Finalize"

system/scripts/combat.js

@@ -101,7 +101,7 @@ export class CombatL5r5e extends Combat {
 
                 // if the character succeeded on their Initiative check, they add 1 to their base initiative value,
                 // plus an additional amount equal to their bonus successes.
-                const successes = Math.min(roll.l5r5e.summary.ringsUsed, roll.l5r5e.summary.success);
+                const successes = Math.min(roll.l5r5e.summary.ringsUsed, roll.l5r5e.summary.totalSuccess);
                 if (successes >= roll.l5r5e.summary.difficulty) {
                     initiative = initiative + 1 + Math.max(successes - roll.l5r5e.summary.difficulty, 0);
                 }

system/scripts/dice/dietype/ability-die.js

@@ -18,8 +18,8 @@ export class AbilityDie extends L5rBaseDie {
         8: { success: 1, explosive: 0, opportunity: 0, strife: 0, image: "skill_s" },
         9: { success: 1, explosive: 0, opportunity: 0, strife: 0, image: "skill_s" },
         10: { success: 1, explosive: 0, opportunity: 1, strife: 0, image: "skill_so" },
-        11: { success: 1, explosive: 1, opportunity: 0, strife: 1, image: "skill_et" },
+        11: { success: 0, explosive: 1, opportunity: 0, strife: 1, image: "skill_et" },
-        12: { success: 1, explosive: 1, opportunity: 0, strife: 0, image: "skill_e" },
+        12: { success: 0, explosive: 1, opportunity: 0, strife: 0, image: "skill_e" },
     };
 
     /** @override */

system/scripts/dice/dietype/l5r-base-die.js

@@ -14,6 +14,14 @@ export class L5rBaseDie extends DiceTerm {
         this.l5r5e = { success: 0, explosive: 0, opportunity: 0, strife: 0 };
     }
 
+    /**
+     * Return the total number of success + explosives
+     * @returns {number}
+     */
+    get totalSuccess() {
+        return this.l5r5e.success + this.l5r5e.explosive;
+    }
+
     /**
      * Return a standardized representation for the displayed formula associated with this DiceTerm
      * @override

system/scripts/dice/dietype/ring-die.js

@@ -13,7 +13,7 @@ export class RingDie extends L5rBaseDie {
         3: { success: 0, explosive: 0, opportunity: 1, strife: 0, image: "ring_o" },
         4: { success: 1, explosive: 0, opportunity: 0, strife: 1, image: "ring_st" },
         5: { success: 1, explosive: 0, opportunity: 0, strife: 0, image: "ring_s" },
-        6: { success: 1, explosive: 1, opportunity: 0, strife: 1, image: "ring_et" },
+        6: { success: 0, explosive: 1, opportunity: 0, strife: 1, image: "ring_et" },
     };
 
     /** @override */

system/scripts/dice/roll-n-keep-dialog.js

@@ -8,11 +8,11 @@ export class RollnKeepDialog extends FormApplication {
      */
     static CHOICES = {
         discard: "discard",
-        face_change: "face-change",
         keep: "keep",
         nothing: null,
         reroll: "reroll",
-        reserve: "reserve",
+        // reserve: "reserve",
+        swap: "swap",
     };
 
     /**
@@ -21,10 +21,22 @@ export class RollnKeepDialog extends FormApplication {
      */
     message = null;
 
+    /**
+     * The current Roll
+     * @param {Roll} roll
+     */
+    roll = null;
+
     /**
      * Payload Object
      */
     object = {
+        currentStep: 0,
+        submitDisabled: true,
+        swapDiceFaces: {
+            rings: [],
+            skills: [],
+        },
         dicesList: [[]],
     };
 
@@ -39,7 +51,7 @@ export class RollnKeepDialog extends FormApplication {
             template: CONFIG.l5r5e.paths.templates + "dice/roll-n-keep-dialog.html",
             title: game.i18n.localize("l5r5e.roll_n_keep.title"),
             width: 660,
-            height: 660,
+            height: 454,
         });
     }
 
@@ -52,13 +64,19 @@ export class RollnKeepDialog extends FormApplication {
 
     /**
      * Create the Roll n Keep dialog
-     * @param {ChatMessage} message
+     * @param {number} messageId
      * @param {FormApplicationOptions} options
      */
-    constructor(message, options = {}) {
+    constructor(messageId, options = {}) {
+        console.clear(); // TODO TMP
+
         super({}, options);
-        this.message = message;
+        this.message = game.messages.get(messageId);
+        this.options.editable = this.message?._roll.l5r5e.actor.owner || false;
+        this._initializeDiceFaces();
         this._initialize();
+
+        console.log(this.object); // TODO TMP
     }
 
     /**
@@ -72,25 +90,41 @@ export class RollnKeepDialog extends FormApplication {
         this.render(false);
     }
 
+    /**
+     * Render
+     * @param {boolean} force
+     * @param  {RenderOptions} options
+     * @returns {Application}
+     * @override
+     */
+    render(force = null, options = {}) {
+        if (!this.message) {
+            return;
+        }
+        return super.render(force, options);
+    }
+
     /**
      * Initialize the dialog with the message
      * @private
      */
     _initialize() {
-        // Get the roll
+        if (!this.message) {
-        const roll = game.l5r5e.RollL5r5e.fromData(this.message.roll);
+            return;
+        }
 
-        console.clear();
+        // Get the roll
-        console.log(roll); // TODO TMP
+        this.roll = game.l5r5e.RollL5r5e.fromData(this.message.roll);
 
         // Already history
-        if (Array.isArray(roll.l5r5e.history)) {
+        if (Array.isArray(this.roll.l5r5e.history)) {
-            this.object.dicesList = roll.l5r5e.history;
+            this.object.currentStep = this.roll.l5r5e.history.length;
+            this.object.dicesList = this.roll.l5r5e.history;
             return;
         }
 
         // New
-        roll.terms.forEach((term) => {
+        this.roll.terms.forEach((term) => {
             if (typeof term !== "object") {
                 return;
             }
@@ -98,7 +132,6 @@ export class RollnKeepDialog extends FormApplication {
                 this.object.dicesList[0].push({
                     type: term.constructor.name,
                     face: res.result,
-                    explosive: term.constructor.FACES[res.result].explosive,
                     img: term.constructor.getResultSrc(res.result),
                     choice: RollnKeepDialog.CHOICES.nothing,
                 });
@@ -106,6 +139,22 @@ export class RollnKeepDialog extends FormApplication {
         });
     }
 
+    /**
+     * Fill the dices faces
+     * @private
+     */
+    _initializeDiceFaces() {
+        // All faces are unique for rings
+        this.object.swapDiceFaces.rings = Object.keys(game.l5r5e.RingDie.FACES).map((id) => {
+            return { id, img: game.l5r5e.RingDie.getResultSrc(id) };
+        });
+
+        // Only unique for Skills
+        this.object.swapDiceFaces.skills = [1, 3, 6, 8, 10, 11, 12].map((id) => {
+            return { id, img: game.l5r5e.AbilityDie.getResultSrc(id) };
+        });
+    }
+
     /**
      * Create drag-and-drop workflow handlers for this Application
      * @return An array of DragDrop handlers
@@ -142,19 +191,13 @@ export class RollnKeepDialog extends FormApplication {
      * @return {Object}
      */
     getData(options = null) {
-        const draggableList = [];
+        // Check only on 1st step
-        this.object.dicesList.forEach((step, idx) => {
+        const kept = this.object.currentStep === 0 ? this._getKeepCount() : 1;
-            step.forEach((die, dieNum) => {
+        this.object.submitDisabled = kept < 1 || kept > this.roll.l5r5e.summary.ringsUsed;
-                if (die) {
-                    draggableList[dieNum] = idx;
-                }
-            });
-        });
 
         return {
             ...super.getData(options),
             data: this.object,
-            draggableList: draggableList,
             l5r5e: this.message._roll.l5r5e,
         };
     }
@@ -166,11 +209,16 @@ export class RollnKeepDialog extends FormApplication {
     activateListeners(html) {
         super.activateListeners(html);
 
+        // *** Everything below here is only needed if the sheet is editable ***
+        if (!this.options.editable) {
+            return;
+        }
+
         // Finalize Button
         html.find("#finalize").on("click", (event) => {
             event.preventDefault();
             event.stopPropagation();
-            if (this._getKeepCount() > 0) {
+            if (!this.object.submitDisabled) {
                 this.submit();
             }
         });
@@ -180,6 +228,11 @@ export class RollnKeepDialog extends FormApplication {
      * Handle dropped items
      */
     async _onDropItem(event) {
+        // *** Everything below here is only needed if the sheet is editable ***
+        if (!this.options.editable) {
+            return;
+        }
+
         const type = $(event.currentTarget).data("type");
         const json = event.dataTransfer.getData("text/plain");
         if (!json || !Object.values(RollnKeepDialog.CHOICES).some((e) => !!e && e === type)) {
@@ -191,31 +244,27 @@ export class RollnKeepDialog extends FormApplication {
             return;
         }
 
-        let addNewRoll = false;
         const current = this.object.dicesList[data.step][data.die];
-        current.choice = type;
+        delete current.newFace;
 
-        // Actions p 26 : change, ignore/discard, reroll, reserve, change face
+        // FaceSwap
-        switch (type) {
+        if (type === RollnKeepDialog.CHOICES.swap) {
-            case RollnKeepDialog.CHOICES.keep:
+            // Dice Type Ring/Skill
-                if (current.explosive) {
+            const diceType = $(event.currentTarget).data("die");
-                    addNewRoll = true;
+            const diceNewFace = $(event.currentTarget).data("face");
-                }
-                break;
 
-            case RollnKeepDialog.CHOICES.reroll:
+            if (current.type !== diceType || current.face === diceNewFace) {
-                addNewRoll = true;
+                current.choice = RollnKeepDialog.CHOICES.nothing;
-                break;
+                this.render(false);
-        }
+                return false;
-
-        // New roll
-        if (addNewRoll) {
-            if (!this.object.dicesList[data.step + 1]) {
-                this.object.dicesList[data.step + 1] = Array(this.object.dicesList[0].length).fill(null);
             }
-            this.object.dicesList[data.step + 1][data.die] = await this._newRoll(current.type, type);
+
+            current.newFace = diceNewFace;
         }
 
+        current.choice = type;
+        current.img = game.l5r5e[current.type].getResultSrc(current.newFace ?? current.face);
+
         this.render(false);
         return false;
     }
@@ -242,7 +291,6 @@ export class RollnKeepDialog extends FormApplication {
         return {
             type: dieType,
             face: result,
-            explosive: dice.constructor.FACES[result].explosive,
             img: dice.constructor.getResultSrc(result),
             choice: RollnKeepDialog.CHOICES.nothing,
         };
@@ -257,7 +305,14 @@ export class RollnKeepDialog extends FormApplication {
             return (
                 acc +
                 step.reduce((acc2, die) => {
-                    if (!!die && die.choice === RollnKeepDialog.CHOICES.keep) {
+                    if (
+                        !!die &&
+                        [
+                            RollnKeepDialog.CHOICES.keep,
+                            RollnKeepDialog.CHOICES.reroll,
+                            RollnKeepDialog.CHOICES.swap,
+                        ].includes(die.choice)
+                    ) {
                         acc2 = acc2 + 1;
                     }
                     return acc2;
@@ -274,8 +329,55 @@ export class RollnKeepDialog extends FormApplication {
      * @override
      */
     async _updateObject(event, formData) {
+        // *** Everything below here is only needed if the sheet is editable ***
+        if (!this.options.editable) {
+            return;
+        }
+
         console.log("**** _updateObject");
 
+        console.log(this.object.dicesList);
+
+        // Actions p 26 : change, ignore/discard, reroll, reserve, change face
+        // let addNewRoll = false;
+        // switch (type) {
+        //     case RollnKeepDialog.CHOICES.keep:
+        //         // current.explosive = term.constructor.FACES[current.face / newFace].explosive
+        //         if (current.explosive) {
+        //             addNewRoll = true;
+        //         }
+        //         break;
+        //
+        //     case RollnKeepDialog.CHOICES.reroll:
+        //         addNewRoll = true;
+        //         break;
+        // }
+        //
+        // // New roll
+        // if (addNewRoll) {
+        //     if (!this.object.dicesList[data.step + 1]) {
+        //         this.object.dicesList[data.step + 1] = Array(this.object.dicesList[0].length).fill(null);
+        //     }
+        //     this.object.dicesList[data.step + 1][data.die] = await this._newRoll(current.type, type);
+        // }
+
+        // if (isInitiativeRoll) {
+        //     // Initiative roll
+        //     this._actor.rollInitiative({
+        //         initiativeOptions: {
+        //             formula: formula.join("+"),
+        //             // updateTurn: true,
+        //             messageOptions: {
+        //                 skillId: this.object.skill.id,
+        //                 difficulty: this.object.difficulty.value,
+        //                 difficultyHidden: this.object.difficulty.hidden,
+        //                 useVoidPoint: this.object.useVoidPoint,
+        //                 rerollInitiative: true,
+        //             },
+        //         },
+        //     });
+        // } else {}
+
         // Notify the change to other players
         // game.l5r5e.sockets.refreshAppId(this.id);
 
@@ -315,14 +417,8 @@ export class RollnKeepDialog extends FormApplication {
         button.attr("disabled", true);
         const card = button.parents(".l5r5e.item-display.dices-l5r");
         const messageId = card.parents(".chat-message").data("message-id");
-        const message = game.messages.get(messageId);
 
-        // Validate permission to proceed with the roll n keep
+        new RollnKeepDialog(messageId).render(true);
-        if (!message || !message._roll.l5r5e.actor.owner) {
-            return;
-        }
-
-        new RollnKeepDialog(message).render(true);
 
         // Re-enable the button
         button.attr("disabled", false);

system/scripts/dice/roll.js

@@ -22,6 +22,8 @@ export class RollL5r5e extends Roll {
                 difficultyHidden: false,
                 voidPointUsed: false,
                 ringsUsed: 0,
+                totalSuccess: 0,
+                totalBonus: 0,
                 success: 0,
                 explosive: 0,
                 opportunity: 0,
@@ -40,8 +42,6 @@ export class RollL5r5e extends Roll {
                 this.l5r5e.skillId = res[2];
             }
         });
-
-        // TODO parse difficulty stance skillId from cmd line ?
     }
 
     set actor(actor) {
@@ -81,6 +81,7 @@ export class RollL5r5e extends Roll {
             (term) => term instanceof DiceTerm && !(term instanceof game.l5r5e.L5rBaseDie)
         ); // ignore math symbols
         this.l5r5e.dicesTypes.l5r = this.dice.some((term) => term instanceof game.l5r5e.L5rBaseDie);
+        this.l5r5e.summary.totalBonus = Math.max(0, this.l5r5e.summary.totalSuccess - this.l5r5e.summary.difficulty);
         this.l5r5e.summary.ringsUsed = this.dice.reduce(
             (acc, term) => (term instanceof game.l5r5e.RingDie ? acc + term.number : acc),
             0
@@ -103,6 +104,8 @@ export class RollL5r5e extends Roll {
         ["success", "explosive", "opportunity", "strife"].forEach((props) => {
             this.l5r5e.summary[props] += parseInt(term.l5r5e[props]);
         });
+        this.l5r5e.summary.totalSuccess += term.totalSuccess;
+
         // TODO Others advantage/disadvantage
     }
 
@@ -204,13 +207,6 @@ export class RollL5r5e extends Roll {
             this.roll();
         }
 
-        const canRnK = false; // TODO TMP dev in progress
-        // const canRnK = !this.l5r5e.dicesTypes.std
-        //     && this.l5r5e.dicesTypes.l5r
-        //     && this.dice.length > 1
-        //     && this.l5r5e.actor // pb with dice with no actor
-        //     && this.l5r5e.actor.owner;
-
         // Define chat data
         const chatData = {
             formula: isPrivate ? "???" : this._formula,
@@ -224,7 +220,6 @@ export class RollL5r5e extends Roll {
                 ? {}
                 : {
                       ...this.l5r5e,
-                      canRnK: canRnK,
                       dices: this.dice.map((d) => {
                           return {
                               diceTypeL5r: d instanceof game.l5r5e.L5rBaseDie,

system/styles/scss/dices.scss

@@ -162,6 +162,10 @@
     .dropbox {
         min-height: 100px;
 
+        &.faces-change {
+            min-height: 40px;
+            margin: auto;
+        }
         &.discards {
             border: 1px solid gray;
         }
@@ -189,6 +193,9 @@
     .keep {
         border: 3px solid green;
     }
+    .swap {
+        border: 3px solid fuchsia;
+    }
 }
 
 #l5r5e-gm-tools-dialog {

system/templates/dice/chat-roll.html

@@ -1,5 +1,5 @@
 <div class="l5r5e dice-roll">
-    {{#if isPublicRoll }}
+    {{#if isPublicRoll}}
 
     {{#if l5r5e.stance}}
     <div class="l5r5e profil">
@@ -45,6 +45,7 @@
     <div class="l5r5e dice-result">
         {{#if l5r5e.dicesTypes.l5r}}
         <div class="l5r5e item-display dices-l5r">
+            {{!-- Dices list --}}
             {{#each l5r5e.dices}}
             {{#if this.diceTypeL5r}}
             {{#each this.rolls}}
@@ -54,30 +55,41 @@
             {{/each}}
 
             {{!-- Roll & Keep Button --}}
-            {{#if l5r5e.canRnK}}
             <button class="l5r5e chat-dice-rnk">{{localize "l5r5e.chatdices.roll_n_keep"}}</button>
-            {{/if}}
 
             {{#l5r5e.summary}}
-            <ul>
+            {{!-- summary symbols --}}
-                <li>{{localize "l5r5e.chatdices.successes"}}: {{this.success}}</li>
+            <div>
+                {{#if success}}
+                    <i class="i_success" title="{{localize "l5r5e.chatdices.successes"}}"></i> {{success}}
+                {{/if}}
 
                 {{#if explosive}}
-                <li>{{localize "l5r5e.chatdices.explosives"}}: {{this.explosive}}</li>
+                    <i class="i_explosive" title="{{localize "l5r5e.chatdices.explosives"}}"></i> {{explosive}}
                 {{/if}}
 
                 {{#if opportunity}}
-                <li>{{localize "l5r5e.chatdices.opportunities"}}: {{this.opportunity}}</li>
+                    <i class="i_opportunity" title="{{localize "l5r5e.chatdices.opportunities"}}"></i> {{opportunity}}
                 {{/if}}
 
                 {{#if strife}}
-                <li>{{localize "l5r5e.chatdices.strife"}}: {{this.strife}}</li>
+                    <i class="i_strife" title="{{localize "l5r5e.chatdices.strife"}}"></i> {{strife}}
                 {{/if}}
-            </ul>
+            </div>
+
+            {{!-- Result text --}}
+            <div>
+                {{#ifCond totalSuccess '>=' difficulty}}
+                    {{localize "l5r5e.chatdices.success_text"}} ({{totalBonus}} {{localize "l5r5e.chatdices.bonus_text"}})
+                {{else}}
+                    {{localize "l5r5e.chatdices.fail_text"}}
+                {{/ifCond}}
+            </div>
             {{/l5r5e.summary}}
         </div>
         {{/if}}
 
+        {{!-- Regular dices --}}
         {{#if l5r5e.dicesTypes.std}}
         <div class="l5r5e dices-std">
             {{#each results}}
@@ -90,7 +102,6 @@
         {{{tooltip}}}
         <h4 class="l5r5e dice-total dice-total-std">{{total}}</h4>
         {{/if}}
-
     </div>
 
     {{/if}}

system/templates/dice/roll-n-keep-dialog.html

@@ -1,5 +1,4 @@
 <form class="l5r5e roll-n-keep-dialog" autocomplete="off">
-
     {{!-- Profil --}}
     <div class="l5r5e profil">
         <header class="part-header flexrow chat-profil">
@@ -38,53 +37,116 @@
         </header>
     </div>
 
-    {{!-- Discard & ReRoll --}}
+    {{!-- Body --}}
-    <table>
+    {{#if options.editable}}
-        <tr>
+        <table>
-            <td>
+            <tr>
-                <fieldset class="dropbox discards" data-type="discard">
+                {{!-- Face Rings --}}
-                    <legend class="section-header"><i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.discard_drop_here' }}</legend>
+                <td>
-                </fieldset>
+                    <legend class="section-header">
-            </td>
+                        <i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.swap_drop_here' }}
-            <td>
+                    </legend>
-                &nbsp;
-            </td>
-            <td>
-                <fieldset class="dropbox rerolls" data-type="reroll">
-                    <legend class="section-header"><i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.reroll_drop_here' }}</legend>
-                </fieldset>
-            </td>
-        </tr>
-    </table>
 
-    {{!-- DiceList history --}}
+                    {{#each data.swapDiceFaces.rings}}
-    <table>
+                        <div class="dice dropbox faces-change" data-type="swap" data-face="{{id}}" data-die="RingDie">
-        {{#each data.dicesList as |item idxStep|}}
+                            <img src="{{img}}" alt="{{id}}" />
-        <tr>
+                        </div>
-            {{#each item as |dice idxDie|}}
+                    {{/each}}
-            <td>
+                </td>
-                <div class="dice {{this.choice}} {{#ifCond (lookup ../../draggableList idxDie) '==' idxStep }}draggable{{/ifCond}}" data-step="{{idxStep}}" data-die="{{idxDie}}">
+
-                    {{#if this.img}}
+                {{!-- Center --}}
-                    <img src="{{this.img}}" alt="{{idxStep}}_{{idxDie}}" />
+                <td>
-                    {{/if}}
+                    {{!-- Discard & ReRoll --}}
-                </div>
+                    <table>
-            </td>
+                        <tr>
+                            <td>
+                                <fieldset class="dropbox discards" data-type="discard">
+                                    <legend class="section-header">
+                                        <i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.discard_drop_here' }}
+                                    </legend>
+                                </fieldset>
+                            </td>
+                            <td>&nbsp;</td>
+                            <td>
+                                <fieldset class="dropbox rerolls" data-type="reroll">
+                                    <legend class="section-header">
+                                        <i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.reroll_drop_here' }}
+                                    </legend>
+                                </fieldset>
+                            </td>
+                        </tr>
+                    </table>
+
+                    {{!-- DiceList history --}}
+                    <table>
+                        {{#each data.dicesList as |item idxStep|}}
+                        <tr>
+                            {{#each item as |dice idxDie|}}
+                            <td>
+                                <div
+                                    class="dice {{this.choice}} {{#ifCond ../../data.currentStep '==' idxStep }}draggable{{/ifCond}}"
+                                    data-step="{{idxStep}}"
+                                    data-die="{{idxDie}}"
+                                >
+                                    {{#if this.img}}
+                                    <img src="{{this.img}}" alt="{{idxStep}}_{{idxDie}}" />
+                                    {{/if}}
+                                </div>
+                            </td>
+                            {{/each}}
+                        </tr>
+                        {{/each}}
+                    </table>
+
+                    {{!-- Keep --}}
+                    <table>
+                        <tr>
+                            <td>
+                                <fieldset class="dropbox keeps" data-type="keep">
+                                    <legend class="section-header">
+                                        <i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.keep_drop_here' }}
+                                    </legend>
+                                </fieldset>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+
+                {{!-- Face Skills --}}
+                <td>
+                    <legend class="section-header">
+                        <i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.swap_drop_here' }}
+                    </legend>
+
+                    {{#each data.swapDiceFaces.skills}}
+                        <div class="dice dropbox faces-change" data-type="swap" data-face="{{id}}" data-die="AbilityDie">
+                            <img src="{{img}}" alt="{{id}}" />
+                        </div>
+                    {{/each}}
+                </td>
+            </tr>
+        </table>
+
+        <button id="finalize" name="finalize" type="button" {{#if data.submitDisabled}}disabled{{/if}}>
+            {{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class="fas fa-arrow-circle-right"></i>
+        </button>
+
+    {{else}}
+        {{!-- Non editable DiceList history (view for others players) --}}
+        <table>
+            {{#each data.dicesList as |item idxStep|}}
+                <tr>
+                    {{#each item as |dice idxDie|}}
+                        <td>
+                            <div class="dice {{this.choice}}">
+                                {{#if this.img}}
+                                    <img src="{{this.img}}" alt="{{idxStep}}_{{idxDie}}" />
+                                {{/if}}
+                            </div>
+                        </td>
+                    {{/each}}
+                </tr>
             {{/each}}
-        </tr>
+        </table>
-        {{/each}}
+    {{/if}}
-    </table>
-
-    {{!-- Keep --}}
-    <table>
-        <tr>
-            <td>
-                <fieldset class="dropbox keeps" data-type="keep">
-                    <legend class="section-header"><i class="fa fa-arrow-down" aria-hidden="true"></i> {{ localize 'l5r5e.roll_n_keep.keep_drop_here' }}</legend>
-                </fieldset>
-            </td>
-        </tr>
-    </table>
-
-    <button id="finalize" name="finalize" type="button">{{ localize 'l5r5e.roll_n_keep.bt_validate' }} <i class='fas fa-arrow-circle-right'></i></button>
-
 </form>