feat: capacités de créature, blessures séquentielles et refonte fiche Groupe

- Nouvel item Capacité de créature (creaturecapacity) : DataModel, fiche AppV2, chat card, types Base/Survie/Cauchemar/Apocalypse, liste sur l'onglet Informations de la créature avec drag&drop et post au chat. - Blessures : coches séquentielles respectant la gravité (onClickWound), malus de blessure -1D/-2D/-3D appliqué aux jets (Règles p.42), montée en gravité automatique si les cercles sont pleins. - Fiche Groupe : objectifs majeurs/mineurs éditables, liste de membres simplifiée, notes de voyage (roadNotes), totem qui remplit instinct/interdits, refonte visuelle des onglets. - Créature : Réaction lançable, seuils/cercles de blessures corrigés (Taille cumulée, Groupe sans seuil), libellés Taille/Meute. - Corrections : icône de carte de chat plafonnée à 64px, slash orphelin d'entrave à 0, notes de matériel du Groupe éditable (formInput), bonus de Réaction non double-compté. - Divers : suppression des captures de débogage, licence README.
2026-08-05 09:38:36 +02:00
parent cf905cdcfb
commit d0373fab5a
59 changed files with 984 additions and 1211 deletions
@@ -188,6 +188,42 @@
    }
  }

+  // ── Stacked layout for creature sheets (header + tabs + content) ───
+  &.creature .window-content {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: 1fr;
+    overflow: hidden;
+
+    > .tab.main {
+      grid-column: 1;
+      grid-row: 1;
+      display: flex !important;
+      flex-direction: column;
+      overflow-y: auto;
+      padding: 8px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    > nav.tabs {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    > .tab:not(.main) {
+      grid-column: 1;
+      grid-row: 3;
+      display: none;
+      overflow-y: auto;
+      padding: 8px;
+
+      &.active {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+
  form {
    display: flex;
    flex-direction: column;
@@ -304,6 +340,34 @@
    }
  }

+  // Fiche personnage (ApplicationV2 : l'élément fiche EST le <form>, le
+  // sélecteur "form div.hexa" ci-dessus ne s'y applique donc pas).
+  &.character div.hexa {
+    .hexa-style();
+    .transition();
+    margin: 0.2rem;
+    position: relative;
+
+    &:hover {
+      .hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
+    }
+
+    input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      z-index: 1;
+      margin: 0;
+      cursor: pointer;
+    }
+
+    &.checked {
+      .hexa-style(rgb(0, 0, 0), rgba(0, 0, 0, 0.288));
+      &:hover { .hexa-style(rgb(43, 43, 43), rgba(0, 0, 0, 0.288)); }
+    }
+  }
+
  .sheet-header-toggle {
    text-align: right;
    margin-bottom: 0.5rem;
@@ -5,7 +5,7 @@
  .sheet-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    padding: 10px;
-    max-height: 110px;
+    overflow: visible;
  }

  .header-fields { flex: 1; }
@@ -13,6 +13,10 @@

  .resource {
    .card-style();
+
+    // Le mixin card-style ajoute un margin-bottom (15px) : inutile dans le
+    // header, on le neutralise pour garder une hauteur compacte.
+    margin-bottom: 8px;
  }

  .resource-label {
@@ -34,13 +38,20 @@

  .charname {
    margin: 0;
+    height: auto;
+    font-size: @font-size-18;
+    line-height: 1.2;

+    span,
    input {
-      width: 100%;
      font-size: @font-size-18;
      font-weight: bold;
      text-align: center;
    }
+
+    input {
+      width: 100%;
+    }
  }

  .stats-grid {
@@ -116,4 +127,85 @@
    gap: 8px;
  }

+  // ── Cases de blessures (hexagones) ──────────────────────────────────
+  // Le radio est masqué et recouvre l'hexagone : cliquer sur la case la coche.
+  div.hexa {
+    .hexa-style();
+    .transition();
+    margin: 0.2rem;
+    position: relative;
+
+    &:hover {
+      .hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
+    }
+
+    input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      z-index: 1;
+      margin: 0;
+      cursor: pointer;
+    }
+
+    &.checked {
+      .hexa-style(rgb(0, 0, 0), rgba(0, 0, 0, 0.288));
+      &:hover { .hexa-style(rgb(43, 43, 43), rgba(0, 0, 0, 0.288)); }
+    }
+  }
+
+  // ── Capacités de créature ───────────────────────────────────────────
+  .creature-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 6px;
+      border-bottom: 1px solid @color-border-dark-3;
+
+      &:last-child { border-bottom: none; }
+      &:hover { box-shadow: 0 0 10px @theme-color-highlight inset; }
+    }
+
+    .item-name {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .item-roll { cursor: pointer; }
+    }
+
+    .capacity-type {
+      flex: 0 0 auto;
+      font-size: @font-size-12;
+      color: @color-amber;
+      text-transform: uppercase;
+    }
+
+    .item-controls {
+      flex: 0 0 auto;
+      display: flex;
+      gap: 6px;
+    }
+  }
+
+  h4 {
+    a.item-control {
+      color: inherit;
+      opacity: 0.85;
+
+      &:hover { opacity: 1; }
+    }
+  }
+
 }
@@ -15,13 +15,112 @@
    }
  }

+  // ── Titres de section : uniforme (centré, scotch, majuscules) ───────
  h4 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
    font-family: "DistressBlack", sans-serif;
    text-transform: uppercase;
    font-size: @font-size-14;
+    text-align: center;
+    padding: 2px 8px;
+    margin: 0 0 8px;
    background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
+
+    a {
+      color: inherit;
+      opacity: 0.85;
+
+      &:hover { opacity: 1; }
+    }
  }

+  // ── Sous-titres (ex. Objectifs majeurs / mineurs) ───────────────────
+  h5 {
+    font-family: "DistressBlack", sans-serif;
+    text-transform: uppercase;
+    font-size: @font-size-12;
+    color: @color-amber;
+    margin: 8px 0 4px;
+    text-align: left;
+    border-bottom: none;
+  }
+
+  // ── Liste uniforme (objectifs, capacités, membres, rencontres) ──────
+  .group-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 6px;
+      border-bottom: 1px solid @color-border-dark-3;
+
+      &:last-child { border-bottom: none; }
+      &:hover { box-shadow: 0 0 10px @theme-color-highlight inset; }
+    }
+
+    > li.group-list-header {
+      font-weight: bold;
+      text-transform: uppercase;
+      font-size: @font-size-12;
+      border-bottom: 2px solid @color-border-dark-3;
+      box-shadow: none;
+
+      > div { text-align: center; }
+    }
+
+    .item-name, .actor-name {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .item-controls {
+      flex: 0 0 auto;
+      display: flex;
+      gap: 6px;
+    }
+
+    input[type="text"] {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  // ── Champs (Origine, Concept, Instincts, Interdits…) ────────────────
+  .group-field {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    label {
+      flex: 0 0 auto;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+
+    > :last-child {
+      flex: 1;
+      min-width: 0;
+    }
+
+    input[type="text"] { width: 100%; }
+  }
+
+  // ── Colonnes des tableaux (Rencontres) ──────────────────────────────
+  .gcol-name    { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .gcol-profile { flex: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .gcol-totem   { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
  .reserve-control,
  .morale-control {
    .card-style();
@@ -39,58 +138,13 @@
    }
  }

-  .actor-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li.actor {
-      padding: 5px;
-      border-bottom: 1px solid @color-border-dark-3;
-
-      &:last-child { border-bottom: none; }
-
-      &:hover {
-        box-shadow: 0 0 10px @theme-color-highlight inset;
-      }
-    }
-
-    .actor-name, .item-name {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .objective-item {
-    padding: 5px;
-    border-bottom: 1px solid @color-border-dark-4;
-
-    input {
-      flex: 1;
-      width: 100%;
-    }
-  }
-
  .totem-display {
    .card-style();
+    flex: 1;

    span { font-weight: bold; }
  }

-  .identity-field {
-    margin-bottom: 8px;
-
-    label {
-      font-weight: bold;
-      display: block;
-      margin-bottom: 3px;
-    }
-
-    input { width: 100%; }
-  }
-
  .level input,
  .reputation input {
    width: 60px;
@@ -5,7 +5,25 @@
  .sheet-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    padding: 0.5rem;
-    max-height: 150px;
+    overflow: visible;
+  }
+
+  .charname {
+    margin: 0;
+    height: auto;
+    font-size: @font-size-18;
+    line-height: 1.2;
+
+    span,
+    input {
+      font-size: @font-size-18;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    input {
+      width: 100%;
+    }
  }

  .ability-value,
@@ -66,12 +84,19 @@

  .npc-wounds {
    flex-wrap: wrap;
+    gap: 8px 16px;
+    margin-bottom: 8px;

    .wound-cat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: bold;
+
+      .wound-label {
+        font-size: @font-size-12;
+        white-space: nowrap;
+      }
    }

    .wound-boxes {
@@ -82,6 +107,10 @@
        font-size: 8px;
        color: @color-border-dark-2;
      }
+
+      .hexa {
+        margin: 0;
+      }
    }
  }

@@ -199,9 +228,25 @@
  .hexa {
    .hexa-style();
    .transition();
+    position: relative;

    &:hover {
      .hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
    }
+
+    input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      z-index: 1;
+      margin: 0;
+      cursor: pointer;
+    }
+
+    &.checked {
+      .hexa-style(rgb(0, 0, 0), rgba(0, 0, 0, 0.288));
+      &:hover { .hexa-style(rgb(43, 43, 43), rgba(0, 0, 0, 0.288)); }
+    }
  }
 }
@@ -59,13 +59,17 @@
  .sheet-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    padding: 10px;
-    max-height: 130px;
+    overflow: visible;
  }

  .header-fields { flex: 1; }

  .resource {
    .card-style();
+
+    // Le mixin card-style ajoute un margin-bottom (15px) : inutile dans le
+    // header, on le neutralise pour garder une hauteur compacte.
+    margin-bottom: 8px;
  }

  .resource-label {
@@ -92,13 +96,20 @@

  .charname {
    margin: 0;
+    height: auto;
+    font-size: @font-size-18;
+    line-height: 1.2;

+    span,
    input {
-      width: 100%;
      font-size: @font-size-18;
      font-weight: bold;
      text-align: center;
    }
+
+    input {
+      width: 100%;
+    }
  }

  .vehicle-owner {