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

<div class="spell-box">
  <div class="heading-list">
    <div>Kosten</div>
    <div>Name</div>
    <div>Stufe</div>
    <div>Bonus</div>
    <div>Effekt</div>
    <div>Reichweite</div>
  </div>
  <div
    id="spells-table"
    cdkDropList
    class="item-list table-content"
    (cdkDropListDropped)="dropSpells($event)"
  >
    @for (spell of spells; let index = $index; track spell) {
      <div class="item" cdkDrag (click)="showFullSpellcard(index)">
        <!--  Range Icon -->
        <ng-container
          [ngTemplateOutlet]="costTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Name -->
        <ng-container
          [ngTemplateOutlet]="spellNameTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Level -->
        <ng-container
          [ngTemplateOutlet]="spellLevelTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Attack -->
        <ng-container
          [ngTemplateOutlet]="spellAttackTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Damage/Heal -->
        <ng-container
          [ngTemplateOutlet]="spellDamageTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Range -->
        <ng-container
          [ngTemplateOutlet]="spellRangeTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
      </div>
    } @empty {
      <div
        style="
          text-align: center;
          margin-top: 3rem;
          font-size: 1.25rem;
          font-weight: 500;
        "
      >
        Noch keine Zauber hinzugefügt
      </div>
    }
  </div>
  <div class="footer">
    <ui-button [color]="'green'" style="width: 80%" (click)="openModal()">
      Bearbeiten
    </ui-button>
  </div>

  <!-- Templates -->

  <!-- COST -->
  <ng-template #costTemplate let-spell="spell">
    <div class="bold">
      <span *ngIf="spell.cost === 'action'">A</span>
      <span *ngIf="spell.cost === 'bonus action'">B</span>
      <span *ngIf="spell.cost === 'reaction'">R</span>
    </div>
  </ng-template>

  <!-- NAME -->
  <ng-template #spellNameTemplate let-spell="spell">
    <div>
      <div class="bold">{{ spell.german }}</div>
      <div class="bold small">
        <span *ngIf="spell.needsConcentration">C | </span>
        <span *ngIf="spell.needsVerbal">V </span>
        <span *ngIf="spell.needsSomatic">G </span>
        <span *ngIf="spell.needsMaterial">M </span>
        <div></div>
      </div>
    </div>
  </ng-template>

  <!-- Level -->
  <ng-template #spellLevelTemplate let-spell="spell">
    <div *ngIf="spell.level !== 0" class="bold">{{ spell.level }}</div>
    <div *ngIf="spell.level === 0" class="bold">Trick</div>
  </ng-template>

  <!-- Attack -->
  <ng-template #spellAttackTemplate let-spell="spell">
    <div>
      <div *ngIf="spell.needsSavingThrow">
        <div>
          {{ attributes[spell.savingThrowAttribute!] }}
        </div>
        <div>{{ spellSaveDC }}</div>
      </div>
      <div *ngIf="spell.needsAttackRoll">
        <div>{{ spellAttackBonus }}</div>
      </div>
      <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
    </div>
  </ng-template>

  <!-- Damage/Heal -->
  <ng-template #spellDamageTemplate let-spell="spell">
    <div>
      @if (spell.doesDamage) {
        <div *ngFor="let damage of spell.damage; let index = index">
          <span>{{ damage.diceNumber }} {{ damage.diceType }} </span>
          <span>
            <icon
              [size]="'xs'"
              [type]="'damage'"
              [icon]="damage.damageType"
            ></icon>
          </span>
        </div>
      }
      @if (spell.doesHeal) {
        <div class="heal">
          <span>{{ spell.heal.diceNumber }} {{ spell.heal.diceType }} </span>
          <span *ngIf="spell.heal.additionalHeal"
            >+{{ spell.heal.additionalHeal }}
          </span>
          <span>
            <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
          </span>
        </div>
      }
    </div>
  </ng-template>

  <!-- Range -->
  <ng-template #spellRangeTemplate let-spell="spell">
    <div class="spell-range">
      <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
      <div *ngIf="!spell.isRanged">Berührung</div>

      <div *ngIf="spell.hasAreaOfEffect">
        <span>{{ spell.radius }} ft. {{ areas[spell.areaOfEffectType] }} </span>
      </div>
    </div>
  </ng-template>
</div>