Merge branch 'release/0.10.4'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dndtools",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/journal/journal-spellcards/spellcard/spellcard.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Spell } from 'src/interfaces/spell';
-import { TranslatorService } from 'src/services/translator/translator.service';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({

src/app/journal/spell-modal/spell-modal.component.ts

@@ -174,7 +174,7 @@ export class SpellModalComponent {
       classes: this.classes,
       duration: this.duration,
       durationType: this.durationtype,
-      timeToCast: 0, // FIXME: only mocked
+      timeToCast: this.timeToCast,
       damage: this.damage,
       heal: this.heal,
       level: parseInt(this.level.toString()),

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

@@ -1,52 +1,105 @@
-<div class="dimensions">
-  <div class="title">
-    {{ spell.german }}
+<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>
-  <hr />
-  <div class="info">
-    <div class="data">
-      <div class="data-row">
-        <div class="entry">
-          <div class="name">{{ "spellmodal.level" | translate }}</div>
-          <div class="value">{{ spell.level }}</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">{{ "fullSpellcards.castingTime" | translate }}</div>
+        <div class="value">
+          {{ spell.timeToCast }} {{ "time." + spell.cost | translate }}
         </div>
-        <div class="entry">
-          <div class="name">{{ "fullSpellcards.castingTime" | translate }}</div>
-          <div class="value">
-            {{ spell.timeToCast }}
-            {{ "time." + spell.cost | translate }}
-          </div>
-        </div>
-        <div class="entry">
-          <div class="name">{{ "fullSpellcards.duration" | translate }}</div>
-          <div class="value">
-            @if (spell.duration != 0) {
-              {{ spell.duration }}
-            }
-            {{ "time." + spell.durationType | translate }}
-          </div>
-        </div>
-        <div class="entry">
-          <div class="name">{{ "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>
+
+      <!-- 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 }}
             }
-          </div>
+            {{ spell.duration }}
+          }
+          {{ "time." + spell.durationType | translate }}
         </div>
       </div>
-      <div class="data-row">
-        <div class="entry">
-          <div class="name">{{ "spellmodal.school" | translate }}</div>
-          <div class="value">{{ "schools." + spell.school | translate }}</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 class="entry">
+      </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) {
@@ -54,100 +107,136 @@
           } @else {
             <div class="name">{{ "fullSpellcards.modifier" | translate }}</div>
           }
-          <div class="value">
-            @if (spell.needsSavingThrow) {
-              {{
-                "attributesAbbreviations." + spell.savingThrowAttribute
-                  | translate
-              }}
-              {{ utils.spellSaveDC }}
-            } @else if (spell.needsAttackRoll) {
-              {{ utils.spellAttackModifier }}
-            } @else {
-              -
-            }
-          </div>
         </div>
-        <div class="entry">
-          @if (spell.doesDamage) {
-            <div class="name">{{ "fullSpellcards.damage" | translate }}</div>
-          } @else if (spell.doesHeal) {
-            <div class="name">{{ "fullSpellcards.heal" | translate }}</div>
+        <div class="value">
+          @if (spell.needsSavingThrow) {
+            {{
+              "attributesAbbreviations." + spell.savingThrowAttribute
+                | translate
+            }}
+            {{ utils.spellSaveDC }}
+          } @else if (spell.needsAttackRoll) {
+            {{ utils.spellAttackModifier }}
           } @else {
-            <div class="name">{{ "fullSpellcards.effect" | translate }}</div>
+            <div style="padding-right: 1rem">-</div>
           }
-          <div class="value">
-            <div>
-              @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>
         </div>
-        <div class="entry">
-          <div class="name">{{ "spellmodal.range" | translate }}</div>
-          @if (spell.isRanged) {
-            <div class="value">{{ spell.range }} ft.</div>
-          } @else if (spell.range === 0) {
-            <div class="value">{{ "fullSpellcards.self" | translate }}</div>
-          } @else if (spell.range === 5) {
-            <div class="value">{{ "fullSpellcards.touch" | translate }}</div>
-          }
-          @if (spell.hasAreaOfEffect) {
+      </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
-                >{{ spell.length }} ft.
-                <img
-                  style="width: 1rem; height: 1rem; margin-left: 0.125rem"
-                  [src]="
-                    'assets/icons/spellIcons/' + spell.areaOfEffectType + '.svg'
-                  "
-                />
+              <span>
+                {{ damage.diceNumber }}
+                {{ "general.dice" | translate }}{{ damage.diceType }}
+              </span>
+              <span>
+                <icon
+                  [size]="'xs'"
+                  [type]="'damage'"
+                  [icon]="damage.damageType"
+                ></icon>
               </span>
             </div>
           }
-        </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>
-    <img src="assets/images/spells/chillTouch.jpg" alt="s" />
+    <!-- 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>
-  <hr />
-  <div class="description" [innerHTML]="spell.description_de"></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>

src/app/shared-components/full-spellcard/full-spellcard.component.scss

@@ -1,113 +1,195 @@
-.dimensions {
-  width: 60rem;
-  height: 40rem;
-  border: var(--border);
-  border-radius: 10px;
-  box-shadow: var(--shadow);
-}
-
-.info {
-  display: flex;
+@mixin border {
+  border-bottom: 4px solid #a9a9a9;
+  border-left: 2px solid #a9a9a9;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #fff;
+  background: linear-gradient(
+      0deg,
+      rgba(201, 216, 201, 0.3),
+      rgba(201, 216, 209, 0.3)
+    ),
+    url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
+  z-index: 1;
 }
 
-.data {
-  width: 40rem;
-  height: 15rem;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
+.card-container {
+  width: 38rem;
+  height: 50rem;
+  border-radius: 10px;
+  border: 1px solid black;
+  box-sizing: border-box;
+  box-shadow: var(--shadow);
+  background: #171314;
+  position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 }
 
-.data-row {
-  display: flex;
-  justify-content: space-between;
+.card-background {
+  height: calc(100% - 26px);
+  width: calc(100% - 26px);
+  margin: 13px;
+  border-radius: 6px;
+  background-color: #863f57;
+  background-image: repeating-linear-gradient(
+      140deg,
+      transparent,
+      rgba(255, 255, 255, 0.25) 1%,
+      transparent 20%
+    ),
+    repeating-linear-gradient(
+      -30deg,
+      transparent,
+      transparent 8%,
+      rgba(255, 255, 255, 0.4),
+      transparent 9%
+    ),
+    repeating-linear-gradient(
+      -10deg,
+      transparent,
+      transparent 13%,
+      rgba(0, 0, 0, 0.4),
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      80deg,
+      transparent,
+      transparent 7.5%,
+      rgba(0, 0, 0, 0.25),
+      transparent 8%
+    ),
+    repeating-linear-gradient(
+      5deg,
+      transparent,
+      transparent 10.5%,
+      rgba(255, 255, 255, 0.5),
+      transparent 11%
+    ),
+    repeating-linear-gradient(
+      75deg,
+      transparent,
+      transparent 11.5%,
+      rgba(255, 255, 255, 0.5),
+      transparent 12%
+    ),
+    repeating-radial-gradient(
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0.2) 1%,
+      transparent 1%,
+      transparent 5%
+    );
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: 0;
+  position: absolute;
 }
 
-img {
-  width: 15rem;
-  height: 15rem;
-  margin-left: 1rem;
+.title {
+  @include border;
+  margin: 25px auto 0 auto;
+  height: 3.5rem;
+  width: 35rem;
+  text-align: center;
+  border-radius: 18px/40px;
+  overflow: hidden;
+  font-size: 2em;
+  font-weight: 700;
+  z-index: 1;
 }
 
-.entry {
-  width: 9rem;
-  height: 6rem;
+.data {
+  @include border;
+  margin: 0 auto;
+  height: 18rem;
+  width: 34rem;
+  border-radius: 10px;
+  z-index: 0;
+  display: flex;
 
-  .name {
-    font-weight: 500;
+  .spell-image {
+    width: 18rem;
+    height: 18rem;
   }
 
-  .value {
+  .stats {
+    margin-left: 0.5rem;
+    height: 18rem;
     display: flex;
-  }
-}
+    flex-direction: column;
+    justify-content: space-evenly;
+    .stats-row {
+      //   margin-top: 0.8rem;
+      display: flex;
+      align-items: center;
+      width: 14.5rem;
+      height: 2.5rem;
+      border-radius: 0px 18px 18px 0px / 0px 40px 40px 0px;
 
-.description {
-  overflow: auto;
-  height: 15rem;
-  border-bottom: 1px solid red;
+      .stat {
+        padding-left: 0.5rem;
+        font-weight: 500;
+        width: 8rem;
+      }
+
+      .value {
+        width: 7rem;
+        padding-right: 0.75rem;
+        text-align: right;
+      }
+    }
+  }
 }
 
-@mixin button {
-  color: black;
-  border: none;
-  border-radius: 10px;
-  box-shadow: var(--shadow);
-  height: 4rem;
-  width: 8rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  transition: all 0.2s ease-in-out;
+.info {
+  @include border;
+  margin: 0 auto 0 auto;
+  height: 3.5rem;
+  width: 35rem;
+  text-align: center;
+  border-radius: 18px/40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 0.5rem;
+  z-index: 2;
 }
 
-.full-spellcard {
-  height: 42rem;
-  width: 30rem;
-  border: solid 1px var(--border-color);
-  border-radius: 10px;
-  box-shadow: var(--shadow);
-  background: white;
-  overflow: auto;
+.value {
+  font-weight: 500;
 }
 
-.delete-row {
+.effect {
+  width: 18rem;
   display: flex;
-  justify-content: space-around;
-  margin-top: 1rem;
-}
-.delete-button {
-  background: var(--delete);
-  @include button;
-  &:hover {
-    background: var(--delete-hover);
-    scale: 1.03;
-  }
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.edit-button {
-  background: var(--edit);
-  @include button;
-  &:hover {
-    background: var(--edit-hover);
-    scale: 1.03;
-  }
+.range {
+  width: 10rem;
 }
 
-.add-button {
-  background: var(--accept);
-  @include button;
-  &:hover {
-    background: var(--accept-hover);
-    scale: 1.03;
-  }
+.level {
+  @include border;
+  border-radius: 100%;
+  margin-top: 0.125rem;
+  height: 4rem;
+  width: 4rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  transform: translateX(0.25rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-  &.disabled {
-    filter: grayscale(50%);
-    &:hover {
-      scale: 1;
-      background: var(--accept);
-      cursor: default;
-    }
-  }
+.description {
+  @include border;
+  width: 34rem;
+  height: 21.5rem;
+  overflow: auto;
+  border-radius: 10px;
+  margin: 0 auto;
+  padding: 1rem;
 }

src/app/shared-components/full-spellcard/full-spellcard.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Spell } from 'src/interfaces/spell';
 import { ModalService } from 'src/services/modal/modal.service';
 import { UtilsService } from 'src/services/utils/utils.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-full-spellcard',
@@ -19,10 +20,15 @@ export class FullSpellcardComponent {
   public constructor(
     private modalAccessor: ModalService,
     public utils: UtilsService,
+    public translate: TranslateService,
   ) {}
 
-  ngOnInit(): void {
-    console.log('Der zauber: ', this.spell);
+  // ngOnInit(): void {
+  //   console.log('Der zauber: ', this.spell);
+  // }
+
+  public setBackupImage(event: any): void {
+    event.target.src = 'assets/images/spells/backup.jpg';
   }
 
   public delete(): void {

src/assets/i18n/de.json

@@ -756,11 +756,12 @@
     "length": "Länge"
   },
   "fullSpellcards": {
-    "duration": "Wirkungsdauer",
+    "duration": "Dauer",
     "castingTime": "Zeitaufwand",
-    "attack": "Angriffsmodifikator",
-    "saveDC": "Rettungswurf-SG",
+    "attack": "Modifikator",
+    "saveDC": "Rettungswurf",
     "modifier": "Modifikator",
+    "school": "Schule",
     "damage": "Schaden",
     "heal": "Heilung",
     "effekt": "Effekt",
@@ -768,7 +769,9 @@
     "components": "Komponenten",
     "touch": "Berührung",
     "self": "Selbst",
-    "effect": "Effekt"
+    "effect": "Effekt",
+    "range": "Reichweite",
+    "concentration": "Konzentration"
   },
   "creator": {
     "new": "Neuen Charakter erstellen",
@@ -785,6 +788,6 @@
     "hint": "Die App befindet sich immer noch in einem Entwicklungsstadium und es können Fehler auftreten",
     "issues": "<p>Fehler und Anmerkungen bitte auf dem <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git-Server in Issues</a> vermerken.<p>",
     "okay": "Verstanden",
-    "version": "0.10.3"
+    "version": "0.10.4"
   }
 }

src/assets/i18n/en.json

@@ -759,13 +759,16 @@
     "attack": "Attack Modifier",
     "saveDC": "Spellsave DC",
     "modifier": "Modifier",
+    "school": "School",
     "damage": "Damage",
     "heal": "Healing",
     "description": "Description",
     "components": "Components",
     "touch": "Touch",
     "self": "Self",
-    "effect": "Effect"
+    "effect": "Effect",
+    "range": "Range",
+    "concentration": "Concentration"
   },
   "creator": {
     "new": "Create New Character",
@@ -782,6 +785,6 @@
     "hint": "The app is still in a development stage and errors may occur",
     "issues": "<p>Please note errors and comments on the <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git server in Issues</a>.<p>",
     "okay": "Understood",
-    "version": "0.10.0"
+    "version": "0.10.4"
   }
 }

src/colors.scss

@@ -12,21 +12,39 @@
 
   --abjuration-background: #cab8de;
   --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
+  --abjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #9586a5;
+  --abjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #9586a5;
   --conjuration-background: #714c81;
   --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
+  --conjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #744987;
+  --conjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #744987;
   --divination-background: #f0e3ce;
   --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
+  --divination-border-small: 0 0 0 1px #171314, 0 0 0 3px #ffffff;
+  --divination-border-large: 0 0 0 3px #171314, 0 0 0 8px #ffffff;
   --enchantment-background: #629179;
   --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
+  --enchantment-border-small: 0 0 0 1px #171314, 0 0 0 3px #26714a;
+  --enchantment-border-large: 0 0 0 3px #171314, 0 0 0 8px #26714a;
   --evocation-background: #a46a7d;
   --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
+  --evocation-border-small: 0 0 0 1px #171314, 0 0 0 3px #863f57;
+  --evocation-border-large: 0 0 0 3px #171314, 0 0 0 8px #863f57;
   --illusion-background: #69a;
   --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
+  --illusion-border-small: 0 0 0 1px #171314, 0 0 0 3px #2d6475;
+  --illusion-border-large: 0 0 0 3px #171314, 0 0 0 8px #2d6475;
   --necromancy-background: #000000;
   --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
+  --necromancy-border-small: 0 0 0 1px #171314, 0 0 0 3px #36353a;
+  --necromancy-border-large: 0 0 0 3px #171314, 0 0 0 8px #36353a;
   --transmutation-background: rgb(51, 52, 138);
+  --transmutation-border-small: 0 0 0 1px #171314, 0 0 2px #8f088f,
+    0 0 3px #7f088f, 0 0 4px #69088f, 0 0 5px #3a088f, 0 0 6px #080a8f;
   --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f,
     0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
+  --transmutation-border-large: 0 0 0 3px #171314, 0 0 4px #8f088f,
+    0 0 5px #7f088f, 0 0 11px #69088f, 0 0 14px #3a088f, 0 0 17px #080a8f;
 
   --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
   --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

src/services/spells/spells.service.ts

@@ -1474,7 +1474,7 @@ export class SpellsService {
       doesHeal: false,
       description_de: `
         <p>Du zeigen auf eine Kreatur, die Sie in Reichweite sehen können, und der Klang einer traurigen Glocke erfüllt für einen Moment die Luft um sie herum. Dem Ziel muss ein Weisheitswurf gelingen oder es erleidet 1W8 nekrotischen Schaden. Wenn dem Ziel einer seiner Trefferpunkte fehlt, erleidet es stattdessen 1W12 nekrotischen Schaden.
-        <p><b>Auf höheren Stufen:</b> Der Schaden des Zaubers erhöht sich um einen Würfel, wenn du 5 erreichstth Stufe (2W8 oder 2W12), 11th Stufe (3W8 oder 3W12) und 17th Stufe (4W8 oder 4W12)</p>
+        <p><b>Auf höheren Stufen:</b> Der Schaden des Zaubers erhöht sich um einen Würfel, wenn du Stufe 5 (2W8 oder 2W12), 11 (3W8 oder 3W12) und 17 (4W8 oder 4W12) erreichst.</p>
       `,
       description_en: `
         <p>You point at one creature you can see within range, and the sound of a dolorous bell fills the air around it for a moment. The target must succeed on a Wisdom saving throw or take 1d8 necrotic damage. If the target is missing any of its hit points, it instead takes 1d12 necrotic damage.<p>

src/services/utils/utils.service.ts

@@ -56,4 +56,8 @@ export class UtilsService {
       this.calculateModifiers();
     });
   }
+
+  /////////////////////////////////////////////
+  //             PLACEHOLDER                 //
+  /////////////////////////////////////////////
 }

src/styles.scss

@@ -10,17 +10,6 @@
 
 @import "responsive";
 
-// Hide scrollbar for Chrome, Safari and Opera
-// *::-webkit-scrollbar {
-//   display: none;
-// }
-
-// Hide scrollbar for Firefox
-// * {
-//   scrollbar-width: none;
-//   -ms-overflow-style: none; // IE and Edge
-// }
-
 // LISTS
 
 .item-list {