En-tête de feuille de personnage

Affichage des portraits plus grands
Les boutons sont sur la ligne du nom du personnage
Les états sont affichés sur une colonne

module/actor-sheet.js

@@ -25,7 +25,7 @@ export class RdDActorSheet extends ActorSheet {
     return mergeObject(super.defaultOptions, {
       classes: ["rdd", "sheet", "actor"],
       template: "systems/foundryvtt-reve-de-dragon/templates/actor-sheet.html",
-      width: 640,
+      width: 550,
       tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "carac" }],
       dragDrop: [{ dragSelector: ".item-list .item", dropSelector: undefined }],
       showCompNiveauBase: false,

module/rdd-utility.js

@@ -545,8 +545,7 @@ export class RdDUtility {
     if (!profondeur) profondeur = 1;
     objet.niveau = profondeur;
     const display = afficherContenu ? 'item-display-show' : 'item-display-hide';
-    //console.log("ITEM DISPLAYED", objet );
+    let strContenu = `<ul class='item-list alterne-list ${display} list-item-margin${Math.min(profondeur,6)}'>`;
-    let strContenu = `<ul class='item-list alterne-list ${display} list-item-margin${profondeur}'>`;
     for (let subItem of objet.subItems) {
       strContenu += this.buildConteneur(subItem, profondeur + 1);
     }

styles/simple.css

@@ -93,12 +93,18 @@
 }
 
 /* Fonts */
-.sheet header.sheet-header h1 input, .window-app .window-header, #actors .directory-list, #navigation #scene-list .scene.nav-item {font-family: "GoudyAcc"} /* For title, sidebar character and scene */
+.sheet header.sheet-header h1 input,
-.sheet nav.sheet-tabs {
+.window-app .window-header,
-  font-family: "CaslonAntique";
+#actors .directory-list,
-} /* For nav and title */
+#navigation #scene-list .scene.nav-item {
-.window-app input, .foundryvtt-reve-de-dragon .item-form, .sheet header.sheet-header .flex-compteurs, .sheet header.sheet-header .flex-group-center.flex-fatigue, select, button, .item-checkbox, #sidebar, #players, #navigation #nav-toggle {
+  font-family: "GoudyAcc"
-  font-family: "CaslonAntique"; /* For sheet parts */
+} /* For title, sidebar character and scene */
+.sheet nav.sheet-tabs,
+.window-app input,
+.sheet header.sheet-header .header-compteurs,
+.sheet header.sheet-header .flex-group-center.flex-fatigue,
+select, button, .item-checkbox, #sidebar, #players, #navigation #nav-toggle {
+    font-family: "CaslonAntique"; /* For sheet parts; For nav and title */
 }
 
 .window-header{
@@ -109,6 +115,7 @@
   margin: 0;
   padding: 0;
 }
+
 .strong-text{
   font-weight: bold;
 }
@@ -116,6 +123,114 @@ i:is(.fas, .far) {
   font-size: smaller;
 }
 
+/* =================== En-têtes de feuilles ============ */
+.system-foundryvtt-reve-de-dragon .sheet-header h1.charname {
+  height: 48px;
+  padding: 0.1rem 0.1rem;
+  margin: 0;
+  margin-bottom: 0px;
+  border: 0;
+  min-width: none;
+  flex: auto;
+  flex-basis: 30%;
+}
+.system-foundryvtt-reve-de-dragon .window-app.sheet .window-content .sheet-header h1.charname input[type="text"] {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header div.header-buttons {
+  height: 48px;
+  padding: 0.1rem 0.1rem;
+  margin: 0;
+  width: fit-content;
+  flex: initial;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header div.header-buttons img.button-img {
+  max-height: 48px;
+  padding: 0.1rem 0.1rem;
+  margin: 0;
+  width: fit-content;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header :is(.header-compteurs,.header-etats,.profile-img){
+  padding: 0 3%;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header .profile-img {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 110px;
+  flex: 0 0 110px;
+  height: 110px;
+  width: 110px;
+  margin-right: 0.5rem;
+  object-fit: scale-down;
+  object-position: 50% 0;
+  margin: 0.1rem;
+}
+
+.system-foundryvtt-reve-de-dragon .rdd-item-sheet-tarot img.profile-img {
+  max-height: 600px;
+  max-width: 200px;
+  width: max-content;
+  margin-right: 0px;
+  object-fit: scale-down;
+  border: none;
+  margin-right: 5px;
+  object-position: 50% 0;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header .header-compteurs {
+  text-align: right;
+  max-width: fit-content;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header div.header-etats {
+  height: 48px;
+  max-width: fit-content;
+  flex: initial;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header .resource-content {
+  width: 2rem;
+}
+
+/* =================== Navigation ============ */
+.sheet nav.sheet-tabs {
+  font-size: 0.65rem;
+  font-weight: bold;
+  height: 4rem;
+  flex: 0 0 4rem;
+  margin: 0;
+  padding: 0 0 0 0.1rem;
+  text-align: center;
+  text-transform: uppercase;
+  line-height: 2rem;
+  border-top: 0 none;
+  border-bottom: 0 none;
+  color: rgba(52, 52, 52, 0.95);
+  background: rgb(245,245,240) url(img/bg_menu.webp) no-repeat left top;
+}
+.sheet nav.sheet-tabs .item ,
+nav.sheet-tabs .item {
+  position: relative;
+  padding: 0.1rem 0.2rem;
+}
+
+nav.sheet-tabs .item:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2rem;
+  width: 1px;
+  border-right: 1px dashed rgba(52, 52, 52, 0.25);
+}
+
+/* =================== Autres ============ */
+
 .tabs .item.active, .blessures-list li ul li:first-child:hover, a:hover {
   text-shadow: 1px 0px 0px #ff6600;
 }
@@ -197,7 +312,7 @@ table {border: 1px solid #7a7971;}
   -ms-flex-align: center;
   align-items: center;
   text-align: center;
-  padding: 5px;
+  padding: 0.1rem;
 }
 
 .flex-group-left {
@@ -303,45 +418,6 @@ input:is(.blessure-premiers_soins, .blessure-soins_complets) {
   text-shadow: 1px 1px 4px rgba(60, 60, 60, 1);
 }
 
-.foundryvtt-reve-de-dragon .sheet-header {
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 210px;
-  flex: 0 0 210px;
-  overflow: hidden;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.foundryvtt-reve-de-dragon .sheet-header .profile-img {
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 128px;
-  flex: 0 0 128px;
-  height: 128px;
-  width: 128px;
-  margin-right: 10px;
-  object-fit: cover;
-  object-position: 50% 0;
-}
-.foundryvtt-reve-de-dragon .rdd-item-sheet-tarot img.profile-img {
-  max-height: 600px;
-  max-width: 200px;
-  width: max-content;
-  margin-right: 0px;
-  object-fit: scale-down;
-  border: none;
-  margin-right: 5px;
-  object-position: 50% 0;
-}
 .rdd-dialog-select-target img.select-token-img {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 48px;
@@ -674,36 +750,6 @@ section.sheet-body{padding: 0.25rem 0.5rem;}
   padding: 1px;
   margin: 1px;
 }
-.sheet nav.sheet-tabs {
-  font-size: 0.65rem;
-  font-weight: bold;
-  height: 4rem;
-  flex: 0 0 5rem;
-  margin: 0;
-  padding: 0 0 0 0.25rem;
-  text-align: center;
-  text-transform: uppercase;
-  line-height: 1.2rem;
-  border-top: 0 none;
-  border-bottom: 0 none;
-  color: rgba(52, 52, 52, 0.95);
-  background: rgb(245,245,240) url(img/bg_menu.webp) no-repeat left top;
-}
-
-nav.sheet-tabs .item {
-  position: relative;
-  padding: 0 0.2rem;
-}
-
-nav.sheet-tabs .item:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 2rem;
-  width: 1px;
-  border-right: 1px dashed rgba(52, 52, 52, 0.25);
-}
 
 .sheet .tab[data-tab] {
   padding: 0;
@@ -715,8 +761,6 @@ section.sheet-body:after {
   clear: both;
 }
 
-.sheet header.sheet-header .flex-compteurs { text-align: right; max-width: max-content;}
-.sheet header.sheet-header .resource-content {width: 2rem;}
 
 li label.compteur {
   display: inline-block;
@@ -903,22 +947,22 @@ ul, li {
   text-align: center;
 }
 
-.list-item-margin1 {
+ul.list-item-margin1 {
   margin-left: 0.5rem;
 }
-.list-item-margin2 {
+ul.list-item-margin2 {
   margin-left: 1rem;
 }
-.list-item-margin3 {
+ul.list-item-margin3 {
   margin-left: 1.5rem;
 }
-.list-item-margin4 {
+ul.list-item-margin4 {
   margin-left: 2rem;
 }
-.list-item-margin5 {
+ul.list-item-margin5 {
   margin-left: 2.5rem;
 }
-.list-item-margin6 {
+ul.list-item-margin6 {
   margin-left: 3rem;
 }
 

templates/actor-creature-sheet.html

@@ -5,25 +5,29 @@
     <div class="header-fields">
       <div class="flexrow">
         <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
-        <h1 class="charname flex-grow"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
+        <div class="flexcol">
-        <div class="flex-group-center">
+          <div class="flexrow">
+            <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
+            <div class="header-buttons">
               <span class="encaisser-direct"><a title="Encaisser des dommages"><img class="button-img" src="icons/svg/bones.svg" alt="Encaisser des dommages"/></a></span>
               {{#if @root.options.isGM}}
               <span class="remise-a-neuf"><a title="Remise à neuf"><img class="button-img" src="icons/svg/regen.svg" alt="Remise à neuf"/></a></span>
               {{/if}}
             </div>
           </div>
-      <div class="flex-group-left flexrow">
+          <div class="flexrow">
             {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs-creature.html"}}
-        <div class="flex-group-center">
+            <div class="flex-group-left header-etats">
-          <span>
+              <div class="flexcol">
-            {{calc.resumeBlessures}}
+                <span>{{system.compteurs.etat.label}}: {{system.compteurs.etat.value}}</span>
-            &hyphen; Etat Général : {{system.compteurs.etat.value}}
+                <span>{{calc.resumeBlessures}}</span>
-          </span>
                 {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
               </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
   </header>
 
   {{!-- Sheet Tab Navigation --}}

templates/actor-entite-sheet.html

@@ -5,18 +5,22 @@
     <div class="header-fields">
       <div class="flexrow">
         <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
+        <div class="flexcol">
+          <div class="flexrow">
             <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
-        <div class="flex-group-center">
+            <div class="header-buttons">
               <span class="encaisser-direct"><a title="Encaisser des dommages"><img class="button-img" src="icons/svg/bones.svg" alt="Encaisser des dommages"/></a></span>
               {{#if @root.options.isGM}}
               <span class="remise-a-neuf"><a title="Remise à neuf"><img class="button-img" src="icons/svg/regen.svg" alt="Remise à neuf"/></a></span>
               {{/if}}
             </div>
           </div>
-      <div class="flex-group-left flexrow">
+          <div class="flexrow">
             {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs-entitee.html"}}
           </div>
         </div>
+      </div>
+    </div>
 </header>
 
   {{!-- Sheet Body --}}

templates/actor-sheet.html

@@ -3,16 +3,15 @@
     {{!-- Sheet Header --}}
     <header class="sheet-header">
       <div class="header-fields">
+        <div class="flexcol">
           <div class="flexrow">
-          <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
             <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name"/></h1>
+            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-buttons.html"}}
           </div>
           <div class="flexrow">
+            <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
             {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs.html"}}
-          <div class="flex-group-center">
-            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-buttons.html"}}
             {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-etat.html"}}
-            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
           </div>
         </div>
       </div>

templates/actor/header-buttons.html

@@ -1,4 +1,4 @@
-<div>
+<div class="header-buttons">
   <span class="chance-appel">
     <a title="Appel à la chance"><img class="button-img" src="systems/foundryvtt-reve-de-dragon/styles/img/ui/appel-chance.svg" alt="Appel à la chance"/></a>
   </span>

templates/actor/header-compteurs-creature.html

@@ -1,4 +1,5 @@
-<ul class="flex-compteurs">
+<div class="flex-group-center header-compteurs">
+  <ul>
     <li data-attribute="vie">
       <label class="compteur">
         <a class="jet-vie" name="system.sante.vie.label">Vie</a>
@@ -21,4 +22,6 @@
         <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
       </label>
     </li>
-</ul>
+  </ul>
+</div>
+  

templates/actor/header-compteurs-entitee.html

@@ -1,5 +1,7 @@
-{{#if (eq system.definition.typeentite 'incarne')}}
+{{#if (ne system.definition.typeentite 'nonincarne')}}
-<li data-attribute="endurance">
+<div class="flex-group-center header-compteurs">
+  <ul>
+    <li data-attribute="endurance">
       <label class="compteur">
         Endurance
         <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
@@ -9,5 +11,7 @@
         {{else}}{{system.sante.endurance.max}}{{/if}}
         <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
       </label>
-</li>
+    </li>
+  </ul>
+</div>
 {{/if}}

templates/actor/header-compteurs.html

@@ -1,4 +1,5 @@
-<ul class="flex-group-center flex-compteurs">
+<div class="flex-group-center header-compteurs">
+  <ul>
     <li>
       <label class="compteur">
         <a class="jet-vie">Vie</a>
@@ -36,4 +37,5 @@
         <a class="ptreve-actuel-plus"><i class="fas fa-plus-square"></i></a>
       </label>
     </li>
-</ul>
+  </ul>
+</div>

templates/actor/header-effects.html

@@ -1,17 +1,12 @@
-<div class="flexrow">
+<span>
-  {{#if calc.surprise}}{{calc.surprise}}! {{/if}}
   {{#if effects}}
-    <span>
     {{#each effects as |effect key|}}
     <span class="active-effect" data-effect="{{effect.flags.core.statusId}}">
-        <img class="button-effect-img delete-active-effect" src="{{effect.icon}}" alt="{{localize effect.label}}" width="24" height="24" />
+      <img class="button-effect-img {{#if @root.options.isGM}}delete-active-effect{{/if}}" src="{{effect.icon}}" alt="{{localize effect.label}}" width="24" height="24" />
     </span>
     {{/each}}
-    </span>
+    {{#if calc.surprise}}<span>{{calc.surprise}}!</span>{{/if}}
-    {{#if options.isGM}}
-    <span class="enlever-tous-effets"><a>(enlever tout)</a></span>
-    {{/if}}
   {{else}}
-    <span>Aucun effet actif</span>
+    Aucun effet actif
   {{/if}}
-</div>
+  </span>

templates/actor/header-etat.html

@@ -1,10 +1,12 @@
-<div class="flexrow">
+<div class="flex-group-left header-etats">
-  <span class="appliquerFatigue tooltip tooltip-dotted">Malus de fatigue : {{calc.fatigue.malus}}
+  <div class="flexcol">
+    <span class="appliquerFatigue tooltip tooltip-dotted">Fatigue: {{calc.fatigue.malus}}
       <span class="tooltiptext ttt-fatigue">{{{calc.fatigue.html}}}</span>
     </span>
-  <span>{{calc.resumeBlessures}}</span>
-</div>
-<div class="flexrow">
     <span>{{system.compteurs.etat.label}}: {{system.compteurs.etat.value}}</span>
     <span>{{system.compteurs.surenc.label}}: {{system.compteurs.surenc.value}}</span>
+    <span>{{calc.resumeBlessures}}</span>
+    {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
+  </div>
 </div>
+