Fenêtre de stress avec acteurs à cocher

Remplacement de la liste d'acteurs par des cases à cocher car la
sélection n'est pas visible

module/dialog-stress.js

@@ -1,18 +1,19 @@
-import { Misc } from "./misc.js";
+import { RdDSheetUtility } from "./rdd-sheet-utility.js";
 
 export class DialogStress extends Dialog {
 
   static async distribuerStress() {
-    let dialogData = {
+    const dialogData = {
       motif: "Motif",
       stress: 10,
       immediat: false,
       actors: game.actors.filter(actor => actor.hasPlayerOwner && actor.isPersonnage())
-        .map(actor => {
+        .map(actor => ({
-          let actorData = duplicate(actor);
+            id: actor.id,
-          actorData.selected = actor.hasPlayerOwner;
+            name: actor.name,
-          return actorData;
+            selected: true
-        })
+          })
+        )
     };
 
     const html = await renderTemplate("systems/foundryvtt-reve-de-dragon/templates/dialog-stress.html", dialogData);
@@ -21,52 +22,44 @@ export class DialogStress extends Dialog {
   }
 
   constructor(dialogData, html) {
-    let options = { classes: ["DialogStress"], width: 400, height: 320, 'z-index': 99999 };
+    const options = { classes: ["DialogStress"],
-    let conf = {
+      width: 400,
+      height: 205+dialogData.actors.length*25,
+      'z-index': 99999
+    };
+    const conf = {
       title: "Donner du stress",
       content: html,
       buttons: {
-        "Stress": { label: "Stress !", callback: it => { this._onStress(); } }
+        stress: { label: "Stress !", callback: it => { this.onStress(); } }
-      }
+      },
+      default: "stress"
     };
     super(conf, options);
     this.dialogData = dialogData;
   }
 
-  async _onStress() {
+  async onStress() {
-    this.validerStress();
+    const motif = $("form.rdddialogstress input[name='motif']").val();
-    const compteur = this.dialogData.immediat ? 'experience' : 'stress';
+    const stress = Number($("form.rdddialogstress input[name='stress']").val());
-    const stress = this.dialogData.stress;
+    const compteur = ($("form.rdddialogstress input[name='immediat']").prop("checked")) ? 'experience' : 'stress';
-    const motif = this.dialogData.motif;
 
     this.dialogData.actors.filter(it => it.selected)
-      .map(it => game.actors.get(it._id))
+      .map(it => game.actors.get(it.id))
       .forEach(actor => actor.distribuerStress(compteur, stress, motif));
   }
 
-
-  validerStress() {
-    this.dialogData.motif = $("form.rdddialogstress input[name='motif']").val();
-    this.dialogData.stress = $("form.rdddialogstress input[name='stress']").val();
-    this.dialogData.immediat = $("form.rdddialogstress input[name='immediat']").prop("checked");;
-  }
-
   /* -------------------------------------------- */
   activateListeners(html) {
     super.activateListeners(html);
-    html.find(".select-actor").change((event) => this.onSelectActor(event));
+    html.find("input.select-actor").change((event) => this.onSelectActor(event));
   }
 
   async onSelectActor(event) {
-    event.preventDefault();
+    const actorId = $(event.currentTarget)?.data("actor-id");
-    const options = event.currentTarget.options;
+    const actor = this.dialogData.actors.find(it => it.id == actorId);
-    for (var i = 0; i < options.length; i++) { // looping over the options
+    if (actor) {
-      const actorId = options[i].attributes["data-actor-id"].value;
+      actor.selected = event.currentTarget.checked;
-      const actor = this.dialogData.actors.find(it => it._id == actorId);
+    }
-      if (actor) {
-        actor.selected = options[i].selected;
-      }
-    };
   }
-
 }

styles/simple.css

@@ -840,6 +840,15 @@ ul, li {
   margin-left: 3rem;
 }
 
+.grid-select-actor {
+  display: grid;
+  grid-column: span 2 / span 2;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.1rem;
+  margin: 0.1rem;
+  padding: 0;
+}
+
 .sheet-competence-img {
   width: 24px;
   height: 24px;

templates/dialog-stress.html

@@ -12,13 +12,17 @@
       <label for="immediat">Expérience immédiate</label>
       <input class="flex-shrink" type="checkbox" name="immediat" {{#if immediat}}checked{{/if}} />
     </div>
-    <div class="form-group">
+    <div class="flexcol">
-      <label for="actors">Personnages concernés</label>
+      <label>Personnages concernés</label>
-      <select class="select-actor" id="actors" size="7" multiple>
+      <div class="grid-select-actor">
         {{#each actors as |actor key|}}
-        <option value="{{actor.name}}" data-actor-id="{{actor._id}}" {{#if actor.selected}}selected{{/if}}>{{actor.name}}</option>
+        <label class="flexrow">
+          <input type="checkbox" data-dtype="Boolean" class="select-actor"
+              data-actor-id="{{actor.id}}" {{#if actor.selected}}checked{{/if}} />
+          {{actor.name}}
+        </label>
         {{/each}}
-      </select>
+      </div>
     </div>
   </div>
 </form>