From 317c4990bc4757c833003b670b8708ec378565ca Mon Sep 17 00:00:00 2001
From: LeRatierBretonnier <sylvain@lahiette.com>
Date: Sun, 8 Mar 2026 13:23:11 +0100
Subject: [PATCH] Item ehnance, fixes on actor sheet

---
 css/fvtt-oath-hammer.css                      |  90 ++++++++------
 lang/en.json                                  |   1 +
 less/actor-sheet.less                         | 115 ++++++++++--------
 .../applications/sheets/character-sheet.mjs   |   1 +
 module/models/character.mjs                   |   1 +
 templates/actor/character-identity.hbs        |  16 +--
 templates/actor/character-sheet.hbs           |  65 ++++++----
 7 files changed, 162 insertions(+), 127 deletions(-)

diff --git a/css/fvtt-oath-hammer.css b/css/fvtt-oath-hammer.css
index c9809cb..c8c63dd 100644
--- a/css/fvtt-oath-hammer.css
+++ b/css/fvtt-oath-hammer.css
@@ -184,8 +184,6 @@
   color: #084a74;
 }
 .oathhammer .actor-img {
-  height: 150px;
-  width: auto;
   border: 2px solid #084a74;
   border-radius: 4px;
   cursor: pointer;
@@ -200,45 +198,24 @@
 .oathhammer .character-main .character-pc {
   display: flex;
   gap: 10px;
+  align-items: flex-start;
   flex: 1;
 }
-.oathhammer .character-main .character-left {
-  min-width: 180px;
-  max-width: 180px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
 .oathhammer .character-main .character-portrait {
-  display: flex;
-  justify-content: center;
+  flex-shrink: 0;
+  width: 150px;
 }
-.oathhammer .character-main .character-resource {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-  margin-bottom: 2px;
-}
-.oathhammer .character-main .character-resource div.form-group {
-  display: contents;
-}
-.oathhammer .character-main .character-resource input {
-  min-width: 2.5rem;
-  max-width: 2.5rem;
-  text-align: center;
-}
-.oathhammer .character-main .resource-label {
-  min-width: 3.5rem;
-  font-family: "BlueDragon", "Palatino Linotype", serif;
-  font-size: calc(0.82rem * 0.9);
+.oathhammer .character-main .character-portrait .actor-img {
+  width: 150px;
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .oathhammer .character-main .character-right {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
   min-width: 0;
 }
 .oathhammer .character-main .character-name {
@@ -326,17 +303,54 @@
   font-size: calc(0.82rem * 0.85);
   padding: 1px 2px;
 }
-.oathhammer .attributes-stress-row {
+.oathhammer .character-main .character-stats-band {
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 6px;
-}
-.oathhammer .attributes-stress-row .character-attributes {
   flex: 1;
 }
-.oathhammer .attributes-stress-row .character-arcane-stress {
+.oathhammer .character-main .character-stats-band .character-resources {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  gap: 2px;
+  padding: 3px 6px;
+  border: 1px solid #535128;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.08);
+}
+.oathhammer .character-main .character-stats-band .character-resources .character-resource {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+.oathhammer .character-main .character-stats-band .character-resources .character-resource div.form-group {
+  display: contents;
+}
+.oathhammer .character-main .character-stats-band .character-resources .character-resource input {
+  width: 2.4rem;
+  text-align: center;
+  font-size: calc(0.82rem * 0.85);
+  padding: 1px 2px;
+}
+.oathhammer .character-main .character-stats-band .character-resources .character-resource .res-sep {
+  opacity: 0.5;
+  font-size: calc(0.82rem * 0.9);
+}
+.oathhammer .character-main .character-stats-band .character-resources .resource-label {
+  min-width: 3.8rem;
+  font-family: "BlueDragon", "Palatino Linotype", serif;
+  font-size: calc(0.82rem * 0.9);
+  color: #535128;
+}
+.oathhammer .character-main .character-stats-band .character-attributes {
+  flex: 1;
+  min-width: 0;
+}
+.oathhammer .character-main .character-stats-band .character-arcane-stress {
   flex-shrink: 0;
-  width: auto;
 }
 .oathhammer .attributes-grid {
   display: grid;
diff --git a/lang/en.json b/lang/en.json
index c314dcf..a08d7e2 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -206,6 +206,7 @@
       "StressValue": "Stress",
       "Attributes": "Attributes",
       "Biodata": "Background",
+      "Background": "Background",
       "Experience": "Experience",
       "Level": "Level",
       "XP": "Current XP",
diff --git a/less/actor-sheet.less b/less/actor-sheet.less
index 76fe443..bf8a169 100644
--- a/less/actor-sheet.less
+++ b/less/actor-sheet.less
@@ -5,8 +5,6 @@
 .oathhammer {
 
   .actor-img {
-    height: @portrait-height;
-    width: auto;
     border: 2px solid @color-blue;
     border-radius: 4px;
     cursor: pointer;
@@ -18,59 +16,36 @@
     flex-direction: column;
     gap: 4px;
 
+    // Portrait + right column layout
     .character-pc {
       display: flex;
       gap: 10px;
+      align-items: flex-start;
       flex: 1;
     }
 
-    .character-left {
-      min-width: @left-panel-width;
-      max-width: @left-panel-width;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-    }
-
+    // Portrait alone on the left, fixed square
     .character-portrait {
-      display: flex;
-      justify-content: center;
-    }
+      flex-shrink: 0;
+      width: @portrait-height;
 
-    .character-resource {
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      gap: 4px;
-      margin-bottom: 2px;
-
-      // formInput renders a <div class="form-group"> — flatten it so it doesn't break flex row
-      div.form-group {
-        display: contents;
-      }
-
-      input {
-        min-width: 2.5rem;
-        max-width: 2.5rem;
-        text-align: center;
+      .actor-img {
+        width: @portrait-height;
+        height: @portrait-height;
+        object-fit: cover;
       }
     }
 
-    .resource-label {
-      min-width: 3.5rem;
-      font-family: @font-secondary;
-      font-size: @font-size-xs;
-    }
-
+    // Right column: stacks name, identity bar, stats band
     .character-right {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 5px;
       min-width: 0;
     }
 
+    // Row 1: character name
     .character-name {
       display: flex;
       align-items: center;
@@ -85,6 +60,7 @@
       }
     }
 
+    // Row 2: identity bar (lineage + class + level/xp)
     .character-identity-bar {
       display: flex;
       flex-direction: row;
@@ -154,23 +130,66 @@
         }
       }
     }
-  }
 
-  // Attributes + Arcane Stress side by side
-  .attributes-stress-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 6px;
+    // Row 3: unified stats band — resources | attributes | arcane stress
+    .character-stats-band {
+      display: flex;
+      align-items: stretch;
+      gap: 6px;
+      flex: 1;
 
-    .character-attributes { flex: 1; }
+      // Vital resources: Grit / Luck / Defense / Movement
+      .character-resources {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        gap: 2px;
+        padding: 3px 6px;
+        border: 1px solid @color-olive;
+        border-radius: 3px;
+        background: rgba(0,0,0,0.08);
 
-    .character-arcane-stress {
-      flex-shrink: 0;
-      width: auto;
+        .character-resource {
+          display: flex;
+          align-items: center;
+          gap: 3px;
+          white-space: nowrap;
+
+          div.form-group { display: contents; }
+
+          input {
+            width: 2.4rem;
+            text-align: center;
+            font-size: @font-size-sm;
+            padding: 1px 2px;
+          }
+
+          .res-sep { opacity: 0.5; font-size: @font-size-xs; }
+        }
+
+        .resource-label {
+          min-width: 3.8rem;
+          font-family: @font-secondary;
+          font-size: @font-size-xs;
+          color: @color-olive;
+        }
+      }
+
+      // Attributes fieldset
+      .character-attributes {
+        flex: 1;
+        min-width: 0;
+      }
+
+      // Arcane stress compact
+      .character-arcane-stress {
+        flex-shrink: 0;
+      }
     }
   }
 
-  // Attributes grid
+  // Attributes grid (6 columns)
   .attributes-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
diff --git a/module/applications/sheets/character-sheet.mjs b/module/applications/sheets/character-sheet.mjs
index 351b2ad..03de3d9 100644
--- a/module/applications/sheets/character-sheet.mjs
+++ b/module/applications/sheets/character-sheet.mjs
@@ -132,6 +132,7 @@ export default class OathHammerCharacterSheet extends OathHammerActorSheet {
         break
       case "notes":
         context.tab = context.tabs.notes
+        context.enrichedBackground = await foundry.applications.ux.TextEditor.implementation.enrichHTML(doc.system.background, { async: true })
         context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(doc.system.description, { async: true })
         context.enrichedNotes = await foundry.applications.ux.TextEditor.implementation.enrichHTML(doc.system.notes, { async: true })
         break
diff --git a/module/models/character.mjs b/module/models/character.mjs
index 0e02a42..3ce6368 100644
--- a/module/models/character.mjs
+++ b/module/models/character.mjs
@@ -5,6 +5,7 @@ export default class OathHammerCharacter extends foundry.abstract.TypeDataModel
     const requiredInteger = { required: true, nullable: false, integer: true }
     const schema = {}
 
+    schema.background = new fields.HTMLField({ required: true, textSearch: true })
     schema.description = new fields.HTMLField({ required: true, textSearch: true })
     schema.notes = new fields.HTMLField({ required: true, textSearch: true })
 
diff --git a/templates/actor/character-identity.hbs b/templates/actor/character-identity.hbs
index 5c3bc18..243268c 100644
--- a/templates/actor/character-identity.hbs
+++ b/templates/actor/character-identity.hbs
@@ -1,19 +1,7 @@
 <section data-tab="identity" data-group="{{tab.group}}" class="tab {{tab.cssClass}}">
   <fieldset>
-    <legend>{{localize "OATHHAMMER.Label.Biodata"}}</legend>
-    <div class="flexrow">
-      <div class="biodata-col">
-        {{formField systemFields.biodata.fields.alignment value=system.biodata.alignment name="system.biodata.alignment" disabled=isPlayMode}}
-        {{formField systemFields.biodata.fields.age value=system.biodata.age name="system.biodata.age" disabled=isPlayMode}}
-        {{formField systemFields.biodata.fields.gender value=system.biodata.gender name="system.biodata.gender" disabled=isPlayMode}}
-      </div>
-      <div class="biodata-col">
-        {{formField systemFields.biodata.fields.height value=system.biodata.height name="system.biodata.height" disabled=isPlayMode}}
-        {{formField systemFields.biodata.fields.weight value=system.biodata.weight name="system.biodata.weight" disabled=isPlayMode}}
-        {{formField systemFields.biodata.fields.eyes value=system.biodata.eyes name="system.biodata.eyes" disabled=isPlayMode}}
-        {{formField systemFields.biodata.fields.hair value=system.biodata.hair name="system.biodata.hair" disabled=isPlayMode}}
-      </div>
-    </div>
+    <legend>{{localize "OATHHAMMER.Label.Background"}}</legend>
+    {{formInput systemFields.background enriched=enrichedBackground value=system.background name="system.background" toggled=true}}
   </fieldset>
   {{#if abilities.length}}
   <fieldset>
diff --git a/templates/actor/character-sheet.hbs b/templates/actor/character-sheet.hbs
index a3abe87..95fd07e 100644
--- a/templates/actor/character-sheet.hbs
+++ b/templates/actor/character-sheet.hbs
@@ -2,40 +2,24 @@
   <fieldset>
     <legend>{{localize "OATHHAMMER.Label.Character"}}</legend>
     <div class="character-pc character-pc-{{ifThen isPlayMode 'play' 'edit'}}">
-      <div class="character-left">
-        <div class="character-portrait">
-          <img class="actor-img" src="{{actor.img}}" data-edit="img" data-action="editImage" data-tooltip="{{actor.name}}" />
-        </div>
-        <fieldset>
-          <div class="flexrow character-resource">
-            <span class="resource-label">{{localize "OATHHAMMER.Label.Grit"}}</span>
-            {{formInput systemFields.grit.fields.value value=system.grit.value name="system.grit.value" disabled=isPlayMode}}
-            <span>/</span>
-            {{formInput systemFields.grit.fields.max value=system.grit.max name="system.grit.max" disabled=isPlayMode}}
-          </div>
-          <div class="flexrow character-resource">
-            <span class="resource-label">{{localize "OATHHAMMER.Label.Luck"}}</span>
-            {{formInput systemFields.luck.fields.value value=system.luck.value name="system.luck.value" disabled=isPlayMode}}
-            <span>/</span>
-            {{formInput systemFields.luck.fields.max value=system.luck.max name="system.luck.max" disabled=isPlayMode}}
-          </div>
-          <div class="flexrow character-resource">
-            <span class="resource-label">{{localize "OATHHAMMER.Label.Defense"}}</span>
-            <input type="text" value="{{system.defense.value}}" disabled class="defense-display" />
-          </div>
-          <div class="flexrow character-resource">
-            <span class="resource-label">{{localize "OATHHAMMER.Label.Movement"}}</span>
-            {{formInput systemFields.movement.fields.base value=system.movement.base name="system.movement.base" disabled=isPlayMode}}
-          </div>
-        </fieldset>
+
+      {{!-- Portrait column --}}
+      <div class="character-portrait">
+        <img class="actor-img" src="{{actor.img}}" data-edit="img" data-action="editImage" data-tooltip="{{actor.name}}" />
       </div>
+
+      {{!-- Right column: name + identity + stats band --}}
       <div class="character-right">
+
+        {{!-- Row 1: Name + toggle --}}
         <div class="character-name">
           {{formInput fields.name value=source.name rootId=partId disabled=isPlayMode}}
           <a class="control" data-action="toggleSheet" data-tooltip="OATHHAMMER.ToggleSheet" data-tooltip-direction="UP">
             <i class="fa-solid fa-user-{{ifThen isPlayMode 'lock' 'pen'}}"></i>
           </a>
         </div>
+
+        {{!-- Row 2: Identity bar (lineage + class + level/xp) --}}
         <div class="character-identity-bar">
           <div class="identity-slot lineage-slot {{#unless lineage}}empty{{/unless}}" data-drop-type="lineage">
             {{#if lineage}}
@@ -72,7 +56,32 @@
             {{formInput systemFields.experience.fields.total value=system.experience.total name="system.experience.total" disabled=isPlayMode}}
           </div>
         </div>
-        <div class="attributes-stress-row">
+
+        {{!-- Row 3: Unified stats band: resources | attributes | arcane stress --}}
+        <div class="character-stats-band">
+          <fieldset class="character-resources">
+            <div class="character-resource">
+              <span class="resource-label">{{localize "OATHHAMMER.Label.Grit"}}</span>
+              {{formInput systemFields.grit.fields.value value=system.grit.value name="system.grit.value" disabled=isPlayMode}}
+              <span class="res-sep">/</span>
+              {{formInput systemFields.grit.fields.max value=system.grit.max name="system.grit.max" disabled=isPlayMode}}
+            </div>
+            <div class="character-resource">
+              <span class="resource-label">{{localize "OATHHAMMER.Label.Luck"}}</span>
+              {{formInput systemFields.luck.fields.value value=system.luck.value name="system.luck.value" disabled=isPlayMode}}
+              <span class="res-sep">/</span>
+              {{formInput systemFields.luck.fields.max value=system.luck.max name="system.luck.max" disabled=isPlayMode}}
+            </div>
+            <div class="character-resource">
+              <span class="resource-label">{{localize "OATHHAMMER.Label.Defense"}}</span>
+              <input type="text" value="{{system.defense.value}}" disabled class="defense-display" />
+            </div>
+            <div class="character-resource">
+              <span class="resource-label">{{localize "OATHHAMMER.Label.Movement"}}</span>
+              {{formInput systemFields.movement.fields.base value=system.movement.base name="system.movement.base" disabled=isPlayMode}}
+            </div>
+          </fieldset>
+
           <fieldset class="character-attributes character-attributes-{{ifThen isPlayMode 'play' 'edit'}}">
             <legend>{{localize "OATHHAMMER.Label.Attributes"}}</legend>
             <div class="attributes-grid">
@@ -84,6 +93,7 @@
               {{/each}}
             </div>
           </fieldset>
+
           <fieldset class="character-arcane-stress">
             <legend>{{localize "OATHHAMMER.Label.ArcaneStress"}}</legend>
             <div class="stress-inputs">
@@ -93,6 +103,7 @@
             </div>
           </fieldset>
         </div>
+
       </div>
     </div>
   </fieldset>