life.component.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <div class="life-box" (click)="openDetailsPanel()">
  2. <div class="life-box-name">Trefferpunkte</div>
  3. <div class="life-box-bar">
  4. <div
  5. class="life-box-bar-current"
  6. [style.width.%]="currentHitPointsPercentage"
  7. ></div>
  8. <div
  9. class="life-box-bar-temporary"
  10. [style.width.%]="temporaryHitPointsPercentage"
  11. ></div>
  12. <div
  13. class="life-box-bar-missing"
  14. [style.width.%]="missingHitPointsPercentage"
  15. ></div>
  16. <div class="life-box-bar-label">
  17. {{ currentHitPoints }}/{{ maxHitPoints
  18. }}{{ temporaryHitPoints > 0 ? " (+" + temporaryHitPoints + ")" : "" }}
  19. </div>
  20. </div>
  21. <div class="life-box-buttons">
  22. <button
  23. class="life-button add"
  24. (click)="$event.stopPropagation(); addHitPoints()"
  25. >
  26. <img src="assets/icons/UIIcons/heal.svg" alt="heal" />
  27. </button>
  28. <button
  29. class="life-button temp"
  30. (click)="$event.stopPropagation(); addTemporaryHitPoints()"
  31. >
  32. <img src="assets/icons/UIIcons/temporary.svg" alt="temporary" />
  33. </button>
  34. <button
  35. class="life-button remove"
  36. (click)="$event.stopPropagation(); removeHitPoints()"
  37. >
  38. <img src="assets/icons/UIIcons/damage.svg" alt="damage" />
  39. </button>
  40. </div>
  41. </div>