add lebenspunkte

src/ActorSheet.hbs

@@ -26,9 +26,18 @@
 
     <div class="row">
         <img class="character-image" src="{{ actor.img }}" title="{{ actor.name }}" {{#if editable}}data-edit="img"{{/if}}>
+        <div class="col">
+            <div class="row">
                 {{#each actor.system.attributes}}
                     {{>die-value type=@key header=(localize (concat "DSA41.attributes.short." @key)) value=(lookup @root.actor.system.computed.attributes @key) success-value=(lookup @root.actor.system.computed.attributes @key) data-roll="1d20" data-tooltip="attribute_tooltip"}}
                 {{/each}}
+            </div>
+            <div class="col">
+                <div class="bar hp" style="--bar-percentage: {{actor.system.computed.lebenspunkte_prozent}}%;">
+                    {{>editable-input type="number" name="system.lebenspunkte" value=actor.system.lebenspunkte}} / <span>{{actor.system.computed.max_lebenspunkte}}</span>
+                </div>
+            </div>
+        </div>
 
     </div>
 

src/main.css

@@ -1,6 +1,8 @@
-.DSA41 {
+html {
-    font-size: 14px;
+    font-size: 16px !important;
+}
 
+.DSA41 {
     /* Change from FoundryVTT's default of 'none' to 'auto' to allow checkboxes in the nav bar */
     & .tabs > [data-tab] > * {
         pointer-events: auto;
@@ -180,6 +182,51 @@
         &.die-fernkampf-trefferpunkte { fill: #a2a0ee; }
     }
 
+    
+    & .bar {
+        --bar-percentage: 100%;
+        --bar-color-left:  #951a84;
+        --bar-color-right: #cd22b6;
+
+        position: relative;
+        overflow: hidden;
+
+        margin: 1em;
+
+        border: 1px solid #9f9275;
+        border-radius: 5px;
+        
+        text-align: center;
+
+        &::before {
+            position: absolute;
+            z-index: -1;
+            left:     0;
+            
+            width:  var(--bar-percentage);
+            height: 100%;
+
+            content: "";
+            background: linear-gradient(90deg, var(--bar-color-left) 0%, var(--bar-color-right) 100%);
+        }
+
+        & .editable-input, & span {
+            display: inline-block;
+            width:   4ch;
+
+            & input {
+                background: transparent;
+                padding: 0;
+            }
+        }
+
+        &.hp {
+            --bar-color-left:  #401f25;
+            --bar-color-right: #861212;
+        }
+    }
+
+
     & .tabs {
         padding:       .5rem;
         margin-top:    .5rem;

src/main.mjs

@@ -200,6 +200,8 @@ class DSA41_CharacterData extends TypeDataModel {
             profession:   new StringField(),
             sozialstatus: new NumberField({ integer: true, inital: 1 }),
 
+            lebenspunkte: new NumberField({ integer: true, intital: 0 }),
+
             attributes: new SchemaField({
                 courage:      new AttributeField(),
                 cleverness:   new AttributeField(),
@@ -279,6 +281,8 @@ class DSA41_CharacterData extends TypeDataModel {
         this.computed.max_ausdauer     = Math.round((this.computed.attributes_without_modifiers.courage      + this.computed.attributes_without_modifiers.constitution + this.computed.attributes_without_modifiers.agility) / 2);
         this.computed.max_atralenergie = Math.round((this.computed.attributes_without_modifiers.courage      + this.computed.attributes_without_modifiers.intuition    + this.computed.attributes_without_modifiers.charisma) / 2);
 
+        this.computed.lebenspunkte_prozent = (this.lebenspunkte / this.computed.max_lebenspunkte) * 100;
+
         this.computed.magieresistenz = Math.round((this.computed.attributes_without_modifiers.courage   + this.computed.attributes_without_modifiers.cleverness + this.computed.attributes_without_modifiers.constitution) / 5);
         this.computed.ini_basiswert  = Math.round((this.computed.attributes_without_modifiers.courage   + this.computed.attributes_without_modifiers.courage    + this.computed.attributes_without_modifiers.intuition + this.computed.attributes_without_modifiers.agility) / 5);
         this.computed.at_basiswert   = Math.round((this.computed.attributes_without_modifiers.courage   + this.computed.attributes_without_modifiers.agility    + this.computed.attributes_without_modifiers.strength) / 5);;