started working on the spellmodal and spell details panel

.nx/cache/d/daemon.log

@@ -459218,3 +459218,40 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-14T06:20:33.946Z - Time taken for 'hash changed files from watcher' 43.0271999835968ms
 [NX Daemon Server] - 2023-11-14T06:20:33.946Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-14T06:20:33.946Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-14T20:34:01.374Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-14T20:34:01.411Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-14T20:34:01.412Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-14T20:34:01.413Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-14T20:34:01.414Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-14T20:34:01.416Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-14T20:34:02.202Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-11-14T20:34:02.202Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-14T20:34:02.204Z - Time taken for 'hash changed files from watcher' 165.97729992866516ms
+[NX Daemon Server] - 2023-11-14T20:34:02.204Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-14T20:34:02.204Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":1920}
+{"processId":17628}

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.scss

@@ -1,10 +1,3 @@
-.details-title{
-    text-align: center;
-    font-size: 2rem;
-    font-weight: bold;
-    margin-top: 1.5rem;
-}
-
 .life-container{
     display: flex;
     flex-direction: column;
@@ -18,8 +11,6 @@
     justify-content: center;
     gap: 0.5rem;
     text-align: center;
-
-
 }
 
 .life-input{

src/app/journal/journal-stats/weapons-container/spell-table/spell-details/spell-details.component.html

@@ -0,0 +1,22 @@
+<p>spell-details works!</p>
+
+<div class="vertical-button-wrapper-3">
+  <ui-button
+    [type]="'edit'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'delete'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('delete')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

src/app/journal/journal-stats/weapons-container/spell-table/spell-details/spell-details.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpellDetailsComponent } from './spell-details.component';
+
+describe('SpellDetailsComponent', () => {
+  let component: SpellDetailsComponent;
+  let fixture: ComponentFixture<SpellDetailsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SpellDetailsComponent]
+    });
+    fixture = TestBed.createComponent(SpellDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-stats/weapons-container/spell-table/spell-details/spell-details.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+
+@Component({
+  selector: 'app-spell-details',
+  templateUrl: './spell-details.component.html',
+  styleUrls: ['./spell-details.component.scss'],
+})
+export class SpellDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
+
+  @Input() spell = {};
+  @Input() modifiers = {};
+
+  public close(result: string): void {
+    this.detailsAccessor.closePanel(result);
+  }
+}

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.html

@@ -8,7 +8,7 @@
     class="example-box"
     *ngFor="let spell of spells; let index = index"
     cdkDrag
-    (change)="updateSpellsInDatabase()"
+    (click)="openDetailsPanel(index)"
   >
     <div class="spell-type">
       <icon
@@ -131,12 +131,18 @@
         [size]="'s'"
         [type]="'UI'"
         [icon]="'edit'"
-        (click)="emitUpdateSpell(index)"
         [class]="'pointer'"
       ></icon>
     </div>
   </div>
   <div class="add-box">
-    <button (click)="createSpell()">+</button>
+    <button (click)="openSpellModal()">+</button>
   </div>
 </div>
+
+<spell-modal
+  #spellModal
+  (spellCreated)="addSpell($event)"
+  (spellDeleted)="deleteSpell($event)"
+  (spellUpdated)="updateSpell($event.spell, $event.index)"
+></spell-modal>

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.ts

@@ -1,7 +1,10 @@
-import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
+import { NgxSmartModalService } from 'ngx-smart-modal';
+import { DetailsService } from 'src/services/details/details.service';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Spell } from 'src/interfaces/spell';
+import { SpellDetailsComponent } from './spell-details/spell-details.component';
 
 @Component({
   selector: 'spell-table',
@@ -9,15 +12,17 @@ import { Spell } from 'src/interfaces/spell';
   styleUrls: ['./spell-table.component.scss'],
 })
 export class SpellTableComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public ngxSmartModalService: NgxSmartModalService,
+    public detailsAccessor: DetailsService
+  ) {}
 
-  @Output() public createNewSpell: EventEmitter<void> =
-    new EventEmitter<void>();
-  @Output() public updateSpellEvent: EventEmitter<any> =
-    new EventEmitter<any>();
-
-  @Input() public spellAttackBonus: string = '0';
-  @Input() public spellSaveDC: number = 0;
+  public spellAttackBonus: string = '0';
+  public spellSaveDC: number = 0;
+  private spellcastingAttribute: string | undefined;
+  private spellcastingAttributeModifier: number = 0;
+  private proficiencyBonus: number = 2;
 
   public spells!: Spell[];
 
@@ -32,20 +37,39 @@ export class SpellTableComponent {
 
   public ngOnInit(): void {
     this.spells = this.dataAccessor.getSpells();
+    this.subscribeToData();
   }
 
-  public dropSpells(event: CdkDragDrop<string[]>): void {
-    moveItemInArray(this.spells, event.previousIndex, event.currentIndex);
-    this.updateSpellsInDatabase();
+  public openDetailsPanel(index: number): void {
+    this.detailsAccessor.openPanel(SpellDetailsComponent, {
+      spell: this.spells[index],
+      modifiers: {
+        attackBonus: this.spellAttackBonus,
+        saveDC: this.spellSaveDC,
+      },
+    });
+    const resultSubscription = this.detailsAccessor.result$.subscribe(
+      (result) => {
+        console.log(result);
+        if (result.state === 'delete') {
+          this.deleteSpell(index);
+        } else if (result.state === 'update') {
+          this.openSpellModificationModal(index);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
   }
 
-  public updateSpellsInDatabase(): void {
-    this.dataAccessor.setSpells(this.spells);
+  public openSpellModal(): void {
+    this.ngxSmartModalService.getModal('spellModal').open();
   }
 
-  public createSpell(): void {
-    console.log('createWeapon()');
-    this.createNewSpell.emit();
+  public openSpellModificationModal(index: number): void {
+    this.ngxSmartModalService
+      .getModal('spellModal')
+      .setData({ spell: this.spells[index], index: index });
+    this.ngxSmartModalService.getModal('spellModal').open();
   }
 
   public addSpell(spell: Spell) {
@@ -53,11 +77,6 @@ export class SpellTableComponent {
     this.updateSpellsInDatabase();
   }
 
-  public emitUpdateSpell(index: number): void {
-    this.updateSpellEvent.emit({ spell: this.spells[index], index: index });
-    console.log('emitUpdateWeapon()');
-  }
-
   public updateSpell(spell: Spell, index: number): void {
     this.spells[index] = spell;
     this.updateSpellsInDatabase();
@@ -67,4 +86,43 @@ export class SpellTableComponent {
     this.spells.splice(index, 1);
     this.updateSpellsInDatabase();
   }
+
+  // utils
+
+  public dropSpells(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(this.spells, event.previousIndex, event.currentIndex);
+    this.updateSpellsInDatabase();
+  }
+
+  public updateSpellsInDatabase(): void {
+    this.dataAccessor.setSpells(this.spells);
+  }
+
+  private computeSpellAttackBonusAndSaveDC(): void {
+    let attackBonus =
+      this.spellcastingAttributeModifier + this.proficiencyBonus;
+    this.spellSaveDC = 8 + attackBonus;
+    if (attackBonus >= 0) {
+      this.spellAttackBonus = '+' + attackBonus;
+    } else {
+      this.spellAttackBonus = attackBonus.toString();
+    }
+  }
+
+  private subscribeToData(): void {
+    // TODO: this.dataAccessor.getSpellcastingAttribute() oder so
+    this.spellcastingAttribute = 'intelligence';
+
+    this.dataAccessor.proficiency$.subscribe((value) => {
+      this.proficiencyBonus = value.value;
+      if (this.spellcastingAttribute) {
+        this.computeSpellAttackBonusAndSaveDC();
+      }
+    });
+    // TODO: Modify depending on the actual spellcasting attribute
+    this.dataAccessor.intelligence$.subscribe((value) => {
+      this.spellcastingAttributeModifier = Math.floor((value.value - 10) / 2);
+      this.computeSpellAttackBonusAndSaveDC();
+    });
+  }
 }

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.html

@@ -1 +1,97 @@
-<p>weapon-details works!</p>
+<div class="details-title">{{ weapon?.name }}</div>
+
+<div class="property-title">Angriff</div>
+
+<div>Angriffsmodifikator:</div>
+{{ weapon?.attackBonus }}
+
+<!-- Singel Damage -->
+<div *ngIf="!weapon?.isVersatile">
+  Schaden:
+  <div *ngFor="let damage of weapon?.damage; let index = index">
+    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
+    <span *ngIf="index === 0 && damageModifier !== '0'">
+      {{ damageModifier }}
+    </span>
+  </div>
+</div>
+
+<!-- Versatility Damage -->
+<div *ngIf="weapon?.isVersatile">
+  Einhändiger Schaden:
+  <div *ngFor="let damage of weapon?.damage">
+    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
+  </div>
+
+  Zweihändiger Schaden:
+  <div *ngFor="let damage of weapon?.damage; let index = index">
+    {{ damage.diceNumber }}
+    <span *ngIf="index === 0">{{ weapon?.versatileDamage }}</span>
+    <span *ngIf="index !== 0">{{ damage.diceType }}</span>
+    {{ damage.damageType }}
+  </div>
+</div>
+
+<!-- Ranged -->
+<div *ngIf="weapon?.isRanged">
+  Reichweite:
+  {{ weapon?.range }}
+</div>
+
+<!-- Thrown -->
+<div *ngIf="weapon?.canBeThrown">
+  Wurfweite:
+  {{ weapon?.throwRange }}
+</div>
+
+<!-- Magical -->
+
+<div *ngIf="weapon?.isMagical">
+  Magischer Modifikator:
+  {{ weapon?.magicBonus }}
+</div>
+
+<!-- Weight -->
+<div>
+  Gewicht:
+  {{ weapon?.weight }}
+</div>
+
+<div class="property-title">Eigenschaften</div>
+<div class="weapon-properties">
+  <span *ngIf="weapon?.proficient">Geübt </span>
+  <span *ngIf="weapon?.isRanged">Fernkampf </span>
+  <span *ngIf="weapon?.isVersatile">Vielseitig </span>
+  <span *ngIf="weapon?.isTwoHanded">Zweihändig </span>
+  <span *ngIf="weapon?.isFinesse">Finesse </span>
+  <span *ngIf="weapon?.canBeThrown">Wurfwaffe </span>
+  <span *ngIf="weapon?.isMagical">Magisch </span>
+</div>
+
+<!-- Description -->
+<div class="property-title">Beschreibung</div>
+<div class="weapon-description">
+  <!-- TODO: realize -->
+  bla
+</div>
+
+<div class="vertical-button-wrapper-3">
+  <ui-button
+    [type]="'edit'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'delete'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('delete')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.scss

@@ -0,0 +1,6 @@
+.property-title{
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-top: 1.5rem;
+    text-align:center;
+}

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+import { Weapon } from 'src/interfaces/weapon';
 
 @Component({
   selector: 'app-weapon-details',
   templateUrl: './weapon-details.component.html',
-  styleUrls: ['./weapon-details.component.scss']
+  styleUrls: ['./weapon-details.component.scss'],
 })
 export class WeaponDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
 
+  @Input() weapon: Weapon | undefined;
+  @Input() damageModifier: string = '0';
+
+  public close(result: string): void {
+    this.detailsAccessor.closePanel(result);
+  }
 }

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.html

@@ -70,6 +70,13 @@
     </div>
   </div>
   <div class="add-box">
-    <button (click)="createWeapon()">+</button>
+    <button (click)="openWeaponModal()">+</button>
   </div>
 </div>
+
+<weapon-modal
+  #weaponTable
+  (weaponCreated)="addWeapon($event)"
+  (weaponUpdated)="updateWeapon($event.weapon, $event.index)"
+  (weaponDelete)="deleteWeapon($event)"
+></weapon-modal>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.ts

@@ -6,6 +6,7 @@ import { Weapon } from 'src/interfaces/weapon';
 // import { Damage } from 'src/interfaces/damage';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DetailsService } from 'src/services/details/details.service';
+import { NgxSmartModalService } from 'ngx-smart-modal';
 import { WeaponDetailsComponent } from './weapon-details/weapon-details.component';
 
 @Component({
@@ -16,7 +17,8 @@ import { WeaponDetailsComponent } from './weapon-details/weapon-details.componen
 export class WeaponTableComponent {
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
+    public ngxSmartModalService: NgxSmartModalService
   ) {}
 
   @Output() public createNewWeapon: EventEmitter<void> =
@@ -100,9 +102,8 @@ export class WeaponTableComponent {
     this.dataAccessor.setWeapons(this.weapons);
   }
 
-  public createWeapon(): void {
-    console.log('createWeapon()');
-    this.createNewWeapon.emit();
+  public openWeaponModal(): void {
+    this.ngxSmartModalService.getModal('weaponModal').open();
   }
 
   public addWeapon(weapon: Weapon) {
@@ -114,6 +115,7 @@ export class WeaponTableComponent {
   public openDetailsPanel(index: number): void {
     this.detailsAccessor.openPanel(WeaponDetailsComponent, {
       weapon: this.weapons[index],
+      damageModifier: this.damageModifiers[index],
     });
     const resultSubscription = this.detailsAccessor.result$.subscribe(
       (result) => {
@@ -121,16 +123,18 @@ export class WeaponTableComponent {
         if (result.state === 'delete') {
           this.deleteWeapon(index);
         } else if (result.state === 'update') {
-          this.emitUpdateWeapon(index);
+          this.openWeaponModificationModal(index);
         }
         resultSubscription.unsubscribe();
       }
     );
   }
 
-  public emitUpdateWeapon(index: number): void {
-    this.updateWeaponEvent.emit({ weapon: this.weapons[index], index: index });
-    console.log('emitUpdateWeapon()');
+  public openWeaponModificationModal(index: number): void {
+    this.ngxSmartModalService
+      .getModal('weaponModal')
+      .setData({ weapon: this.weapons[index], index: index });
+    this.ngxSmartModalService.getModal('weaponModal').open();
   }
 
   public updateWeapon(weapon: Weapon, index: number): void {

src/app/journal/journal-stats/weapons-container/weapons-container.component.html

@@ -3,40 +3,16 @@
     <li [ngbNavItem]="1">
       <button ngbNavLink>Waffen</button>
       <ng-template ngbNavContent>
-        <weapon-table
-          (createNewWeapon)="openWeaponCreationModal()"
-          (updateWeaponEvent)="openWeaponUpdateModal($event)"
-        ></weapon-table>
+        <weapon-table></weapon-table>
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
       <button ngbNavLink>Zauber</button>
       <ng-template ngbNavContent>
-        <spell-table
-          [spellAttackBonus]="spellAttackBonus"
-          [spellSaveDC]="spellSaveDC"
-          (createNewSpell)="openSpellCreationModal()"
-          (updateSpellEvent)="openSpellUpdateModal($event)"
-        ></spell-table>
+        <spell-table></spell-table>
       </ng-template>
     </li>
   </ul>
 
   <div [ngbNavOutlet]="nav" class="mt-2"></div>
-
-  <!-- Modals -->
-
-  <weapon-modal
-    #weaponTable
-    (weaponCreated)="addNewlyCreatedWeapon($event)"
-    (weaponUpdated)="updateWeaponInTable($event)"
-    (weaponDelete)="deleteWeaponInTable($event)"
-  ></weapon-modal>
-
-  <spell-modal
-    #spellModal
-    (spellCreated)="addNewlyCreatedSpell($event)"
-    (spellDeleted)="deleteSpellInTable($event)"
-    (spellUpdated)="updateSpellInTable($event)"
-  ></spell-modal>
 </div>

src/app/journal/journal-stats/weapons-container/weapons-container.component.ts

@@ -1,102 +1,12 @@
 import { Component, ViewChild } from '@angular/core';
-import { Weapon } from 'src/interfaces/weapon';
-import { Spell } from 'src/interfaces/spell';
 import { NgxSmartModalService } from 'ngx-smart-modal';
-import { WeaponTableComponent } from './weapon-table/weapon-table.component';
-import { SpellTableComponent } from './spell-table/spell-table.component';
-import { DataService } from 'src/services/data/data.service';
-
 @Component({
   selector: 'app-weapons-container',
   templateUrl: './weapons-container.component.html',
   styleUrls: ['./weapons-container.component.scss'],
 })
 export class WeaponsContainerComponent {
-  public constructor(
-    public ngxSmartModalService: NgxSmartModalService,
-    private dataAccessor: DataService
-  ) {}
-
-  @ViewChild(WeaponTableComponent) weaponTable!: WeaponTableComponent;
-  @ViewChild(SpellTableComponent) spellTable!: SpellTableComponent;
+  public constructor(public ngxSmartModalService: NgxSmartModalService) {}
 
   public active: number = 1;
-
-  public spellAttackBonus: string = '0';
-  public spellSaveDC: number = 0;
-  private spellcastingAttribute: string | undefined;
-  private spellcastingAttributeModifier: number = 0;
-  private proficiencyBonus: number = 2;
-
-  public ngOnInit(): void {
-    //this.dataAccessor.getSpellcastingAttribute() oder so
-    this.spellcastingAttribute = 'intelligence';
-
-    this.dataAccessor.proficiency$.subscribe((value) => {
-      this.proficiencyBonus = value.value;
-      if (this.spellcastingAttribute) {
-        this.computeSpellAttackBonusAndSaveDC();
-      }
-    });
-
-    this.dataAccessor.intelligence$.subscribe((value) => {
-      this.spellcastingAttributeModifier = Math.floor((value.value - 10) / 2);
-      this.computeSpellAttackBonusAndSaveDC();
-    });
-  }
-
-  // spells
-  public openSpellCreationModal(): void {
-    this.ngxSmartModalService.getModal('spellModal').open();
-  }
-
-  public addNewlyCreatedSpell(spell: Spell): void {
-    this.spellTable.addSpell(spell);
-  }
-
-  public openSpellUpdateModal(data: any): void {
-    this.ngxSmartModalService.getModal('spellModal').setData(data);
-    this.ngxSmartModalService.getModal('spellModal').open();
-  }
-
-  public updateSpellInTable(data: any): void {
-    this.spellTable.updateSpell(data.spell, data.index);
-  }
-
-  public deleteSpellInTable(index: number): void {
-    this.spellTable.deleteSpell(index);
-  }
-
-  private computeSpellAttackBonusAndSaveDC(): void {
-    let attackBonus =
-      this.spellcastingAttributeModifier + this.proficiencyBonus;
-    this.spellSaveDC = 8 + attackBonus;
-    if (attackBonus >= 0) {
-      this.spellAttackBonus = '+' + attackBonus;
-    } else {
-      this.spellAttackBonus = attackBonus.toString();
-    }
-  }
-
-  // weapons
-  public openWeaponCreationModal(): void {
-    this.ngxSmartModalService.getModal('weaponModal').open();
-  }
-
-  public addNewlyCreatedWeapon(weapon: Weapon): void {
-    this.weaponTable.addWeapon(weapon);
-  }
-
-  public openWeaponUpdateModal(data: any): void {
-    this.ngxSmartModalService.getModal('weaponModal').setData(data);
-    this.ngxSmartModalService.getModal('weaponModal').open();
-  }
-
-  public updateWeaponInTable(data: any): void {
-    this.weaponTable.updateWeapon(data.weapon, data.index);
-  }
-
-  public deleteWeaponInTable(index: number): void {
-    this.weaponTable.deleteWeapon(index);
-  }
 }

src/app/journal/journal.module.ts

@@ -50,6 +50,7 @@ import { DetailsPanelComponent } from './journal-home/details-panel/details-pane
 import { AbilityDetailsComponent } from './journal-stats/ability-panel/ability-table/ability-details/ability-details.component';
 import { LifeDetailsComponent } from './journal-stats/life-container/life/life-details/life-details.component';
 import { WeaponDetailsComponent } from './journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component';
+import { SpellDetailsComponent } from './journal-stats/weapons-container/spell-table/spell-details/spell-details.component';
 
 @NgModule({
   declarations: [
@@ -94,6 +95,7 @@ import { WeaponDetailsComponent } from './journal-stats/weapons-container/weapon
     AbilityDetailsComponent,
     LifeDetailsComponent,
     WeaponDetailsComponent,
+    SpellDetailsComponent,
   ],
   imports: [
     CommonModule,

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

@@ -5,7 +5,8 @@
   (onOpenFinished)="checkIfUpdate()"
 >
   <div>
-    <h2 style="text-align: center">Waffe hinzufügen</h2>
+    <h2 *ngIf="!isUpdate" style="text-align: center">Zauber hinzufügen</h2>
+    <h2 *ngIf="isUpdate" style="text-align: center">Zauber anpassen</h2>
 
     <div class="add-form-group">
       <div class="input-element">
@@ -90,9 +91,117 @@
         </div>
       </div>
 
-      <!-- Angriff und  Schaden -->
+      <!-- Effects -->
 
-      <h3 style="text-align: center; margin-top: 1.5rem">
+      <div class="d-flex">
+        <div
+          ngbNav
+          #nav="ngbNav"
+          [(activeId)]="active"
+          class="nav-pills flex-column"
+          orientation="vertical"
+        >
+          <ng-container ngbNavItem="top">
+            <button ngbNavLink>Angriff</button>
+            <ng-template ngbNavContent>
+              <div>
+                <div class="checkbox-element">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="newSpellNeedsSavingThrow"
+                  />
+                  <label>Erfordert Rettungswurf</label>
+                </div>
+                <select
+                  [(ngModel)]="newSpellSavingThrowAttribute"
+                  *ngIf="newSpellNeedsSavingThrow"
+                >
+                  <option
+                    *ngFor="let attribute of savingThrowAttributes"
+                    [value]="attribute.value"
+                  >
+                    {{ attribute.display }}
+                  </option>
+                </select>
+                <label *ngIf="newSpellNeedsSavingThrow">Attribut</label>
+              </div>
+            </ng-template>
+          </ng-container>
+          <ng-container ngbNavItem="middle">
+            <button ngbNavLink>Schaden</button>
+            <ng-template ngbNavContent>
+              <div class="damage-container">
+                <div
+                  class="damage-box"
+                  *ngFor="let damage of newSpellDamage; let index = index"
+                >
+                  <div class="dice-row">
+                    <div class="flex-column">
+                      <label>Anzahl</label>
+                      <select [(ngModel)]="newSpellDamage[index].diceNumber">
+                        <option *ngFor="let number of numbers" [value]="number">
+                          {{ number }}
+                        </option>
+                      </select>
+                    </div>
+
+                    <div class="flex-column">
+                      <label>Würfel</label>
+                      <select [(ngModel)]="newSpellDamage[index].diceType">
+                        <option *ngFor="let die of dice" [value]="die">
+                          {{ die }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <label for="damageType">Schadensart</label>
+                  <select [(ngModel)]="newSpellDamage[index].damageType">
+                    <option
+                      *ngFor="let type of damageTypes"
+                      [value]="type.value"
+                    >
+                      {{ type.display }}
+                    </option>
+                  </select>
+
+                  <icon
+                    *ngIf="index > 0"
+                    (click)="removeDamage(index)"
+                    [size]="'m'"
+                    [type]="'UI'"
+                    [icon]="'remove'"
+                    [class]="'pointer'"
+                  ></icon>
+                </div>
+                <icon
+                  *ngIf="newSpellDamage.length < 3"
+                  (click)="addDamage()"
+                  [size]="'m'"
+                  [type]="'UI'"
+                  [icon]="'add'"
+                  [class]="'pointer'"
+                ></icon>
+              </div>
+            </ng-template>
+          </ng-container>
+          <ng-container ngbNavItem="bottom">
+            <button ngbNavLink>Heilung</button>
+            <ng-template ngbNavContent>
+              <p>
+                Sed commodo, leo at suscipit dictum, quam est porttitor sapien,
+                eget sodales nibh elit id diam. Nulla facilisi. Donec egestas
+                ligula vitae odio interdum aliquet. Duis lectus turpis, luctus
+                eget tincidunt eu, congue et odio. Duis pharetra et nisl at fau
+              </p>
+            </ng-template>
+          </ng-container>
+        </div>
+
+        <div [ngbNavOutlet]="nav" class="ms-4"></div>
+      </div>
+
+      <!-- <h3 style="text-align: center; margin-top: 1.5rem">
         Angriff und Schaden
       </h3>
 
@@ -111,62 +220,31 @@
           {{ attribute.display }}
         </option>
       </select>
-      <label *ngIf="newSpellNeedsSavingThrow">Attribut</label>
+      <label *ngIf="newSpellNeedsSavingThrow">Attribut</label> -->
 
-      <div class="damage-container">
-        <div
-          class="damage-box"
-          *ngFor="let damage of newSpellDamage; let index = index"
-        >
-          <div class="dice-row">
-            <div class="flex-column">
-              <label>Anzahl</label>
-              <select [(ngModel)]="newSpellDamage[index].diceNumber">
-                <option *ngFor="let number of numbers" [value]="number">
-                  {{ number }}
-                </option>
-              </select>
-            </div>
-
-            <div class="flex-column">
-              <label>Würfel</label>
-              <select [(ngModel)]="newSpellDamage[index].diceType">
-                <option *ngFor="let die of dice" [value]="die">
-                  {{ die }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <label for="damageType">Schadensart</label>
-          <select [(ngModel)]="newSpellDamage[index].damageType">
-            <option *ngFor="let type of damageTypes" [value]="type.value">
-              {{ type.display }}
-            </option>
-          </select>
+      <div class="button-wrapper">
+        <ui-button
+          *ngIf="isUpdate"
+          [type]="'apply'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="updateSpell()"
+        ></ui-button>
+        <ui-button
+          *ngIf="!isUpdate"
+          [type]="'add'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="createSpell()"
+        ></ui-button>
 
-          <icon
-            *ngIf="index > 0"
-            (click)="removeDamage(index)"
-            [size]="'m'"
-            [type]="'UI'"
-            [icon]="'remove'"
-            [class]="'pointer'"
-          ></icon>
-        </div>
-        <icon
-          *ngIf="newSpellDamage.length < 3"
-          (click)="addDamage()"
-          [size]="'m'"
-          [type]="'UI'"
-          [icon]="'add'"
-          [class]="'pointer'"
-        ></icon>
+        <ui-button
+          [type]="'dismiss'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="dismiss()"
+        ></ui-button>
       </div>
-
-      <button *ngIf="!isUpdate" (click)="createSpell()">Add</button>
-      <button *ngIf="isUpdate" (click)="updateSpell()">Update</button>
-      <button *ngIf="isUpdate" (click)="deleteSpell()">Delete</button>
     </div>
   </div>
 </ngx-smart-modal>

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

@@ -75,3 +75,15 @@
     margin-bottom: 1rem;
 }
 
+
+.button-wrapper{
+    width: 100%;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin-top: 2rem;
+    margin-top: 2rem;
+    align-items: center;
+    justify-content: center;
+}

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

@@ -17,6 +17,8 @@ export class SpellModalComponent {
   @Output() public spellDeleted: EventEmitter<number> =
     new EventEmitter<number>();
 
+  public active: number = 1;
+
   public newSpellName: string = '';
   public newSpellLevel: number = 0;
   public newSpellCost: string = 'action';
@@ -27,6 +29,10 @@ export class SpellModalComponent {
   public newSpellNeedsMaterial: boolean = false;
   public newSpellSchool: string | undefined;
   public newSpellDescription: string | undefined;
+  public newSpellDoesDamage: boolean = true;
+  public newSpellDoesHeal: boolean = false;
+  public newSpellHasOtherEffect: boolean = false;
+
   public newSpellNeedsSavingThrow: boolean = false;
   public newSpellSavingThrowAttribute: string | undefined;
   public newSpellAttackBonus: string = '';
@@ -124,6 +130,9 @@ export class SpellModalComponent {
       isRanged: this.newSpellIsRanged,
       range: this.newSpellRange,
       hasAreaOfEffect: this.newSpellHasAreaOfEffect,
+      doesDamage: this.newSpellDoesDamage,
+      doesHeal: this.newSpellDoesHeal,
+      hasOtherEffect: this.newSpellHasOtherEffect,
     };
     if (this.newSpellDescription) {
       newspell.description = this.newSpellDescription;
@@ -168,6 +177,9 @@ export class SpellModalComponent {
     this.newSpellDescription = undefined;
     this.newSpellNeedsSavingThrow = false;
     this.newSpellSavingThrowAttribute = undefined;
+    this.newSpellDoesDamage = false;
+    this.newSpellDoesHeal = false;
+    this.newSpellHasOtherEffect = false;
     this.newSpellAttackBonus = '';
     this.newSpellDamage = [{ diceNumber: '', diceType: '', damageType: '' }];
     this.newSpellIsRanged = false;
@@ -225,6 +237,9 @@ export class SpellModalComponent {
       isRanged: this.newSpellIsRanged,
       range: this.newSpellRange,
       hasAreaOfEffect: this.newSpellHasAreaOfEffect,
+      doesDamage: this.newSpellDoesDamage,
+      doesHeal: this.newSpellDoesHeal,
+      hasOtherEffect: this.newSpellHasOtherEffect,
     };
     if (this.newSpellDescription) {
       newspell.description = this.newSpellDescription;
@@ -255,4 +270,9 @@ export class SpellModalComponent {
     this.ngxSmartModalService.closeLatestModal();
     this.removeData();
   }
+
+  public dismiss(): void {
+    this.ngxSmartModalService.closeLatestModal();
+    this.removeData();
+  }
 }

src/app/journal/weapon-modal/weapon-modal.component.html

@@ -47,6 +47,10 @@
           </select>
           <label>Gewicht</label>
         </div>
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newWeaponCanBeThrown" />
+          <label for="weaponRanged">Wurfwaffe</label>
+        </div>
         <div class="checkbox-element">
           <input type="checkbox" [(ngModel)]="newWeaponIsMagical" />
           <label>Magisch</label>
@@ -87,6 +91,16 @@
         />
       </div>
 
+      <div class="input-element" *ngIf="newWeaponCanBeThrown">
+        <label for="weaponRange">Wurfreichweite</label>
+        <input
+          type="text"
+          class="add-input"
+          id="weaponRange"
+          [(ngModel)]="newWeaponThrowRange"
+        />
+      </div>
+
       <h3 style="text-align: center">Schaden</h3>
 
       <div class="damage-container">
@@ -154,9 +168,31 @@
         ></icon>
       </div>
 
-      <button *ngIf="!isUpdate" (click)="createWeapon()">Erstellen</button>
-      <button *ngIf="isUpdate" (click)="updateWeapon()">Aktualisieren</button>
-      <button *ngIf="isUpdate" (click)="deleteWeapon()">Entfernen</button>
+      <!-- <button *ngIf="!isUpdate" (click)="createWeapon()">Erstellen</button>
+      <button *ngIf="isUpdate" (click)="updateWeapon()">Aktualisieren</button> -->
+      <div class="button-wrapper">
+        <ui-button
+          *ngIf="isUpdate"
+          [type]="'apply'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="updateWeapon()"
+        ></ui-button>
+        <ui-button
+          *ngIf="!isUpdate"
+          [type]="'add'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="createWeapon()"
+        ></ui-button>
+
+        <ui-button
+          [type]="'dismiss'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="dismiss()"
+        ></ui-button>
+      </div>
     </div>
   </div>
 </ngx-smart-modal>

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

@@ -64,3 +64,16 @@
 }
 
 
+
+.button-wrapper{
+    width: 100%;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin-top: 2rem;
+    margin-top: 2rem;
+    align-items: center;
+    justify-content: center;
+}
+

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

@@ -21,6 +21,7 @@ export class WeaponModalComponent {
 
   public newWeaponName: string = '';
   public newWeaponRange: string = '5 ft.';
+  public newWeaponThrowRange: string = '';
   public newWeaponAttackBonus: string = '+0';
   public newWeaponDamage: Damage[] = [
     { diceNumber: '', diceType: '', damageType: '' },
@@ -31,6 +32,7 @@ export class WeaponModalComponent {
   public newWeaponIsFinesse: boolean = false;
   public newWeaponIsRanged: boolean = false;
   public newWeaponVersatileDamage: string = '';
+  public newWeaponCanBeThrown: boolean = false;
   public newWeaponWeight: string = 'normal';
   public newWeaponIsMagical: boolean = false;
   public newWeaponMagicBonus: number = 0;
@@ -116,12 +118,14 @@ export class WeaponModalComponent {
       damage: this.newWeaponDamage,
       attackBonus: this.newWeaponAttackBonus,
       range: this.newWeaponRange,
+      throwRange: this.newWeaponThrowRange,
       isFinesse: this.newWeaponIsFinesse,
       proficient: this.newWeaponProficient,
       isTwoHanded: this.newWeaponIsTwoHanded,
       isVersatile: this.newWeaponIsVersatile,
       isRanged: this.newWeaponIsRanged,
       versatileDamage: this.newWeaponVersatileDamage,
+      canBeThrown: this.newWeaponCanBeThrown,
       weight: this.newWeaponWeight,
       isMagical: this.newWeaponIsMagical,
       magicBonus: this.newWeaponMagicBonus,
@@ -187,12 +191,14 @@ export class WeaponModalComponent {
       damage: this.newWeaponDamage,
       attackBonus: this.newWeaponAttackBonus,
       range: this.newWeaponRange,
+      throwRange: this.newWeaponThrowRange,
       isFinesse: this.newWeaponIsFinesse,
       proficient: this.newWeaponProficient,
       isTwoHanded: this.newWeaponIsTwoHanded,
       isVersatile: this.newWeaponIsVersatile,
       isRanged: this.newWeaponIsRanged,
       versatileDamage: this.newWeaponVersatileDamage,
+      canBeThrown: this.newWeaponCanBeThrown,
       weight: this.newWeaponWeight,
       isMagical: this.newWeaponIsMagical,
       magicBonus: this.newWeaponMagicBonus,
@@ -207,4 +213,9 @@ export class WeaponModalComponent {
     this.ngxSmartModalService.closeLatestModal();
     this.removeData();
   }
+
+  public dismiss(): void {
+    this.ngxSmartModalService.closeLatestModal();
+    this.removeData();
+  }
 }

src/interfaces/spell.ts

@@ -11,13 +11,19 @@ export interface Spell {
   description?: string;
   needsSavingThrow: boolean;
   savingThrowAttribute?: string;
-  attackBonus?: string;
-  damage: Damage[];
   isRanged: boolean;
   range?: string;
   hasAreaOfEffect: boolean;
   radius?: string;
   areaOfEffectType?: string;
+  numberOfTargets?: number;
+
+  doesDamage: boolean;
+  attackBonus?: string;
+  damage?: Damage[];
+  doesHeal: boolean;
+  healAmount?: string;
+  hasOtherEffect: boolean;
 }
 
 interface Damage {

src/interfaces/weapon.ts

@@ -3,11 +3,13 @@ export interface Weapon {
   damage: Damage[];
   attackBonus: string;
   range: string;
+  throwRange?: string;
   proficient: boolean;
   isVersatile: boolean;
   isTwoHanded: boolean;
   isFinesse: boolean;
   isRanged: boolean;
+  canBeThrown: boolean;
   weight: string;
   versatileDamage?: string;
   isMagical: boolean;

src/services/data/data.service.ts

@@ -147,10 +147,12 @@ export class DataService {
       damage: [{ diceNumber: '2', diceType: 'd6', damageType: 'slashing' }],
       proficient: true,
       range: '5ft',
+      throwRange: '',
       isFinesse: false,
       isVersatile: false,
       isTwoHanded: true,
       isRanged: false,
+      canBeThrown: false,
       weight: 'schwer',
       isMagical: false,
     },
@@ -160,10 +162,12 @@ export class DataService {
       damage: [{ diceNumber: '1', diceType: 'd8', damageType: 'piercing' }],
       proficient: false,
       range: '80/320ft',
+      throwRange: '',
       isFinesse: false,
       isVersatile: false,
       isTwoHanded: true,
       isRanged: true,
+      canBeThrown: false,
       weight: 'leicht',
       isMagical: true,
       magicBonus: 1,
@@ -178,10 +182,12 @@ export class DataService {
       versatileDamage: 'd8',
       proficient: true,
       range: '5ft',
+      throwRange: '',
       isFinesse: false,
       isVersatile: true,
       isTwoHanded: false,
       isRanged: false,
+      canBeThrown: false,
       weight: 'normal',
       isMagical: false,
     },
@@ -209,8 +215,11 @@ export class DataService {
       needsSavingThrow: true,
       savingThrowAttribute: 'dexterity',
       school: 'Evocation',
+      doesDamage: true,
       damage: [{ diceNumber: '8', diceType: 'd6', damageType: 'fire' }],
       isRanged: true,
+      doesHeal: false,
+      hasOtherEffect: false,
       range: '150ft',
       hasAreaOfEffect: true,
       radius: '20ft',
@@ -227,6 +236,9 @@ export class DataService {
       needsConcentration: false,
       needsSavingThrow: false,
       school: 'Evocation',
+      doesDamage: true,
+      doesHeal: false,
+      hasOtherEffect: false,
       damage: [{ diceNumber: '1', diceType: 'd10', damageType: 'fire' }],
       isRanged: true,
       range: '120ft',
@@ -242,6 +254,9 @@ export class DataService {
       needsMaterial: false,
       needsConcentration: true,
       needsSavingThrow: false,
+      doesDamage: true,
+      doesHeal: false,
+      hasOtherEffect: false,
       school: 'Necromancy',
       damage: [{ diceNumber: '3', diceType: 'd6', damageType: 'necrotic' }],
       isRanged: false,

src/services/details/details.service.ts

@@ -20,7 +20,7 @@ export class DetailsService {
 
   // Is called from the dynamic component to close the offcanvas
   public closePanel(result: any, data?: any) {
-    // console.log('closePanel', result);
+    console.log('closePanel', result);
     // Is listened to in the host component where the panel was opened, to initiate further steps
     this.resultSubject.next({ state: result, data: data });
     this.closePanelSubject.next('close');

src/styles.scss

@@ -77,6 +77,26 @@ $dialog-position-right: 20%;
     // margin-top: 2rem;
 }
 
+.details-title{
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-top: 1.5rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 //