changed full spellcard. Next step is implement the damage and save throws

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/shared-components/full-spellcard/full-spellcard.component.html

@@ -1,4 +1,179 @@
-<div class="dimensions">
+<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 }}
+    }
+  </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: 1.125rem"
+        [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>
+
+      <!-- DURATION -->
+      <div
+        class="stats-row"
+        [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"
+          ) {
+            {{ 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>
+      <!-- RANGE  -->
+      <div
+        class="stats-row"
+        [style.box-shadow]="
+          'var(--' + spell.school.toLowerCase() + '-border-small)'
+        "
+      >
+        <div class="stat" style="width: 6rem">
+          {{ "fullSpellcards.range" | translate }}
+        </div>
+        <div class="value" style="width: 9rem">
+          @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>
+    </div>
+  </div>
+  <div
+    class="info"
+    [style.box-shadow]="
+      'var(--' + spell.school.toLowerCase() + '-border-large)'
+    "
+  >
+    <div class="school">{{ "schools." + spell.school | translate }}</div>
+    <div
+      class="level"
+      [style.box-shadow]="
+        'var(--' + spell.school.toLowerCase() + '-border-large)'
+      "
+    >
+      {{ spell.level }}
+    </div>
+  </div>
+  <div
+    class="description"
+    [innerHTML]="spell.description_de"
+    [style.box-shadow]="
+      'var(--' + spell.school.toLowerCase() + '-border-large)'
+    "
+  ></div>
+</div>
+
+<!-- <div class="dimensions">
   <div class="title">
     {{ spell.german }}
   </div>
@@ -150,4 +325,4 @@
   </div>
   <hr />
   <div class="description" [innerHTML]="spell.description_de"></div>
-</div>
+</div> -->

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

@@ -1,113 +1,181 @@
-.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 {
-    display: flex;
-  }
-}
+  .stats {
+    margin-left: 0.5rem;
+    .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;
+.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;
+  font-size: 1.75em;
   font-weight: 600;
-  transition: all 0.2s ease-in-out;
+  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;
+.school {
+  font-size: 1.25rem;
 }
 
-.delete-row {
+.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: space-around;
-  margin-top: 1rem;
-}
-.delete-button {
-  background: var(--delete);
-  @include button;
-  &:hover {
-    background: var(--delete-hover);
-    scale: 1.03;
-  }
-}
-
-.edit-button {
-  background: var(--edit);
-  @include button;
-  &:hover {
-    background: var(--edit-hover);
-    scale: 1.03;
-  }
+  justify-content: center;
+  align-items: center;
 }
 
-.add-button {
-  background: var(--accept);
-  @include button;
-  &:hover {
-    background: var(--accept-hover);
-    scale: 1.03;
-  }
-
-  &.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

@@ -758,8 +758,8 @@
   "fullSpellcards": {
     "duration": "Wirkungsdauer",
     "castingTime": "Zeitaufwand",
-    "attack": "Angriffsmodifikator",
-    "saveDC": "Rettungswurf-SG",
+    "attack": "Modifikator",
+    "saveDC": "Rettungswurf",
     "modifier": "Modifikator",
     "damage": "Schaden",
     "heal": "Heilung",
@@ -768,7 +768,8 @@
     "components": "Komponenten",
     "touch": "Berührung",
     "self": "Selbst",
-    "effect": "Effekt"
+    "effect": "Effekt",
+    "range": "Reichweite"
   },
   "creator": {
     "new": "Neuen Charakter erstellen",

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/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 {