implemented and styled custom spell management

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.html

@@ -1,6 +1,6 @@
 <div class="dimensions">
   <div class="content">
-    <div class="title">{{ "spellcards.manage" | translate }}</div>
+    <div class="title">{{ "spellbook.manage" | translate }}</div>
     <div class="spell-list">
       @for (spell of spells; let index = $index; track spell) {
         <div
@@ -18,18 +18,24 @@
       }
     </div>
   </div>
-  <div class="horizontal-buttons" style="padding: 2rem 1.5rem">
-    <ui-button
+  <div class="button-container">
+    <!-- <ui-button
       [color]="'red'"
       [width]="'w15'"
       [type]="'deleteSelected'"
       (click)="delete()"
-    ></ui-button>
-    <ui-button
+    ></ui-button> -->
+    <!-- <ui-button
       [color]="'red'"
       [width]="'w15'"
       [type]="'cancel'"
       (click)="cancel()"
-    ></ui-button>
+    ></ui-button> -->
+    <button
+      [class]="indexList.length === 0 ? 'disabled' : ''"
+      (click)="indexList.length !== 0 ? delete() : ''"
+    >
+      {{ "spellbook.delete" | translate }}
+    </button>
   </div>
 </div>

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.scss

@@ -3,20 +3,23 @@
   height: 45rem;
   padding: 0;
   overflow: hidden;
+  background-image: url("/assets/images/bg.jpg");
+}
+
+.content {
+  margin: 0;
 }
 
 .title {
   box-shadow: var(--shadow-bottom);
   padding: 1.5rem 0 1rem 0;
   margin-top: 0;
-}
-
-.content {
-  margin: 0;
+  // color: #58180d;
+  // font-family: "Bookinsanity", serif;
 }
 
 .spell-list {
-  height: 32.5rem;
+  height: 34rem;
   padding: 1rem 1rem 0 1rem;
   overflow-y: auto;
   gap: 0.5rem;
@@ -30,12 +33,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: var(--items);
+  background-image: url("/assets/images/texture.png");
   border-radius: 10px;
-  border: var(--border);
   font-size: 1rem;
   font-weight: 600;
-  // text-align: center;
   cursor: pointer;
   box-shadow:
     0 5px 5px -3px rgba(0, 0, 0, 0.2),
@@ -43,19 +44,39 @@
     0 3px 10px 2px rgba(0, 0, 0, 0.12);
   transition: background-color 0.2s ease-in-out;
   &:hover {
-    background-color: #f8d8c6;
+    border: 1px solid #9b8559;
   }
 }
 
 .selected {
-  background-color: #f8d8c6;
+  background-color: #58180d;
   box-sizing: border-box;
-  border: 3px solid var(--primary);
+  border: 3px solid #9b8559 !important;
   &:hover {
     background-color: var(--items);
   }
 }
 
-.horizontal-buttons {
+.button-container {
   box-shadow: var(--shadow-top);
+  height: 5.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    font-size: 1.25rem;
+    font-weight: 600;
+    width: 18.5rem;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    background-color: var(--delete);
+    border: none;
+    box-shadow: var(--shadow);
+  }
+
+  .disabled {
+    filter: grayscale(0.5);
+    cursor: not-allowed;
+  }
 }

src/app/journal/journal-spellbook/journal-spellbook.component.scss

@@ -9,6 +9,14 @@
   background-image: url("/assets/images/bg.jpg");
 }
 
+h1 {
+  color: #58180d;
+  // font-family: "Bookinsanity", serif;
+  font-size: 3.5rem;
+  font-weight: 500;
+  margin-bottom: 0;
+}
+
 .header-row {
   display: flex;
   flex-direction: row;
@@ -111,7 +119,6 @@
   // background-color: var(--tab);
   background-color: #cbbea4;
   background-color: #b5a27d;
-
   color: black;
   font-size: 1.123rem;
   font-weight: 500;
@@ -126,7 +133,6 @@
   // background-color: var(--tab-active);
   background-color: #b5a27d;
   background-color: #9b8559;
-
   width: 9.25rem;
   font-size: 1.25rem;
   font-weight: 550;

src/app/journal/journal-spellbook/journal-spellbook.component.ts

@@ -318,10 +318,8 @@ export class JournalSpellbookComponent {
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         if (result.state === 'delete') {
-          result.data.forEach((spell: Spell) => {
-            // TODO: Implement deletion of custom spells
-            // this.deleteCustomSpell(spell);
-          });
+          this.dataAccessor.deleteCustomSpellArray(result.data);
+          this.refreshFilteredSpells();
         }
         resultSubscription.unsubscribe();
       },
@@ -348,6 +346,7 @@ export class JournalSpellbookComponent {
       alreadyPrepared: alreadyPrepared,
       alreadyInFavorites: alreadyInFavorites,
     });
+    // This subscription is used to receive messages from the spellcard without closing the modal.
     const actionSubscription = this.modalAccessor.action$.subscribe(
       (message) => {
         if (message.action === 'addToFavorites') {
@@ -361,18 +360,16 @@ export class JournalSpellbookComponent {
         }
       },
     );
+    // This subscription is used to receive the result from the spellcard modal.
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         resultSubscription.unsubscribe();
         actionSubscription.unsubscribe();
-
         if (result.state === 'copy') {
           setTimeout(() => {
             this.openSpellCreationModal(true, spell);
           }, 100);
         } else if (result.state === 'update') {
-          console.log('Update spell, caught in spellbook component');
-          // TODO: Implement Modification of spells
           setTimeout(() => {
             this.openSpellModificationModal(spell);
           }, 100);

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

@@ -1,5 +1,9 @@
 @import "../../../responsive";
 
+.dimensions {
+  background-image: url("/assets/images/bg.jpg");
+}
+
 .checkbox-column {
   width: 33.3%;
   display: flex;
@@ -110,6 +114,8 @@ div.nav-pills.flex-column.nav {
     &.active,
     &:hover {
       background-color: var(--tab-active);
+      background-color: #b5a27d;
+
       box-shadow: var(--shadow);
     }
   }

src/assets/i18n/de.json

@@ -798,7 +798,8 @@
     },
     "manage": "Eigene Zauber verwalten",
     "add": "Neuen Zauber erstellen",
-    "noSpells": "Für diesen Filter gibt es keine Zauber"
+    "noSpells": "Für diesen Filter gibt es keine Zauber",
+    "delete": "Ausgewählte Zauber löschen"
   },
 
   "creator": {

src/assets/i18n/en.json

@@ -793,7 +793,8 @@
     },
     "manage": "Manage custom spells",
     "add": "Create new spell",
-    "noSpells": "No spells found for this filter"
+    "noSpells": "No spells found for this filter",
+    "delete": "Delete selected spells"
   },
   "creator": {
     "new": "Create New Character",

src/services/data/data.service.ts

@@ -303,6 +303,17 @@ export class DataService {
     });
   }
 
+  public deleteCustomSpellArray(spells: Spell[]): void {
+    spells.forEach((spell) => {
+      const index = this._customSpells.indexOf(spell);
+      this._customSpells.splice(index, 1);
+    });
+    this.setData('customSpells', {
+      spells: this._customSpells,
+      id: this.customSpellId,
+    });
+  }
+
   private _customSpellId: number = 10000;
 
   public get customSpellId(): number {