DNDTools/src/app/shared-components/full-spellcard/full-spellcard.component.html

<div class="card-container">
  <div
    class="card-background"
    [style.background-color]="
      'var(--' + spell.school.toLowerCase() + '-background)'
    "
  ></div>
  <div
    class="title"
    [style.box-shadow]="
      'var(--' + spell.school.toLowerCase() + '-border-large)'
    "
  >
    @if (translate.getDefaultLang() == "de") {
      {{ spell.german }}
    } @else {
      {{ spell.english }}
    }
    @if (spell.isRitual) {
      (Ritual)
    }
  </div>
  <div
    class="data"
    [style.box-shadow]="
      'var(--' + spell.school.toLowerCase() + '-border-large)'
    "
  >
    <img
      class="spell-image"
      [src]="'assets/images/spells/' + spell.image + '.jpg'"
      (error)="setBackupImage($event)"
      [style.box-shadow]="
        'var(--' + spell.school.toLowerCase() + '-border-large)'
      "
      alt="spell image"
    />
    <div class="stats">
      <!-- CASTING TIME -->
      <div
        class="stats-row"
        style="margin-top: 0.5rem"
        [style.box-shadow]="
          'var(--' + spell.school.toLowerCase() + '-border-small)'
        "
      >
        <div class="stat" style="width: 7rem">
          {{ "fullSpellcards.castingTime" | translate }}
        </div>
        <div class="value" style="width: 8rem">
          {{ spell.timeToCast }} {{ "time." + spell.cost | translate }}
        </div>
      </div>

      <!-- DURATION -->
      <div
        class="stats-row"
        [style.height]="spell.needsConcentration ? '3rem' : '2.5rem'"
        [style.box-shadow]="
          'var(--' + spell.school.toLowerCase() + '-border-small)'
        "
      >
        <div class="stat">{{ "fullSpellcards.duration" | translate }}</div>
        <div class="value">
          @if (
            spell.durationType != "instant" && spell.durationType != "permanent"
          ) {
            @if (spell.needsConcentration) {
              {{ "fullSpellcards.concentration" | translate }}
            }
            {{ spell.duration }}
          }
          {{ "time." + spell.durationType | translate }}
        </div>
      </div>
      <!-- COMPONENTS -->
      <div
        class="stats-row"
        [style.box-shadow]="
          'var(--' + spell.school.toLowerCase() + '-border-small)'
        "
      >
        <div class="stat">{{ "fullSpellcards.components" | translate }}</div>
        <div class="value">
          @if (spell.needsVerbal) {
            {{ "spells.components.verbal" | translate }}
          }
          @if (spell.needsSomatic) {
            {{ "spells.components.somatic" | translate }}
          }
          @if (spell.needsMaterial) {
            {{ "spells.components.material" | translate }}
          }
        </div>
      </div>

      <!-- MODIFIER -->
      <div
        class="stats-row"
        [style.box-shadow]="
          'var(--' + spell.school.toLowerCase() + '-border-small)'
        "
      >
        <div class="stat">
          @if (spell.needsSavingThrow) {
            <div class="name">{{ "fullSpellcards.saveDC" | translate }}</div>
          } @else if (spell.needsAttackRoll) {
            <div class="name">{{ "fullSpellcards.attack" | translate }}</div>
          } @else {
            <div class="name">
              {{ "fullSpellcards.modifier" | translate }}
            </div>
          }
        </div>
        <div class="value">
          @if (spell.needsSavingThrow) {
            {{
              "attributesAbbreviations." + spell.savingThrowAttribute
                | translate
            }}
            {{ utils.spellSaveDC }}
          } @else if (spell.needsAttackRoll) {
            {{ utils.spellAttackModifier }}
          } @else {
            <div style="padding-right: 1rem">-</div>
          }
        </div>
      </div>
      <!-- SCHOOL -->
      <div
        class="stats-row"
        style="margin-bottom: 0.5rem"
        [style.box-shadow]="
          'var(--' + spell.school.toLowerCase() + '-border-small)'
        "
      >
        <div class="stat" style="width: 6rem">
          {{ "fullSpellcards.school" | translate }}
        </div>
        <div class="value" style="width: 9rem">
          {{ "schools." + spell.school | translate }}
        </div>
      </div>
    </div>
  </div>
  <!-- INFO ROW -->
  <div
    class="info"
    [style.box-shadow]="
      'var(--' + spell.school.toLowerCase() + '-border-large)'
    "
  >
    <div class="effect">
      <div class="value">
        @if (spell.doesDamage) {
          @for (damage of spell.damage; track damage; let index = $index) {
            <div>
              <span>
                {{ damage.diceNumber }}
                {{ "general.dice" | translate }}{{ damage.diceType }}
              </span>
              <span>
                <icon
                  [size]="'xs'"
                  [type]="'damage'"
                  [icon]="damage.damageType"
                ></icon>
              </span>
            </div>
          }
        } @else if (spell.doesHeal) {
          <div class="heal">
            <span
              >{{ spell.heal?.diceNumber }} {{ "general.dice" | translate
              }}{{ spell.heal?.diceType }}
            </span>
            @if (spell.heal?.additionalHeal) {
              <span>+{{ spell.heal?.additionalHeal }} </span>
            }
            <span>
              <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
            </span>
          </div>
        } @else {
          -
        }
      </div>
      <div>
        @if (spell.doesDamage) {
          <div class="name">{{ "fullSpellcards.damage" | translate }}</div>
        } @else if (spell.doesHeal) {
          <div class="name">{{ "fullSpellcards.heal" | translate }}</div>
        } @else {
          <div class="name">{{ "fullSpellcards.effect" | translate }}</div>
        }
      </div>
    </div>
    <!-- RANGE -->
    <div class="range">
      <div class="value">
        @if (spell.isRanged) {
          <span>{{ spell.range }} ft.</span>
        } @else if (spell.range === 0) {
          <span>{{ "fullSpellcards.self" | translate }}</span>
        } @else if (spell.range === 5) {
          <span>{{ "fullSpellcards.touch" | translate }}</span>
        }
        @if (spell.hasAreaOfEffect) {
          <span>
            ({{ spell.length }} ft.
            <img
              style="width: 1rem; height: 1rem; margin-left: 0.125rem"
              [src]="
                'assets/icons/spellIcons/' + spell.areaOfEffectType + '.svg'
              "
            />)
          </span>
        }
      </div>
      <div class="stat">
        {{ "fullSpellcards.range" | translate }}
      </div>
    </div>
    <!-- LEVEL -->
    <div
      class="level"
      [style.box-shadow]="
        'var(--' + spell.school.toLowerCase() + '-border-large)'
      "
    >
      {{ spell.level }}
    </div>
  </div>
  <!-- DESCRIPTION -->
  <div
    class="description"
    [innerHTML]="
      translate.getDefaultLang() == 'de'
        ? spell.description_de
        : spell.description_en
    "
    [style.box-shadow]="
      'var(--' + spell.school.toLowerCase() + '-border-large)'
    "
  ></div>
  <div class="button-container">
    @if (spell.isCustom) {
      <button class="green" (click)="update()">Bearbeiten</button>
    }
    <button
      [class]="alreadyInFavorites ? 'red' : 'green'"
      style="height: 4rem"
      (click)="alreadyInFavorites ? removeFromFavorites() : addToFavorites()"
    >
      @if (alreadyInFavorites) {
        Aus Favoriten entfernen
      } @else {
        Zu Favoriten hinzufügen
      }
    </button>
    @if (!isFromDashboard) {
      @if (spell.isCustom) {
        <button class="red" style="height: 4rem" (click)="delete()">
          Endgültig löschen
        </button>
      }
      <button class="red" (click)="remove()">Entfernen</button>
    }
  </div>
</div>