TMR et acteurs à cocher pour les signe draconiques

Au lieu d'une liste à sélection multiple, choisir les types de TMR
avec des cases à cocher.

Lors de l'ajout de signes éphémères, sélectionner les personnages
avec des cases à cocher.

module/dialog-create-signedraconique.js

@@ -1,7 +1,6 @@
 import { ChatUtility } from "./chat-utility.js";
 import { HtmlUtility } from "./html-utility.js";
 import { RdDItemSigneDraconique } from "./item-signedraconique.js";
-import { Misc } from "./misc.js";
 import { TMRUtility } from "./tmr-utility.js";
 
 export class DialogCreateSigneDraconique extends Dialog {
@@ -10,12 +9,13 @@ export class DialogCreateSigneDraconique extends Dialog {
     const signe = await RdDItemSigneDraconique.randomSigneDraconique({ephemere: true});
     let dialogData = {
       signe: signe,
-      tmrs: TMRUtility.listSelectedTMR(signe.system.typesTMR ?? []),
-      actors: game.actors.filter(actor => actor.isHautRevant()).map(actor => {
-        let actorData = duplicate(actor);
-        actorData.selected = actor.hasPlayerOwner;
-        return actorData;
-      })
+      tmrs: TMRUtility.buildSelectionTypesTMR(signe.system.typesTMR),
+      actors: game.actors.filter(actor => actor.isPersonnage() && actor.isHautRevant())
+        .map(actor => ({
+          id: actor.id,
+          name: actor.name,
+          selected: true
+        }))
     };
 
     const html = await renderTemplate("systems/foundryvtt-reve-de-dragon/templates/dialog-create-signedraconique.html", dialogData);
@@ -23,12 +23,11 @@ export class DialogCreateSigneDraconique extends Dialog {
       .render(true);
   }
 
-  constructor(dialogData, html, callback) {
+  constructor(dialogData, html) {
     let options = { classes: ["DialogCreateSigneDraconiqueActorsActors"], width: 500, height: 650, 'z-index': 99999 };
     let conf = {
       title: "Créer un signe",
       content: html,
-      default: "Ajouter aux haut-rêvants",
       buttons: {
         "Ajouter aux haut-rêvants": { label: "Ajouter aux haut-rêvants", callback: it => { this._onCreerSigneActeurs(); } }
       }
@@ -41,7 +40,8 @@ export class DialogCreateSigneDraconique extends Dialog {
     await $("[name='signe.system.ephemere']").change();
     await $(".signe-xp-sort").change();
     this.validerSigne();
-    this.dialogData.actors.filter(it => it.selected).map(it => game.actors.get(it._id))
+    this.dialogData.actors.filter(it => it.selected)
+      .map(it => game.actors.get(it.id))
       .forEach(actor => this._createSigneForActor(actor, this.dialogData.signe));
   }
 
@@ -64,7 +64,7 @@ export class DialogCreateSigneDraconique extends Dialog {
     this.dialogData.signe.system.difficulte = $("[name='signe.system.difficulte']").val();
     this.dialogData.signe.system.ephemere = $("[name='signe.system.ephemere']").prop("checked");
     this.dialogData.signe.system.duree = $("[name='signe.system.duree']").val();
-    this.dialogData.signe.system.typesTMR = $(".select-tmr").val();
+    this.dialogData.signe.system.typesTMR = TMRUtility.buildListTypesTMRSelection(this.dialogData.tmrs);
   }
 
   /* -------------------------------------------- */
@@ -73,8 +73,9 @@ export class DialogCreateSigneDraconique extends Dialog {
     this.setEphemere(this.dialogData.signe.system.ephemere);
     html.find(".signe-aleatoire").click(event => this.setSigneAleatoire());
     html.find("[name='signe.system.ephemere']").change((event) => this.setEphemere(event.currentTarget.checked));
-    html.find(".select-actor").change((event) => this.onSelectActor(event));
     html.find(".signe-xp-sort").change((event) => this.onValeurXpSort(event));
+    html.find("input.select-actor").change((event) => this.onSelectActor(event));
+    html.find("input.select-tmr").change((event) => this.onSelectTmr(event));
   }
 
   async setSigneAleatoire() {
@@ -87,7 +88,10 @@ export class DialogCreateSigneDraconique extends Dialog {
     $("[name='signe.system.difficulte']").val(newSigne.system.difficulte);
     $("[name='signe.system.duree']").val(newSigne.system.duree);
     $("[name='signe.system.ephemere']").prop("checked", newSigne.system.ephemere);
-    $(".select-tmr").val(newSigne.system.typesTMR);
+    this.dialogData.tmrs = TMRUtility.buildSelectionTypesTMR(newSigne.system.typesTMR);
+    this.dialogData.tmrs.forEach(t => {
+      $(`[data-tmr-name='${t.name}']`).prop( "checked", t.selected);
+    })
     this.setEphemere(newSigne.system.ephemere);
   }
 
@@ -97,17 +101,22 @@ export class DialogCreateSigneDraconique extends Dialog {
   }
 
   async onSelectActor(event) {
-    event.preventDefault();
-    const options = event.currentTarget.options;
-    for (var i = 0; i < options.length; i++) { // looping over the options
-      const actorId = options[i].attributes["data-actor-id"].value;
-      const actor = this.dialogData.actors.find(it => it._id == actorId);
-      if (actor) {
-        actor.selected = options[i].selected;
-      }
-    };
+    const actorId = $(event.currentTarget)?.data("actor-id");
+    const actor = this.dialogData.actors.find(it => it.id == actorId);
+    if (actor) {
+      actor.selected = event.currentTarget.checked;
+    }
   }
 
+  onSelectTmr(event) {
+    const tmrName = $(event.currentTarget)?.data("tmr-name");
+    const onTmr = this.tmrs.find(it => it.name == tmrName);
+    if (onTmr){
+      onTmr.selected = event.currentTarget.checked;
+    }
+  }
+
+
   onValeurXpSort(event) {
     const codeReussite = event.currentTarget.attributes['data-typereussite']?.value ?? 0;
     const xp = Number(event.currentTarget.value);

module/item-signedraconique-sheet.js

@@ -32,8 +32,7 @@ export class RdDSigneDraconiqueItemSheet extends ItemSheet {
     const position = super.setPosition(options);
     const sheetHeader = this.element.find(".sheet-header");
     const sheetBody = this.element.find(".sheet-body");
-    const bodyHeight = position.height - sheetHeader[0].clientHeight;
-    sheetBody.css("height", bodyHeight);
+    sheetBody.css("height", position.height - sheetHeader[0].clientHeight)
     return position;
   }
 
@@ -41,16 +40,17 @@ export class RdDSigneDraconiqueItemSheet extends ItemSheet {
   /* -------------------------------------------- */
   async getData() {
     const formData = duplicate(this.item);
+    this.tmrs = TMRUtility.buildSelectionTypesTMR(this.item.system.typesTMR);
     mergeObject(formData, {
+      tmrs: this.tmrs,
       title: formData.name,
       isGM: game.user.isGM,
-      owner: this.actor.isOwner,
+      owner: this.actor?.isOwner,
       isOwned: this.actor ? true : false,
       actorId: this.actor?.id,
       editable: this.isEditable,
       cssClass: this.isEditable ? "editable" : "locked",
     });
-    formData.tmrs = TMRUtility.listSelectedTMR(formData.system.typesTMR ?? []);
     return formData;
   }
 
@@ -62,7 +62,7 @@ export class RdDSigneDraconiqueItemSheet extends ItemSheet {
     if (!this.options.editable) return;
 
     html.find(".signe-aleatoire").click(event => this.setSigneAleatoire());
-    html.find(".select-tmr").change((event) => this.onSelectTmr(event));
+    html.find("input.select-tmr").change((event) => this.onSelectTmr(event));
     html.find(".signe-xp-sort").change((event) => this.onValeurXpSort(event.currentTarget.attributes['data-typereussite']?.value, Number(event.currentTarget.value)));
   }
 
@@ -72,9 +72,13 @@ export class RdDSigneDraconiqueItemSheet extends ItemSheet {
   }
 
   async onSelectTmr(event) {
-    event.preventDefault();
-    const selectedTMR = $(".select-tmr").val();
-    this.item.update({ 'system.typesTMR': selectedTMR });
+    const tmrName = $(event.currentTarget)?.data("tmr-name");
+    const onTmr = this.tmrs.find(it => it.name == tmrName);
+    if (onTmr){
+      onTmr.selected = event.currentTarget.checked;
+    }
+
+    this.item.update({ 'system.typesTMR': TMRUtility.buildListTypesTMRSelection(this.tmrs) });
   }
 
   async onValeurXpSort(event) {

module/rdd-commands.js

@@ -358,10 +358,9 @@ export class RdDCommands {
 
   async supprimerSignesDraconiquesEphemeres() {
     game.actors.forEach(actor => {
-      const ephemeres = actor.items.find(item => item.type = 'signedraconique' && item.system.ephemere)
-        .map(item => item.id);
+      const ephemeres = actor.items.filter(item => item.type = 'signedraconique' && item.system.ephemere);
       if (ephemeres.length > 0) {
-        actor.deleteEmbeddedDocuments("Item", ephemeres);
+        actor.deleteEmbeddedDocuments("Item", ephemeres.map(item => item.id));
       }
     });
     return true;

module/rdd-rolltables.js

@@ -25,7 +25,7 @@ export class RdDRollTables {
   /* -------------------------------------------- */
   static async drawTextFromRollTable(tableName, toChat) {
     const drawResult = await RdDRollTables.genericGetTableResult(tableName, toChat);
-    return drawResult.data.text;
+    return drawResult.text;
   }
 
   /* -------------------------------------------- */

module/tmr-utility.js

@@ -291,12 +291,18 @@ export class TMRUtility {
   static typeTmrName(type) {
     return Misc.upperFirst(TMRType[Grammar.toLowerCaseNoAccent(type)].name);
   }
-  static listSelectedTMR(typesTMR) {
+  
+  static buildSelectionTypesTMR(typesTMR) {
+    typesTMR= typesTMR?? [];
     return Object.values(TMRType).map(value => Misc.upperFirst(value.name))
       .sort()
       .map(name => { return { name: name, selected: typesTMR.includes(name) } });
   }
 
+  static buildListTypesTMRSelection(selectionTMRs) {
+    return selectionTMRs.filter(it => it.selected).map(it => it.name).join(" ");
+  }
+
   static isCaseHumide(tmr) {
     return tmr.type == 'fleuve' || tmr.type == 'lac' || tmr.type == 'marais';
   }

styles/simple.css

@@ -840,6 +840,14 @@ ul, li {
   margin-left: 3rem;
 }
 
+.grid-select-type-tmr {
+  display: grid;
+  grid-column: span 4 / span 4;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.1rem;
+  margin: 0.1rem;
+  padding: 0;
+}
 .grid-select-actor {
   display: grid;
   grid-column: span 2 / span 2;

templates/dialog-create-signedraconique.html

@@ -31,22 +31,31 @@
         <input type="text" name="signe.system.duree" value="{{signe.system.duree}}" data-dtype="String" />
       </span>
   </div>
+  <hr>
+  <label>Terres médianes</label>
   <div class="form-group">
-    <label for="tmrs">Terres médianes</label>
-    <select class="select-tmr" name="tmrs" id="tmrs" size="{{tmrs.length}}" multiple>
+    <div class="grid-select-type-tmr">
       {{#each tmrs as |tmr key|}}
-      <option value="{{tmr.name}}" {{#if tmr.selected}}selected{{/if}}>{{tmr.name}}</option>
+      <label class="flexrow">
+        <input type="checkbox" data-dtype="Boolean" class="select-tmr"
+        data-tmr-name="{{tmr.name}}" {{#if tmr.selected}}checked{{/if}} />
+        {{tmr.name}}
+      </label>
       {{/each}}
-    </select>
+    </div>
   </div>
+  <hr>
+  <label for="actors">Haut-rêvants concernés</label>
   <div class="form-group">
-    <label for="actors">Haut-rêvants 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>
-
-
+  <hr>
 </form>

templates/item-signedraconique-sheet.html

@@ -37,17 +37,21 @@
       <input class="attribute-value" type="text" name="system.duree" value="{{system.duree}}" data-dtype="String" />
     </div>
     {{/if}}
+    <label>Terres médianes</label>
     <div class="form-group">
-      <label for="tmrs">Terres médianes</label>
-      <select class="select-tmr attribute-value" name="tmrs" id="tmrs" size={{tmrs.length}} multiple />
-      {{#each tmrs as |tmr key|}}
-      <option class="option-tmr" value="{{tmr.name}}" {{#if tmr.selected}}selected{{/if}}>{{tmr.name}}</option>
-      {{/each}}
-      </select>
+      <div class="grid-select-type-tmr">
+        {{#each tmrs as |tmr key|}}
+        <label class="flexrow">
+          <input type="checkbox" data-dtype="Boolean" class="select-tmr"
+          data-tmr-name="{{tmr.name}}" {{#if tmr.selected}}checked{{/if}} />
+          {{tmr.name}}
+        </label>
+        {{/each}}
+      </div>
     </div>
 
     {{>"systems/foundryvtt-reve-de-dragon/templates/partial-item-description.html"}}
-    
+
 </section>
 
 </form>