Created new spell modal, fixed navigation

-started working on the spellcards

.nx/cache/d/daemon.log

@@ -460379,3 +460379,225 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-29T10:54:10.772Z - Time taken for 'hash changed files from watcher' 24.907600164413452ms
 [NX Daemon Server] - 2023-11-29T10:54:10.772Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-29T10:54:10.772Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-30T07:30:06.807Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-30T07:30:06.809Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-30T07:30:06.813Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T07:30:06.815Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-30T07:30:06.816Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T07:30:06.817Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-30T07:30:07.390Z - 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-30T07:30:07.390Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-30T07:30:07.391Z - Time taken for 'hash changed files from watcher' 56.55910015106201ms
+[NX Daemon Server] - 2023-11-30T07:30:07.391Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-30T07:30:07.392Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-30T10:40:59.905Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-30T10:40:59.907Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-30T10:40:59.917Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T10:40:59.918Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-30T10:40:59.919Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T10:40:59.920Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-30T10:41:00.041Z - 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-30T10:41:00.041Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-30T10:41:00.043Z - Time taken for 'hash changed files from watcher' 57.28049993515015ms
+[NX Daemon Server] - 2023-11-30T10:41:00.043Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-30T10:41:00.043Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-30T11:11:57.357Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-30T11:11:57.359Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-30T11:11:57.364Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T11:11:57.366Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-30T11:11:57.366Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T11:11:57.368Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-30T11:11:57.459Z - 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-30T11:11:57.459Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-30T11:11:57.460Z - Time taken for 'hash changed files from watcher' 43.005800008773804ms
+[NX Daemon Server] - 2023-11-30T11:11:57.460Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-30T11:11:57.461Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-30T18:38:02.678Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-30T18:38:02.681Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-30T18:38:02.689Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T18:38:02.691Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-30T18:38:02.691Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-30T18:38:02.692Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-30T18:38:02.813Z - 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-30T18:38:02.814Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-30T18:38:02.815Z - Time taken for 'hash changed files from watcher' 42.48599982261658ms
+[NX Daemon Server] - 2023-11-30T18:38:02.816Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-30T18:38:02.816Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-01T06:16:28.532Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-12-01T06:16:28.535Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-12-01T06:16:28.537Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-01T06:16:28.539Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-01T06:16:28.539Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-01T06:16:28.541Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-01T06:16:29.043Z - 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-12-01T06:16:29.043Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-12-01T06:16:29.045Z - Time taken for 'hash changed files from watcher' 43.22499990463257ms
+[NX Daemon Server] - 2023-12-01T06:16:29.045Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-12-01T06:16:29.046Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-01T06:32:54.497Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-12-01T06:32:54.499Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-12-01T06:32:54.512Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-01T06:32:54.514Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-01T06:32:54.514Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-01T06:32:54.515Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-01T06:32:54.610Z - 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-12-01T06:32:54.610Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-12-01T06:32:54.611Z - Time taken for 'hash changed files from watcher' 43.12899994850159ms
+[NX Daemon Server] - 2023-12-01T06:32:54.612Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-12-01T06:32:54.612Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":7496}
+{"processId":10468}

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

@@ -8,7 +8,7 @@
 
   <navigation-panel
     [showAdditionalNavigation]="hideTabbar()"
-    (activeTabChanged)="onNavigationUpdated()"
+    (activeTabChanged)="onNavigationUpdated($event)"
   ></navigation-panel>
 
   <modal></modal>

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

@@ -53,7 +53,7 @@ export class JournalHomeComponent {
     }
   }
 
-  public onNavigationUpdated() {
-    this.tabbar.active = 0;
+  public onNavigationUpdated(tab: number) {
+    this.tabbar.active = tab;
   }
 }

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

@@ -4,25 +4,55 @@
   <ul>
     @if(showAdditionalNavigation){
     <li>
-      <div class="navigation-entry" [routerLink]="'./stats'">Kampf</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty(1)"
+        [routerLink]="'./stats'"
+      >
+        Kampf
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./character'">Charakter</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty(2)"
+        [routerLink]="'./character'"
+      >
+        Charakter
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./inventory'">Inventar</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty(3)"
+        [routerLink]="'./inventory'"
+      >
+        Inventar
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./notes'">Zauber</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty(4)"
+        [routerLink]="'./notes'"
+      >
+        Zauber
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./spellcards'">Notizen</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty(5)"
+        [routerLink]="'./spellcards'"
+      >
+        Notizen
+      </div>
     </li>
     }
     <li>
       <div
         class="navigation-entry"
-        (click)="setActiveProperty()"
+        (click)="setActiveProperty(0)"
         [routerLink]="'./spellbook'"
       >
         Zauberbuch
@@ -31,7 +61,7 @@
     <li>
       <div
         class="navigation-entry"
-        (click)="setActiveProperty()"
+        (click)="setActiveProperty(0)"
         [routerLink]="'./quests'"
       >
         Aufträge
@@ -40,7 +70,7 @@
     <li>
       <div
         class="navigation-entry"
-        (click)="setActiveProperty()"
+        (click)="setActiveProperty(0)"
         [routerLink]="'./npcs'"
       >
         NPCs
@@ -49,7 +79,7 @@
     <li>
       <div
         class="navigation-entry"
-        (click)="setActiveProperty()"
+        (click)="setActiveProperty(0)"
         [routerLink]="'./places'"
       >
         Orte
@@ -58,7 +88,7 @@
     <li>
       <div
         class="navigation-entry"
-        (click)="setActiveProperty()"
+        (click)="setActiveProperty(0)"
         [routerLink]="'./maps'"
       >
         Karten
@@ -68,7 +98,7 @@
     <li>
       <div
         class="navigation-entry"
-        (click)="setActiveProperty()"
+        (click)="setActiveProperty(0)"
         [routerLink]="'./ruleset'"
       >
         Regelwerk

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

@@ -42,7 +42,7 @@ export class NavigationPanelComponent {
     this.panel?.nativeElement.classList.remove('panel--open');
   }
 
-  public setActiveProperty() {
-    this.activeTabChanged.emit();
+  public setActiveProperty(tab: number) {
+    this.activeTabChanged.emit(tab);
   }
 }

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

@@ -135,28 +135,10 @@ export class JournalInventoryComponent {
         console.log('Result vom Modal kam zurück:', result);
         if (result.state === 'update') {
           list![index!] = result.data;
-          if (listname === 'weaponsAndArmor') {
-            this.updateDatabase('weaponsAndArmor');
-          } else if (listname === 'consumables') {
-            this.updateDatabase('consumables');
-          } else if (listname === 'miscellaneous') {
-            this.updateDatabase('miscellaneous');
-          } else {
-            throw new Error('Unknown list name: ' + listname);
-          }
+          this.updateDatabase(listname);
         } else if (result.state === 'add') {
-          if (listname === 'weaponsAndArmor') {
-            this.weaponsAndArmor.push(result.data);
-            this.updateDatabase('weaponsAndArmor');
-          } else if (listname === 'consumables') {
-            this.consumables.push(result.data);
-            this.updateDatabase('consumables');
-          } else if (listname === 'miscellaneous') {
-            this.miscellaneous.push(result.data);
-            this.updateDatabase('miscellaneous');
-          } else {
-            throw new Error('Unknown list name: ' + listname);
-          }
+          list!.push(result.data);
+          this.updateDatabase(listname);
         }
         resultSubscription.unsubscribe();
       }
@@ -166,13 +148,13 @@ export class JournalInventoryComponent {
   public addItem(): void {
     switch (this.active) {
       case 1:
-        this.openItemModal(false, 'weaponsAndArmor');
+        this.openItemModal(false, 'weaponsAndArmor', this.weaponsAndArmor);
         break;
       case 2:
-        this.openItemModal(false, 'consumables');
+        this.openItemModal(false, 'consumables', this.consumables);
         break;
       case 3:
-        this.openItemModal(false, 'miscellaneous');
+        this.openItemModal(false, 'miscellaneous', this.miscellaneous);
         break;
       default:
         throw new Error('Unknown active tab: ' + this.active);

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.ts

@@ -82,8 +82,4 @@ export class SimpleItemModalComponent {
     this.value = 0;
     this.isReady = false;
   }
-
-  public ngOnDestroy(): void {
-    console.log('ngOnDestroy() in simple-item-modal.component.ts');
-  }
 }

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

@@ -1,15 +1,185 @@
-<div
-  style="
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  "
->
-  <img
-    style="height: 100%"
-    src="assets/images/spellcards_coming_soon.jpeg"
-    alt=""
-  />
+<div cdkDropListGroup>
+  <div class="example-container">
+    <h2>To do</h2>
+
+    <div
+      cdkDropList
+      cdkDropListOrientation="horizontal"
+      [cdkDropListData]="todo"
+      class="example-list"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of todo; track item) {
+      <div class="example-box" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="example-container">
+    <h2>Done</h2>
+
+    <div
+      cdkDropList
+      cdkDropListOrientation="horizontal"
+      [cdkDropListData]="done"
+      class="example-list"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of done; track item) {
+      <div class="example-box" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
 </div>
+
+<!-- <div cdkDropListGroup>
+  <div class="level-container">
+    <h2>Zaubertrick</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level0"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level0; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 1</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level1"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level1; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 2</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level2"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level2; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 3</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level3"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level3; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 4</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level4"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level4; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 5</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level5"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level5; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 6</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level6"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level6; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 7</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level7"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level7; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 8</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level8"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level8; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="level-container">
+    <h2>Level 9</h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="level9"
+      class="level-table"
+      (cdkDropListDropped)="drop($event)"
+    >
+      @for (item of level9; track item) {
+      <div class="spellcard" cdkDrag>{{ item }}</div>
+      }
+    </div>
+  </div>
+</div> -->

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

@@ -0,0 +1,51 @@
+.example-list {
+  width: 1000px;
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: flex;
+  flex-direction: row;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.example-box {
+  padding: 20px 10px;
+  border-right: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.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);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

@@ -1,10 +1,227 @@
 import { Component } from '@angular/core';
+import {
+  CdkDragDrop,
+  CdkDrag,
+  CdkDropList,
+  CdkDropListGroup,
+  moveItemInArray,
+  transferArrayItem,
+} from '@angular/cdk/drag-drop';
+import { Spell } from 'src/interfaces/spell';
 
 @Component({
   selector: 'app-journal-spellcards',
   templateUrl: './journal-spellcards.component.html',
-  styleUrls: ['./journal-spellcards.component.scss']
+  styleUrls: ['./journal-spellcards.component.scss'],
 })
 export class JournalSpellcardsComponent {
+  todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
 
+  done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];
+
+  // public level0: Spell[] = [
+  //   {
+  //     name: 'Vampiric Touch',
+  //     level: 3,
+  //     cost: 'action',
+  //     canRitual: false,
+  //     needsVerbal: true,
+  //     needsSomatic: true,
+  //     needsMaterial: false,
+  //     needsConcentration: true,
+  //     needsAttackRoll: true,
+  //     needsSavingThrow: false,
+  //     doesDamage: true,
+  //     doesHeal: false,
+  //     heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+  //     description:
+  //       'Die Berührung deiner schattenumrankten Hand kann anderen die Lebenskraft entziehen, um deine Wunden zu heilen. Führe einen Nahkampf-Zauberangriff gegen eine Kreatur in deiner Reichweite aus. Bei einem Treffer erleidet das Ziel 3W6 nekrotischen Schaden, und du erhältst Trefferpunkte in Höhe der Hälfte des zugefügten nekrotischen Schadens zurück. Bis der Zauber endet, kannst du den Angriff in jeder deiner Runden als Aktion wiederholen. Wenn du diesen Zauber mit einem Zauberplatz des 4. Grades oder höher wirkst, erhöht sich der Schaden um 1W6 für jeden Grad über dem 3.',
+  //     school: 'necromancy',
+  //     damage: [{ diceNumber: '3', diceType: 'd6', damageType: 'necrotic' }],
+  //     isRanged: false,
+  //     range: 5,
+  //     hasAreaOfEffect: false,
+  //     areaOfEffectType: '',
+  //     radius: 0,
+  //   },
+  //   {
+  //     name: 'Heilende Berührung',
+  //     level: 1,
+  //     cost: 'action',
+  //     canRitual: false,
+  //     needsVerbal: true,
+  //     needsSomatic: true,
+  //     needsMaterial: false,
+  //     needsConcentration: false,
+  //     needsAttackRoll: false,
+  //     needsSavingThrow: false,
+  //     doesDamage: false,
+  //     damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+  //     doesHeal: true,
+  //     heal: { diceNumber: '1', diceType: 'd8', additionalHeal: 5 },
+  //     description:
+  //       'Deine Berührung kann Wunden heilen. Berühre eine Kreatur und spende ihr 1W8 + deinem Fertigkeitsbonus Trefferpunkte. Dieser Zauber hat keine Wirkung auf Untote oder Konstrukte. Wenn du diesen Zauber mit einem Zauberplatz des 2. Grades oder höher wirkst, erhöht sich die Heilung um 1W8 für jeden Grad über dem 1.',
+  //     school: 'evocation',
+  //     isRanged: false,
+  //     range: 5,
+  //     hasAreaOfEffect: false,
+  //     areaOfEffectType: '',
+  //     radius: 0,
+  //   },
+  // ];
+
+  // public level1: Spell[] = [
+  //   {
+  //     name: 'Feuerball',
+  //     level: 3,
+  //     cost: 'action',
+  //     canRitual: false,
+  //     needsVerbal: true,
+  //     needsSomatic: true,
+  //     needsMaterial: true,
+  //     needsConcentration: false,
+  //     needsAttackRoll: false,
+  //     needsSavingThrow: true,
+  //     savingThrowAttribute: 'dexterity',
+  //     school: 'evocation',
+  //     doesDamage: true,
+  //     damage: [
+  //       { diceNumber: '8', diceType: 'd6', damageType: 'fire' },
+  //       { diceNumber: '8', diceType: 'd6', damageType: 'fire' },
+  //     ],
+  //     doesHeal: false,
+  //     heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+  //     isRanged: true,
+  //     description:
+  //       'Ein heller Strahl schießt von deinem Zeigefinger zu einem von dir gewählten Punkt in Reichweite und blüht dann mit einem tiefen Brüllen zu einer Flammenexplosion auf. Jede Kreatur in einem Umkreis von 6 Metern um diesen Punkt muss einen Rettungswurf auf Geschicklichkeit machen. Bei einem misslungenen Rettungswurf erleidet das Ziel 8W6 Feuerschaden, bei einem erfolgreichen Wurf die Hälfte des Schadens. Das Feuer breitet sich um Ecken aus. Es entzündet brennbare Gegenstände in der Umgebung, die nicht getragen werden. Wenn du diesen Zauber mit einem Zauberplatz des 4. Grades oder höher wirkst, erhöht sich der Schaden um 1W6 für jeden Grad über dem 3.',
+  //     range: 150,
+  //     hasAreaOfEffect: true,
+  //     radius: 20,
+  //     areaOfEffectType: 'sphere',
+  //   },
+  //   {
+  //     name: 'Feuerpfeil',
+  //     level: 0,
+  //     cost: 'action',
+  //     canRitual: false,
+  //     needsVerbal: true,
+  //     needsSomatic: true,
+  //     needsMaterial: true,
+  //     needsConcentration: false,
+  //     needsAttackRoll: true,
+  //     needsSavingThrow: false,
+  //     school: 'evocation',
+  //     doesDamage: true,
+  //     doesHeal: false,
+  //     heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+  //     description:
+  //       'Du schleuderst einen Splitter aus Feuer auf eine Kreatur in Reichweite. Lege einen Fernkampf-Zauberangriff gegen das Ziel ab. Bei einem Treffer erleidet das Ziel 1W10 Feuerschaden. Ein brennbarer Gegenstand, der von diesem Zauber getroffen wird, geht in Flammen auf, wenn er nicht getragen oder in der Hand gehalten wird. Der Schaden dieses Zaubers steigt um 1W10, wenn du die 5. Stufe (2W10), die 11. Stufe (3W10) und die 17. Stufe (4W10) erreichst.  ',
+  //     damage: [{ diceNumber: '1', diceType: 'd10', damageType: 'fire' }],
+  //     isRanged: true,
+  //     range: 120,
+  //     hasAreaOfEffect: false,
+  //     areaOfEffectType: '',
+  //     radius: 0,
+  //   },
+  // ];
+
+  // public level2: Spell[] = [
+  //   {
+  //     name: 'Feuerball2',
+  //     level: 3,
+  //     cost: 'action',
+  //     canRitual: false,
+  //     needsVerbal: true,
+  //     needsSomatic: true,
+  //     needsMaterial: true,
+  //     needsConcentration: false,
+  //     needsAttackRoll: false,
+  //     needsSavingThrow: true,
+  //     savingThrowAttribute: 'dexterity',
+  //     school: 'evocation',
+  //     doesDamage: true,
+  //     damage: [
+  //       { diceNumber: '8', diceType: 'd6', damageType: 'fire' },
+  //       { diceNumber: '8', diceType: 'd6', damageType: 'fire' },
+  //     ],
+  //     doesHeal: false,
+  //     heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+  //     isRanged: true,
+  //     description:
+  //       'Ein heller Strahl schießt von deinem Zeigefinger zu einem von dir gewählten Punkt in Reichweite und blüht dann mit einem tiefen Brüllen zu einer Flammenexplosion auf. Jede Kreatur in einem Umkreis von 6 Metern um diesen Punkt muss einen Rettungswurf auf Geschicklichkeit machen. Bei einem misslungenen Rettungswurf erleidet das Ziel 8W6 Feuerschaden, bei einem erfolgreichen Wurf die Hälfte des Schadens. Das Feuer breitet sich um Ecken aus. Es entzündet brennbare Gegenstände in der Umgebung, die nicht getragen werden. Wenn du diesen Zauber mit einem Zauberplatz des 4. Grades oder höher wirkst, erhöht sich der Schaden um 1W6 für jeden Grad über dem 3.',
+  //     range: 150,
+  //     hasAreaOfEffect: true,
+  //     radius: 20,
+  //     areaOfEffectType: 'sphere',
+  //   },
+  //   {
+  //     name: 'Feuerpfeil2',
+  //     level: 0,
+  //     cost: 'action',
+  //     canRitual: false,
+  //     needsVerbal: true,
+  //     needsSomatic: true,
+  //     needsMaterial: true,
+  //     needsConcentration: false,
+  //     needsAttackRoll: true,
+  //     needsSavingThrow: false,
+  //     school: 'evocation',
+  //     doesDamage: true,
+  //     doesHeal: false,
+  //     heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+  //     description:
+  //       'Du schleuderst einen Splitter aus Feuer auf eine Kreatur in Reichweite. Lege einen Fernkampf-Zauberangriff gegen das Ziel ab. Bei einem Treffer erleidet das Ziel 1W10 Feuerschaden. Ein brennbarer Gegenstand, der von diesem Zauber getroffen wird, geht in Flammen auf, wenn er nicht getragen oder in der Hand gehalten wird. Der Schaden dieses Zaubers steigt um 1W10, wenn du die 5. Stufe (2W10), die 11. Stufe (3W10) und die 17. Stufe (4W10) erreichst.  ',
+  //     damage: [{ diceNumber: '1', diceType: 'd10', damageType: 'fire' }],
+  //     isRanged: true,
+  //     range: 120,
+  //     hasAreaOfEffect: false,
+  //     areaOfEffectType: '',
+  //     radius: 0,
+  //   },
+  // ];
+
+  public level0: any[] = ['Hund', 'Katze', 'Maus', 'Elefant', 'Giraffe'];
+
+  public level1: any[] = [
+    'Feuerball',
+    'Heilende Berührung',
+    'Feuerpfeil',
+    'Wasserball',
+  ];
+
+  public level2: any[] = ['Hamburg', 'Berlin', 'München', 'Köln'];
+
+  public level3: Spell[] = [];
+
+  public level4: Spell[] = [];
+
+  public level5: Spell[] = [];
+
+  public level6: Spell[] = [];
+
+  public level7: Spell[] = [];
+
+  public level8: Spell[] = [];
+
+  public level9: Spell[] = [];
+
+  drop(event: CdkDragDrop<any[]>) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex
+      );
+      console.log(event.container.data);
+    } else {
+      transferArrayItem(
+        event.previousContainer.data,
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex
+      );
+      console.log(event.previousContainer.data);
+      console.log(event.container.data);
+    }
+  }
 }

src/app/journal/journal-stats/info-row/conditions/conditions.component.scss

@@ -20,11 +20,10 @@
 .condition-list{
     display: flex;
     flex-direction: column;
-    // justify-content: space-between;
     align-items: center;
     width: 100%;
     height: 5rem;
-    padding-top: 0.5rem;
+    margin-top: 0.5rem;
     overflow-y: auto;
 }
 

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

@@ -1,72 +1,60 @@
 <div class="details-title">{{ spell.name }}</div>
 
-<div class="details-subheading">Beschreibung</div>
-<div class="details-content">
-  {{ spell.description }}
-</div>
-<!-- <form>
-  <fieldset>
-    <legend class="details-subheading">Komponenten</legend>
+<div class="details-scrollcontainer">
+  <div class="details-subheading">Beschreibung</div>
+  <div class="details-content">
+    {{ spell.description }}
+  </div>
+
+  <div class="details-subheading">Komponenten:</div>
+  <div class="details-content-small">
     <span *ngIf="spell.needsVerbal"> Verbal, </span>
     <span *ngIf="spell.needsSomatic"> Geste, </span>
     <span *ngIf="spell.needsMaterial"> Material </span>
-  </fieldset>
-</form> -->
-
-<div class="details-subheading">Komponenten:</div>
-<div class="details-content-small">
-  <span *ngIf="spell.needsVerbal"> Verbal, </span>
-  <span *ngIf="spell.needsSomatic"> Geste, </span>
-  <span *ngIf="spell.needsMaterial"> Material </span>
-</div>
+  </div>
 
-<div class="details-subheading">Eigenschaften</div>
-<div class="details-content-small">
-  <div *ngIf="spell.canRitual">Kann als Ritual gewirkt werden</div>
-  <div *ngIf="spell.needsConcentration">Benötigt Konzentration</div>
-  <div>Schule: {{ spell.school }}</div>
-</div>
+  <div class="details-subheading">Eigenschaften</div>
+  <div class="details-content-small">
+    <div *ngIf="spell.canRitual">Kann als Ritual gewirkt werden</div>
+    <div *ngIf="spell.needsConcentration">Benötigt Konzentration</div>
+    <div>Schule: {{ spell.school }}</div>
+  </div>
 
-<div class="details-subheading">Reichweite</div>
-<div class="details-content-small">
-  <div>Reichweite: {{ spell.range }} ft.</div>
-  <div *ngIf="spell.hasAreaOfEffect">
-    Flächeneffekt: {{ spell.radius }} ft. {{ spell.areaOfEffectType }}
+  <div class="details-subheading">Reichweite</div>
+  <div class="details-content-small">
+    <div>Reichweite: {{ spell.range }} ft.</div>
+    <div *ngIf="spell.hasAreaOfEffect">
+      Flächeneffekt: {{ spell.radius }} ft. {{ spell.areaOfEffectType }}
+    </div>
   </div>
-</div>
 
-<!-- Angriff /Rettungswurf -->
+  <!-- Angriff /Rettungswurf -->
 
-<div class="details-subheading">Effekte</div>
-<div class="details-content-small">
-  <div *ngIf="spell.needsSavingThrow">
-    <div class="details-value">{{ modifiers.saveDC }}</div>
-    <div class="details-label">
-      {{
-        spell.savingThrowAttribute
-          ? attributeTranslator[spell.savingThrowAttribute]
-          : ""
-      }}
+  <div class="details-subheading">Effekte</div>
+  <div class="details-content-small">
+    <div *ngIf="spell.needsSavingThrow">
+      <div class="details-value">{{ modifiers.saveDC }}</div>
+      <div class="details-label">
+        {{
+          spell.savingThrowAttribute
+            ? attributeTranslator[spell.savingThrowAttribute]
+            : ""
+        }}
+      </div>
     </div>
-  </div>
-  <div *ngIf="spell.needsAttackRoll">
-    Anfgriffsmodifikator: {{ modifiers.attackBonus }}
-  </div>
-  <ng-container *ngIf="spell.doesDamage">
-    Schaden:
-    <div *ngFor="let damage of spell.damage">
-      {{ damage.diceNumber }} {{ damage.diceType }}
-      {{ damage.additionalDamage }} {{ damage.damageType }}
+    <div *ngIf="spell.needsAttackRoll">
+      Anfgriffsmodifikator: {{ modifiers.attackBonus }}
     </div>
-  </ng-container>
+    <ng-container *ngIf="spell.doesDamage">
+      Schaden:
+      <div *ngFor="let damage of spell.damage">
+        {{ damage.diceNumber }} {{ damage.diceType }}
+        {{ damage.additionalDamage }} {{ damage.damageType }}
+      </div>
+    </ng-container>
+  </div>
 </div>
 
-<!-- <div class="details-subheading" *ngIf="spell.doesHeal">Heilung</div>
-<div class="details-content">
-  {{ spell.healAmount!.diceNumber }} {{ spell.healAmount!.diceType }}
-  {{ spell.healAmount?.additionalHeal }}
-</div> -->
-
 <div class="vertical-button-wrapper-3">
   <ui-button
     [type]="'edit'"

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

@@ -0,0 +1,5 @@
+.details-scrollcontainer{
+    height: calc(100% - 16rem);
+    overflow-y: auto;
+
+}

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

@@ -120,24 +120,24 @@
 <!-- Damage/Heal -->
 <ng-template #spellDamageTemplate let-spell="spell">
   <div>
+    @if(spell.doesDamage){
     <div *ngFor="let damage of spell.damage; let index = index">
       <span>{{ damage.diceNumber }} {{ damage.diceType }} </span>
       <span>
         <icon [size]="'xs'" [type]="'damage'" [icon]="damage.damageType"></icon>
       </span>
     </div>
-
-    <div *ngIf="spell.doesHeal" class="heal">
-      <span
-        >{{ spell.healAmount.diceNumber }} {{ spell.healAmount.diceType }}
-      </span>
-      <span *ngIf="spell.healAmount.additionalHeal"
-        >+{{ spell.healAmount.additionalHeal }}
+    } @if(spell.doesHeal){
+    <div class="heal">
+      <span>{{ spell.heal.diceNumber }} {{ spell.heal.diceType }} </span>
+      <span *ngIf="spell.heal.additionalHeal"
+        >+{{ spell.heal.additionalHeal }}
       </span>
       <span>
         <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
       </span>
     </div>
+    }
   </div>
 </ng-template>
 
@@ -148,15 +148,7 @@
     <div *ngIf="!spell.isRanged">5 ft.</div>
 
     <div *ngIf="spell.hasAreaOfEffect">
-      <span>{{ spell.radius }} ft. {{ areas[spell.areaTypeOfEffect] }}</span>
+      <span>{{ spell.radius }} ft. {{ areas[spell.areaOfEffectType] }} </span>
     </div>
   </div>
 </ng-template>
-
-<!-- Modal -->
-<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,10 +1,11 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
-import { NgxSmartModalService } from 'ngx-smart-modal';
+import { ModalService } from 'src/services/modal/modal.service';
 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';
+import { SpellModalComponent } from 'src/app/journal/spell-modal/spell-modal.component';
 
 @Component({
   selector: 'spell-table',
@@ -14,7 +15,7 @@ import { SpellDetailsComponent } from './spell-details/spell-details.component';
 export class SpellTableComponent {
   public constructor(
     public dataAccessor: DataService,
-    public ngxSmartModalService: NgxSmartModalService,
+    private modalAccessor: ModalService,
     public detailsAccessor: DetailsService
   ) {}
 
@@ -63,22 +64,32 @@ export class SpellTableComponent {
         if (result.state === 'delete') {
           this.deleteSpell(index);
         } else if (result.state === 'update') {
-          this.openSpellModificationModal(index);
+          this.openModal(true, index);
         }
         resultSubscription.unsubscribe();
       }
     );
   }
 
-  public openSpellModal(): void {
-    this.ngxSmartModalService.getModal('spellModal').open();
-  }
-
-  public openSpellModificationModal(index: number): void {
-    this.ngxSmartModalService
-      .getModal('spellModal')
-      .setData({ spell: this.spells[index], index: index });
-    this.ngxSmartModalService.getModal('spellModal').open();
+  public openModal(isUpdate: boolean, index?: number): void {
+    this.modalAccessor.openModal(SpellModalComponent, {
+      spell:
+        index !== undefined
+          ? JSON.parse(JSON.stringify(this.spells[index]))
+          : undefined,
+      isUpdate: isUpdate,
+    });
+    const resultSubscription = this.modalAccessor.result$.subscribe(
+      (result) => {
+        if (result.state === 'update') {
+          console.log(result.data);
+          this.updateSpell(result.data, index!);
+        } else if (result.state === 'add') {
+          this.addSpell(result.data);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
   }
 
   public addSpell(spell: Spell) {

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

@@ -0,0 +1,180 @@
+<div class="modal-dimensions">
+  <h2 style="text-align: center">
+    @if(isUpdate){Waffe bearbeiten} @else{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)]="name" />
+    </div>
+    <div class="form-element-row">
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="proficient" />
+        <label for="weaponProficient">Geübt</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="isFinesse" />
+        <label for="weaponFinesse">Finesse</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="isVersatile" />
+        <label for="Vielseitig">Vielseitig</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="isTwoHanded" />
+        <label for="weaponTwoHanded">Zweihändig</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="isRanged" />
+        <label for="weaponRanged">Fernkampf</label>
+      </div>
+      <div class="checkbox-element">
+        <select [(ngModel)]="weight">
+          <option *ngFor="let weight of weights" [value]="weight">
+            {{ weight }}
+          </option>
+        </select>
+        <label>Gewicht</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="canBeThrown" />
+        <label for="weaponRanged">Wurfwaffe</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="isMagical" />
+        <label>Magisch</label>
+      </div>
+    </div>
+
+    <div class="input-element">
+      <label for="weaponAttackBonus">Angriffsbonus</label>
+      <select [(ngModel)]="attackBonus">
+        <option *ngFor="let attackBonus of attackBonuses" [value]="attackBonus">
+          {{ attackBonus }}
+        </option>
+      </select>
+    </div>
+
+    <div class="input-element" *ngIf="isMagical">
+      <label>Magischer Modifikator</label>
+      <select [(ngModel)]="magicBonus">
+        <option
+          *ngFor="let magicBonus of magicBonuses"
+          [value]="magicBonus.value"
+        >
+          {{ magicBonus.display }}
+        </option>
+      </select>
+    </div>
+
+    <div class="input-element" *ngIf="isRanged">
+      <label for="weaponRange">Reichweite</label>
+      <input
+        type="text"
+        class="add-input"
+        id="weaponRange"
+        [(ngModel)]="range"
+      />
+    </div>
+
+    <div class="input-element" *ngIf="canBeThrown">
+      <label for="weaponRange">Wurfreichweite</label>
+      <input
+        type="text"
+        class="add-input"
+        id="weaponRange"
+        [(ngModel)]="throwRange"
+      />
+    </div>
+
+    <h3 style="text-align: center">Schaden</h3>
+
+    <div class="damage-container">
+      <div class="damage-box" *ngFor="let damage of damage; let index = index">
+        <div class="dice-row">
+          <div class="flex-column">
+            <label>Anzahl</label>
+            <select [(ngModel)]="damage.diceNumber">
+              <option *ngFor="let number of numbers" [value]="number">
+                {{ number }}
+              </option>
+            </select>
+          </div>
+
+          <div class="flex-column">
+            <label>Würfel</label>
+            <select [(ngModel)]="damage.diceType">
+              <option *ngFor="let die of dice" [value]="die">
+                {{ die }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div *ngIf="isVersatile && index === 0">
+          Zweihändiger Schaden
+          <div class="flex-row gap-10">
+            <div class="flex-column">
+              <label>Würfel</label>
+              <select [(ngModel)]="versatileDamage">
+                <option *ngFor="let die of dice" [value]="die">
+                  {{ die }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <label for="damageType">Schadensart</label>
+        <select [(ngModel)]="damage.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="damage.length < 3"
+        (click)="addDamage()"
+        [size]="'m'"
+        [type]="'UI'"
+        [icon]="'add'"
+        [class]="'pointer'"
+      ></icon>
+    </div>
+
+    <div class="button-wrapper-2-block">
+      @if(isUpdate){
+      <ui-button
+        [type]="'update'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="update()"
+      ></ui-button>
+      }@else{
+      <ui-button
+        *ngIf="!isUpdate"
+        [type]="'add'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="add()"
+      ></ui-button>
+      }
+      <ui-button
+        [type]="'dismiss'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="cancel()"
+      ></ui-button>
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,11 @@
+.modal-dimensions{
+    width: 40vw;
+    background-color: antiquewhite;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+    padding: 1rem;
+}
+
 .add-form-group{
     display: flex;
     flex-direction: column;
@@ -7,9 +15,6 @@
 .input-element{
     display: flex;
     flex-direction: column;
-    // gap: 0.1rem;
-    // align-items: center;
-    // justify-content: center;
 }
 
 .checkbox-element{
@@ -33,8 +38,6 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
-    // align-items: center;
-    // justify-content: center;
     
 }
 
@@ -57,14 +60,10 @@
 .dice-row{
     display: flex;
     flex-direction: row;
-    // justify-content: center;
-    // align-items: center;
     gap: 1rem;
     margin-bottom: 1rem;
 }
 
-
-
 .button-wrapper{
     width: 100%;
     display: grid;

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

@@ -6,10 +6,12 @@ describe('WeaponModalComponent', () => {
   let component: WeaponModalComponent;
   let fixture: ComponentFixture<WeaponModalComponent>;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [WeaponModalComponent]
-    });
+    })
+    .compileComponents();
+    
     fixture = TestBed.createComponent(WeaponModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -0,0 +1,199 @@
+import { Component, Input } from '@angular/core';
+import { Weapon } from 'src/interfaces/weapon';
+import { Damage } from 'src/interfaces/damage';
+import { ModalService } from 'src/services/modal/modal.service';
+
+@Component({
+  selector: 'app-weapon-modal',
+  templateUrl: './weapon-modal.component.html',
+  styleUrl: './weapon-modal.component.scss',
+})
+export class WeaponModalComponent {
+  public constructor(private modalAccessor: ModalService) {}
+  @Input() public item: any;
+  @Input() public isUpdate: boolean = false;
+
+  public name: string = '';
+  public range: string = '5 ft.';
+  public throwRange: string = '';
+  public attackBonus: string = '+0';
+  public damage: Damage[] = [{ diceNumber: '', diceType: '', damageType: '' }];
+  public proficient: boolean = false;
+  public isVersatile: boolean = false;
+  public isTwoHanded: boolean = false;
+  public isFinesse: boolean = false;
+  public isRanged: boolean = false;
+  public versatileDamage: string = '';
+  public canBeThrown: boolean = false;
+  public weight: string = 'normal';
+  public isMagical: boolean = false;
+  public magicBonus: number = 0;
+
+  // Options for the select boxes
+  public weights: string[] = ['leicht', 'normal', 'schwer'];
+
+  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 attackBonuses: string[] = [
+    '-5',
+    '-4',
+    '-3',
+    '-2',
+    '-1',
+    '+0',
+    '+1',
+    '+2',
+    '+3',
+    '+4',
+    '+5',
+    '+6',
+    '+7',
+    '+8',
+    '+9',
+    '+10',
+    '+11',
+    '+12',
+    '+13',
+    '+14',
+    '+15',
+    '+16',
+    '+17',
+    '+18',
+    '+19',
+    '+20',
+  ];
+
+  public magicBonuses: any[] = [
+    { display: '+1', value: 1 },
+    { display: '+2', value: 2 },
+    { display: '+3', value: 3 },
+    { display: '+4', value: 4 },
+    { display: '+5', value: 5 },
+  ];
+
+  public ngOnInit(): void {
+    if (this.isUpdate) {
+      this.loadItem();
+    }
+  }
+
+  public loadItem(): void {
+    this.name = this.item.name;
+    this.range = this.item.range;
+    this.throwRange = this.item.throwRange;
+    this.attackBonus = this.item.attackBonus;
+    this.damage = this.item.damage;
+    this.proficient = this.item.proficient;
+    this.isVersatile = this.item.isVersatile;
+    this.isTwoHanded = this.item.isTwoHanded;
+    this.isFinesse = this.item.isFinesse;
+    this.isRanged = this.item.isRanged;
+    this.versatileDamage = this.item.versatileDamage;
+    this.canBeThrown = this.item.canBeThrown;
+    this.weight = this.item.weight;
+    this.isMagical = this.item.isMagical;
+    this.magicBonus = this.item.magicBonus;
+  }
+
+  // RESPONSES
+
+  public cancel(): void {
+    this.modalAccessor.handleModalClosing('cancel', undefined);
+    this.resetItem();
+  }
+
+  public add(): void {
+    this.modalAccessor.handleModalClosing('add', this.createItem());
+    this.resetItem();
+  }
+
+  public update(): void {
+    this.modalAccessor.handleModalClosing('update', this.createItem());
+    this.resetItem();
+  }
+
+  /**
+   * Creates a new Weapon object with the updated or newly generated values.
+   * @returns The created item
+   */
+  public createItem(): Weapon {
+    console.log('createItem() in weapon-modal.component.ts');
+    return {
+      name: this.name,
+      range: this.range,
+      throwRange: this.throwRange,
+      attackBonus: this.attackBonus,
+      damage: this.damage,
+      proficient: this.proficient,
+      isVersatile: this.isVersatile,
+      isTwoHanded: this.isTwoHanded,
+      isFinesse: this.isFinesse,
+      isRanged: this.isRanged,
+      versatileDamage: this.versatileDamage,
+      canBeThrown: this.canBeThrown,
+      weight: this.weight,
+      isMagical: this.isMagical,
+      magicBonus: this.magicBonus,
+    };
+  }
+
+  /**
+   * Resets all values to their default values.
+   */
+  public resetItem(): void {
+    this.name = '';
+    this.range = '5 ft.';
+    this.throwRange = '';
+    this.attackBonus = '+0';
+    this.damage = [{ diceNumber: '', diceType: '', damageType: '' }];
+    this.proficient = false;
+    this.isVersatile = false;
+    this.isTwoHanded = false;
+    this.isFinesse = false;
+    this.isRanged = false;
+    this.versatileDamage = '';
+    this.canBeThrown = false;
+    this.weight = 'normal';
+    this.isMagical = false;
+    this.magicBonus = 0;
+  }
+
+  // COMPONENT LOGIC
+
+  public addDamage(): void {
+    this.damage.push({ diceNumber: '', diceType: '', damageType: '' });
+  }
+
+  public removeDamage(index: number): void {
+    this.damage.splice(index, 1);
+  }
+}

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

@@ -94,9 +94,9 @@
   <div class="weapon-range">{{ weapon.range }}</div>
 </ng-template>
 
-<weapon-modal
+<!-- <weapon-modal
   #weaponTable
   (weaponCreated)="addWeapon($event)"
   (weaponUpdated)="updateWeapon($event.weapon, $event.index)"
   (weaponDelete)="deleteWeapon($event)"
-></weapon-modal>
+></weapon-modal> -->

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

@@ -1,13 +1,12 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-// import { Observable } from 'rxjs';
 import { DataService } from 'src/services/data/data.service';
 import { Attribute } from 'src/interfaces/attribute';
 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';
+import { ModalService } from 'src/services/modal/modal.service';
+import { WeaponModalComponent } from './weapon-modal/weapon-modal.component';
 
 @Component({
   selector: 'weapon-table',
@@ -18,7 +17,7 @@ export class WeaponTableComponent {
   public constructor(
     public dataAccessor: DataService,
     public detailsAccessor: DetailsService,
-    public ngxSmartModalService: NgxSmartModalService
+    private modalAccessor: ModalService
   ) {}
 
   @Output() public createNewWeapon: EventEmitter<void> =
@@ -102,10 +101,6 @@ export class WeaponTableComponent {
     this.dataAccessor.setWeapons(this.weapons);
   }
 
-  public openWeaponModal(): void {
-    this.ngxSmartModalService.getModal('weaponModal').open();
-  }
-
   public addWeapon(weapon: Weapon) {
     this.weapons.push(weapon);
     this.calculateDamageModifierArray();
@@ -123,18 +118,31 @@ export class WeaponTableComponent {
         if (result.state === 'delete') {
           this.deleteWeapon(index);
         } else if (result.state === 'update') {
-          this.openWeaponModificationModal(index);
+          this.openModal(true, index);
         }
         resultSubscription.unsubscribe();
       }
     );
   }
 
-  public openWeaponModificationModal(index: number): void {
-    this.ngxSmartModalService
-      .getModal('weaponModal')
-      .setData({ weapon: this.weapons[index], index: index });
-    this.ngxSmartModalService.getModal('weaponModal').open();
+  public openModal(isUpdate: boolean, index?: number): void {
+    this.modalAccessor.openModal(WeaponModalComponent, {
+      item:
+        index !== undefined
+          ? JSON.parse(JSON.stringify(this.weapons[index]))
+          : undefined,
+      isUpdate: isUpdate,
+    });
+    const resultSubscription = this.modalAccessor.result$.subscribe(
+      (result) => {
+        if (result.state === 'update') {
+          this.updateWeapon(result.data, index!);
+        } else if (result.state === 'add') {
+          this.addWeapon(result.data);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
   }
 
   public updateWeapon(weapon: Weapon, index: number): void {

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

@@ -14,9 +14,9 @@ export class WeaponsContainerComponent {
 
   public openModal(): void {
     if (this.active === 1) {
-      this.weaponTable.openWeaponModal();
+      this.weaponTable.openModal(false);
     } else if (this.active === 2) {
-      this.spellTable.openSpellModal();
+      this.spellTable.openModal(false);
     }
   }
 }

src/app/journal/journal.module.ts

@@ -27,7 +27,8 @@ import { DeathSaveComponent } from './journal-stats/info-row/death-save/death-sa
 import { LifeComponent } from './journal-stats/life-container/life/life.component';
 import { IconComponent } from './icon/icon.component';
 import { WeaponTableComponent } from './journal-stats/weapons-container/weapon-table/weapon-table.component';
-import { WeaponModalComponent } from './weapon-modal/weapon-modal.component';
+// import { WeaponModalComponent } from './weapon-modal/weapon-modal.component';
+import { WeaponModalComponent } from './journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component';
 import { SpellTableComponent } from './journal-stats/weapons-container/spell-table/spell-table.component';
 import { SpellModalComponent } from './spell-modal/spell-modal.component';
 import { AbilityPanelComponent } from './journal-stats/ability-panel/ability-panel.component';
@@ -98,7 +99,6 @@ import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
     LifeComponent,
     IconComponent,
     WeaponTableComponent,
-    WeaponModalComponent,
     SpellTableComponent,
     SpellModalComponent,
     AbilityPanelComponent,
@@ -146,6 +146,7 @@ import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
     SimpleItemModalComponent,
     FoodDetailsComponent,
     TabBarComponent,
+    WeaponModalComponent,
   ],
   imports: [
     CommonModule,

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

@@ -1,231 +1,177 @@
-<ngx-smart-modal
-  #spellModal
-  identifier="spellModal"
-  (onAnyCloseEventFinished)="removeData()"
-  (onOpenFinished)="checkIfUpdate()"
->
-  <div>
-    <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">
-        <label for="weaponName">Name</label>
-        <input
-          type="text"
-          class="add-input"
-          id="weaponName"
-          [(ngModel)]="newSpellName"
-        />
+<div class="modal-dimensions">
+  <h2 style="text-align: center">
+    @if(isUpdate){Zauber anpassen}@else{Zauber 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)]="name" />
+    </div>
+    <div class="form-element-row">
+      <!-- general -->
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="needsVerbal" />
+        <label>Verbal</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="needsSomatic" />
+        <label>Geste</label>
+      </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="needsMaterial" />
+        <label>Material</label>
       </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)]="needsConcentration" />
+        <label>Konzentration</label>
+      </div>
 
-        <div class="checkbox-element">
-          <select [(ngModel)]="newSpellCost">
-            <option *ngFor="let cost of costs" [value]="cost.value">
-              {{ cost.display }}
-            </option>
-          </select>
-          <label>Kosten</label>
-        </div>
+      <div class="checkbox-element">
+        <select [(ngModel)]="cost">
+          <option *ngFor="let cost of costs" [value]="cost.value">
+            {{ cost.display }}
+          </option>
+        </select>
+        <label>Kosten</label>
+      </div>
 
-        <div class="checkbox-element">
-          <input type="checkbox" [(ngModel)]="newSpellCanRitual" />
-          <label>Ritual möglich?</label>
-        </div>
+      <div class="checkbox-element">
+        <input type="checkbox" [(ngModel)]="canRitual" />
+        <label>Ritual möglich?</label>
+      </div>
 
-        <div class="checkbox-element">
-          <select [(ngModel)]="newSpellLevel">
-            <option
-              *ngFor="let level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
-              [value]="level"
-            >
-              {{ level }}
-            </option>
-          </select>
-          <label>Stufe</label>
-        </div>
+      <div class="checkbox-element">
+        <select [(ngModel)]="level">
+          <option
+            *ngFor="let level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
+            [value]="level"
+          >
+            {{ level }}
+          </option>
+        </select>
+        <label>Stufe</label>
+      </div>
 
-        <div class="checkbox-element">
-          <select [(ngModel)]="newSpellSchool">
-            <option *ngFor="let school of schools" [value]="school.value">
-              {{ school.display }}
-            </option>
-          </select>
-          <label>Schule</label>
-        </div>
+      <div class="checkbox-element">
+        <select [(ngModel)]="school">
+          <option *ngFor="let school of schools" [value]="school.value">
+            {{ school.display }}
+          </option>
+        </select>
+        <label>Schule</label>
       </div>
+    </div>
 
-      <!-- ranged and area -->
-      <h3 style="text-align: center">Reichweite und Fläche</h3>
+    <!-- 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 class="range-area-container">
+      <div class="range-box">
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="isRanged" />
+          <label>Fernkampf</label>
         </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 class="checkbox-element" *ngIf="isRanged">
+          <input type="text" [(ngModel)]="range" />
+          <label>Reichweite</label>
         </div>
       </div>
 
-      <div style="display: flex">
-        <div>
-          <input type="checkbox" [(ngModel)]="newSpellDoesDamage" />
-          <label>Schaden?</label>
+      <div class="area-box">
+        <div class="checkbox-element">
+          <input type="checkbox" [(ngModel)]="hasAreaOfEffect" />
+          <label>Flächeneffekt</label>
         </div>
-
-        <div>
-          <input type="checkbox" [(ngModel)]="newSpellDoesHeal" />
-          <label>Heilung?</label>
+        <div class="input-element" *ngIf="hasAreaOfEffect">
+          <input type="text" class="add-input" [(ngModel)]="radius" />
+          <label>Radius</label>
         </div>
-
-        <div>
-          <input type="checkbox" [(ngModel)]="newSpellNeedsSavingThrow" />
-          <label>Rettungswurf?</label>
-        </div>
-
-        <div>
-          <input type="checkbox" [(ngModel)]="newSpellNeedsAttackThrow" />
-          <label>Angriff?</label>
+        <div class="checkbox-element" *ngIf="hasAreaOfEffect">
+          <select [(ngModel)]="areaOfEffectType">
+            <option *ngFor="let areaType of areaTypes" [value]="areaType.value">
+              {{ areaType.display }}
+            </option>
+          </select>
+          <label>Flächenart</label>
         </div>
       </div>
+    </div>
 
-      <ng-container
-        *ngIf="newSpellNeedsSavingThrow"
-        [ngTemplateOutlet]="attackTabContent"
-      ></ng-container>
-
-      <ng-container
-        *ngIf="newSpellDoesDamage"
-        [ngTemplateOutlet]="damageTabContent"
-      ></ng-container>
-
-      <ng-container
-        *ngIf="newSpellDoesHeal"
-        [ngTemplateOutlet]="healTabContent"
-      ></ng-container>
-
-      <ng-container [ngTemplateOutlet]="descriptionTabContent"></ng-container>
-
-      <!-- Navbar -->
-
-      <!-- <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>
-              <ng-container
-                [ngTemplateOutlet]="attackTabContent"
-              ></ng-container>
-            </ng-template>
-          </ng-container>
-
-          <ng-container ngbNavItem="middle">
-            <button ngbNavLink>Schaden</button>
-            <ng-template ngbNavContent>
-              <ng-container
-                [ngTemplateOutlet]="damageTabContent"
-              ></ng-container>
-            </ng-template>
-          </ng-container>
+    <div style="display: flex">
+      <div>
+        <input type="checkbox" [(ngModel)]="doesDamage" />
+        <label>Schaden?</label>
+      </div>
 
-          <ng-container ngbNavItem="bottom">
-            <button ngbNavLink>Heilung</button>
-            <ng-template ngbNavContent>
-              <ng-container [ngTemplateOutlet]="healTabContent"></ng-container>
-            </ng-template>
-          </ng-container>
-        </div>
-        <div [ngbNavOutlet]="nav" class="ms-4"></div>
-      </div> -->
+      <div>
+        <input type="checkbox" [(ngModel)]="doesHeal" />
+        <label>Heilung?</label>
+      </div>
 
-      <!-- Button section -->
-      <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>
+      <div>
+        <input type="checkbox" [(ngModel)]="needsSavingThrow" />
+        <label>Rettungswurf?</label>
+      </div>
 
-        <ui-button
-          [type]="'dismiss'"
-          [size]="'xlarge'"
-          [color]="'primary'"
-          (click)="dismiss()"
-        ></ui-button>
+      <div>
+        <input type="checkbox" [(ngModel)]="needsAttackRoll" />
+        <label>Angriff?</label>
       </div>
     </div>
+
+    <ng-container
+      *ngIf="needsSavingThrow"
+      [ngTemplateOutlet]="attackTabContent"
+    ></ng-container>
+
+    <ng-container
+      *ngIf="doesDamage"
+      [ngTemplateOutlet]="damageTabContent"
+    ></ng-container>
+
+    <ng-container
+      *ngIf="doesHeal"
+      [ngTemplateOutlet]="healTabContent"
+    ></ng-container>
+
+    <ng-container [ngTemplateOutlet]="descriptionTabContent"></ng-container>
+
+    <!-- Button section -->
+    <div class="button-wrapper-2-block">
+      @if(isUpdate){
+      <ui-button
+        [type]="'update'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="update()"
+      ></ui-button>
+      }@else{
+      <ui-button
+        *ngIf="!isUpdate"
+        [type]="'add'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="add()"
+      ></ui-button>
+      }
+      <ui-button
+        [type]="'dismiss'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="cancel()"
+      ></ui-button>
+    </div>
   </div>
-</ngx-smart-modal>
+</div>
+<!-- </ngx-smart-modal> -->
 
 <!-- templates -->
 
 <ng-template #attackTabContent>
   <div>
-    <select
-      [(ngModel)]="newSpellSavingThrowAttribute"
-      *ngIf="newSpellNeedsSavingThrow"
-    >
+    <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
       <option
         *ngFor="let attribute of savingThrowAttributes"
         [value]="attribute.value"
@@ -233,20 +179,17 @@
         {{ attribute.display }}
       </option>
     </select>
-    <label *ngIf="newSpellNeedsSavingThrow">Attribut</label>
+    <label *ngIf="needsSavingThrow">Attribut</label>
   </div>
 </ng-template>
 
 <ng-template #damageTabContent>
   <div class="damage-container">
-    <div
-      class="damage-box"
-      *ngFor="let damage of newSpellDamage; let index = index"
-    >
+    <div class="damage-box" *ngFor="let damage of damage; let index = index">
       <div class="dice-row">
         <div class="flex-column">
           <label>Anzahl</label>
-          <select [(ngModel)]="newSpellDamage[index].diceNumber">
+          <select [(ngModel)]="damage.diceNumber">
             <option *ngFor="let number of numbers" [value]="number">
               {{ number }}
             </option>
@@ -255,7 +198,7 @@
 
         <div class="flex-column">
           <label>Würfel</label>
-          <select [(ngModel)]="newSpellDamage[index].diceType">
+          <select [(ngModel)]="damage.diceType">
             <option *ngFor="let die of dice" [value]="die">
               {{ die }}
             </option>
@@ -264,7 +207,7 @@
       </div>
 
       <label for="damageType">Schadensart</label>
-      <select [(ngModel)]="newSpellDamage[index].damageType">
+      <select [(ngModel)]="damage.damageType">
         <option *ngFor="let type of damageTypes" [value]="type.value">
           {{ type.display }}
         </option>
@@ -280,7 +223,7 @@
       ></icon>
     </div>
     <icon
-      *ngIf="newSpellDamage.length < 3"
+      *ngIf="damage.length < 3"
       (click)="addDamage()"
       [size]="'m'"
       [type]="'UI'"
@@ -295,7 +238,7 @@
     <div class="dice-row">
       <div class="flex-column">
         <label>Anzahl</label>
-        <select [(ngModel)]="newSpellHeal.diceNumber">
+        <select [(ngModel)]="heal.diceNumber">
           <option *ngFor="let number of numbers" [value]="number">
             {{ number }}
           </option>
@@ -304,7 +247,7 @@
 
       <div class="flex-column">
         <label>Würfel</label>
-        <select [(ngModel)]="newSpellHeal.diceType">
+        <select [(ngModel)]="heal.diceType">
           <option *ngFor="let die of dice" [value]="die">
             {{ die }}
           </option>
@@ -316,5 +259,5 @@
 </ng-template>
 
 <ng-template #descriptionTabContent>
-  <textarea style="height: 20rem" [(ngModel)]="newSpellDescription"></textarea>
+  <textarea style="height: 10rem" [(ngModel)]="description"></textarea>
 </ng-template>

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

@@ -1,3 +1,11 @@
+.modal-dimensions{
+    width: 40vw;
+    background-color: antiquewhite;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+    padding: 1rem;
+}
+
 .range-area-container{
     display: flex;
     flex-direction: row;

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

@@ -1,5 +1,5 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { NgxSmartModalService } from 'ngx-smart-modal';
+import { Component, Input } from '@angular/core';
+import { ModalService } from 'src/services/modal/modal.service';
 import { Damage } from 'src/interfaces/damage';
 import { Heal } from 'src/interfaces/heal';
 import { Spell } from 'src/interfaces/spell';
@@ -10,49 +10,37 @@ import { Spell } from 'src/interfaces/spell';
   styleUrls: ['./spell-modal.component.scss'],
 })
 export class SpellModalComponent {
-  public constructor(public ngxSmartModalService: NgxSmartModalService) {}
-  @Output() public spellCreated: EventEmitter<Spell> =
-    new EventEmitter<Spell>();
-  @Output() public spellUpdated: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output() public spellDeleted: EventEmitter<number> =
-    new EventEmitter<number>();
-
-  public active: number = 1;
-
-  public newSpellName: string = '';
-  public newSpellLevel: number = 0;
-  public newSpellCost: string = 'action';
-  public newSpellCanRitual: boolean = false;
-  public newSpellNeedsConcentration: boolean = false;
-  public newSpellNeedsVerbal: boolean = false;
-  public newSpellNeedsSomatic: boolean = false;
-  public newSpellNeedsMaterial: boolean = false;
-  public newSpellSchool: string = '';
-  public newSpellDescription: string = '';
-  public newSpellDoesDamage: boolean = true;
-  public newSpellDoesHeal: boolean = false;
-  public newSpellNeedsAttackRoll: boolean = false;
-  public newSpellNeedsSavingThrow: boolean = false;
-  public newSpellSavingThrowAttribute: string | undefined;
-  public newSpellNeedsAttackThrow: boolean = false;
-  public newSpellHeal: Heal = {
+  public constructor(private modalAccessor: ModalService) {}
+  @Input() public spell: any;
+  @Input() public isUpdate: boolean = false;
+
+  public name: string = '';
+  public level: number = 0;
+  public cost: string = 'action';
+  public canRitual: boolean = false;
+  public needsConcentration: boolean = false;
+  public needsVerbal: boolean = false;
+  public needsSomatic: boolean = false;
+  public needsMaterial: boolean = false;
+  public school: string = '';
+  public description: string = '';
+  public doesDamage: boolean = false;
+  public doesHeal: boolean = false;
+  public needsAttackRoll: boolean = false;
+  public needsSavingThrow: boolean = false;
+  public savingThrowAttribute: string = '';
+  public heal: Heal = {
     diceNumber: '',
     diceType: '',
     additionalHeal: 0,
   };
-  public newSpellAttackBonus: string = '';
-  public newSpellDamage: Damage[] = [
-    { diceNumber: '', diceType: '', damageType: '' },
-  ];
-  public newSpellIsRanged: boolean = false;
-  public newSpellRange: number = 5;
-  public newSpellHasAreaOfEffect: boolean = false;
-  public newSpellRadius: number | undefined;
-  public newSpellAreaOfEffectType: string | undefined;
-
-  public isUpdate: boolean = false;
-  public indexForUpdate: number | undefined;
+  public attackBonus: string = '';
+  public damage: Damage[] = [{ diceNumber: '', diceType: '', damageType: '' }];
+  public isRanged: boolean = false;
+  public range: number = 5;
+  public hasAreaOfEffect: boolean = false;
+  public radius: number = 0;
+  public areaOfEffectType: string = '';
 
   // Options for the select boxes
   public areaTypes: any[] = [
@@ -121,162 +109,116 @@ export class SpellModalComponent {
     { display: 'Reaktion', value: 'reaction' },
   ];
 
-  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,
-      needsAttackRoll: this.newSpellNeedsAttackRoll,
-      needsSavingThrow: this.newSpellNeedsSavingThrow,
-      isRanged: this.newSpellIsRanged,
-      range: this.newSpellRange,
-      hasAreaOfEffect: this.newSpellHasAreaOfEffect,
-      doesDamage: this.newSpellDoesDamage,
-      doesHeal: this.newSpellDoesHeal,
-      description: this.newSpellDescription,
-      school: this.newSpellSchool,
-    };
-    if (this.newSpellDescription) {
-      newspell.description = this.newSpellDescription;
+  public ngOnInit(): void {
+    if (this.isUpdate) {
+      this.loadspell();
     }
-    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: '' });
-  }
+  // RESPONSES
 
-  public removeDamage(index: number): void {
-    this.newSpellDamage.splice(index, 1);
+  public cancel(): void {
+    this.modalAccessor.handleModalClosing('cancel', undefined);
+    this.resetSpell();
   }
 
-  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 = '';
-    this.newSpellDescription = '';
-    this.newSpellNeedsAttackRoll = false;
-    this.newSpellNeedsSavingThrow = false;
-    this.newSpellSavingThrowAttribute = undefined;
-    this.newSpellDoesDamage = false;
-    this.newSpellDoesHeal = false;
-    this.newSpellHeal = { diceNumber: '', diceType: '' };
-    this.newSpellAttackBonus = '';
-    this.newSpellDamage = [{ diceNumber: '', diceType: '', damageType: '' }];
-    this.newSpellIsRanged = false;
-    this.newSpellRange = 5;
-    this.newSpellHasAreaOfEffect = false;
-    this.newSpellRadius = undefined;
-    this.newSpellAreaOfEffectType = undefined;
-    this.isUpdate = false;
-    this.ngxSmartModalService.resetModalData('spellModal');
+  public add(): void {
+    this.modalAccessor.handleModalClosing('add', this.createSpell());
+    this.resetSpell();
   }
 
-  //  update
-
-  public checkIfUpdate(): void {
-    if (this.ngxSmartModalService.getModalData('spellModal')) {
-      this.isUpdate = true;
-      const data: any = this.ngxSmartModalService.getModalData('spellModal');
-      const spell = data.spell;
-      this.newSpellName = spell.name;
-      this.newSpellLevel = spell.level;
-      this.newSpellCost = spell.cost;
-      this.newSpellCanRitual = spell.canRitual;
-      this.newSpellNeedsConcentration = spell.needsConcentration;
-      this.newSpellNeedsVerbal = spell.needsVerbal;
-      this.newSpellNeedsSomatic = spell.needsSomatic;
-      this.newSpellNeedsMaterial = spell.needsMaterial;
-      this.newSpellSchool = spell.school;
-      this.newSpellDescription = spell.description;
-      this.newSpellDoesDamage = spell.doesDamage;
-      this.newSpellNeedsSavingThrow = spell.needsSavingThrow;
-      this.newSpellSavingThrowAttribute = spell.savingThrowAttribute;
-      this.newSpellDamage = spell.damage;
-      this.newSpellIsRanged = spell.isRanged;
-      this.newSpellRange = spell.range;
-      this.newSpellHasAreaOfEffect = spell.hasAreaOfEffect;
-      this.newSpellRadius = spell.radius;
-      this.newSpellAreaOfEffectType = spell.areaOfEffectType;
+  public update(): void {
+    this.modalAccessor.handleModalClosing('update', this.createSpell());
+    this.resetSpell();
+  }
 
-      this.indexForUpdate = data.index;
-    }
+  private loadspell(): void {
+    console.log(this.spell.school);
+    this.name = this.spell.name;
+    this.level = this.spell.level;
+    this.cost = this.spell.cost;
+    this.canRitual = this.spell.canRitual;
+    this.needsConcentration = this.spell.needsConcentration;
+    this.needsVerbal = this.spell.needsVerbal;
+    this.needsSomatic = this.spell.needsSomatic;
+    this.needsMaterial = this.spell.needsMaterial;
+    this.school = this.spell.school;
+    this.description = this.spell.description;
+    this.doesDamage = this.spell.doesDamage;
+    this.needsSavingThrow = this.spell.needsSavingThrow;
+    this.savingThrowAttribute = this.spell.savingThrowAttribute;
+    this.damage = this.spell.damage;
+    this.isRanged = this.spell.isRanged;
+    this.range = this.spell.range;
+    this.hasAreaOfEffect = this.spell.hasAreaOfEffect;
+    this.radius = this.spell.radius;
+    this.areaOfEffectType = this.spell.areaOfEffectType;
+    this.needsAttackRoll = this.spell.needsAttackRoll;
+    this.attackBonus = this.spell.attackBonus;
+    this.doesHeal = this.spell.doesHeal;
+    this.heal = this.spell.heal;
   }
 
-  // überarbeiten
-  public updateSpell(): void {
-    const newspell: Spell = {
-      name: this.newSpellName,
-      damage: this.newSpellDamage,
-      level: this.newSpellLevel,
-      cost: this.newSpellCost,
-      canRitual: this.newSpellCanRitual,
-      school: this.newSpellSchool,
-      description: this.newSpellDescription,
-      needsConcentration: this.newSpellNeedsConcentration,
-      needsVerbal: this.newSpellNeedsVerbal,
-      needsSomatic: this.newSpellNeedsSomatic,
-      needsMaterial: this.newSpellNeedsMaterial,
-      needsAttackRoll: this.newSpellNeedsAttackRoll,
-      needsSavingThrow: this.newSpellNeedsSavingThrow,
-      isRanged: this.newSpellIsRanged,
-      range: this.newSpellRange,
-      hasAreaOfEffect: this.newSpellHasAreaOfEffect,
-      doesDamage: this.newSpellDoesDamage,
-      doesHeal: this.newSpellDoesHeal,
+  private createSpell(): Spell {
+    const spell: Spell = {
+      name: this.name,
+      damage: this.damage,
+      heal: this.heal,
+      level: this.level,
+      cost: this.cost,
+      canRitual: this.canRitual,
+      school: this.school,
+      description: this.description,
+      needsConcentration: this.needsConcentration,
+      needsVerbal: this.needsVerbal,
+      needsSomatic: this.needsSomatic,
+      needsMaterial: this.needsMaterial,
+      needsAttackRoll: this.needsAttackRoll,
+      needsSavingThrow: this.needsSavingThrow,
+      savingThrowAttribute: this.savingThrowAttribute,
+      isRanged: this.isRanged,
+      range: this.range,
+      radius: this.radius,
+      hasAreaOfEffect: this.hasAreaOfEffect,
+      areaOfEffectType: this.areaOfEffectType,
+      doesDamage: this.doesDamage,
+      doesHeal: this.doesHeal,
     };
-    if (this.newSpellNeedsSavingThrow) {
-      newspell.savingThrowAttribute = this.newSpellSavingThrowAttribute;
-    }
-    if (this.newSpellHasAreaOfEffect) {
-      newspell.radius = this.newSpellRadius;
-      newspell.areaOfEffectType = this.newSpellAreaOfEffectType;
-    }
-    if (this.newSpellDoesHeal) {
-      newspell.healAmount = this.newSpellHeal;
-    }
-    this.spellUpdated.emit({ spell: newspell, index: this.indexForUpdate });
-    this.ngxSmartModalService.closeLatestModal();
-    this.removeData();
+    console.log('New Spell from modal: ', spell);
+    return spell;
+  }
+
+  private resetSpell(): void {
+    this.name = '';
+    this.level = 0;
+    this.cost = 'action';
+    this.canRitual = false;
+    this.needsConcentration = false;
+    this.needsVerbal = false;
+    this.needsSomatic = false;
+    this.needsMaterial = false;
+    this.school = '';
+    this.description = '';
+    this.doesDamage = true;
+    this.needsSavingThrow = false;
+    this.savingThrowAttribute = '';
+    this.damage = [{ diceNumber: '', diceType: '', damageType: '' }];
+    this.isRanged = false;
+    this.range = 5;
+    this.hasAreaOfEffect = false;
+    this.radius = 0;
+    this.areaOfEffectType = '';
+    this.needsAttackRoll = false;
+    this.attackBonus = '';
+    this.doesHeal = false;
+    this.heal = { diceNumber: '', diceType: '', additionalHeal: 0 };
   }
 
-  public deleteSpell(): void {
-    this.spellDeleted.emit(this.indexForUpdate);
-    console.log('deleteSpell()', this.indexForUpdate);
-    this.ngxSmartModalService.closeLatestModal();
-    this.removeData();
+  public addDamage(): void {
+    this.damage.push({ diceNumber: '', diceType: '', damageType: '' });
   }
 
-  public dismiss(): void {
-    this.ngxSmartModalService.closeLatestModal();
-    this.removeData();
+  public removeDamage(index: number): void {
+    this.damage.splice(index, 1);
   }
 }

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

@@ -1,198 +0,0 @@
-<ngx-smart-modal
-  #weaponModal
-  identifier="weaponModal"
-  id="weaponModal"
-  (onAnyCloseEventFinished)="removeData()"
-  (onOpenFinished)="checkIfUpdate()"
->
-  <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)]="newWeaponName"
-        />
-      </div>
-      <div class="form-element-row">
-        <div class="checkbox-element">
-          <input type="checkbox" [(ngModel)]="newWeaponProficient" />
-          <label for="weaponProficient">Geübt</label>
-        </div>
-        <div class="checkbox-element">
-          <input type="checkbox" [(ngModel)]="newWeaponIsFinesse" />
-          <label for="weaponFinesse">Finesse</label>
-        </div>
-        <div class="checkbox-element">
-          <input type="checkbox" [(ngModel)]="newWeaponIsVersatile" />
-          <label for="Vielseitig">Vielseitig</label>
-        </div>
-        <div class="checkbox-element">
-          <input type="checkbox" [(ngModel)]="newWeaponIsTwoHanded" />
-          <label for="weaponTwoHanded">Zweihändig</label>
-        </div>
-        <div class="checkbox-element">
-          <input type="checkbox" [(ngModel)]="newWeaponIsRanged" />
-          <label for="weaponRanged">Fernkampf</label>
-        </div>
-        <div class="checkbox-element">
-          <select [(ngModel)]="newWeaponWeight">
-            <option *ngFor="let weight of weights" [value]="weight">
-              {{ weight }}
-            </option>
-          </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>
-        </div>
-      </div>
-
-      <div class="input-element">
-        <label for="weaponAttackBonus">Angriffsbonus</label>
-        <select [(ngModel)]="newWeaponAttackBonus">
-          <option
-            *ngFor="let attackBonus of attackBonuses"
-            [value]="attackBonus"
-          >
-            {{ attackBonus }}
-          </option>
-        </select>
-      </div>
-
-      <div class="input-element" *ngIf="newWeaponIsMagical">
-        <label>Magischer Modifikator</label>
-        <select [(ngModel)]="newWeaponMagicBonus">
-          <option
-            *ngFor="let magicBonus of magicBonuses"
-            [value]="magicBonus.value"
-          >
-            {{ magicBonus.display }}
-          </option>
-        </select>
-      </div>
-
-      <div class="input-element" *ngIf="newWeaponIsRanged">
-        <label for="weaponRange">Reichweite</label>
-        <input
-          type="text"
-          class="add-input"
-          id="weaponRange"
-          [(ngModel)]="newWeaponRange"
-        />
-      </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">
-        <div
-          class="damage-box"
-          *ngFor="let damage of newWeaponDamage; let index = index"
-        >
-          <div class="dice-row">
-            <div class="flex-column">
-              <label>Anzahl</label>
-              <select [(ngModel)]="newWeaponDamage[index].diceNumber">
-                <option *ngFor="let number of numbers" [value]="number">
-                  {{ number }}
-                </option>
-              </select>
-            </div>
-
-            <div class="flex-column">
-              <label>Würfel</label>
-              <select [(ngModel)]="newWeaponDamage[index].diceType">
-                <option *ngFor="let die of dice" [value]="die">
-                  {{ die }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div *ngIf="newWeaponIsVersatile && index === 0">
-            Zweihändiger Schaden
-            <div class="flex-row gap-10">
-              <div class="flex-column">
-                <label>Würfel</label>
-                <select [(ngModel)]="newWeaponVersatileDamage">
-                  <option *ngFor="let die of dice" [value]="die">
-                    {{ die }}
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          <label for="damageType">Schadensart</label>
-          <select [(ngModel)]="newWeaponDamage[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="newWeaponDamage.length < 3"
-          (click)="addDamage()"
-          [size]="'m'"
-          [type]="'UI'"
-          [icon]="'add'"
-          [class]="'pointer'"
-        ></icon>
-      </div>
-
-      <!-- <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.ts

@@ -1,221 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { NgxSmartModalService } from 'ngx-smart-modal';
-import { Damage } from 'src/interfaces/damage';
-import { Weapon } from 'src/interfaces/weapon';
-
-@Component({
-  selector: 'weapon-modal',
-  templateUrl: './weapon-modal.component.html',
-  styleUrls: ['./weapon-modal.component.scss'],
-})
-export class WeaponModalComponent {
-  public constructor(public ngxSmartModalService: NgxSmartModalService) {}
-
-  @Output() public weaponCreated: EventEmitter<Weapon> =
-    new EventEmitter<Weapon>();
-
-  @Output() public weaponUpdated: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output() public weaponDelete: EventEmitter<number> =
-    new EventEmitter<number>();
-
-  public newWeaponName: string = '';
-  public newWeaponRange: string = '5 ft.';
-  public newWeaponThrowRange: string = '';
-  public newWeaponAttackBonus: string = '+0';
-  public newWeaponDamage: Damage[] = [
-    { diceNumber: '', diceType: '', damageType: '' },
-  ];
-  public newWeaponProficient: boolean = false;
-  public newWeaponIsVersatile: boolean = false;
-  public newWeaponIsTwoHanded: boolean = false;
-  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;
-
-  public indexForUpdate: number | undefined;
-  public isUpdate: boolean = false;
-
-  // Options for the select boxes
-  public weights: string[] = ['leicht', 'normal', 'schwer'];
-
-  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 attackBonuses: string[] = [
-    '-5',
-    '-4',
-    '-3',
-    '-2',
-    '-1',
-    '+0',
-    '+1',
-    '+2',
-    '+3',
-    '+4',
-    '+5',
-    '+6',
-    '+7',
-    '+8',
-    '+9',
-    '+10',
-    '+11',
-    '+12',
-    '+13',
-    '+14',
-    '+15',
-    '+16',
-    '+17',
-    '+18',
-    '+19',
-    '+20',
-  ];
-
-  public magicBonuses: any[] = [
-    { display: '+1', value: 1 },
-    { display: '+2', value: 2 },
-    { display: '+3', value: 3 },
-    { display: '+4', value: 4 },
-    { display: '+5', value: 5 },
-  ];
-  //
-
-  public createWeapon(): void {
-    const newWeapon: Weapon = {
-      name: this.newWeaponName,
-      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,
-    };
-    this.weaponCreated.emit(newWeapon);
-    this.ngxSmartModalService.closeLatestModal();
-  }
-
-  public addDamage(): void {
-    this.newWeaponDamage.push({ diceNumber: '', diceType: '', damageType: '' });
-  }
-
-  public removeDamage(index: number): void {
-    this.newWeaponDamage.splice(index, 1);
-  }
-
-  public removeData(): void {
-    this.newWeaponName = '';
-    this.newWeaponRange = '5 ft.';
-    this.newWeaponAttackBonus = '+0';
-    this.newWeaponDamage = [{ diceNumber: '', diceType: '', damageType: '' }];
-    this.newWeaponProficient = false;
-    this.newWeaponIsVersatile = false;
-    this.newWeaponIsTwoHanded = false;
-    this.newWeaponIsFinesse = false;
-    this.newWeaponIsRanged = false;
-    this.newWeaponVersatileDamage = '';
-    this.newWeaponWeight = 'normal';
-    this.newWeaponIsMagical = false;
-    this.newWeaponMagicBonus = 0;
-    this.isUpdate = false;
-    this.ngxSmartModalService.resetModalData('weaponModal');
-  }
-
-  // update
-
-  public checkIfUpdate(): void {
-    if (this.ngxSmartModalService.getModalData('weaponModal')) {
-      this.isUpdate = true;
-      const data: any = this.ngxSmartModalService.getModalData('weaponModal');
-      const weapon = data.weapon;
-      this.newWeaponName = weapon.name;
-      this.newWeaponRange = weapon.range;
-      this.newWeaponAttackBonus = weapon.attackBonus;
-      this.newWeaponDamage = weapon.damage;
-      this.newWeaponProficient = weapon.proficient;
-      this.newWeaponIsVersatile = weapon.isVersatile;
-      this.newWeaponIsTwoHanded = weapon.isTwoHanded;
-      this.newWeaponIsFinesse = weapon.isFinesse;
-      this.newWeaponIsRanged = weapon.isRanged;
-      this.newWeaponVersatileDamage = weapon.versatileDamage;
-      this.newWeaponWeight = weapon.weight;
-      this.newWeaponIsMagical = weapon.isMagical;
-      this.newWeaponMagicBonus = weapon.magicBonus;
-
-      this.indexForUpdate = data.index;
-    }
-  }
-
-  public updateWeapon(): void {
-    const newWeapon: Weapon = {
-      name: this.newWeaponName,
-      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,
-    };
-    this.weaponUpdated.emit({ weapon: newWeapon, index: this.indexForUpdate });
-    this.ngxSmartModalService.closeLatestModal();
-    this.removeData();
-  }
-
-  public deleteWeapon(): void {
-    this.weaponDelete.emit(this.indexForUpdate);
-    this.ngxSmartModalService.closeLatestModal();
-    this.removeData();
-  }
-
-  public dismiss(): void {
-    this.ngxSmartModalService.closeLatestModal();
-    this.removeData();
-  }
-}

src/interfaces/spell.ts

@@ -20,9 +20,9 @@ export interface Spell {
 
   doesDamage: boolean;
   attackBonus?: string;
-  damage?: Damage[];
+  damage: Damage[];
   doesHeal: boolean;
-  healAmount?: Heal;
+  heal: Heal;
 }
 
 interface Damage {

src/services/data/data.service.ts

@@ -217,14 +217,15 @@ export class DataService {
       needsAttackRoll: false,
       needsSavingThrow: true,
       savingThrowAttribute: 'dexterity',
-      school: 'Evocation',
+      school: 'evocation',
       doesDamage: true,
       damage: [
         { diceNumber: '8', diceType: 'd6', damageType: 'fire' },
         { diceNumber: '8', diceType: 'd6', damageType: 'fire' },
       ],
-      isRanged: true,
       doesHeal: false,
+      heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+      isRanged: true,
       description:
         'Ein heller Strahl schießt von deinem Zeigefinger zu einem von dir gewählten Punkt in Reichweite und blüht dann mit einem tiefen Brüllen zu einer Flammenexplosion auf. Jede Kreatur in einem Umkreis von 6 Metern um diesen Punkt muss einen Rettungswurf auf Geschicklichkeit machen. Bei einem misslungenen Rettungswurf erleidet das Ziel 8W6 Feuerschaden, bei einem erfolgreichen Wurf die Hälfte des Schadens. Das Feuer breitet sich um Ecken aus. Es entzündet brennbare Gegenstände in der Umgebung, die nicht getragen werden. Wenn du diesen Zauber mit einem Zauberplatz des 4. Grades oder höher wirkst, erhöht sich der Schaden um 1W6 für jeden Grad über dem 3.',
       range: 150,
@@ -243,15 +244,18 @@ export class DataService {
       needsConcentration: false,
       needsAttackRoll: true,
       needsSavingThrow: false,
-      school: 'Evocation',
+      school: 'evocation',
       doesDamage: true,
       doesHeal: false,
+      heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
       description:
         'Du schleuderst einen Splitter aus Feuer auf eine Kreatur in Reichweite. Lege einen Fernkampf-Zauberangriff gegen das Ziel ab. Bei einem Treffer erleidet das Ziel 1W10 Feuerschaden. Ein brennbarer Gegenstand, der von diesem Zauber getroffen wird, geht in Flammen auf, wenn er nicht getragen oder in der Hand gehalten wird. Der Schaden dieses Zaubers steigt um 1W10, wenn du die 5. Stufe (2W10), die 11. Stufe (3W10) und die 17. Stufe (4W10) erreichst.  ',
       damage: [{ diceNumber: '1', diceType: 'd10', damageType: 'fire' }],
       isRanged: true,
       range: 120,
       hasAreaOfEffect: false,
+      areaOfEffectType: '',
+      radius: 0,
     },
     {
       name: 'Vampiric Touch',
@@ -266,13 +270,16 @@ export class DataService {
       needsSavingThrow: false,
       doesDamage: true,
       doesHeal: false,
+      heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
       description:
         'Die Berührung deiner schattenumrankten Hand kann anderen die Lebenskraft entziehen, um deine Wunden zu heilen. Führe einen Nahkampf-Zauberangriff gegen eine Kreatur in deiner Reichweite aus. Bei einem Treffer erleidet das Ziel 3W6 nekrotischen Schaden, und du erhältst Trefferpunkte in Höhe der Hälfte des zugefügten nekrotischen Schadens zurück. Bis der Zauber endet, kannst du den Angriff in jeder deiner Runden als Aktion wiederholen. Wenn du diesen Zauber mit einem Zauberplatz des 4. Grades oder höher wirkst, erhöht sich der Schaden um 1W6 für jeden Grad über dem 3.',
-      school: 'Necromancy',
+      school: 'necromancy',
       damage: [{ diceNumber: '3', diceType: 'd6', damageType: 'necrotic' }],
       isRanged: false,
       range: 5,
       hasAreaOfEffect: false,
+      areaOfEffectType: '',
+      radius: 0,
     },
     {
       name: 'Heilende Berührung',
@@ -286,14 +293,17 @@ export class DataService {
       needsAttackRoll: false,
       needsSavingThrow: false,
       doesDamage: false,
+      damage: [{ diceNumber: '', diceType: '', damageType: '' }],
       doesHeal: true,
-      healAmount: { diceNumber: '1', diceType: 'd8', additionalHeal: 5 },
+      heal: { diceNumber: '1', diceType: 'd8', additionalHeal: 5 },
       description:
         'Deine Berührung kann Wunden heilen. Berühre eine Kreatur und spende ihr 1W8 + deinem Fertigkeitsbonus Trefferpunkte. Dieser Zauber hat keine Wirkung auf Untote oder Konstrukte. Wenn du diesen Zauber mit einem Zauberplatz des 2. Grades oder höher wirkst, erhöht sich die Heilung um 1W8 für jeden Grad über dem 1.',
-      school: 'Evocation',
+      school: 'evocation',
       isRanged: false,
       range: 5,
       hasAreaOfEffect: false,
+      areaOfEffectType: '',
+      radius: 0,
     },
   ];
 

src/services/modal/modal.service.ts

@@ -1,7 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { SimpleItem } from 'src/interfaces/simple-item';
-import { Food } from 'src/interfaces/food';
 
 @Injectable({
   providedIn: 'root',
@@ -17,13 +15,11 @@ export class ModalService {
   result$ = this._resultSubject.asObservable();
 
   public openModal(component: any, data: any) {
-    console.log('openModal in modal accessor');
     this._modalSubject.next({ component, data });
   }
 
-  // Is called from the dynamic component to close the offcanvas
-  public handleModalClosing(result: any, data?: SimpleItem | Food) {
-    console.log('closePanel', result);
+  // Is called from the dynamic content component to close the modal
+  public handleModalClosing(result: any, data?: any) {
     // Is listened to in the host component where the panel was opened, to initiate further steps
     this._resultSubject.next({ state: result, data: data });
     this._closeModalSubject.next('close');