DNDTools/src/app/journal/journal-stats/life-container/life/life.component.html

<div class="life-box" (click)="openDetailsPanel()">
  <div class="life-box-name">Trefferpunkte</div>
  <div class="life-box-bar">
    <div
      class="life-box-bar-current"
      [style.width.%]="currentHitPointsPercentage"
    ></div>
    <div
      class="life-box-bar-temporary"
      [style.width.%]="temporaryHitPointsPercentage"
    ></div>
    <div
      class="life-box-bar-missing"
      [style.width.%]="missingHitPointsPercentage"
    ></div>
    <div class="life-box-bar-label">
      {{ currentHitPoints }}/{{ maxHitPoints
      }}{{ temporaryHitPoints > 0 ? " (+" + temporaryHitPoints + ")" : "" }}
    </div>
  </div>
  <div class="life-box-buttons">
    <button
      class="life-button add"
      (click)="$event.stopPropagation(); addHitPoints()"
    >
      <img src="assets/icons/UIIcons/heal.svg" alt="heal" />
    </button>
    <button
      class="life-button temp"
      (click)="$event.stopPropagation(); addTemporaryHitPoints()"
    >
      <img src="assets/icons/UIIcons/temporary.svg" alt="temporary" />
    </button>
    <button
      class="life-button remove"
      (click)="$event.stopPropagation(); removeHitPoints()"
    >
      <img src="assets/icons/UIIcons/damage.svg" alt="damage" />
    </button>
  </div>
</div>