DNDTools/src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.html

<div class="weapons-box">
  <div class="heading-list">
    <div>Typ</div>
    <div>Name</div>
    <div>Bonus</div>
    <div>Schaden</div>
    <div>Reichweite</div>
  </div>
  <div
    id="weapons-table"
    cdkDropList
    class="example-list table-content"
    (cdkDropListDropped)="dropWeapons($event)"
  >
    @for(weapon of weapons; let index = $index; track weapon){
    <div class="example-box" cdkDrag (click)="openDetailsPanel(index)">
      <!--  Range Icon -->
      <ng-container
        [ngTemplateOutlet]="distanceIconTemplate"
        [ngTemplateOutletContext]="{ weapon: weapon }"
      ></ng-container>
      <div class="vertical-line"></div>
      <ng-container
        [ngTemplateOutlet]="weaponNameTemplate"
        [ngTemplateOutletContext]="{ weapon: weapon }"
      ></ng-container>
      <div class="vertical-line"></div>
      <ng-container
        [ngTemplateOutlet]="weaponAttackTemplate"
        [ngTemplateOutletContext]="{ weapon: weapon }"
      ></ng-container>
      <div class="vertical-line"></div>
      <ng-container
        [ngTemplateOutlet]="weaponDamageTemplate"
        [ngTemplateOutletContext]="{ weapon: weapon, index: index }"
      ></ng-container>
      <div class="vertical-line"></div>
      <ng-container
        [ngTemplateOutlet]="weaponRangeTemplate"
        [ngTemplateOutletContext]="{ weapon: weapon }"
      ></ng-container>
    </div>
    } @empty{
    <div
      style="
        text-align: center;
        margin-top: 3rem;
        font-size: 1.25rem;
        font-weight: 500;
      "
    >
      Noch keine Waffen hinzugefügt
    </div>
    }
  </div>
</div>

<!-- Templates -->

<!-- Distance Icons -->
<ng-template #distanceIconTemplate let-weapon="weapon">
  <icon
    [size]="'s'"
    [type]="'weapon'"
    [icon]="weapon.isRanged ? 'ranged' : 'meele'"
  ></icon>
</ng-template>

<!-- Name -->
<ng-template #weaponNameTemplate let-weapon="weapon">
  <div class="bold">{{ weapon.name }}</div>
</ng-template>

<!-- Attack Bonus -->
<ng-template #weaponAttackTemplate let-weapon="weapon">
  <div class="weapon-attack-bonus">{{ weapon.attackBonus }}</div>
</ng-template>

<!-- Damage -->
<ng-template #weaponDamageTemplate let-weapon="weapon" let-index="index">
  <div class="damage-list">
    <div
      class="damage-row"
      *ngFor="let damage of weapon.damage; let damageIndex = index"
    >
      <span>{{ damage.diceNumber }} {{ damage.diceType }}</span>
      <span *ngIf="weapon.isVersatile && damageIndex === 0"
        >({{ weapon.versatileDamage }})</span
      >
      <span *ngIf="damageIndex === 0 && damageModifiers[index] !== '0'">
        {{ damageModifiers[index] }}
      </span>
      <span>
        <icon [size]="'xs'" [type]="'damage'" [icon]="damage.damageType"></icon>
      </span>
    </div>
  </div>
</ng-template>

<!-- Range -->
<ng-template #weaponRangeTemplate let-weapon="weapon">
  @if(weapon.isRanged){
  <div class="weapon-range">
    {{ weapon.range[0] }}/{{ weapon.range[1] }} ft.
  </div>
  }@else{ Nahkampf }
</ng-template>