-weapon and spell table are working

-moving the modals now

.nx/cache/d/daemon.log

@@ -458626,3 +458626,114 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-03T06:14:13.896Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-03T06:14:13.897Z - [WATCHER]: .nx/cache/d/daemon.log was modified
 [NX Daemon Server] - 2023-11-03T06:14:13.898Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-03T19:43:55.585Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-03T19:43:55.592Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-03T19:43:55.593Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-03T19:43:55.594Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-03T19:43:55.596Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-03T19:43:55.597Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-03T19:43:56.110Z - 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-03T19:43:56.110Z - [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-03T19:43:56.111Z - Time taken for 'hash changed files from watcher' 73.00849997997284ms
+[NX Daemon Server] - 2023-11-03T19:43:56.112Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-03T19:43:56.112Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-03T20:56:12.870Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-03T20:56:12.873Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-03T20:56:12.874Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-03T20:56:12.874Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-03T20:56:12.876Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-03T20:56:12.877Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-03T20:56:12.980Z - 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-03T20:56:12.980Z - [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-03T20:56:12.982Z - Time taken for 'hash changed files from watcher' 38.85389995574951ms
+[NX Daemon Server] - 2023-11-03T20:56:12.982Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-03T20:56:12.982Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-04T12:20:22.615Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-04T12:20:22.622Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-04T12:20:22.628Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-04T12:20:22.629Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-04T12:20:22.630Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-04T12:20:22.631Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-04T12:20:23.196Z - 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-04T12:20:23.196Z - [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-04T12:20:23.198Z - Time taken for 'hash changed files from watcher' 148.9957000017166ms
+[NX Daemon Server] - 2023-11-04T12:20:23.198Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-04T12:20:23.198Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":3124}
+{"processId":6640}

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

@@ -2,7 +2,7 @@
   id="spells-table"
   cdkDropList
   class="example-list"
-  (cdkDropListDropped)="dropWeapons($event)"
+  (cdkDropListDropped)="dropSpells($event)"
 >
   <div
     class="example-box"
@@ -148,6 +148,6 @@
     </div>
   </div>
   <div class="add-box">
-    <button (click)="createWeapon()">+</button>
+    <button (click)="createSpell()">+</button>
   </div>
 </div>

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

@@ -22,7 +22,7 @@ export class SpellTableComponent {
     this.spells = this.dataAccessor.getSpells();
   }
 
-  public dropWeapons(event: CdkDragDrop<string[]>): void {
+  public dropSpells(event: CdkDragDrop<string[]>): void {
     moveItemInArray(this.spells, event.previousIndex, event.currentIndex);
     this.updateSpells();
   }
@@ -31,12 +31,12 @@ export class SpellTableComponent {
     this.dataAccessor.setSpells(this.spells);
   }
 
-  public createWeapon(): void {
+  public createSpell(): void {
     console.log('createWeapon()');
     this.createNewSpell.emit();
   }
 
-  public addWeapon(spell: Spell) {
+  public addSpell(spell: Spell) {
     this.spells.push(spell);
     this.updateSpells();
   }

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

@@ -21,12 +21,11 @@
   <weapon-modal
     #weaponTable
     (weaponCreated)="addNewlyCreatedWeapon($event)"
+    (onAnyCloseEvent)="log()"
   ></weapon-modal>
 
-  <ngx-smart-modal #spellModal identifier="spellModal">
-    <h1>Zauberspruch hinzufügen</h1>
-    <p>Some stuff...</p>
-
-    <button (click)="spellModal.close()">Close</button>
-  </ngx-smart-modal>
+  <spell-modal
+    #spellModal
+    (spellCreated)="addNewlyCreatedSpell($event)"
+  ></spell-modal>
 </div>

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

@@ -6,6 +6,7 @@ import { Damage } from 'src/interfaces/damage';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { NgxSmartModalService, NgxSmartModalComponent } from 'ngx-smart-modal';
 import { WeaponTableComponent } from './weapon-table/weapon-table.component';
+import { SpellTableComponent } from './spell-table/spell-table.component';
 
 @Component({
   selector: 'app-weapons-container',
@@ -19,7 +20,7 @@ export class WeaponsContainerComponent {
   ) {}
 
   @ViewChild(WeaponTableComponent) weaponTable!: WeaponTableComponent;
-  // @ViewChild(SpellTableComponent) spellTable!: SpellTableComponent;
+  @ViewChild(SpellTableComponent) spellTable!: SpellTableComponent;
 
   public active: number = 1;
 
@@ -42,22 +43,6 @@ export class WeaponsContainerComponent {
     { diceNumber: '', diceType: '', damageType: '' },
   ];
 
-  // public damageTypes: string[] = [
-  //   'Wucht',
-  //   'Stich',
-  //   'Hieb',
-  //   'Feuer',
-  //   'Kälte',
-  //   'Blitz',
-  //   'Gift',
-  //   'Säure',
-  //   'Nekrotisch',
-  //   'Psychisch',
-  //   'Heilig',
-  //   'Göttlich',
-  //   'Kraft',
-  // ];
-
   public newSpellName: string = '';
   public newSpellAttackBonus: string = '';
   public newSpellDamage: string = '';
@@ -98,11 +83,12 @@ export class WeaponsContainerComponent {
 
   public openSpellModal(): void {
     this.ngxSmartModalService.getModal('spellModal').open();
+    console.log('openSpellModal()');
   }
 
-  // public addNewlyCreatedSpell(spell: Spell): void {
-  //   this.spellTable.addWeapon(spell);
-  // }
+  public addNewlyCreatedSpell(spell: Spell): void {
+    this.spellTable.addSpell(spell);
+  }
 
   // weapons
   public openWeaponModal(): void {
@@ -113,4 +99,8 @@ export class WeaponsContainerComponent {
   public addNewlyCreatedWeapon(weapon: Weapon): void {
     this.weaponTable.addWeapon(weapon);
   }
+
+  public log(): void {
+    console.log('log');
+  }
 }

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

@@ -1 +1,163 @@
-<p>spell-modal works!</p>
+<ngx-smart-modal
+  #spellModal
+  identifier="spellModal"
+  (onAnyCloseEventFinished)="removeData()"
+>
+  <div>
+    <h2 style="text-align: center">Waffe hinzufügen</h2>
+
+    <div class="add-form-group">
+      <div class="input-element">
+        <label for="weaponName">Name</label>
+        <input
+          type="text"
+          class="add-input"
+          id="weaponName"
+          [(ngModel)]="newSpellName"
+        />
+      </div>
+      <div class="form-element-row">
+        <!-- general -->
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newSpellNeedsVerbal" />
+          <label>Verbal</label>
+        </div>
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newSpellNeedsSomatic" />
+          <label>Geste</label>
+        </div>
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newSpellNeedsMaterial" />
+          <label>Material</label>
+        </div>
+
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newSpellNeedsConcentration" />
+          <label>Konzentration</label>
+        </div>
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newSpellCost" />
+          <label>Kosten</label>
+        </div>
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="newSpellCanRitual" />
+          <label>Ritual möglich?</label>
+        </div>
+      </div>
+
+      <!-- ranged and area -->
+      <h3 style="text-align: center">Reichweite und Fläche</h3>
+
+      <div class="range-area-container">
+        <div class="range-box">
+          <div class="checkbox-element">
+            <input type="checkbox" [(ngModel)]="newSpellIsRanged" />
+            <label>Fernkampf</label>
+          </div>
+          <div class="checkbox-element" *ngIf="newSpellIsRanged">
+            <input type="text" [(ngModel)]="newSpellRange" />
+            <label>Reichweite</label>
+          </div>
+        </div>
+
+        <div class="area-box">
+          <div class="checkbox-element">
+            <input type="checkbox" [(ngModel)]="newSpellHasAreaOfEffect" />
+            <label>Flächeneffekt</label>
+          </div>
+          <div class="input-element" *ngIf="newSpellHasAreaOfEffect">
+            <label>Radius</label>
+            <input type="text" class="add-input" [(ngModel)]="newSpellRadius" />
+          </div>
+          <div class="checkbox-element" *ngIf="newSpellHasAreaOfEffect">
+            <select [(ngModel)]="newSpellAreaOfEffectType">
+              <option
+                *ngFor="let areaType of areaTypes"
+                [value]="areaType.value"
+              >
+                {{ areaType.display }}
+              </option>
+            </select>
+            <label>Flächenart</label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Angriff und  Schaden -->
+
+      <h3 style="text-align: center; margin-top: 1.5rem">
+        Angriff und Schaden
+      </h3>
+
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="newSpellNeedsSavingThrow" />
+        <label>Erfordert Rettungswurf</label>
+      </div>
+      <select
+        [(ngModel)]="newSpellAreaOfEffectType"
+        *ngIf="newSpellNeedsSavingThrow"
+      >
+        <option
+          *ngFor="let attribute of savingThrowAttributes"
+          [value]="attribute.value"
+        >
+          {{ attribute.display }}
+        </option>
+      </select>
+      <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>
+
+          <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>
+
+      <button (click)="createSpell()">Add</button>
+    </div>
+  </div>
+</ngx-smart-modal>

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

@@ -0,0 +1,77 @@
+.range-area-container{
+    display: flex;
+    flex-direction: row;
+}
+
+.range-box, .area-box{
+    display: flex;
+    flex-direction: column;
+    flex-basis: 45%;
+    gap: 1rem;
+}
+
+.add-form-group{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    
+}
+.input-element{
+    display: flex;
+    flex-direction: column;
+    // gap: 0.1rem;
+    // align-items: center;
+    // justify-content: center;
+}
+
+.checkbox-element{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-basis: 33.33%;
+}
+
+.form-element-row{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    text-align:center;
+    row-gap: 1rem;
+}
+
+.damage-container{
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    // align-items: center;
+    // justify-content: center;
+    
+}
+
+.damage-row{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0.1rem;
+}
+
+.damage-box{
+    display:flex;
+    flex-direction: column;
+    align-items: left;
+    gap: 0.5rem;
+    flex-basis: 30%;
+}
+
+.dice-row{
+    display: flex;
+    flex-direction: row;
+    // justify-content: center;
+    // align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+

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

@@ -1,10 +1,166 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { NgxSmartModalService } from 'ngx-smart-modal';
+import { Damage } from 'src/interfaces/damage';
+import { Spell } from 'src/interfaces/spell';
 
 @Component({
-  selector: 'app-spell-modal',
+  selector: 'spell-modal',
   templateUrl: './spell-modal.component.html',
-  styleUrls: ['./spell-modal.component.scss']
+  styleUrls: ['./spell-modal.component.scss'],
 })
 export class SpellModalComponent {
+  public constructor(public ngxSmartModalService: NgxSmartModalService) {}
+  @Output() public spellCreated: EventEmitter<Spell> =
+    new EventEmitter<Spell>();
 
+  public newSpellName: string = '';
+  public newSpellLevel: number = 0;
+  public newSpellCost: string = '';
+  public newSpellCanRitual: boolean = false;
+  public newSpellNeedsConcentration: boolean = false;
+  public newSpellNeedsVerbal: boolean = false;
+  public newSpellNeedsSomatic: boolean = false;
+  public newSpellNeedsMaterial: boolean = false;
+  public newSpellSchool: string | undefined;
+  public newSpellDescription: string | undefined;
+  public newSpellNeedsSavingThrow: boolean = false;
+  public newSpellSavingThrowAttribute: string | undefined;
+  public newSpellAttackBonus: string = '';
+  public newSpellDamage: Damage[] = [
+    { diceNumber: '', diceType: '', damageType: '' },
+  ];
+  public newSpellIsRanged: boolean = false;
+  public newSpellRange: string = '5ft';
+  public newSpellHasAreaOfEffect: boolean = false;
+  public newSpellRadius: string | undefined;
+  public newSpellAreaOfEffectType: string | undefined;
+
+  // Options for the select boxes
+  public areaTypes: any[] = [
+    { display: 'Kegel', value: 'cone' },
+    { display: 'Kugel', value: 'sphere' },
+    { display: 'Kreis', value: 'circle' },
+    { display: 'Linie', value: 'line' },
+    { display: 'Quadrat', value: 'square' },
+    { display: 'Würfel', value: 'cube' },
+  ];
+
+  public schools: any[] = [
+    { display: 'Verwandlung', value: 'transmutation' },
+    { display: 'Verzauberung', value: 'enchantment' },
+    { display: 'Illusion', value: 'illusion' },
+    { display: 'Nekromantie', value: 'necromancy' },
+    { display: 'Beschwörung', value: 'conjuration' },
+    { display: 'Hervorrufung', value: 'evocation' },
+    { display: 'Bannmagie', value: 'abjuration' },
+    { display: 'Wahrsagerei', value: 'divination' },
+  ];
+
+  public savingThrowAttributes: any[] = [
+    { display: 'Stärke', value: 'strength' },
+    { display: 'Geschicklichkeit', value: 'dexterity' },
+    { display: 'Konstitution', value: 'constitution' },
+    { display: 'Intelligenz', value: 'intelligence' },
+    { display: 'Weisheit', value: 'wisdom' },
+    { display: 'Charisma', value: 'charisma' },
+  ];
+
+  public damageTypes: any[] = [
+    { display: 'Wucht', value: 'bludgeoning' },
+    { display: 'Stich', value: 'piercing' },
+    { display: 'Hieb', value: 'slashing' },
+    { display: 'Feuer', value: 'fire' },
+    { display: 'Kälte', value: 'cold' },
+    { display: 'Blitz', value: 'lightning' },
+    { display: 'Gift', value: 'poison' },
+    { display: 'Säure', value: 'acid' },
+    { display: 'Nekrotisch', value: 'necrotic' },
+    { display: 'Psychisch', value: 'psychic' },
+    { display: 'Heilig', value: 'holy' },
+    { display: 'Göttlich', value: 'divine' },
+    { display: 'Kraft', value: 'force' },
+  ];
+
+  public dice: string[] = ['d4', 'd6', 'd8', 'd10', 'd12', 'd20', 'd100'];
+
+  public numbers: string[] = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+  ];
+
+  public createSpell(): void {
+    let newspell: Spell = {
+      name: this.newSpellName,
+      damage: this.newSpellDamage,
+      level: this.newSpellLevel,
+      cost: this.newSpellCost,
+      canRitual: this.newSpellCanRitual,
+      needsConcentration: this.newSpellNeedsConcentration,
+      needsVerbal: this.newSpellNeedsVerbal,
+      needsSomatic: this.newSpellNeedsSomatic,
+      needsMaterial: this.newSpellNeedsMaterial,
+      needsSavingThrow: this.newSpellNeedsSavingThrow,
+      isRanged: this.newSpellIsRanged,
+      range: this.newSpellRange,
+      hasAreaOfEffect: this.newSpellHasAreaOfEffect,
+    };
+    if (this.newSpellDescription) {
+      newspell.description = this.newSpellDescription;
+    }
+    if (this.newSpellSchool) {
+      newspell.school = this.newSpellSchool;
+    }
+    if (this.newSpellSavingThrowAttribute) {
+      newspell.savingThrowAttribute = this.newSpellSavingThrowAttribute;
+    }
+    if (this.newSpellAttackBonus) {
+      newspell.attackBonus = this.newSpellAttackBonus;
+    }
+    if (this.newSpellHasAreaOfEffect) {
+      newspell.radius = this.newSpellRadius;
+    }
+    if (this.newSpellHasAreaOfEffect) {
+      newspell.areaOfEffectType = this.newSpellAreaOfEffectType;
+    }
+    this.spellCreated.emit(newspell);
+    this.ngxSmartModalService.closeLatestModal();
+  }
+
+  public addDamage(): void {
+    this.newSpellDamage.push({ diceNumber: '', diceType: '', damageType: '' });
+  }
+
+  public removeDamage(index: number): void {
+    this.newSpellDamage.splice(index, 1);
+  }
+
+  public removeData(): void {
+    this.newSpellName = '';
+    this.newSpellLevel = 0;
+    this.newSpellCost = '';
+    this.newSpellCanRitual = false;
+    this.newSpellNeedsConcentration = false;
+    this.newSpellNeedsVerbal = false;
+    this.newSpellNeedsSomatic = false;
+    this.newSpellNeedsMaterial = false;
+    this.newSpellSchool = undefined;
+    this.newSpellDescription = undefined;
+    this.newSpellNeedsSavingThrow = false;
+    this.newSpellSavingThrowAttribute = undefined;
+    this.newSpellAttackBonus = '';
+    this.newSpellDamage = [{ diceNumber: '', diceType: '', damageType: '' }];
+    this.newSpellIsRanged = false;
+    this.newSpellRange = '5ft';
+    this.newSpellHasAreaOfEffect = false;
+    this.newSpellRadius = undefined;
+    this.newSpellAreaOfEffectType = undefined;
+  }
 }

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

@@ -1,4 +1,9 @@
-<ngx-smart-modal #weaponModal identifier="weaponModal">
+<ngx-smart-modal
+  #weaponModal
+  identifier="weaponModal"
+  id="weaponModal"
+  (onAnyCloseEventFinished)="removeData()"
+>
   <div>
     <h2 style="text-align: center">Waffe hinzufügen</h2>
 

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

@@ -16,8 +16,7 @@ export class WeaponModalComponent {
   public active: number = 1;
 
   public newWeaponName: string = '';
-  public newWeaponDamageType: string = '';
-  public newWeaponRange: string = '';
+  public newWeaponRange: string = '5 ft.';
   public newWeaponAttackBonus: string = '';
   public newWeaponDamage: Damage[] = [
     { diceNumber: '', diceType: '', damageType: '' },
@@ -83,8 +82,7 @@ export class WeaponModalComponent {
       weight: this.newWeaponWeight,
     };
     this.weaponCreated.emit(newWeapon);
-    // remove modal
-    this.ngxSmartModalService.removeModal('weaponModal');
+    this.ngxSmartModalService.closeLatestModal();
   }
 
   public addDamage(): void {
@@ -100,4 +98,21 @@ export class WeaponModalComponent {
     this.newWeaponDamage.splice(index, 1);
     this.newWeaponVersatileDamage.splice(index, 1);
   }
+
+  public removeData(): void {
+    this.newWeaponName = '';
+    this.newWeaponRange = '5 ft.';
+    this.newWeaponAttackBonus = '';
+    this.newWeaponDamage = [{ diceNumber: '', diceType: '', damageType: '' }];
+    this.newWeaponProficient = false;
+    this.newWeaponAttribute = '';
+    this.newWeaponIsVersatile = false;
+    this.newWeaponIsTwoHanded = false;
+    this.newWeaponIsFinesse = false;
+    this.newWeaponIsRanged = false;
+    this.newWeaponVersatileDamage = [
+      { diceNumber: '', diceType: '', damageType: '' },
+    ];
+    this.newWeaponWeight = 'normal';
+  }
 }

src/interfaces/spell.ts

@@ -2,7 +2,7 @@ export interface Spell {
   name: string;
   level: number;
   cost: string;
-  canRitual?: boolean;
+  canRitual: boolean;
   needsConcentration: boolean;
   needsVerbal: boolean;
   needsSomatic: boolean;

src/services/data/data.service.ts

@@ -197,6 +197,7 @@ export class DataService {
       name: 'Feuerball',
       level: 3,
       cost: 'action',
+      canRitual: false,
       needsVerbal: true,
       needsSomatic: true,
       needsMaterial: true,
@@ -215,6 +216,7 @@ export class DataService {
       name: 'Flammenpfeil',
       level: 0,
       cost: 'action',
+      canRitual: false,
       needsVerbal: true,
       needsSomatic: true,
       needsMaterial: true,
@@ -230,6 +232,7 @@ export class DataService {
       name: 'Vampiric Touch',
       level: 3,
       cost: 'action',
+      canRitual: false,
       needsVerbal: true,
       needsSomatic: true,
       needsMaterial: false,