Completed full-spellcards

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

@@ -16,6 +16,9 @@
     } @else {
       {{ spell.english }}
     }
+    @if (spell.isRitual) {
+      (Ritual)
+    }
   </div>
   <div
     class="data"
@@ -36,7 +39,7 @@
       <!-- CASTING TIME -->
       <div
         class="stats-row"
-        style="margin-top: 1.125rem"
+        style="margin-top: 0.5rem"
         [style.box-shadow]="
           'var(--' + spell.school.toLowerCase() + '-border-small)'
         "
@@ -50,6 +53,7 @@
       <!-- DURATION -->
       <div
         class="stats-row"
+        [style.height]="spell.needsConcentration ? '3rem' : '2.5rem'"
         [style.box-shadow]="
           'var(--' + spell.school.toLowerCase() + '-border-small)'
         "
@@ -59,6 +63,9 @@
           @if (
             spell.durationType != "instant" && spell.durationType != "permanent"
           ) {
+            @if (spell.needsConcentration) {
+              {{ "fullSpellcards.concentration" | translate }}
+            }
             {{ spell.duration }}
           }
           {{ "time." + spell.durationType | translate }}
@@ -74,10 +81,10 @@
         <div class="stat">{{ "fullSpellcards.components" | translate }}</div>
         <div class="value">
           @if (spell.needsVerbal) {
-            {{ "spells.components.verbal" | translate }},
+            {{ "spells.components.verbal" | translate }}
           }
           @if (spell.needsSomatic) {
-            {{ "spells.components.somatic" | translate }},
+            {{ "spells.components.somatic" | translate }}
           }
           @if (spell.needsMaterial) {
             {{ "spells.components.material" | translate }}
@@ -115,46 +122,102 @@
           }
         </div>
       </div>
-      <!-- RANGE  -->
+      <!-- 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.range" | translate }}
+          {{ "fullSpellcards.school" | 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>
-          }
+          {{ "schools." + spell.school | translate }}
         </div>
       </div>
     </div>
   </div>
+  <!-- INFO ROW -->
   <div
     class="info"
     [style.box-shadow]="
       'var(--' + spell.school.toLowerCase() + '-border-large)'
     "
   >
-    <div class="school">{{ "schools." + spell.school | translate }}</div>
+    <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]="
@@ -164,165 +227,16 @@
       {{ spell.level }}
     </div>
   </div>
+  <!-- DESCRIPTION -->
   <div
     class="description"
-    [innerHTML]="spell.description_de"
+    [innerHTML]="
+      translate.getDefaultLang() == 'de'
+        ? spell.description_de
+        : spell.description_en
+    "
     [style.box-shadow]="
       'var(--' + spell.school.toLowerCase() + '-border-large)'
     "
   ></div>
 </div>
-
-<!-- <div class="dimensions">
-  <div class="title">
-    {{ spell.german }}
-  </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>
-        <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>
-        </div>
-      </div>
-      <div class="data-row">
-        <div class="entry">
-          <div class="name">{{ "spellmodal.school" | translate }}</div>
-          <div class="value">{{ "schools." + spell.school | translate }}</div>
-        </div>
-        <div class="entry">
-          @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 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>
-          } @else {
-            <div class="name">{{ "fullSpellcards.effect" | translate }}</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>
-              <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>
-    <img src="assets/images/spells/chillTouch.jpg" alt="s" />
-  </div>
-  <hr />
-  <div class="description" [innerHTML]="spell.description_de"></div>
-</div> -->

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

@@ -113,8 +113,12 @@
 
   .stats {
     margin-left: 0.5rem;
+    height: 18rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
     .stats-row {
-      margin-top: 0.8rem;
+      //   margin-top: 0.8rem;
       display: flex;
       align-items: center;
       width: 14.5rem;
@@ -147,13 +151,23 @@
   justify-content: space-between;
   align-items: center;
   padding-left: 0.5rem;
-  font-size: 1.75em;
-  font-weight: 600;
   z-index: 2;
 }
 
-.school {
-  font-size: 1.25rem;
+.value {
+  font-weight: 500;
+}
+
+.effect {
+  width: 18rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.range {
+  width: 10rem;
 }
 
 .level {

src/assets/i18n/de.json

@@ -756,11 +756,12 @@
     "length": "Länge"
   },
   "fullSpellcards": {
-    "duration": "Wirkungsdauer",
+    "duration": "Dauer",
     "castingTime": "Zeitaufwand",
     "attack": "Modifikator",
     "saveDC": "Rettungswurf",
     "modifier": "Modifikator",
+    "school": "Schule",
     "damage": "Schaden",
     "heal": "Heilung",
     "effekt": "Effekt",
@@ -769,7 +770,8 @@
     "touch": "Berührung",
     "self": "Selbst",
     "effect": "Effekt",
-    "range": "Reichweite"
+    "range": "Reichweite",
+    "concentration": "Konzentration"
   },
   "creator": {
     "new": "Neuen Charakter erstellen",

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",

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>