COrrection sur predilections

less/item-styles.less

@@ -117,27 +117,29 @@
       }
     }
 
-    .chat-card-button {
-      background: linear-gradient(to bottom, #21374afc 5%, #152833ab 100%);
-      border: 2px ridge #846109;
-      color: #d4b5a8;
-      padding: 0.3rem 0.5rem;
-      transition: all 0.2s ease;
+  }
 
-      i {
-        font-size: 0.9rem;
-      }
+  .chat-card-button {
+    background: linear-gradient(to bottom, #21374afc 5%, #152833ab 100%);
+    border: 2px ridge #846109;
+    color: #d4b5a8;
+    padding: 0.3rem 0.5rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
 
-      &:hover {
-        background: linear-gradient(to bottom, #800000 5%, #3e0101 100%);
-        color: #ffffff;
-        box-shadow: 0 0 8px rgba(128, 0, 0, 0.6);
-      }
+    i {
+      font-size: 0.9rem;
+    }
 
-      &:active {
-        position: relative;
-        top: 1px;
-      }
+    &:hover {
+      background: linear-gradient(to bottom, #800000 5%, #3e0101 100%);
+      color: #ffffff;
+      box-shadow: 0 0 8px rgba(128, 0, 0, 0.6);
+    }
+
+    &:active {
+      position: relative;
+      top: 1px;
     }
   }
 
@@ -229,8 +231,21 @@
       &.flexrow {
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
         gap: 4px;
+
+        input[type="checkbox"] {
+          margin-top: 3px;
+          flex-shrink: 0;
+        }
+      }
+
+      h3 {
+        color: #2a1a0a;
+        font-size: 1rem;
+        font-weight: bold;
+        margin: 0;
+        text-shadow: none;
       }
     }
   }
@@ -275,8 +290,9 @@
   }
   .item-field-label-long3 {
     flex: 1;
-    min-width: 350px;
-    max-width: 350px;
+    min-width: 250px;
+    white-space: normal;
+    line-height: 1.3;
   }
 
   .numeric-input {

modules/applications/sheets/mournblade-competence-sheet.mjs

@@ -10,6 +10,11 @@ export default class MournbladeCompetenceSheet extends MournbladeItemSheet {
     window: {
       contentClasses: ["competence-content"],
     },
+    actions: {
+      ...MournbladeItemSheet.DEFAULT_OPTIONS.actions,
+      addPredilection: MournbladeCompetenceSheet.#onAddPredilection,
+      deletePredilection: MournbladeCompetenceSheet.#onDeletePredilection,
+    },
   }
 
   /** @override */
@@ -46,4 +51,28 @@ export default class MournbladeCompetenceSheet extends MournbladeItemSheet {
     context.tabs = this.#getTabs()
     return context
   }
+
+  /**
+   * Add a new empty predilection to the competence
+   * @param {PointerEvent} event
+   */
+  static async #onAddPredilection(event) {
+    event.preventDefault()
+    const predilections = foundry.utils.duplicate(this.document.system.predilections ?? [])
+    predilections.push({ name: "", used: false })
+    await this.document.update({ "system.predilections": predilections })
+  }
+
+  /**
+   * Delete a predilection by index
+   * @param {PointerEvent} event
+   * @param {HTMLElement} target
+   */
+  static async #onDeletePredilection(event, target) {
+    event.preventDefault()
+    const idx = Number(target.dataset.predictionIndex)
+    const predilections = foundry.utils.duplicate(this.document.system.predilections ?? [])
+    predilections.splice(idx, 1)
+    await this.document.update({ "system.predilections": predilections })
+  }
 }

styles/mournblade.css

@@ -2226,22 +2226,23 @@ li {
   background: rgba(255, 102, 0, 0.2);
   box-shadow: 0 0 5px rgba(255, 102, 0, 0.5);
 }
-.fvtt-mournblade.item .header-actions .chat-card-button {
+.fvtt-mournblade.item .chat-card-button {
   background: linear-gradient(to bottom, #21374afc 5%, #152833ab 100%);
   border: 2px ridge #846109;
   color: #d4b5a8;
   padding: 0.3rem 0.5rem;
   transition: all 0.2s ease;
+  cursor: pointer;
 }
-.fvtt-mournblade.item .header-actions .chat-card-button i {
+.fvtt-mournblade.item .chat-card-button i {
   font-size: 0.9rem;
 }
-.fvtt-mournblade.item .header-actions .chat-card-button:hover {
+.fvtt-mournblade.item .chat-card-button:hover {
   background: linear-gradient(to bottom, #800000 5%, #3e0101 100%);
   color: #ffffff;
   box-shadow: 0 0 8px rgba(128, 0, 0, 0.6);
 }
-.fvtt-mournblade.item .header-actions .chat-card-button:active {
+.fvtt-mournblade.item .chat-card-button:active {
   position: relative;
   top: 1px;
 }
@@ -2320,9 +2321,20 @@ li {
 .fvtt-mournblade.item .item-list li.item.flexrow {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   gap: 4px;
 }
+.fvtt-mournblade.item .item-list li.item.flexrow input[type="checkbox"] {
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+.fvtt-mournblade.item .item-list li.item h3 {
+  color: #2a1a0a;
+  font-size: 1rem;
+  font-weight: bold;
+  margin: 0;
+  text-shadow: none;
+}
 .fvtt-mournblade.item .generic-label {
   display: inline-block;
   white-space: nowrap;
@@ -2356,8 +2368,9 @@ li {
 }
 .fvtt-mournblade.item .item-field-label-long3 {
   flex: 1;
-  min-width: 350px;
-  max-width: 350px;
+  min-width: 250px;
+  white-space: normal;
+  line-height: 1.3;
 }
 .fvtt-mournblade.item .numeric-input {
   text-align: center;

templates/item-competence-sheet.hbs

@@ -46,13 +46,13 @@
       {{#each system.predilections as |predilection key|}}
       <li class="prediction-item item flexrow" data-prediction-index="{{key}}">
         <input type="text" class="edit-prediction item-field-label-long"
-          name="system.predilections[{{key}}]" value="{{predilection.name}}" data-dtype="String" />
-        <label class="generic-label">Utilisée ? <input class="use-prediction" type="checkbox" name="predilection.used" {{checked predilection.used}} /></label>
-        <a class="item-control delete-prediction" title="Supprimer une predilection"><i class="fas fa-trash"></i></a>
+          name="system.predilections.{{key}}.name" value="{{predilection.name}}" data-dtype="String" />
+        <label class="generic-label">Utilisée ? <input class="use-prediction" type="checkbox" name="system.predilections.{{key}}.used" {{checked predilection.used}} /></label>
+        <a class="item-control" data-action="deletePredilection" data-prediction-index="{{key}}" title="Supprimer une prédilection"><i class="fas fa-trash"></i></a>
       </li>
       {{/each}}
       <li class="item">
-        <button id="add-predilection" class="chat-card-button">{{localize "MNBL.addpredilection"}}</button>
+        <button type="button" data-action="addPredilection" class="chat-card-button">{{localize "MNBL.addpredilection"}}</button>
       </li>
     </ul>
   </div>