unified spellcards with @for

.gitignore

@@ -19,7 +19,7 @@ yarn-error.log
 *.launch
 .settings/
 *.sublime-workspace
-.nx
+*.nx
 
 # Visual Studio Code
 .vscode/*

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

@@ -17,7 +17,6 @@ export class ModalComponent {
   ngOnInit() {
     this.modalRef = document.getElementById('myModal');
     this.modalAccessor.modal$.subscribe((data) => {
-      console.log('modal component', data);
       this.modalComponent = data.component;
       this.inputData = data.data;
       this.open();

src/app/journal/journal-home/navigation-panel/navigation-panel.component.html

@@ -34,7 +34,7 @@
       <div
         class="navigation-entry"
         (click)="setActiveProperty(4)"
-        [routerLink]="'./notes'"
+        [routerLink]="'./spellcards'"
       >
         Zauber
       </div>
@@ -43,7 +43,7 @@
       <div
         class="navigation-entry"
         (click)="setActiveProperty(5)"
-        [routerLink]="'./spellcards'"
+        [routerLink]="'./notes'"
       >
         Notizen
       </div>

src/app/journal/journal-spellcards/journal-spellcards.component.html

@@ -1,8 +1,16 @@
 <div class="spellcards-container">
   <div cdkDropListGroup>
+    @for(level of [0,1,2,3,4,5,6,7,8,9]; track level; let index = $index) {
+
     <div class="example-container">
-      <h2>Zaubertricks</h2>
-      <button (click)="toggleSpellList(0)">Toggle Spell List</button>
+      <h2>{{ getSpellLevel(index) }}</h2>
+      <icon
+        [size]="'l'"
+        [type]="'UI'"
+        [icon]="showSpellList[index] ? 'visible' : 'hidden'"
+        [class]="'pointer'"
+        (click)="toggleSpellList(0)"
+      ></icon>
 
       <div
         cdkDropList
@@ -10,49 +18,22 @@
         [cdkDropListData]="level0"
         class="spell-list"
         (cdkDropListDropped)="drop($event)"
-        [class]="showSpellList[0] ? '' : 'hidden'"
+        [class]="showSpellList[index] ? '' : 'hidden'"
       >
-        @for (spell of level0; let index = $index; track spell) {
-        <div class="spellcard" (click)="openModal(true, 0, index)" cdkDrag>
+        @for (spell of getSpellList(index); let spellIndex = $index; track
+        spell) {
+        <div
+          class="spellcard"
+          (click)="openModal(true, index, spellIndex)"
+          cdkDrag
+        >
           <div class="name">{{ spell.name }}</div>
           <div>{{ spell.cost }}</div>
           <div>{{ spell.level }}</div>
           <div>{{ spell.school }}</div>
         </div>
         }
-        <div class="add-card" (click)="openModal(false, 0)">
-          <icon
-            class="add"
-            [size]="'l'"
-            [type]="'UI'"
-            [icon]="'add'"
-            [class]="'pointer'"
-          ></icon>
-        </div>
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 1</h2>
-      <button (click)="toggleSpellList(1)">Toggle Spell List</button>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level1"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-        [class]="showSpellList[1] ? '' : 'hidden'"
-      >
-        @for (item of level1; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-        <div class="add-card" (click)="openModal(false, 1)">
+        <div class="add-card" (click)="openModal(false, index)">
           <icon
             class="add"
             [size]="'l'"
@@ -64,194 +45,6 @@
       </div>
     </div>
 
-    <div class="example-container">
-      <h2>Level 2</h2>
-      <button (click)="toggleSpellList(2)">Toggle Spell List</button>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level2"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-        [class]="showSpellList[2] ? '' : 'hidden'"
-      >
-        @for (item of level2; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-        <div class="add-card">
-          <icon
-            class="add"
-            [size]="'l'"
-            [type]="'UI'"
-            [icon]="'add'"
-            [class]="'pointer'"
-          ></icon>
-        </div>
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 3</h2>
-      <button (click)="toggleSpellList(3)">Toggle Spell List</button>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level3"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-        [class]="showSpellList[3] ? '' : 'hidden'"
-      >
-        @for (item of level3; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-        <div class="add-card">
-          <icon
-            class="add"
-            [size]="'l'"
-            [type]="'UI'"
-            [icon]="'add'"
-            [class]="'pointer'"
-          ></icon>
-        </div>
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 4</h2>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level4"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-      >
-        @for (item of level4; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 5</h2>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level5"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-      >
-        @for (item of level5; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 6</h2>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level6"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-      >
-        @for (item of level6; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 7</h2>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level7"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-      >
-        @for (item of level7; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 8</h2>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level8"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-      >
-        @for (item of level8; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="example-container">
-      <h2>Level 9</h2>
-
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level9"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-      >
-        @for (item of level9; track item) {
-        <div class="spellcard" cdkDrag>
-          <div>{{ item.name }}</div>
-          <div>{{ item.cost }}</div>
-          <div>{{ item.level }}</div>
-          <div>{{ item.school }}</div>
-        </div>
-        }
-      </div>
-    </div>
+    }
   </div>
 </div>

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

@@ -3,20 +3,20 @@
   height: 88vh;
   padding: 2rem;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-
 .example-container {
-
 }
 
 .spell-list {
   border: solid 1px #ccc;
   height: 16rem;
-  width: 96%;
-  margin: 0 1rem;
+  // width: 96%;
+  // margin: 0 1rem;
   background: white;
-  border-radius: 4px;
+  border-radius: 10px;
   overflow: hidden;
   display: flex;
   flex-direction: row;
@@ -26,15 +26,15 @@
   overflow-x: auto;
   transition: height 0.4s ease-in-out;
 
-  &.hidden{
+  &.hidden {
     height: 0;
     overflow: hidden;
     transition: height 0.4s ease-in-out;
-    border:none;
+    border: none;
   }
 }
 
-@mixin card{
+@mixin card {
   height: 14rem;
   // width: 10rem;
   flex: 0 0 10rem;
@@ -47,33 +47,52 @@
   @include card;
   cursor: move;
 
-  .name{
+  .name {
     font-weight: 600;
     font-size: 1.125rem;
     text-align: center;
     margin-top: 0.25rem;
-  }  
+  }
 }
 
-.add-card{
+.add-card {
   @include card;
   position: relative;
   cursor: pointer;
 
-  .add{
+  .add {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);  
+    transform: translate(-50%, -50%);
+  }
+}
+
+.animate-visibility {
+  animation: icon-switch 0.5s ease-in-out;
+}
+
+@keyframes icon-switch {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
   }
 }
 
+//  CDK DRAG
+
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
@@ -83,7 +102,7 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   font-size: 0 !important;
 
-  .name{
+  .name {
     display: none;
   }
 }
@@ -92,7 +111,6 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-
 .spell-list.cdk-drop-list-dragging .spellcard:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+}

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

@@ -18,13 +18,6 @@ import { SpellModalComponent } from 'src/app/journal/spell-modal/spell-modal.com
   styleUrls: ['./journal-spellcards.component.scss'],
 })
 export class JournalSpellcardsComponent {
-  public constructor(
-    public dataAccessor: DataService,
-    private modalAccessor: ModalService
-  ) {
-    this.loadSpells();
-  }
-
   public level0: Spell[] = [];
   public level1: Spell[] = [];
   public level2: Spell[] = [];
@@ -36,19 +29,6 @@ export class JournalSpellcardsComponent {
   public level8: Spell[] = [];
   public level9: Spell[] = [];
 
-  public listTranslator: any = {
-    0: this.level0,
-    1: this.level1,
-    2: this.level2,
-    3: this.level3,
-    4: this.level4,
-    5: this.level5,
-    6: this.level6,
-    7: this.level7,
-    8: this.level8,
-    9: this.level9,
-  };
-
   public showSpellList: boolean[] = [
     true,
     true,
@@ -62,6 +42,14 @@ export class JournalSpellcardsComponent {
     true,
   ];
 
+  public constructor(
+    public dataAccessor: DataService,
+    private modalAccessor: ModalService
+  ) {
+    this.loadSpells();
+    this.hideEmptySpelllists();
+  }
+
   ///////// FUNCTIONS //////////
 
   public openModal(
@@ -73,7 +61,7 @@ export class JournalSpellcardsComponent {
     this.modalAccessor.openModal(SpellModalComponent, {
       spell:
         spellIndex !== undefined
-          ? JSON.parse(JSON.stringify(this.listTranslator[level][spellIndex]))
+          ? JSON.parse(JSON.stringify(this.getSpellList(level)![spellIndex]))
           : undefined,
       isUpdate: isUpdate,
       level: level,
@@ -93,17 +81,67 @@ export class JournalSpellcardsComponent {
   }
 
   public addSpell(spell: Spell, level: number) {
-    console.log('The level: ', level);
-    console.log('The levellist:', this.listTranslator[level]);
-    console.log('The new spell: ', spell);
-    this.listTranslator[level].push(spell);
-    console.log(this.listTranslator[level]);
-    // this.updateSpellsInDatabase();
+    this.getSpellList(level)?.push(spell);
+    this.updateSpellsInDatabase();
   }
 
   public updateSpell(spell: Spell, level: number, index: number): void {
-    this.listTranslator[level][index] = spell;
-    // this.updateSpellsInDatabase();
+    this.getSpellList(level)![index] = spell;
+    this.updateSpellsInDatabase();
+  }
+
+  public getSpellList(level: number): Spell[] | undefined {
+    switch (level) {
+      case 0:
+        return this.level0;
+      case 1:
+        return this.level1;
+      case 2:
+        return this.level2;
+      case 3:
+        return this.level3;
+      case 4:
+        return this.level4;
+      case 5:
+        return this.level5;
+      case 6:
+        return this.level6;
+      case 7:
+        return this.level7;
+      case 8:
+        return this.level8;
+      case 9:
+        return this.level9;
+      default:
+        return undefined;
+    }
+  }
+
+  public getSpellLevel(level: number): string {
+    switch (level) {
+      case 0:
+        return 'Zaubertricks';
+      case 1:
+        return 'Level 1';
+      case 2:
+        return 'Level 2';
+      case 3:
+        return 'Level 3';
+      case 4:
+        return 'Level 4';
+      case 5:
+        return 'Level 5';
+      case 6:
+        return 'Level 6';
+      case 7:
+        return 'Level 7';
+      case 8:
+        return 'Level 8';
+      case 9:
+        return 'Level 9';
+      default:
+        return '';
+    }
   }
 
   toggleSpellList(index: number) {
@@ -118,7 +156,6 @@ export class JournalSpellcardsComponent {
         event.previousIndex,
         event.currentIndex
       );
-      console.log(event.container.data);
     } else {
       transferArrayItem(
         event.previousContainer.data,
@@ -177,4 +214,32 @@ export class JournalSpellcardsComponent {
     // this.level8 = this.dataAccessor.spellLevel8;
     // this.level9 = this.dataAccessor.spellLevel9;
   }
+
+  private hideEmptySpelllists(): void {
+    this.showSpellList = [
+      this.level0.length > 0,
+      this.level1.length > 0,
+      this.level2.length > 0,
+      this.level3.length > 0,
+      this.level4.length > 0,
+      this.level5.length > 0,
+      this.level6.length > 0,
+      this.level7.length > 0,
+      this.level8.length > 0,
+      this.level9.length > 0,
+    ];
+  }
+
+  private updateSpellsInDatabase(): void {
+    this.dataAccessor.spellLevel0 = this.level0;
+    this.dataAccessor.spellLevel1 = this.level1;
+    this.dataAccessor.spellLevel2 = this.level2;
+    // this.dataAccessor.spellLevel3 = this.level3;
+    // this.dataAccessor.spellLevel4 = this.level4;
+    // this.dataAccessor.spellLevel5 = this.level5;
+    // this.dataAccessor.spellLevel6 = this.level6;
+    // this.dataAccessor.spellLevel7 = this.level7;
+    // this.dataAccessor.spellLevel8 = this.level8;
+    // this.dataAccessor.spellLevel9 = this.level9;
+  }
 }

src/assets/icons/UIIcons/hidden.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"/></svg>

src/assets/icons/UIIcons/visible.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>