formatted whole project with prettier

.nx/cache/d/daemon.log

@@ -468774,3 +468774,327 @@ To fix this, set a unique name for each project in a project.json inside the pro
     at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
 [NX Daemon Server] - 2024-02-27T14:14:58.054Z - Time taken for 'hash changed files from watcher' 27.379500031471252ms
 [NX Daemon Server] - 2024-02-27T14:14:58.056Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-27T14:17:24.917Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-27T14:17:24.919Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-27T14:17:24.921Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-27T14:17:24.921Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-27T14:17:24.922Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-27T14:17:24.924Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-27T14:17:25.000Z - 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] - 2024-02-27T14:17:25.000Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-27T14:17:25.000Z - Time taken for 'hash changed files from watcher' 25.85580003261566ms
+[NX Daemon Server] - 2024-02-27T14:17:25.001Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:24:53.395Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:24:53.420Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:24:53.421Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:24:53.421Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-29T11:24:53.421Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:24:53.423Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:24:54.280Z - 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] - 2024-02-29T11:24:54.280Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:24:54.281Z - Time taken for 'hash changed files from watcher' 33.23860001564026ms
+[NX Daemon Server] - 2024-02-29T11:24:54.281Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:05.266Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:05.276Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:05.276Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:05.276Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-29T11:25:05.277Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:05.278Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:05.345Z - 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] - 2024-02-29T11:25:05.345Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:05.345Z - Time taken for 'hash changed files from watcher' 21.691699981689453ms
+[NX Daemon Server] - 2024-02-29T11:25:05.346Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:06.686Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:06.689Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:06.692Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:06.694Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-29T11:25:06.695Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:06.696Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:06.776Z - 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] - 2024-02-29T11:25:06.776Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:06.778Z - Time taken for 'hash changed files from watcher' 26.153599977493286ms
+[NX Daemon Server] - 2024-02-29T11:25:06.780Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:07.016Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:07.018Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:07.023Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:07.023Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-29T11:25:07.024Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:07.025Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:07.113Z - 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] - 2024-02-29T11:25:07.113Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:07.113Z - Time taken for 'hash changed files from watcher' 45.25800001621246ms
+[NX Daemon Server] - 2024-02-29T11:25:07.114Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:08.377Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:08.381Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:08.391Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:08.392Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-29T11:25:08.393Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:08.395Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:08.473Z - 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] - 2024-02-29T11:25:08.473Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:08.475Z - Time taken for 'hash changed files from watcher' 25.8996000289917ms
+[NX Daemon Server] - 2024-02-29T11:25:08.475Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:11.422Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:11.424Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:11.431Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:11.432Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-29T11:25:11.432Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:11.434Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:11.512Z - 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] - 2024-02-29T11:25:11.512Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:11.512Z - Time taken for 'hash changed files from watcher' 29.979300022125244ms
+[NX Daemon Server] - 2024-02-29T11:25:11.512Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:12.736Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:12.738Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:12.742Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:12.744Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-29T11:25:12.744Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:12.746Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:12.822Z - 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] - 2024-02-29T11:25:12.822Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:12.824Z - Time taken for 'hash changed files from watcher' 25.829699993133545ms
+[NX Daemon Server] - 2024-02-29T11:25:12.825Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-29T11:25:19.424Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-29T11:25:19.426Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-29T11:25:19.437Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:19.438Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-29T11:25:19.438Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-29T11:25:19.440Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-29T11:25:19.552Z - 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] - 2024-02-29T11:25:19.553Z - [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:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\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:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-29T11:25:19.553Z - Time taken for 'hash changed files from watcher' 61.95679998397827ms
+[NX Daemon Server] - 2024-02-29T11:25:19.553Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":13384}
+{"processId":4548}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "dndtools",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dndtools",
-      "version": "0.5.0",
+      "version": "0.6.0",
       "dependencies": {
         "@angular/animations": "^17.0.3",
         "@angular/cdk": "^17.0.0",
@@ -25,6 +25,7 @@
         "marked": "^9.1.6",
         "ngx-editor": "^16.0.1",
         "ngx-markdown": "^17.1.1",
+        "prettier": "^3.2.5",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
@@ -20403,6 +20404,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "marked": "^9.1.6",
     "ngx-editor": "^16.0.1",
     "ngx-markdown": "^17.1.1",
+    "prettier": "^3.2.5",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

src/app/app.component.spec.ts

@@ -3,10 +3,12 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [RouterTestingModule],
-    declarations: [AppComponent]
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+    }),
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
@@ -24,6 +26,8 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('DnDTools app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain(
+      'DnDTools app is running!',
+    );
   });
 });

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'DnDTools';

src/app/character/character-creator/character-creator.component.html

@@ -9,7 +9,7 @@
       <mat-label>Volk</mat-label>
       <mat-select [(ngModel)]="characterSpecies" name="species">
         @for (species of species; track species) {
-        <mat-option [value]="species.value">{{ species.view }}</mat-option>
+          <mat-option [value]="species.value">{{ species.view }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -17,9 +17,9 @@
       <mat-label>Klasse</mat-label>
       <mat-select [(ngModel)]="characterClass" name="class">
         @for (characterClass of classes; track characterClass) {
-        <mat-option [value]="characterClass.value">{{
-          characterClass.view
-        }}</mat-option>
+          <mat-option [value]="characterClass.value">{{
+            characterClass.view
+          }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -27,9 +27,9 @@
       <mat-label>Hintergrund</mat-label>
       <mat-select [(ngModel)]="characterBackground" name="background">
         @for (background of backgrounds; track background) {
-        <mat-option [value]="background.value">{{
-          background.view
-        }}</mat-option>
+          <mat-option [value]="background.value">{{
+            background.view
+          }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -37,7 +37,7 @@
       <mat-label>Geschlecht</mat-label>
       <mat-select [(ngModel)]="characterGender" name="gender">
         @for (gender of genders; track gender) {
-        <mat-option [value]="gender.value">{{ gender.view }}</mat-option>
+          <mat-option [value]="gender.value">{{ gender.view }}</mat-option>
         }
       </mat-select>
     </mat-form-field>

src/app/character/character-creator/character-creator.component.scss

@@ -1,56 +1,56 @@
 .creation-container {
-    background-color: var(--background-color);
-    background-size: cover;
-    height: 100%;
-    width: 100%;
-    padding-top: 3rem;
-    // display: flex;
+  background-color: var(--background-color);
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  padding-top: 3rem;
+  // display: flex;
 }
 
 .form-box {
-    padding: 1rem;
-    margin: auto;
-    width: 800px;
-    border: 1px solid var(--border-color);
-    background-color: var(--secondary-color-light);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  padding: 1rem;
+  margin: auto;
+  width: 800px;
+  border: 1px solid var(--border-color);
+  background-color: var(--secondary-color-light);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 @mixin button {
-    color: black;
-    border: none;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    height: 4rem;
-    width: 12rem;
-    font-size: 1.125rem;
-    font-weight: 600;
-    transition: all 0.2s ease-in-out;
+  color: black;
+  border: none;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  height: 4rem;
+  width: 12rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  transition: all 0.2s ease-in-out;
 }
 
 .button-row {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 1rem;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1rem;
 }
 .cancel-button {
-    background: var(--delete);
-    @include button;
-    &:hover {
-        background: var(--delete-hover);
-        scale: 1.03;
-    }
+  background: var(--delete);
+  @include button;
+  &:hover {
+    background: var(--delete-hover);
+    scale: 1.03;
+  }
 }
 
 .create-button {
-    background: var(--accept);
-    @include button;
-    &:hover {
-        background: var(--accept-hover);
-        scale: 1.03;
-    }
+  background: var(--accept);
+  @include button;
+  &:hover {
+    background: var(--accept-hover);
+    scale: 1.03;
+  }
 }

src/app/character/character-creator/character-creator.component.spec.ts

@@ -8,7 +8,7 @@ describe('CharacterCreatorComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CharacterCreatorComponent]
+      declarations: [CharacterCreatorComponent],
     });
     fixture = TestBed.createComponent(CharacterCreatorComponent);
     component = fixture.componentInstance;

src/app/character/character-creator/character-creator.component.ts

@@ -114,7 +114,7 @@ export class CharacterCreatorComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    private Router: Router
+    private Router: Router,
   ) {}
 
   public async createCharacter(): Promise<void> {
@@ -154,7 +154,7 @@ export class CharacterCreatorComponent {
           skin: '',
           hair: '',
         },
-        'characterData'
+        'characterData',
       ),
       // Character Image
       this.dataAccessor.addData(
@@ -162,7 +162,7 @@ export class CharacterCreatorComponent {
         {
           value: undefined,
         },
-        'image'
+        'image',
       ),
       // Character Attributes
       this.dataAccessor.addData(
@@ -175,7 +175,7 @@ export class CharacterCreatorComponent {
           wisdom: { name: 'wisdom', value: 10, proficiency: false },
           charisma: { name: 'charisma', value: 10, proficiency: false },
         },
-        'attributes'
+        'attributes',
       ),
       // Character Skills
       this.dataAccessor.addData(
@@ -200,7 +200,7 @@ export class CharacterCreatorComponent {
           stealth: { name: 'stealth', proficiency: false },
           survival: { name: 'survival', proficiency: false },
         },
-        'skills'
+        'skills',
       ),
       // Character Combat Stats
       this.dataAccessor.addData(
@@ -215,7 +215,7 @@ export class CharacterCreatorComponent {
           exhaustion: 0,
           inspiration: false,
         },
-        'combatStats'
+        'combatStats',
       ),
       //  Character Hit Points
       this.dataAccessor.addData(
@@ -232,7 +232,7 @@ export class CharacterCreatorComponent {
             diceUsed: 0,
           },
         },
-        'hitPoints'
+        'hitPoints',
       ),
 
       // Character Abilities
@@ -241,7 +241,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'abilities'
+        'abilities',
       ),
 
       // Character Traits
@@ -250,7 +250,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'traits'
+        'traits',
       ),
 
       // Character Proficiencies
@@ -267,7 +267,7 @@ export class CharacterCreatorComponent {
           tools: [],
           languages: ['Gemeinsprache'],
         },
-        'proficiencies'
+        'proficiencies',
       ),
 
       // Character Spellslots
@@ -279,7 +279,7 @@ export class CharacterCreatorComponent {
           spellcastingAttribute:
             this.spellcastingAttributes[this.characterClass],
         },
-        'spellslots'
+        'spellslots',
       ),
       // Ki Points
       this.dataAccessor.addData(
@@ -289,7 +289,7 @@ export class CharacterCreatorComponent {
           usedPoints: 0,
           showKiPoints: false,
         },
-        'kiPoints'
+        'kiPoints',
       ),
       // Weapons
       this.dataAccessor.addData(
@@ -297,7 +297,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'favoriteWeapons'
+        'favoriteWeapons',
       ),
       // WEAPONS AND ARMOR
       this.dataAccessor.addData(
@@ -305,7 +305,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'weaponsAndArmor'
+        'weaponsAndArmor',
       ),
       // MISCELLANEOUS
       this.dataAccessor.addData(
@@ -313,7 +313,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'miscellaneous'
+        'miscellaneous',
       ),
       // CONSUMABLES
       this.dataAccessor.addData(
@@ -321,7 +321,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'consumables'
+        'consumables',
       ),
       // MONEY
       this.dataAccessor.addData(
@@ -332,7 +332,7 @@ export class CharacterCreatorComponent {
           silver: 0,
           copper: 0,
         },
-        'money'
+        'money',
       ),
       // FOOD
       this.dataAccessor.addData(
@@ -340,7 +340,7 @@ export class CharacterCreatorComponent {
         {
           data: [],
         },
-        'food'
+        'food',
       ),
       // Favorite Spells
       this.dataAccessor.addData(
@@ -348,7 +348,7 @@ export class CharacterCreatorComponent {
         {
           spells: [],
         },
-        'favoriteSpells'
+        'favoriteSpells',
       ),
       // Spells
 
@@ -358,77 +358,77 @@ export class CharacterCreatorComponent {
           spells: [],
           id: 10000,
         },
-        'customSpells'
+        'customSpells',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel0'
+        'spellLevel0',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel1'
+        'spellLevel1',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel2'
+        'spellLevel2',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel3'
+        'spellLevel3',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel4'
+        'spellLevel4',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel5'
+        'spellLevel5',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel6'
+        'spellLevel6',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel7'
+        'spellLevel7',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel8'
+        'spellLevel8',
       ),
       this.dataAccessor.addData(
         this.characterName,
         {
           spells: [],
         },
-        'spellLevel9'
+        'spellLevel9',
       ),
 
       // Notes

src/app/character/character-picker/character-card/character-card.component.html

@@ -10,24 +10,25 @@
     />
   </div>
   <!-- The characterData is not loaded initially, so this is a workaround. Maybe add a resolver first -->
-  @if(image){
-  <img [src]="image" alt="portrait" />
+  @if (image) {
+    <img [src]="image" alt="portrait" />
   } @else if (characterData !== undefined) {
-  <img
-    [src]="'assets/images/' + characterData.gender.toLowerCase() + '.jpg'"
-    alt="character"
-  />
-  } @if(characterData !== undefined){
-  <div class="content">
-    <!-- <div>{{ image }}</div> -->
-    <div class="name">{{ character }}</div>
-    <div class="level">Stufe {{ characterData.level }}</div>
-    <div class="species">{{ races[characterData.race].display }}</div>
-    <div class="class">
-      {{ classes[characterData.class].display }}
-    </div>
+    <img
+      [src]="'assets/images/' + characterData.gender.toLowerCase() + '.jpg'"
+      alt="character"
+    />
+  }
+  @if (characterData !== undefined) {
+    <div class="content">
+      <!-- <div>{{ image }}</div> -->
+      <div class="name">{{ character }}</div>
+      <div class="level">Stufe {{ characterData.level }}</div>
+      <div class="species">{{ races[characterData.race].display }}</div>
+      <div class="class">
+        {{ classes[characterData.class].display }}
+      </div>
 
-    <!-- <div class="subclass">{{ characterData.class }}</div> -->
-  </div>
+      <!-- <div class="subclass">{{ characterData.class }}</div> -->
+    </div>
   }
 </div>

src/app/character/character-picker/character-card/character-card.component.scss

@@ -1,76 +1,76 @@
 .character-card {
-    width: 35rem;
-    height: 20rem;
-    border-radius: 10px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-    display: flex;
-    overflow: hidden;
-    position: relative;
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    position: relative;
-    &:hover {
-        filter: brightness(0.9);
-        .delete-area {
-            width: 5rem;
-        }
-        .content {
-            margin: 1rem 0.25rem 0 0.25rem;
-            transition: all 0.2s ease-in-out;
-        }
+  width: 35rem;
+  height: 20rem;
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  position: relative;
+  &:hover {
+    filter: brightness(0.9);
+    .delete-area {
+      width: 5rem;
     }
-    transition: all 0.2s ease-in-out;
+    .content {
+      margin: 1rem 0.25rem 0 0.25rem;
+      transition: all 0.2s ease-in-out;
+    }
+  }
+  transition: all 0.2s ease-in-out;
 }
 
 .delete-area {
-    height: 20rem;
-    width: 0rem;
-    background-color: var(--delete);
-    transition: all 0.2s ease-in-out;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &:hover {
-        background-color: var(--delete-hover);
-    }
+  height: 20rem;
+  width: 0rem;
+  background-color: var(--delete);
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    background-color: var(--delete-hover);
+  }
 }
 
 img {
-    width: 20rem;
-    height: 20rem;
+  width: 20rem;
+  height: 20rem;
 }
 
 .content {
-    width: 15rem;
-    margin: 1rem;
+  width: 15rem;
+  margin: 1rem;
 }
 
 .name {
-    font-size: 1.75rem;
-    font-weight: 600;
-    text-align: center;
+  font-size: 1.75rem;
+  font-weight: 600;
+  text-align: center;
 }
 
 .level {
-    position: absolute;
-    right: 0.5rem;
-    bottom: 8rem;
+  position: absolute;
+  right: 0.5rem;
+  bottom: 8rem;
 }
 
 .species {
-    position: absolute;
-    right: 0.5rem;
-    bottom: 6rem;
+  position: absolute;
+  right: 0.5rem;
+  bottom: 6rem;
 }
 
 .class {
-    position: absolute;
-    right: 0.5rem;
-    bottom: 4rem;
+  position: absolute;
+  right: 0.5rem;
+  bottom: 4rem;
 }
 
 .subclass {
-    position: absolute;
-    right: 0.5rem;
-    bottom: 2rem;
+  position: absolute;
+  right: 0.5rem;
+  bottom: 2rem;
 }

src/app/character/character-picker/character-card/character-card.component.spec.ts

@@ -8,7 +8,7 @@ describe('CharacterCardComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CharacterCardComponent]
+      declarations: [CharacterCardComponent],
     });
     fixture = TestBed.createComponent(CharacterCardComponent);
     component = fixture.componentInstance;

src/app/character/character-picker/character-card/character-card.component.ts

@@ -18,7 +18,7 @@ export class CharacterCardComponent {
 
   constructor(
     private dataAccessor: DataService,
-    private translator: TranslatorService
+    private translator: TranslatorService,
   ) {
     this.races = this.translator.races;
     this.classes = this.translator.classes;

src/app/character/character-picker/character-picker.component.html

@@ -2,23 +2,28 @@
   <h1>DND-TOOLS</h1>
 </div>
 <div class="character-card-container">
-  @for (card of [0,1,2,3,4,5]; track card){ @if(characters[card]){
-  <character-card
-    [character]="characters[card].name"
-    (select)="selectCharacter(characters[card])"
-    (delete)="open(content, card)"
-  ></character-card>
-  <!-- TODO: Check if there is a more elegant way -->
-  }@else if (card < 4 || (card === 4 && characters.length === 4) || card === 5
-  && (characters.length === 5 || characters.length === 4)) {
-  <div class="card-placeholder" (click)="addCharacter()">
-    <img
-      src="assets/icons/UIIcons/add.svg"
-      style="width: 6%"
-      alt="Add Button"
-    />
-  </div>
-  } }
+  @for (card of [0, 1, 2, 3, 4, 5]; track card) {
+    @if (characters[card]) {
+      <character-card
+        [character]="characters[card].name"
+        (select)="selectCharacter(characters[card])"
+        (delete)="open(content, card)"
+      ></character-card>
+      <!-- TODO: Check if there is a more elegant way -->
+    } @else if (
+      card < 4 ||
+      (card === 4 && characters.length === 4) ||
+      (card === 5 && (characters.length === 5 || characters.length === 4))
+    ) {
+      <div class="card-placeholder" (click)="addCharacter()">
+        <img
+          src="assets/icons/UIIcons/add.svg"
+          style="width: 6%"
+          alt="Add Button"
+        />
+      </div>
+    }
+  }
 </div>
 
 <ng-template #content let-modal>

src/app/character/character-picker/character-picker.component.scss

@@ -1,94 +1,94 @@
 // HEADER
 .header {
-    background-color: var(--header);
-    height: 8rem;
-    box-shadow: var(--shadow);
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    @media (height < 900px) {
-        height: 6rem;
-    }
+  background-color: var(--header);
+  height: 8rem;
+  box-shadow: var(--shadow);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @media (height < 900px) {
+    height: 6rem;
+  }
 }
 
 ::ng-deep body {
-    background-color: var(--background-color);
+  background-color: var(--background-color);
 }
 
 .okay-button {
-    background: var(--accept);
-    width: 8rem;
-    height: 2.5rem;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    &:hover {
-        background: var(--accept-hover);
-        scale: 1.03;
-    }
+  background: var(--accept);
+  width: 8rem;
+  height: 2.5rem;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  &:hover {
+    background: var(--accept-hover);
+    scale: 1.03;
+  }
 }
 
 // CARDS
 
 .character-card-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-    padding-top: 2.5rem;
-    row-gap: 2.5rem;
-    overflow: auto;
-    height: calc(100% - 8rem);
-    @media (height < 900px) {
-        height: calc(100% - 6rem);
-    }
-    background-color: var(--background-color);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  padding-top: 2.5rem;
+  row-gap: 2.5rem;
+  overflow: auto;
+  height: calc(100% - 8rem);
+  @media (height < 900px) {
+    height: calc(100% - 6rem);
+  }
+  background-color: var(--background-color);
 }
 
 character-card {
-    cursor: pointer;
-    max-height: 20rem;
+  cursor: pointer;
+  max-height: 20rem;
 }
 
 .card-placeholder {
-    height: 20rem;
-    width: 35rem;
-    background-color: lightgrey;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.5rem;
-    font-weight: 600;
-    transition: all 0.2s ease-in-out;
-    &:hover {
-        background-color: rgb(191, 191, 191);
-    }
+  height: 20rem;
+  width: 35rem;
+  background-color: lightgrey;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: rgb(191, 191, 191);
+  }
 }
 
 @mixin button {
-    color: black;
-    border: none;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    height: 4rem;
-    width: 10rem;
-    font-size: 1.125rem;
-    font-weight: 600;
-    transition: all 0.2s ease-in-out;
+  color: black;
+  border: none;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  height: 4rem;
+  width: 10rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  transition: all 0.2s ease-in-out;
 }
 
 .button-row {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 1rem;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1rem;
 }
 .delete-button {
-    background: var(--delete);
-    @include button;
-    &:hover {
-        background: var(--delete-hover);
-        scale: 1.03;
-    }
+  background: var(--delete);
+  @include button;
+  &:hover {
+    background: var(--delete-hover);
+    scale: 1.03;
+  }
 }

src/app/character/character-picker/character-picker.component.spec.ts

@@ -8,7 +8,7 @@ describe('CharacterPickerComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CharacterPickerComponent]
+      declarations: [CharacterPickerComponent],
     });
     fixture = TestBed.createComponent(CharacterPickerComponent);
     component = fixture.componentInstance;

src/app/character/character-picker/character-picker.component.ts

@@ -27,7 +27,10 @@ export class CharacterPickerComponent {
   @ViewChild('warning') warning!: TemplateRef<any>;
 
   // @ViewChildren(warning) warning!: TemplateRef<any>;
-  public constructor(public dataService: DataService, private Router: Router) {
+  public constructor(
+    public dataService: DataService,
+    private Router: Router,
+  ) {
     this.dataService.dataLoaded = false;
     this.dataService.getCollection('characters').then((characters: any) => {
       this.characters = characters;
@@ -52,7 +55,7 @@ export class CharacterPickerComponent {
           if (reason == 'delete') {
             this.deleteCharacter(index);
           }
-        }
+        },
       );
   }
 

src/app/character/character-picker/deletion-confirm/deletion-confirm.component.scss

@@ -1,7 +1,7 @@
 .modal-dimensions {
-    width: 15rem;
-    background-color: var(--modal-background);
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    padding: 1rem;
+  width: 15rem;
+  background-color: var(--modal-background);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  padding: 1rem;
 }

src/app/character/character-picker/deletion-confirm/deletion-confirm.component.spec.ts

@@ -8,10 +8,9 @@ describe('DeletionConfirmComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DeletionConfirmComponent]
-    })
-    .compileComponents();
-    
+      declarations: [DeletionConfirmComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(DeletionConfirmComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/icon/icon.component.scss

@@ -1,45 +1,45 @@
 // size
-.xxs{
-    height: 0.5rem;
-    width: 0.5rem;
+.xxs {
+  height: 0.5rem;
+  width: 0.5rem;
 }
-.xs{
-    height: 1rem;
-    width: 1rem;
+.xs {
+  height: 1rem;
+  width: 1rem;
 }
 
-.s{
-    height: 1.5rem;
-    width: 1.5rem;
+.s {
+  height: 1.5rem;
+  width: 1.5rem;
 }
 
-.m{
-    height: 2rem;
-    width: 2rem;
+.m {
+  height: 2rem;
+  width: 2rem;
 }
 
-.l{
-    height: 2.5rem;
-    width: 2.5rem;
+.l {
+  height: 2.5rem;
+  width: 2.5rem;
 }
 
-.xl{
-    height: 3rem;
-    width: 3rem;
+.xl {
+  height: 3rem;
+  width: 3rem;
 }
 
-.xxl{
-    height: 3.5rem;
-    width: 3.5rem;
+.xxl {
+  height: 3.5rem;
+  width: 3.5rem;
 }
 
-.xxxl{
-    height: 4rem;
-    width: 4rem;
+.xxxl {
+  height: 4rem;
+  width: 4rem;
 }
 
 // cursors
 
-.pointer{
-    cursor: pointer;
-}
+.pointer {
+  cursor: pointer;
+}

src/app/journal/icon/icon.component.spec.ts

@@ -8,7 +8,7 @@ describe('IconComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [IconComponent]
+      declarations: [IconComponent],
     });
     fixture = TestBed.createComponent(IconComponent);
     component = fixture.componentInstance;

src/app/journal/journal-character/background/background.component.spec.ts

@@ -8,10 +8,9 @@ describe('BackgroundComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [BackgroundComponent]
-    })
-    .compileComponents();
-    
+      declarations: [BackgroundComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(BackgroundComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-character/background/background.component.ts

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-background',
   templateUrl: './background.component.html',
-  styleUrl: './background.component.scss'
+  styleUrl: './background.component.scss',
 })
-export class BackgroundComponent {
-
-}
+export class BackgroundComponent {}

src/app/journal/journal-character/class/class.component.html

@@ -4,18 +4,18 @@
   <div [innerHTML]="class.description"></div>
 
   <div class="features">
-    @for(feature of class.features; track feature){
-    <div class="feature">
-      <hr />
-      <div class="feature-name">{{ feature.name }}</div>
-      <div class="feature-level">{{ feature.level }}</div>
-      <icon-button
-        [icon]="'add'"
-        class="feature-button"
-        (click)="addFeature(feature)"
-      ></icon-button>
-      <div [innerHTML]="feature.description"></div>
-    </div>
+    @for (feature of class.features; track feature) {
+      <div class="feature">
+        <hr />
+        <div class="feature-name">{{ feature.name }}</div>
+        <div class="feature-level">{{ feature.level }}</div>
+        <icon-button
+          [icon]="'add'"
+          class="feature-button"
+          (click)="addFeature(feature)"
+        ></icon-button>
+        <div [innerHTML]="feature.description"></div>
+      </div>
     }
   </div>
 </div>

src/app/journal/journal-character/class/class.component.scss

@@ -1,61 +1,61 @@
 .class-container {
-    width: 800px;
-    height: calc(100vh - 10.5rem);
-    overflow: auto;
-    margin: auto;
-    border: 1px solid black;
-    padding: 2rem;
-    border-radius: 10px;
-    background-color: var(--items-hover);
-    box-shadow: var(--shadow-large);
-    position: absolute;
-    top: 8.5rem;
-    left: 50%;
-    transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  overflow: auto;
+  margin: auto;
+  border: 1px solid black;
+  padding: 2rem;
+  border-radius: 10px;
+  background-color: var(--items-hover);
+  box-shadow: var(--shadow-large);
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .title {
-    text-align: center;
-    font-size: 2em;
-    font-weight: bold;
-    margin: 0 0 2rem 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  margin: 0 0 2rem 0;
 }
 
 .feature {
-    margin-top: 1.5rem;
-    position: relative;
+  margin-top: 1.5rem;
+  position: relative;
 }
 
 .feature-name {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    margin-left: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
 }
 
 .feature-level {
-    position: absolute;
-    left: -1.5rem;
-    top: 1rem;
-    font-size: 1.5rem;
-    font-weight: 600;
+  position: absolute;
+  left: -1.5rem;
+  top: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 
 .feature-button {
-    position: absolute;
-    right: 0;
-    top: 1.5rem;
+  position: absolute;
+  right: 0;
+  top: 1.5rem;
 }
 
 .feature-description {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 :host ::ng-deep p {
-    margin: 0;
+  margin: 0;
 }
 
 :host ::ng-deep h3,
 :host ::ng-deep h4 {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }

src/app/journal/journal-character/class/class.component.spec.ts

@@ -8,10 +8,9 @@ describe('ClassComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ClassComponent]
-    })
-    .compileComponents();
-    
+      declarations: [ClassComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ClassComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-character/class/class.component.ts

@@ -18,7 +18,7 @@ export class ClassComponent {
   public constructor(
     private classAccessor: ClassService,
     private dataAccessor: DataService,
-    private modalAccessor: ModalService
+    private modalAccessor: ModalService,
   ) {}
 
   public ngOnInit(): void {
@@ -61,7 +61,7 @@ export class ClassComponent {
           this.dataAccessor.abilities = ability;
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -89,7 +89,7 @@ export class ClassComponent {
           this.dataAccessor.traits = traits;
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 }

src/app/journal/journal-character/general/general.component.scss

@@ -1,192 +1,192 @@
 .general-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    row-gap: 2rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 2rem;
 }
 
 .first-row {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .image-container {
-    width: 24rem;
-    height: 24rem;
-    position: relative;
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    background-color: white;
-    border-radius: 10px;
-    overflow: hidden;
-
-    &:hover {
-        .upload-icon {
-            opacity: 1;
-        }
-        .image-icon {
-            opacity: 0;
-        }
-        .portrait {
-            filter: brightness(0.8);
-        }
-    }
-
-    .portrait {
-        width: 24rem;
-        height: 24rem;
-        object-fit: cover;
-        transition: all 0.2s ease-in-out;
-    }
-
+  width: 24rem;
+  height: 24rem;
+  position: relative;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  background-color: white;
+  border-radius: 10px;
+  overflow: hidden;
+
+  &:hover {
     .upload-icon {
-        position: absolute;
-        opacity: 0;
-        left: 12rem;
-        top: 12rem;
-        width: 3rem;
-        height: 3rem;
-        transform: translate(-50%, -50%);
-        transition: all 0.2s ease-in-out;
-        background-color: #b7b7b763;
-        border-radius: 10px;
+      opacity: 1;
     }
-
     .image-icon {
-        position: absolute;
-        opacity: 1;
-        left: 12rem;
-        top: 12rem;
-        width: 3rem;
-        height: 3rem;
-        transform: translate(-50%, -50%);
-        transition: all 0.2s ease-in-out;
+      opacity: 0;
     }
-
-    .upload-input {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        opacity: 0;
-        top: 0;
-        left: 0;
-        cursor: pointer;
+    .portrait {
+      filter: brightness(0.8);
     }
+  }
+
+  .portrait {
+    width: 24rem;
+    height: 24rem;
+    object-fit: cover;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .upload-icon {
+    position: absolute;
+    opacity: 0;
+    left: 12rem;
+    top: 12rem;
+    width: 3rem;
+    height: 3rem;
+    transform: translate(-50%, -50%);
+    transition: all 0.2s ease-in-out;
+    background-color: #b7b7b763;
+    border-radius: 10px;
+  }
+
+  .image-icon {
+    position: absolute;
+    opacity: 1;
+    left: 12rem;
+    top: 12rem;
+    width: 3rem;
+    height: 3rem;
+    transform: translate(-50%, -50%);
+    transition: all 0.2s ease-in-out;
+  }
+
+  .upload-input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+  }
 }
 
 .looks {
-    width: 25rem;
-    padding: 0 2rem;
+  width: 25rem;
+  padding: 0 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .looks-entry {
     display: flex;
-    flex-direction: column;
-    gap: 1rem;
-
-    .looks-entry {
-        display: flex;
-        justify-content: space-between;
-
-        // .looks-input {
-        //     border-radius: 4px;
-        //     border: 1px solid var(--border-color);
-        //     box-shadow: var(--shadow);
-        //     padding-left: 1rem;
-        // }
-
-        .looks-field {
-            width: 12.5rem;
-            height: 1.75rem;
-            background-color: white;
-            border-radius: 4px;
-            border: 1px solid var(--border-color);
-            box-shadow: var(--shadow);
-            padding-left: 1rem;
-        }
-    }
+    justify-content: space-between;
 
-    .looks-input {
-        width: 12.5rem;
-        box-shadow: var(--shadow);
-        border-radius: 4px;
-        overflow: hidden;
+    // .looks-input {
+    //     border-radius: 4px;
+    //     border: 1px solid var(--border-color);
+    //     box-shadow: var(--shadow);
+    //     padding-left: 1rem;
+    // }
+
+    .looks-field {
+      width: 12.5rem;
+      height: 1.75rem;
+      background-color: white;
+      border-radius: 4px;
+      border: 1px solid var(--border-color);
+      box-shadow: var(--shadow);
+      padding-left: 1rem;
     }
+  }
 
-    ::ng-deep .mat-mdc-form-field-infix {
-        height: 32px !important;
-        min-height: 32px !important;
-        padding-top: 4px !important;
-    }
+  .looks-input {
+    width: 12.5rem;
+    box-shadow: var(--shadow);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  ::ng-deep .mat-mdc-form-field-infix {
+    height: 32px !important;
+    min-height: 32px !important;
+    padding-top: 4px !important;
+  }
 }
 
 .description {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .description-label {
+    font-weight: 500;
+  }
+
+  .description-input {
+    resize: none;
+    height: 90%;
+    width: 20rem;
+  }
+
+  .description-wrapper {
+    height: 100%;
+    width: 20rem;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    border-radius: 4px;
+  }
+}
+
+.personality {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3rem;
+
+  .personality-box {
+    width: 25%;
+    height: 20rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
+    margin-top: 1rem;
 
-    .description-label {
-        font-weight: 500;
+    @media (height < 930px) {
+      height: 15rem;
     }
 
-    .description-input {
-        resize: none;
-        height: 90%;
-        width: 20rem;
+    .personality-wrapper {
+      width: 100%;
+      height: 90%;
+      box-shadow: var(--shadow);
+      overflow: hidden;
+      border-radius: 4px;
     }
 
-    .description-wrapper {
-        height: 100%;
-        width: 20rem;
-        box-shadow: var(--shadow);
-        overflow: hidden;
-        border-radius: 4px;
+    .personality-input {
+      resize: none;
+      height: 100%;
     }
-}
 
-.personality {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 3rem;
-
-    .personality-box {
-        width: 25%;
-        height: 20rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.75rem;
-        margin-top: 1rem;
-
-        @media (height < 930px) {
-            height: 15rem;
-        }
-
-        .personality-wrapper {
-            width: 100%;
-            height: 90%;
-            box-shadow: var(--shadow);
-            overflow: hidden;
-            border-radius: 4px;
-        }
-
-        .personality-input {
-            resize: none;
-            height: 100%;
-        }
-
-        .personality-area {
-            width: 100%;
-            height: 100%;
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            box-shadow: var(--shadow);
-            resize: none;
-            padding: 1rem;
-        }
-
-        .personality-label {
-            font-weight: 500;
-        }
+    .personality-area {
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--border-color);
+      border-radius: 10px;
+      box-shadow: var(--shadow);
+      resize: none;
+      padding: 1rem;
+    }
+
+    .personality-label {
+      font-weight: 500;
     }
+  }
 }

src/app/journal/journal-character/general/general.component.spec.ts

@@ -8,10 +8,9 @@ describe('GeneralComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [GeneralComponent]
-    })
-    .compileComponents();
-    
+      declarations: [GeneralComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(GeneralComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-character/general/general.component.ts

@@ -16,7 +16,7 @@ export class GeneralComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    private translator: TranslatorService
+    private translator: TranslatorService,
   ) {}
 
   ngOnInit(): void {

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

@@ -43,20 +43,20 @@
         </ng-template>
       </ng-container>
       <ng-container ngbNavItem="subclass">
-        @if(data.level >= 3 || data.class === "Cleric"){
-        <button ngbNavLink>Unterklasse</button>
-        <ng-template ngbNavContent>
-          <subclass></subclass>
-        </ng-template>
-        }@else{
-        <button class="disabled-button" disabled>
-          <img
-            style="display: inline"
-            src="assets/icons/UIIcons/lock.svg"
-            alt="locked"
-          />
-          Unterklasse
-        </button>
+        @if (data.level >= 3 || data.class === "Cleric") {
+          <button ngbNavLink>Unterklasse</button>
+          <ng-template ngbNavContent>
+            <subclass></subclass>
+          </ng-template>
+        } @else {
+          <button class="disabled-button" disabled>
+            <img
+              style="display: inline"
+              src="assets/icons/UIIcons/lock.svg"
+              alt="locked"
+            />
+            Unterklasse
+          </button>
         }
       </ng-container>
       <ng-container ngbNavItem="combined">

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

@@ -1,100 +1,100 @@
 .header {
-    display: flex;
-    justify-content: space-between;
-    height: 6.5rem;
-    background-color: var(--header);
-    box-shadow: var(--shadow);
+  display: flex;
+  justify-content: space-between;
+  height: 6.5rem;
+  background-color: var(--header);
+  box-shadow: var(--shadow);
 
-    .header-data {
-        margin: 0 5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-
-        input {
-            width: 6rem;
-            border: none;
-            background: none;
-            font-size: 1.75rem;
-            font-weight: 600;
-            text-align: center;
-        }
+  .header-data {
+    margin: 0 5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 
-        input[type="number"]::-webkit-inner-spin-button,
-        input[type="number"]::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-        input[type="number"] {
-            -moz-appearance: textfield;
-            appearance: textfield;
-        }
+    input {
+      width: 6rem;
+      border: none;
+      background: none;
+      font-size: 1.75rem;
+      font-weight: 600;
+      text-align: center;
     }
 
-    .name {
-        text-align: center;
-        font-size: 3em;
-        font-weight: bold;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
     }
-
-    .horizontal-ruler {
-        width: 8rem;
-        height: 1px;
-        border-top: 1px solid var(--border-color);
+    input[type="number"] {
+      -moz-appearance: textfield;
+      appearance: textfield;
     }
+  }
+
+  .name {
+    text-align: center;
+    font-size: 3em;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  .horizontal-ruler {
+    width: 8rem;
+    height: 1px;
+    border-top: 1px solid var(--border-color);
+  }
 }
 
 .character-body {
-    height: calc(100vh - 6.5rem);
+  height: calc(100vh - 6.5rem);
 
-    .navigation-bar {
-        padding-top: 1.5rem;
-        gap: 2rem;
-        box-shadow: var(--shadow);
-        height: 100%;
-        align-items: center;
-
-        .nav-link {
-            width: 90%;
-            border-radius: 10px;
-            transition: all 0.25s ease-in-out;
-            font-size: 1.25rem;
-            font-weight: 600;
-            color: var(--text);
+  .navigation-bar {
+    padding-top: 1.5rem;
+    gap: 2rem;
+    box-shadow: var(--shadow);
+    height: 100%;
+    align-items: center;
 
-            &.active,
-            &:hover {
-                background-color: var(--tab-active);
-                box-shadow: var(--shadow);
-            }
-        }
+    .nav-link {
+      width: 90%;
+      border-radius: 10px;
+      transition: all 0.25s ease-in-out;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--text);
 
-        .disabled-button {
-            border: none;
-            font-size: 1.25rem;
-            font-weight: 600;
-            color: black;
-            cursor: not-allowed;
-        }
+      &.active,
+      &:hover {
+        background-color: var(--tab-active);
+        box-shadow: var(--shadow);
+      }
     }
 
-    .outlet {
-        margin: 2.5rem 2.5rem 0 2.5rem;
-        width: 100%;
+    .disabled-button {
+      border: none;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: black;
+      cursor: not-allowed;
     }
+  }
 
-    .d-flex {
-        height: 100%;
-    }
+  .outlet {
+    margin: 2.5rem 2.5rem 0 2.5rem;
+    width: 100%;
+  }
 
-    ::ng-deep .tab-pane {
-        height: 100%;
-        width: 100%;
-    }
+  .d-flex {
+    height: 100%;
+  }
+
+  ::ng-deep .tab-pane {
+    height: 100%;
+    width: 100%;
+  }
 }

src/app/journal/journal-character/journal-character.component.spec.ts

@@ -8,7 +8,7 @@ describe('JournalCharacterComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [JournalCharacterComponent]
+      declarations: [JournalCharacterComponent],
     });
     fixture = TestBed.createComponent(JournalCharacterComponent);
     component = fixture.componentInstance;

src/app/journal/journal-character/species/species.component.html

@@ -5,15 +5,15 @@
   <markdown [data]="species.description"></markdown>
 
   <div class="abilities">
-    @for(ability of species.abilities; track ability){
-    <div class="ability">
-      <div class="ability-name">{{ ability.name }}</div>
-      <div class="ability-level">{{ ability.level }}</div>
-      <markdown
-        class="ability-description"
-        [data]="ability.description"
-      ></markdown>
-    </div>
+    @for (ability of species.abilities; track ability) {
+      <div class="ability">
+        <div class="ability-name">{{ ability.name }}</div>
+        <div class="ability-level">{{ ability.level }}</div>
+        <markdown
+          class="ability-description"
+          [data]="ability.description"
+        ></markdown>
+      </div>
     }
   </div>
 </div>

src/app/journal/journal-character/species/species.component.scss

@@ -1,48 +1,48 @@
 .species-container {
-    width: 800px;
-    height: calc(100vh - 10.5rem);
-    overflow: auto;
-    margin: auto;
-    border: 1px solid black;
-    padding: 2rem;
-    border-radius: 10px;
-    background-color: var(--items-hover);
-    box-shadow: var(--shadow-large);
-    position: absolute;
-    top: 8.5rem;
-    left: 50%;
-    transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  overflow: auto;
+  margin: auto;
+  border: 1px solid black;
+  padding: 2rem;
+  border-radius: 10px;
+  background-color: var(--items-hover);
+  box-shadow: var(--shadow-large);
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .title {
-    text-align: center;
-    font-size: 2em;
-    font-weight: bold;
-    margin: 0 0 2rem 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  margin: 0 0 2rem 0;
 }
 
 .description {
 }
 
 .abilities {
-    margin-top: 2rem;
-    position: relative;
+  margin-top: 2rem;
+  position: relative;
 }
 
 .ability-name {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
 }
 
 .ability-level {
-    position: absolute;
-    left: -1.75rem;
-    top: 0;
-    font-size: 1.5rem;
-    font-weight: 600;
+  position: absolute;
+  left: -1.75rem;
+  top: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 
 .ability-description {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }

src/app/journal/journal-character/species/species.component.spec.ts

@@ -8,10 +8,9 @@ describe('SpeciesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SpeciesComponent]
-    })
-    .compileComponents();
-    
+      declarations: [SpeciesComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SpeciesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-character/species/species.component.ts

@@ -13,7 +13,7 @@ export class SpeciesComponent {
 
   public constructor(
     public speciesAccessor: SpeciesService,
-    public dataAccessor: DataService
+    public dataAccessor: DataService,
   ) {
     this.speciesName = this.dataAccessor.characterData.race;
     this.species = speciesAccessor.getSpeciesDetails(this.speciesName);

src/app/journal/journal-character/story/story.component.html

@@ -7,26 +7,27 @@
   </div>
   <div class="title">Hintergrundgeschichte</div>
 
-  @if(characterData.backgroundStory != "" && !editMode){
-  <div class="t-2" [innerHTML]="characterData.backgroundStory"></div>
-  }@else if(editMode){
-  <div class="NgxEditor__Wrapper t-15">
-    <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
-    <ngx-editor
-      [editor]="editor"
-      [(ngModel)]="editBackgroundStory"
-      placeholder="Hier kann die Hintergrundgeschichte erzählt werden."
-    ></ngx-editor>
-  </div>
-  <div class="horizontal-buttons" style="justify-content: space-around">
-    <ui-button [color]="'green'" (click)="update()" [width]="'w15'"
-      >Anwenden</ui-button
-    >
-    <ui-button [color]="'red'" (click)="cancel()" [width]="'w15'"
-      >Verwerfen</ui-button
-    >
-  </div>
-  }@else { Hintergrundgeschichte bearbeiten
-  <button (click)="edit()">Bearbeiten</button>
+  @if (characterData.backgroundStory != "" && !editMode) {
+    <div class="t-2" [innerHTML]="characterData.backgroundStory"></div>
+  } @else if (editMode) {
+    <div class="NgxEditor__Wrapper t-15">
+      <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+      <ngx-editor
+        [editor]="editor"
+        [(ngModel)]="editBackgroundStory"
+        placeholder="Hier kann die Hintergrundgeschichte erzählt werden."
+      ></ngx-editor>
+    </div>
+    <div class="horizontal-buttons" style="justify-content: space-around">
+      <ui-button [color]="'green'" (click)="update()" [width]="'w15'"
+        >Anwenden</ui-button
+      >
+      <ui-button [color]="'red'" (click)="cancel()" [width]="'w15'"
+        >Verwerfen</ui-button
+      >
+    </div>
+  } @else {
+    Hintergrundgeschichte bearbeiten
+    <button (click)="edit()">Bearbeiten</button>
   }
 </div>

src/app/journal/journal-character/story/story.component.scss

@@ -1,30 +1,30 @@
 .story-container {
-    width: 800px;
-    height: calc(100vh - 10.5rem);
-    overflow: auto;
-    margin: auto;
-    border: 1px solid black;
-    padding: 2rem;
-    border-radius: 10px;
-    background-color: var(--items-hover);
-    box-shadow: var(--shadow-large);
-    position: absolute;
-    top: 8.5rem;
-    left: 50%;
-    transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  overflow: auto;
+  margin: auto;
+  border: 1px solid black;
+  padding: 2rem;
+  border-radius: 10px;
+  background-color: var(--items-hover);
+  box-shadow: var(--shadow-large);
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
 
-    .edit {
-        position: absolute;
-        right: 1rem;
-        top: 3rem;
-    }
+  .edit {
+    position: absolute;
+    right: 1rem;
+    top: 3rem;
+  }
 }
 
 .title {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 ::ng-deep .ProseMirror {
-    height: 30rem !important;
-    overflow-y: auto;
+  height: 30rem !important;
+  overflow-y: auto;
 }

src/app/journal/journal-character/story/story.component.spec.ts

@@ -8,10 +8,9 @@ describe('StoryComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [StoryComponent]
-    })
-    .compileComponents();
-    
+      declarations: [StoryComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(StoryComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-character/subclass/subclass.component.html

@@ -4,15 +4,15 @@
   <markdown [data]="subclass.description"></markdown>
 
   <div class="features">
-    @for(feature of subclass.features; track feature){
-    <div class="feature">
-      <div class="feature-name">{{ feature.name }}</div>
-      <div class="feature-level">{{ feature.level }}</div>
-      <markdown
-        class="feature-description"
-        [data]="feature.description"
-      ></markdown>
-    </div>
+    @for (feature of subclass.features; track feature) {
+      <div class="feature">
+        <div class="feature-name">{{ feature.name }}</div>
+        <div class="feature-level">{{ feature.level }}</div>
+        <markdown
+          class="feature-description"
+          [data]="feature.description"
+        ></markdown>
+      </div>
     }
   </div>
 </div>

src/app/journal/journal-character/subclass/subclass.component.scss

@@ -1,57 +1,57 @@
 .subclass-container {
-    width: 800px;
-    height: calc(100vh - 10.5rem);
-    overflow: auto;
-    margin: auto;
-    border: 1px solid black;
-    padding: 2rem;
-    border-radius: 10px;
-    background-color: var(--items-hover);
-    box-shadow: var(--shadow-large);
-    position: absolute;
-    top: 8.5rem;
-    left: 50%;
-    transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  overflow: auto;
+  margin: auto;
+  border: 1px solid black;
+  padding: 2rem;
+  border-radius: 10px;
+  background-color: var(--items-hover);
+  box-shadow: var(--shadow-large);
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .title {
-    text-align: center;
-    font-size: 2em;
-    font-weight: bold;
-    margin: 0 0 2rem 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  margin: 0 0 2rem 0;
 }
 
 .description {
 }
 
 .feature {
-    margin-top: 2rem;
-    position: relative;
+  margin-top: 2rem;
+  position: relative;
 }
 
 .feature-name {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
 }
 
 .feature-level {
-    position: absolute;
-    left: -1.75rem;
-    top: 0;
-    font-size: 1.5rem;
-    font-weight: 600;
+  position: absolute;
+  left: -1.75rem;
+  top: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 
 .feature-description {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 :host ::ng-deep p {
-    margin: 0;
+  margin: 0;
 }
 
 :host ::ng-deep h3,
 :host ::ng-deep h4 {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }

src/app/journal/journal-character/subclass/subclass.component.spec.ts

@@ -8,10 +8,9 @@ describe('SubclassComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SubclassComponent]
-    })
-    .compileComponents();
-    
+      declarations: [SubclassComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SubclassComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-home/details-panel/details-panel.component.scss

@@ -1,33 +1,33 @@
 .backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    visibility: hidden;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 998;
-    cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  visibility: hidden;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 998;
+  cursor: pointer;
 }
 
 .backdrop--open {
-    visibility: visible;
+  visibility: visible;
 }
 
 .panel {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 30rem;
-    background-color: var(--background-color);
-    z-index: 999;
-    padding: 1.5rem;
-    transform: translateX(100%);
-    transition: transform 0.3s ease-in-out;
-    overflow: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 30rem;
+  background-color: var(--background-color);
+  z-index: 999;
+  padding: 1.5rem;
+  transform: translateX(100%);
+  transition: transform 0.3s ease-in-out;
+  overflow: auto;
 }
 
 .panel--open {
-    transform: translate(0);
+  transform: translate(0);
 }

src/app/journal/journal-home/details-panel/details-panel.component.spec.ts

@@ -8,7 +8,7 @@ describe('DetailsPanelComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DetailsPanelComponent]
+      declarations: [DetailsPanelComponent],
     });
     fixture = TestBed.createComponent(DetailsPanelComponent);
     component = fixture.componentInstance;

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

@@ -1,6 +1,6 @@
 .journal-container {
-    overflow: auto;
-    height: 100vh;
-    width: 100vw;
-    background-color: var(--background-color);
+  overflow: auto;
+  height: 100vh;
+  width: 100vw;
+  background-color: var(--background-color);
 }

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

@@ -8,7 +8,7 @@ describe('JournalHomeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [JournalHomeComponent]
+      declarations: [JournalHomeComponent],
     });
     fixture = TestBed.createComponent(JournalHomeComponent);
     component = fixture.componentInstance;

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

@@ -1,10 +1,10 @@
 <div id="myModal" class="modal-backdrop" (click)="cancel()">
   <!-- Modal content -->
   <span class="modal-content-own" (click)="$event.stopPropagation()">
-    @if(show){
-    <ng-template
-      *ngComponentOutlet="modalComponent; inputs: inputData"
-    ></ng-template>
+    @if (show) {
+      <ng-template
+        *ngComponentOutlet="modalComponent; inputs: inputData"
+      ></ng-template>
     }
   </span>
 </div>

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

@@ -1,18 +1,18 @@
 /* The Modal (background) */
 .modal-backdrop {
-  display: none; 
-  position: fixed; 
-  z-index: 991; 
+  display: none;
+  position: fixed;
+  z-index: 991;
   left: 0;
   top: 0;
-  width: 100%; 
-  height: 100%; 
-  overflow: auto; 
-  background-color: rgba(0,0,0,0.4); 
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
   cursor: pointer;
 }
 
-.modal-content-own{
+.modal-content-own {
   display: inline-block;
   position: relative;
   top: 50%;
@@ -21,4 +21,4 @@
   cursor: auto;
   // max-width: 80vw;
   // z-index: 992;
-}
+}

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

@@ -8,10 +8,9 @@ describe('ModalComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ModalComponent]
-    })
-    .compileComponents();
-    
+      imports: [ModalComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -1,84 +1,84 @@
 .backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    visibility: hidden;
-    background: rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  visibility: hidden;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  cursor: pointer;
 }
 
 .backdrop--open {
-    visibility: visible;
+  visibility: visible;
 }
 
 .panel {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 25vw;
-    background-color: var(--background-color);
-    z-index: 1001;
-    padding: 1.5rem;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease-in-out;
-    overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 25vw;
+  background-color: var(--background-color);
+  z-index: 1001;
+  padding: 1.5rem;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
+  overflow: hidden;
 }
 
 .panel--open {
-    transform: translateX(0);
+  transform: translateX(0);
 }
 
 ul {
-    padding: 0;
-    list-style: none;
+  padding: 0;
+  list-style: none;
 }
 
 .navigation-entry {
-    font-size: 1.25rem;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    padding-left: 2rem;
-    padding: 0.5rem 0 0.5rem 2rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+  padding: 0.5rem 0 0.5rem 2rem;
 
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    transition: transform 0.2s ease-in-out;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  transition: transform 0.2s ease-in-out;
 
-    &:hover,
-    &.active {
-        background-color: var(--primary);
-        transform: scale(1.05);
-        cursor: pointer;
-    }
+  &:hover,
+  &.active {
+    background-color: var(--primary);
+    transform: scale(1.05);
+    cursor: pointer;
+  }
 }
 
 .settings-container {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    bottom: 2rem;
-    width: calc(25vw - 3rem);
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 2rem;
+  width: calc(25vw - 3rem);
 }
 
 .settings-button {
-    font-size: 1.25rem;
-    width: 9rem;
-    font-weight: 500;
-    padding: 0.5rem;
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    transition: transform 0.2s ease-in-out;
+  font-size: 1.25rem;
+  width: 9rem;
+  font-weight: 500;
+  padding: 0.5rem;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  transition: transform 0.2s ease-in-out;
 }
 
 .settings-button:hover {
-    background-color: var(--tab-active);
-    transform: scale(1.05);
+  background-color: var(--tab-active);
+  transform: scale(1.05);
 }

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

@@ -8,10 +8,9 @@ describe('NavigationPanelComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NavigationPanelComponent]
-    })
-    .compileComponents();
-    
+      declarations: [NavigationPanelComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(NavigationPanelComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -18,7 +18,7 @@ export class NavigationPanelComponent {
     private navigation: NavigationPanelService,
     private router: Router,
     private detailsAccessor: DetailsService,
-    private modalAccessor: ModalService
+    private modalAccessor: ModalService,
   ) {}
 
   public ngOnInit(): void {

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

@@ -25,11 +25,14 @@
       <div class="table-heading">Anzahl</div>
     </div>
 
-    @switch(active) { @case(1){
-    <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
-    } @case(2){
-    <ng-container [ngTemplateOutlet]="miscTemplate"></ng-container>
-    }}
+    @switch (active) {
+      @case (1) {
+        <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
+      }
+      @case (2) {
+        <ng-container [ngTemplateOutlet]="miscTemplate"></ng-container>
+      }
+    }
 
     <div class="footer">
       <ui-button [color]="'green'" [width]="'w22'" (click)="addItem('items')">
@@ -65,11 +68,14 @@
         <div class="table-heading">Gewicht</div>
         <div class="table-heading">Anzahl</div>
       </div>
-      @switch(foodActive) { @case(1){
-      <ng-container [ngTemplateOutlet]="foodTemplate"></ng-container>
-      } @case(2){
-      <ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container>
-      } }
+      @switch (foodActive) {
+        @case (1) {
+          <ng-container [ngTemplateOutlet]="foodTemplate"></ng-container>
+        }
+        @case (2) {
+          <ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container>
+        }
+      }
 
       <div class="footer">
         <ui-button
@@ -131,18 +137,18 @@
       (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
     >
       @for (item of weaponsAndArmor; let index = $index; track item) {
-      <div
-        class="item"
-        cdkDrag
-        (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
-      >
-        <div class="item-property">{{ item.name }}</div>
-        <div class="item-property">{{ item.value }} Gold</div>
-        <div class="item-property">{{ item.weight }} lb.</div>
-        <div class="item-property">{{ item.quantity }}</div>
-      </div>
+        <div
+          class="item"
+          cdkDrag
+          (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
+        >
+          <div class="item-property">{{ item.name }}</div>
+          <div class="item-property">{{ item.value }} Gold</div>
+          <div class="item-property">{{ item.weight }} lb.</div>
+          <div class="item-property">{{ item.quantity }}</div>
+        </div>
       } @empty {
-      <div class="empty-list">Kein Eintrag</div>
+        <div class="empty-list">Kein Eintrag</div>
       }
     </div>
   </ng-template>
@@ -155,18 +161,18 @@
       (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
     >
       @for (item of miscellaneous; let index = $index; track item) {
-      <div
-        class="item"
-        cdkDrag
-        (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
-      >
-        <div class="item-property">{{ item.name }}</div>
-        <div class="item-property">{{ item.value }} Gold</div>
-        <div class="item-property">{{ item.weight }} lb.</div>
-        <div class="item-property">{{ item.quantity }}</div>
-      </div>
+        <div
+          class="item"
+          cdkDrag
+          (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
+        >
+          <div class="item-property">{{ item.name }}</div>
+          <div class="item-property">{{ item.value }} Gold</div>
+          <div class="item-property">{{ item.weight }} lb.</div>
+          <div class="item-property">{{ item.quantity }}</div>
+        </div>
       } @empty {
-      <div class="empty-list">Kein Eintrag</div>
+        <div class="empty-list">Kein Eintrag</div>
       }
     </div>
   </ng-template>
@@ -179,18 +185,18 @@
       (cdkDropListDropped)="drop($event, consumables, 'consumables')"
     >
       @for (item of consumables; let index = $index; track item) {
-      <div
-        class="item"
-        cdkDrag
-        (click)="openItemsDetails(consumables, index, 'consumables')"
-      >
-        <div class="item-property">{{ item.name }}</div>
-        <div class="item-property">{{ item.value }} Gold</div>
-        <div class="item-property">{{ item.weight }} lb.</div>
-        <div class="item-property">{{ item.quantity }}</div>
-      </div>
+        <div
+          class="item"
+          cdkDrag
+          (click)="openItemsDetails(consumables, index, 'consumables')"
+        >
+          <div class="item-property">{{ item.name }}</div>
+          <div class="item-property">{{ item.value }} Gold</div>
+          <div class="item-property">{{ item.weight }} lb.</div>
+          <div class="item-property">{{ item.quantity }}</div>
+        </div>
       } @empty {
-      <div class="empty-list">Kein Eintrag</div>
+        <div class="empty-list">Kein Eintrag</div>
       }
     </div>
   </ng-template>
@@ -203,15 +209,25 @@
       (cdkDropListDropped)="drop($event, food, 'food')"
     >
       @for (item of food; let index = $index; track item) {
-      <!-- <div class="item" cdkDrag (click)="openFoodDetails(index)"> -->
-      <div class="item" cdkDrag (click)="openItemsDetails(food, index, 'food')">
-        <div class="item-property">{{ item.name }}</div>
-        <div class="item-property">@if(item.isReady){Ja} @else {Nein}</div>
-        <div class="item-property">{{ item.weight }} lb.</div>
-        <div class="item-property">{{ item.quantity }}</div>
-      </div>
+        <!-- <div class="item" cdkDrag (click)="openFoodDetails(index)"> -->
+        <div
+          class="item"
+          cdkDrag
+          (click)="openItemsDetails(food, index, 'food')"
+        >
+          <div class="item-property">{{ item.name }}</div>
+          <div class="item-property">
+            @if (item.isReady) {
+              Ja
+            } @else {
+              Nein
+            }
+          </div>
+          <div class="item-property">{{ item.weight }} lb.</div>
+          <div class="item-property">{{ item.quantity }}</div>
+        </div>
       } @empty {
-      <div class="empty-list">Kein Eintrag</div>
+        <div class="empty-list">Kein Eintrag</div>
       }
     </div>
   </ng-template>

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

@@ -8,7 +8,7 @@ describe('JournalInventoryComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [JournalInventoryComponent]
+      declarations: [JournalInventoryComponent],
     });
     fixture = TestBed.createComponent(JournalInventoryComponent);
     component = fixture.componentInstance;

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

@@ -49,7 +49,7 @@ export class JournalInventoryComponent {
   constructor(
     private detailsAccessor: DetailsService,
     private dataAccessor: DataService,
-    private modalAccessor: ModalService
+    private modalAccessor: ModalService,
   ) {}
 
   public ngOnInit(): void {
@@ -95,7 +95,7 @@ export class JournalInventoryComponent {
           // Do nothing
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -120,7 +120,7 @@ export class JournalInventoryComponent {
           // Do nothing
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -128,7 +128,7 @@ export class JournalInventoryComponent {
     isUpdate: boolean,
     listname: string,
     list?: SimpleItem[],
-    index?: number
+    index?: number,
   ): void {
     this.modalAccessor.openModal(SimpleItemModalComponent, {
       item:
@@ -149,7 +149,7 @@ export class JournalInventoryComponent {
           // Do nothing
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

src/app/journal/journal-inventory/simple-item-details/simple-item-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('SimpleItemDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SimpleItemDetailsComponent]
-    })
-    .compileComponents();
-    
+      imports: [SimpleItemDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SimpleItemDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -1,6 +1,10 @@
 <div class="dimensions">
   <div class="title">
-    @if(!isUpdate){Gegenstand erstellen}@else{Gegenstand bearbeiten}
+    @if (!isUpdate) {
+      Gegenstand erstellen
+    } @else {
+      Gegenstand bearbeiten
+    }
   </div>
 
   <div class="flex-form t-15">
@@ -26,23 +30,23 @@
           <span class="input-value" matTextSuffix>Stk.</span>
         </mat-form-field>
       </div>
-      @if(isFood){
-      <div>
-        <div class="input-label">Verzehrfertig</div>
-        <input
-          type="checkbox"
-          style="margin: 0.5rem 0 0 2.5rem"
-          [(ngModel)]="isReady"
-        />
-      </div>
+      @if (isFood) {
+        <div>
+          <div class="input-label">Verzehrfertig</div>
+          <input
+            type="checkbox"
+            style="margin: 0.5rem 0 0 2.5rem"
+            [(ngModel)]="isReady"
+          />
+        </div>
       } @else {
-      <div>
-        <div class="input-label">Wert</div>
-        <mat-form-field appearance="outline" style="width: 7rem">
-          <input type="number" class="right" matInput [(ngModel)]="value" />
-          <span class="input-value" matTextSuffix>Gold</span>
-        </mat-form-field>
-      </div>
+        <div>
+          <div class="input-label">Wert</div>
+          <mat-form-field appearance="outline" style="width: 7rem">
+            <input type="number" class="right" matInput [(ngModel)]="value" />
+            <span class="input-value" matTextSuffix>Gold</span>
+          </mat-form-field>
+        </div>
       }
     </div>
   </div>
@@ -57,14 +61,14 @@
   </div>
 
   <div class="horizontal-buttons">
-    @if(isUpdate){
-    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
-      Bestätigen
-    </ui-button>
-    }@else{
-    <ui-button [color]="'green'" style="width: 40%" (click)="add()">
-      Bestätigen
-    </ui-button>
+    @if (isUpdate) {
+      <ui-button [color]="'green'" style="width: 40%" (click)="update()">
+        Bestätigen
+      </ui-button>
+    } @else {
+      <ui-button [color]="'green'" style="width: 40%" (click)="add()">
+        Bestätigen
+      </ui-button>
     }
     <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
       Abbrechen

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

@@ -1,37 +1,37 @@
 .dimensions {
-    width: 35rem;
-    background-color: antiquewhite;
+  width: 35rem;
+  background-color: antiquewhite;
 }
 
 .numbers {
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        display: none;
-    }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    display: none;
+  }
 
-    input {
-        -moz-appearance: textfield;
-    }
+  input {
+    -moz-appearance: textfield;
+  }
 
-    .input-value {
-        padding-left: 0.5rem;
-    }
+  .input-value {
+    padding-left: 0.5rem;
+  }
 
-    span {
-        color: darkgrey;
-    }
+  span {
+    color: darkgrey;
+  }
 
-    ::ng-deep .mat-mdc-form-field-infix {
-        height: 40px !important;
-        min-height: 40px !important;
-        padding-top: 8px !important;
-    }
+  ::ng-deep .mat-mdc-form-field-infix {
+    height: 40px !important;
+    min-height: 40px !important;
+    padding-top: 8px !important;
+  }
 }
 
 .ProseMirror {
-    overflow: auto;
+  overflow: auto;
 }
 ::ng-deep .ProseMirror {
-    height: 10rem !important;
-    overflow-y: auto;
+  height: 10rem !important;
+  overflow-y: auto;
 }

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

@@ -8,10 +8,9 @@ describe('SimpleItemModalComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SimpleItemModalComponent]
-    })
-    .compileComponents();
-    
+      declarations: [SimpleItemModalComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SimpleItemModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-maps/journal-maps.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalMapsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalMapsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalMapsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalMapsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-maps',
   templateUrl: './journal-maps.component.html',
-  styleUrl: './journal-maps.component.scss'
+  styleUrl: './journal-maps.component.scss',
 })
-export class JournalMapsComponent {
-
-}
+export class JournalMapsComponent {}

src/app/journal/journal-notes/journal-notes.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalNotesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalNotesComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalNotesComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalNotesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-npcs/journal-npcs.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalNpcsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalNpcsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalNpcsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalNpcsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-npcs',
   templateUrl: './journal-npcs.component.html',
-  styleUrl: './journal-npcs.component.scss'
+  styleUrl: './journal-npcs.component.scss',
 })
-export class JournalNpcsComponent {
-
-}
+export class JournalNpcsComponent {}

src/app/journal/journal-places/journal-places.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalPlacesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalPlacesComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalPlacesComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalPlacesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-places',
   templateUrl: './journal-places.component.html',
-  styleUrl: './journal-places.component.scss'
+  styleUrl: './journal-places.component.scss',
 })
-export class JournalPlacesComponent {
-
-}
+export class JournalPlacesComponent {}

src/app/journal/journal-quests/journal-quests.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalQuestsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalQuestsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalQuestsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalQuestsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-quests',
   templateUrl: './journal-quests.component.html',
-  styleUrl: './journal-quests.component.scss'
+  styleUrl: './journal-quests.component.scss',
 })
-export class JournalQuestsComponent {
-
-}
+export class JournalQuestsComponent {}

src/app/journal/journal-ruleset/journal-ruleset.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalRulesetComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalRulesetComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalRulesetComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalRulesetComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-ruleset',
   templateUrl: './journal-ruleset.component.html',
-  styleUrl: './journal-ruleset.component.scss'
+  styleUrl: './journal-ruleset.component.scss',
 })
-export class JournalRulesetComponent {
-
-}
+export class JournalRulesetComponent {}

src/app/journal/journal-settings/journal-settings.component.spec.ts

@@ -8,10 +8,9 @@ describe('JournalSettingsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [JournalSettingsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [JournalSettingsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JournalSettingsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-settings',
   templateUrl: './journal-settings.component.html',
-  styleUrl: './journal-settings.component.scss'
+  styleUrl: './journal-settings.component.scss',
 })
-export class JournalSettingsComponent {
-
-}
+export class JournalSettingsComponent {}

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

@@ -8,7 +8,7 @@ describe('JournalSpellbookComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [JournalSpellbookComponent]
+      declarations: [JournalSpellbookComponent],
     });
     fixture = TestBed.createComponent(JournalSpellbookComponent);
     component = fixture.componentInstance;

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-spellbook',
   templateUrl: './journal-spellbook.component.html',
-  styleUrls: ['./journal-spellbook.component.scss']
+  styleUrls: ['./journal-spellbook.component.scss'],
 })
-export class JournalSpellbookComponent {
-
-}
+export class JournalSpellbookComponent {}

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

@@ -1,53 +1,57 @@
 <div class="add-card">
-  @if(state === 1) {
-  <div class="clickable-card" (click)="state = 2; closeOthers()">
-    <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
-  </div>
-  } @else if(state === 2) {
-  <div class="button-card">
-    <button (click)="continueToSpellSelection(false); state = 3">
-      Offizieller Zauber
-    </button>
+  @if (state === 1) {
+    <div class="clickable-card" (click)="state = 2; closeOthers()">
+      <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
+    </div>
+  } @else if (state === 2) {
+    <div class="button-card">
+      <button (click)="continueToSpellSelection(false); state = 3">
+        Offizieller Zauber
+      </button>
 
-    <hr />
-    <button (click)="continueToSpellSelection(true); state = 3">
-      Offiziellen Zauber bearbeiten
-    </button>
+      <hr />
+      <button (click)="continueToSpellSelection(true); state = 3">
+        Offiziellen Zauber bearbeiten
+      </button>
 
-    <hr />
+      <hr />
 
-    <button (click)="emitNewSpell()">Eigener Zauber</button>
-  </div>
-  } @else if (state === 3) {
-  <div class="spell-selection">
-    <input
-      type="text"
-      class="spell-name"
-      [(ngModel)]="newSpellName"
-      placeholder="Zauber durchsuchen"
-      (keyup)="
-        isModification ? filterSpellArrayForModification() : filterSpellArray()
-      "
-    />
-    <div class="available-spells">
-      <ul>
-        @for(spell of availableSpells; track spell) {
-        <li>
-          <button
-            (click)="
-              isModification
-                ? emitNewSpellFromOfficial(spell)
-                : spellSelected(spell)
-            "
-          >
-            {{ spell.german }}
-          </button>
-        </li>
-        } @empty { Keine Zauber gefunden }
-      </ul>
+      <button (click)="emitNewSpell()">Eigener Zauber</button>
     </div>
+  } @else if (state === 3) {
+    <div class="spell-selection">
+      <input
+        type="text"
+        class="spell-name"
+        [(ngModel)]="newSpellName"
+        placeholder="Zauber durchsuchen"
+        (keyup)="
+          isModification
+            ? filterSpellArrayForModification()
+            : filterSpellArray()
+        "
+      />
+      <div class="available-spells">
+        <ul>
+          @for (spell of availableSpells; track spell) {
+            <li>
+              <button
+                (click)="
+                  isModification
+                    ? emitNewSpellFromOfficial(spell)
+                    : spellSelected(spell)
+                "
+              >
+                {{ spell.german }}
+              </button>
+            </li>
+          } @empty {
+            Keine Zauber gefunden
+          }
+        </ul>
+      </div>
 
-    <button class="cancel-button" (click)="resetThis()">Abbrechen</button>
-  </div>
+      <button class="cancel-button" (click)="resetThis()">Abbrechen</button>
+    </div>
   }
 </div>

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

@@ -1,140 +1,140 @@
 .add-card {
-    position: relative;
-    height: 20rem;
-    width: 15rem;
-    border: var(--border);
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    overflow: hidden;
-    transition: all 0.3s ease-in-out;
+  position: relative;
+  height: 20rem;
+  width: 15rem;
+  border: var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
 
-    .button-card {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
+  .button-card {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
 
-        button {
-            height: 33.3%;
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: var(--items);
-            &:hover {
-                background-color: var(--items-hover);
-            }
-            transition: all 0.2s ease-in-out;
-            // cursor: pointer;
-        }
+    button {
+      height: 33.3%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--items);
+      &:hover {
+        background-color: var(--items-hover);
+      }
+      transition: all 0.2s ease-in-out;
+      // cursor: pointer;
+    }
 
-        hr {
-            margin: 0;
-        }
+    hr {
+      margin: 0;
+    }
 
-        button {
-            border: none;
-            font-size: 1.125rem;
-            font-weight: 600;
-        }
+    button {
+      border: none;
+      font-size: 1.125rem;
+      font-weight: 600;
     }
+  }
 
-    .clickable-card {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
+  .clickable-card {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
 
-        &:hover {
-            background-color: var(--items);
-        }
+    &:hover {
+      background-color: var(--items);
+    }
 
-        .add-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            height: 4rem;
-        }
+    .add-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 4rem;
     }
+  }
 }
 
 .spell-selection {
-    width: 100%;
-    height: 100%;
-    background-color: var(--background-color);
-    padding-top: 0.875rem;
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-color);
+  padding-top: 0.875rem;
 }
 
 .add-button {
-    width: 90%;
-    margin: 0 0.5rem;
-    background-color: var(--primary);
-    border: var(--border);
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    font-weight: 600;
-    // opacity: 0;
-    transition: all 0.25s ease-in-out;
+  width: 90%;
+  margin: 0 0.5rem;
+  background-color: var(--primary);
+  border: var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  font-weight: 600;
+  // opacity: 0;
+  transition: all 0.25s ease-in-out;
 
-    &:hover {
-        background-color: var(--primary-dark);
-    }
+  &:hover {
+    background-color: var(--primary-dark);
+  }
 }
 
 .spell-name {
-    width: 94%;
-    margin: auto;
-    display: block;
-    border-radius: 5px;
-    border: var(--border);
-    // box-shadow: var(--shadow);
+  width: 94%;
+  margin: auto;
+  display: block;
+  border-radius: 5px;
+  border: var(--border);
+  // box-shadow: var(--shadow);
 }
 
 .available-spells {
-    margin: 0.5rem;
-    padding: 0.5rem;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  border: var(--border);
+  border-radius: 5px;
+  overflow: auto;
+  height: 13rem;
+  background-color: white;
+  box-shadow: var(--shadow);
+
+  button {
+    all: unset;
     border: var(--border);
     border-radius: 5px;
-    overflow: auto;
-    height: 13rem;
-    background-color: white;
+    padding: 0.25rem;
+    margin: 0 auto 0.375rem auto;
+    display: block;
+    width: 90%;
     box-shadow: var(--shadow);
-
-    button {
-        all: unset;
-        border: var(--border);
-        border-radius: 5px;
-        padding: 0.25rem;
-        margin: 0 auto 0.375rem auto;
-        display: block;
-        width: 90%;
-        box-shadow: var(--shadow);
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
-        background-color: var(--items);
-        &:hover {
-            background-color: var(--items-hover);
-        }
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    background-color: var(--items);
+    &:hover {
+      background-color: var(--items-hover);
     }
+  }
 }
 
 ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 
 .cancel-button {
-    width: 10rem;
-    height: 2.5rem;
-    display: block;
-    margin: 0.75rem auto 0 auto;
-    background-color: var(--delete);
-    border: var(--border);
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    font-weight: 600;
-    font-size: 1.25rem;
+  width: 10rem;
+  height: 2.5rem;
+  display: block;
+  margin: 0.75rem auto 0 auto;
+  background-color: var(--delete);
+  border: var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  font-weight: 600;
+  font-size: 1.25rem;
 }

src/app/journal/journal-spellcards/add-card/add-card.component.spec.ts

@@ -8,10 +8,9 @@ describe('AddCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AddCardComponent]
-    })
-    .compileComponents();
-    
+      declarations: [AddCardComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(AddCardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -24,13 +24,13 @@ export class AddCardComponent {
 
   public constructor(
     private spellsAccessor: SpellsService,
-    private dataAccessor: DataService
+    private dataAccessor: DataService,
   ) {}
 
   public ngOnInit(): void {
     this.allAvailableSpells = this.spellsAccessor.getAvailableSpells(
       this.level,
-      this.dataAccessor.characterData.class
+      this.dataAccessor.characterData.class,
     );
     this.filterSpellArray();
     this.spellsAccessor.closeSubject$.subscribe((level) => {
@@ -58,7 +58,7 @@ export class AddCardComponent {
   public continueToSpellSelection(modify: boolean): void {
     this.allAvailableSpells = this.spellsAccessor.getAvailableSpells(
       this.level,
-      this.dataAccessor.characterData.class
+      this.dataAccessor.characterData.class,
     );
     this.filterSpellArray();
     this.isModification = modify;
@@ -95,11 +95,11 @@ export class AddCardComponent {
             spell.english
               .toLowerCase()
               .includes(this.newSpellName.toLowerCase())) &&
-          !this.alreadyUsedSpells.includes(spell.id)
+          !this.alreadyUsedSpells.includes(spell.id),
       );
     } else {
       this.availableSpells = this.allAvailableSpells.filter(
-        (spell) => !this.alreadyUsedSpells.includes(spell.id)
+        (spell) => !this.alreadyUsedSpells.includes(spell.id),
       );
     }
   }
@@ -111,7 +111,7 @@ export class AddCardComponent {
           spell.german
             .toLowerCase()
             .includes(this.newSpellName.toLowerCase()) ||
-          spell.english.toLowerCase().includes(this.newSpellName.toLowerCase())
+          spell.english.toLowerCase().includes(this.newSpellName.toLowerCase()),
       );
     } else {
       this.availableSpells = this.allAvailableSpells;

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

@@ -2,16 +2,15 @@
   <div class="content">
     <div class="title">Eigene Zauber verwalten</div>
     <div class="spell-list">
-      @for(spell of spells; let index = $index; track spell){
-
-      <div
-        matRipple
-        class="spell"
-        [ngClass]="{ selected: indexList.includes(index) }"
-        (click)="toggleSpellSelection(index)"
-      >
-        {{ spell.german }}
-      </div>
+      @for (spell of spells; let index = $index; track spell) {
+        <div
+          matRipple
+          class="spell"
+          [ngClass]="{ selected: indexList.includes(index) }"
+          (click)="toggleSpellSelection(index)"
+        >
+          {{ spell.german }}
+        </div>
       }
     </div>
   </div>

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

@@ -1,60 +1,60 @@
 .dimensions {
-    width: 35rem;
-    height: 45rem;
-    padding: 0;
+  width: 35rem;
+  height: 45rem;
+  padding: 0;
 }
 
 .title {
-    box-shadow: var(--shadow-bottom);
-    padding: 1.5rem 0 1rem 0;
-    margin-top: 0;
+  box-shadow: var(--shadow-bottom);
+  padding: 1.5rem 0 1rem 0;
+  margin-top: 0;
 }
 
 .content {
-    margin: 0;
+  margin: 0;
 }
 
 .spell-list {
-    height: 32rem;
-    padding: 1rem 1rem 0 1rem;
-    overflow-y: auto;
-    gap: 0.5rem;
+  height: 32rem;
+  padding: 1rem 1rem 0 1rem;
+  overflow-y: auto;
+  gap: 0.5rem;
 }
 
 .spell {
-    height: 3rem;
-    padding: 15px 10px;
-    margin-bottom: 0.5rem;
-    color: rgba(0, 0, 0, 0.87);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--items);
-    border-radius: 10px;
-    border: var(--border);
-    font-size: 1rem;
-    font-weight: 600;
-    // text-align: center;
-    cursor: pointer;
-    box-shadow:
-        0 5px 5px -3px rgba(0, 0, 0, 0.2),
-        0 8px 8px 1px rgba(0, 0, 0, 0.14),
-        0 3px 10px 2px rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s ease-in-out;
-    &:hover {
-        background-color: #f8d8c6;
-    }
+  height: 3rem;
+  padding: 15px 10px;
+  margin-bottom: 0.5rem;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--items);
+  border-radius: 10px;
+  border: var(--border);
+  font-size: 1rem;
+  font-weight: 600;
+  // text-align: center;
+  cursor: pointer;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 8px 1px rgba(0, 0, 0, 0.14),
+    0 3px 10px 2px rgba(0, 0, 0, 0.12);
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    background-color: #f8d8c6;
+  }
 }
 
 .selected {
-    background-color: #f8d8c6;
-    box-sizing: border-box;
-    border: 3px solid var(--primary);
-    &:hover {
-        background-color: var(--items);
-    }
+  background-color: #f8d8c6;
+  box-sizing: border-box;
+  border: 3px solid var(--primary);
+  &:hover {
+    background-color: var(--items);
+  }
 }
 
 .horizontal-buttons {
-    box-shadow: var(--shadow-top);
+  box-shadow: var(--shadow-top);
 }

src/app/journal/journal-spellcards/custom-spells-modal/custom-spells-modal.component.spec.ts

@@ -8,10 +8,9 @@ describe('CustomSpellsModalComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CustomSpellsModalComponent]
-    })
-    .compileComponents();
-    
+      declarations: [CustomSpellsModalComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(CustomSpellsModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -5,61 +5,63 @@
 
   <div cdkDropListGroup>
     <!-- TODO: revert array to 0-9 -->
-    @for(level of [0,1,2,3]; track level; let index = $index) {
-
-    <div class="example-container">
-      <div
-        [class]="showSpellList[index] ? 'level-row' : 'level-row collapsed'"
-        (click)="toggleSpellList(index)"
-      >
-        <div class="level-flex">
-          <icon
-            [size]="'l'"
-            [type]="'UI'"
-            [icon]="showSpellList[index] ? 'visible' : 'hidden'"
-            [class]="'pointer'"
-            class="inline"
-          ></icon>
-          <div class="heading-2 inline">{{ getSpellLevel(index) }}</div>
+    @for (level of [0, 1, 2, 3]; track level; let index = $index) {
+      <div class="example-container">
+        <div
+          [class]="showSpellList[index] ? 'level-row' : 'level-row collapsed'"
+          (click)="toggleSpellList(index)"
+        >
+          <div class="level-flex">
+            <icon
+              [size]="'l'"
+              [type]="'UI'"
+              [icon]="showSpellList[index] ? 'visible' : 'hidden'"
+              [class]="'pointer'"
+              class="inline"
+            ></icon>
+            <div class="heading-2 inline">{{ getSpellLevel(index) }}</div>
+          </div>
         </div>
-      </div>
 
-      <div
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="getSpellList(index)"
-        class="spell-list"
-        (cdkDropListDropped)="drop($event)"
-        [class]="showSpellList[index] ? '' : 'hidden'"
-      >
-        @for (spell of getSpellList(index); let spellIndex = $index; track
-        spell) {
-        <spellcard
-          cdkDrag
-          [id]="spellIndex"
-          (cdkDragStarted)="dragStart(index)"
-          (cdkDragReleased)="dragEnd($event)"
-          [spell]="spell"
-          (click)="showFullSpellcard(spell, level, spellIndex)"
-        ></spellcard>
-        } @if (draggingIndex === index){
-        <div class="removal-card" [id]="'deletion' + index">
-          Hier zum Löschen ablegen
+        <div
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          [cdkDropListData]="getSpellList(index)"
+          class="spell-list"
+          (cdkDropListDropped)="drop($event)"
+          [class]="showSpellList[index] ? '' : 'hidden'"
+        >
+          @for (
+            spell of getSpellList(index);
+            let spellIndex = $index;
+            track spell
+          ) {
+            <spellcard
+              cdkDrag
+              [id]="spellIndex"
+              (cdkDragStarted)="dragStart(index)"
+              (cdkDragReleased)="dragEnd($event)"
+              [spell]="spell"
+              (click)="showFullSpellcard(spell, level, spellIndex)"
+            ></spellcard>
+          }
+          @if (draggingIndex === index) {
+            <div class="removal-card" [id]="'deletion' + index">
+              Hier zum Löschen ablegen
+            </div>
+          } @else {
+            <add-card
+              [level]="index"
+              [alreadyUsedSpells]="getUsedIDs(index)"
+              (createNewSpell)="openSpellCreationModal(index, false)"
+              (createNewSpellFromOfficial)="
+                openSpellCreationModal(index, true, $event)
+              "
+              (onSpellSelected)="addSpellToSpelllist($event, index)"
+            ></add-card>
+          }
         </div>
-        } @else {
-        <add-card
-          [level]="index"
-          [alreadyUsedSpells]="getUsedIDs(index)"
-          (createNewSpell)="openSpellCreationModal(index, false)"
-          (createNewSpellFromOfficial)="
-            openSpellCreationModal(index, true, $event)
-          "
-          (onSpellSelected)="addSpellToSpelllist($event, index)"
-        ></add-card>
-        }
       </div>
-    </div>
-
     }
   </div>
 </div>

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

@@ -8,7 +8,7 @@ describe('JournalSpellcardsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [JournalSpellcardsComponent]
+      declarations: [JournalSpellcardsComponent],
     });
     fixture = TestBed.createComponent(JournalSpellcardsComponent);
     component = fixture.componentInstance;

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

@@ -47,7 +47,7 @@ export class JournalSpellcardsComponent {
   public constructor(
     private dataAccessor: DataService,
     private modalAccessor: ModalService,
-    public spellsService: SpellsService
+    public spellsService: SpellsService,
   ) {
     this.loadSpells();
     this.hideEmptySpelllists();
@@ -66,11 +66,11 @@ export class JournalSpellcardsComponent {
   public showFullSpellcard(
     spell: Spell,
     level: number,
-    spellIndex: number
+    spellIndex: number,
   ): void {
     const favorites = this.dataAccessor.favoriteSpells;
     const alreadyInFavorites = favorites.some(
-      (currentSpell) => currentSpell.id === spell.id
+      (currentSpell) => currentSpell.id === spell.id,
     );
     this.modalAccessor.openModal(FullSpellcardComponent, {
       spell: spell,
@@ -97,7 +97,7 @@ export class JournalSpellcardsComponent {
         } else if (result.state === 'add') {
           this.dataAccessor.addFavoriteSpell(spell);
         }
-      }
+      },
     );
   }
 
@@ -129,7 +129,7 @@ export class JournalSpellcardsComponent {
           }
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -144,7 +144,7 @@ export class JournalSpellcardsComponent {
   public openSpellCreationModal(
     level: number,
     isBasedOnOfficialSpell: boolean,
-    spell?: Spell
+    spell?: Spell,
   ): void {
     this.modalAccessor.openModal(SpellModalComponent, {
       spell: isBasedOnOfficialSpell ? spell : undefined,
@@ -162,7 +162,7 @@ export class JournalSpellcardsComponent {
         } else {
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -183,7 +183,7 @@ export class JournalSpellcardsComponent {
           });
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -310,7 +310,7 @@ export class JournalSpellcardsComponent {
       moveItemInArray(
         event.container.data,
         event.previousIndex,
-        event.currentIndex
+        event.currentIndex,
       );
       this.updateSpellsInDatabase(this.getIndex(event.previousContainer.id));
       // update database with one level
@@ -319,7 +319,7 @@ export class JournalSpellcardsComponent {
         event.previousContainer.data,
         event.container.data,
         event.previousIndex,
-        event.currentIndex
+        event.currentIndex,
       );
       this.updateSpellsInDatabase(this.getIndex(event.previousContainer.id));
 
@@ -438,7 +438,7 @@ export class JournalSpellcardsComponent {
     if (event.event.target.classList.contains('removal-card')) {
       this.getSpellList(this.draggingIndex!).splice(
         event.source.element.nativeElement.id,
-        1
+        1,
       );
       this.updateSpellsInDatabase(this.draggingIndex!);
     }

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

@@ -1,110 +1,162 @@
 .card-container {
-    width: 15rem;
-    height: 20rem;
-    border-radius: 10px;
-    border: 1px solid black;
-    box-sizing: border-box;
-    box-shadow: var(--shadow);
-    background: #171314;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  width: 15rem;
+  height: 20rem;
+  border-radius: 10px;
+  border: 1px solid black;
+  box-sizing: border-box;
+  box-shadow: var(--shadow);
+  background: #171314;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .card-background {
-    height: 86%;
-    width: calc(100% - 20px);
-    margin: 10px;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-    border-bottom-left-radius: 8%;
-    border-bottom-right-radius: 8%;
-    background-color: #863f57;
-    background-image: repeating-linear-gradient(140deg, transparent, rgba(255, 255, 255, 0.25) 1%, transparent 20%),
-        repeating-linear-gradient(-30deg, transparent, transparent 8%, rgba(255, 255, 255, 0.4), transparent 9%),
-        repeating-linear-gradient(-10deg, transparent, transparent 13%, rgba(0, 0, 0, 0.4), transparent 15%),
-        repeating-linear-gradient(80deg, transparent, transparent 7.5%, rgba(0, 0, 0, 0.25), transparent 8%),
-        repeating-linear-gradient(5deg, transparent, transparent 10.5%, rgba(255, 255, 255, 0.5), transparent 11%),
-        repeating-linear-gradient(75deg, transparent, transparent 11.5%, rgba(255, 255, 255, 0.5), transparent 12%),
-        repeating-radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1%, transparent 1%, transparent 5%);
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 0;
-    position: absolute;
+  height: 86%;
+  width: calc(100% - 20px);
+  margin: 10px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-left-radius: 8%;
+  border-bottom-right-radius: 8%;
+  background-color: #863f57;
+  background-image: repeating-linear-gradient(
+      140deg,
+      transparent,
+      rgba(255, 255, 255, 0.25) 1%,
+      transparent 20%
+    ),
+    repeating-linear-gradient(
+      -30deg,
+      transparent,
+      transparent 8%,
+      rgba(255, 255, 255, 0.4),
+      transparent 9%
+    ),
+    repeating-linear-gradient(
+      -10deg,
+      transparent,
+      transparent 13%,
+      rgba(0, 0, 0, 0.4),
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      80deg,
+      transparent,
+      transparent 7.5%,
+      rgba(0, 0, 0, 0.25),
+      transparent 8%
+    ),
+    repeating-linear-gradient(
+      5deg,
+      transparent,
+      transparent 10.5%,
+      rgba(255, 255, 255, 0.5),
+      transparent 11%
+    ),
+    repeating-linear-gradient(
+      75deg,
+      transparent,
+      transparent 11.5%,
+      rgba(255, 255, 255, 0.5),
+      transparent 12%
+    ),
+    repeating-radial-gradient(
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0.2) 1%,
+      transparent 1%,
+      transparent 5%
+    );
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: 0;
+  position: absolute;
 }
 
 .title {
-    border-bottom: 4px solid #a9a9a9;
-    border-left: 2px solid #a9a9a9;
-    border-top: 1px solid #fff;
-    border-right: 1px solid #fff;
-    background: linear-gradient(0deg, rgba(201, 216, 201, 0.3), rgba(201, 216, 209, 0.3)),
-        url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
-    margin-top: 20px;
-    height: 2.25rem;
-    width: 12.5rem;
-    text-align: center;
-    border-radius: 18px/40px;
-    margin-bottom: 7px;
-    overflow: hidden;
-    font-size: 1.25em;
-    font-weight: 600;
-    z-index: 3;
+  border-bottom: 4px solid #a9a9a9;
+  border-left: 2px solid #a9a9a9;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #fff;
+  background: linear-gradient(
+      0deg,
+      rgba(201, 216, 201, 0.3),
+      rgba(201, 216, 209, 0.3)
+    ),
+    url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
+  margin-top: 20px;
+  height: 2.25rem;
+  width: 12.5rem;
+  text-align: center;
+  border-radius: 18px/40px;
+  margin-bottom: 7px;
+  overflow: hidden;
+  font-size: 1.25em;
+  font-weight: 600;
+  z-index: 3;
 }
 
 .spell-image {
-    margin-top: -5px;
-    width: 12rem;
-    height: 12rem;
-    margin-bottom: 7px;
-    z-index: 2;
+  margin-top: -5px;
+  width: 12rem;
+  height: 12rem;
+  margin-bottom: 7px;
+  z-index: 2;
 }
 
 .info {
-    border-bottom: 4px solid #a9a9a9;
-    border-left: 2px solid #a9a9a9;
-    border-top: 1px solid #fff;
-    border-right: 1px solid #fff;
-    background: linear-gradient(0deg, rgba(201, 216, 201, 0.3), rgba(201, 216, 209, 0.3)),
-        url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
-    margin-top: -5px;
-    height: 2.5rem;
-    width: 12.5rem;
-    text-align: center;
-    border-radius: 18px/40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 0.5rem;
-    // box-shadow:
-    //     0 0 0 2px #171314,
-    //     0 0 0 5px #26714a;
-    font-size: 1.25em;
-    font-weight: 600;
-    z-index: 2;
-    display: flex;
+  border-bottom: 4px solid #a9a9a9;
+  border-left: 2px solid #a9a9a9;
+  border-top: 1px solid #fff;
+  border-right: 1px solid #fff;
+  background: linear-gradient(
+      0deg,
+      rgba(201, 216, 201, 0.3),
+      rgba(201, 216, 209, 0.3)
+    ),
+    url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
+  margin-top: -5px;
+  height: 2.5rem;
+  width: 12.5rem;
+  text-align: center;
+  border-radius: 18px/40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 0.5rem;
+  // box-shadow:
+  //     0 0 0 2px #171314,
+  //     0 0 0 5px #26714a;
+  font-size: 1.25em;
+  font-weight: 600;
+  z-index: 2;
+  display: flex;
 }
 
 .school {
-    font-size: 0.875rem;
+  font-size: 0.875rem;
 }
 
 .level {
-    background: linear-gradient(0deg, rgba(201, 216, 201, 0.3), rgba(201, 216, 209, 0.3)),
-        url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
-    box-shadow:
-        0 0 0 2px #171314,
-        0 0 0 5px #26714a;
-    border-radius: 100%;
-    margin-top: 0.125rem;
-    height: 3rem;
-    width: 3rem;
-    font-size: 1.5rem;
-    font-weight: 600;
-    z-index: 3;
-    transform: translateX(0.25rem);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  background: linear-gradient(
+      0deg,
+      rgba(201, 216, 201, 0.3),
+      rgba(201, 216, 209, 0.3)
+    ),
+    url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
+  box-shadow:
+    0 0 0 2px #171314,
+    0 0 0 5px #26714a;
+  border-radius: 100%;
+  margin-top: 0.125rem;
+  height: 3rem;
+  width: 3rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  z-index: 3;
+  transform: translateX(0.25rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -8,10 +8,9 @@ describe('SpellcardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SpellcardComponent]
-    })
-    .compileComponents();
-    
+      declarations: [SpellcardComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SpellcardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/ability-panel/ability-panel.component.html

@@ -29,13 +29,18 @@
       Übungen
     </button>
   </div>
-  @switch(active){ @case(1){
-  <ability-table #abilityTable></ability-table>
-  } @case(2){
-  <trait-table #traitTable></trait-table>
-  } @case(3){
-  <spellslots-table #spellslots></spellslots-table>
-  } @case(4){
-  <proficiencies-table #proficienciesTable></proficiencies-table>
-  } }
+  @switch (active) {
+    @case (1) {
+      <ability-table #abilityTable></ability-table>
+    }
+    @case (2) {
+      <trait-table #traitTable></trait-table>
+    }
+    @case (3) {
+      <spellslots-table #spellslots></spellslots-table>
+    }
+    @case (4) {
+      <proficiencies-table #proficienciesTable></proficiencies-table>
+    }
+  }
 </div>

src/app/journal/journal-stats/ability-panel/ability-panel.component.scss

@@ -1,87 +1,87 @@
 .ability-panel-container {
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    height: 48.125rem;
-    display: flex;
-    flex-direction: column;
-    @media (height < 934px) {
-        height: 43.625rem;
-    }
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  height: 48.125rem;
+  display: flex;
+  flex-direction: column;
+  @media (height < 934px) {
+    height: 43.625rem;
+  }
 }
 
 .tab-row {
-    display: flex;
-    flex: 0 0 3rem;
-    box-shadow: var(--shadow-bottom);
-    border-radius: 10px;
-    > * {
-        flex: 1 1 0;
-    }
-    > :first-child {
-        border-radius: 10px 0 0 0;
-        border-right: 1px solid var(--border-color);
-    }
-    > :nth-child(2) {
-        border-left: 1px solid var(--border-color);
-        border-right: 1px solid var(--border-color);
-    }
-    > :nth-child(3) {
-        border-left: 1px solid var(--border-color);
-        border-right: 1px solid var(--border-color);
-    }
-    > :last-child {
-        border-radius: 0 10px 0 0;
-        border-left: 1px solid var(--border-color);
-    }
+  display: flex;
+  flex: 0 0 3rem;
+  box-shadow: var(--shadow-bottom);
+  border-radius: 10px;
+  > * {
+    flex: 1 1 0;
+  }
+  > :first-child {
+    border-radius: 10px 0 0 0;
+    border-right: 1px solid var(--border-color);
+  }
+  > :nth-child(2) {
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+  > :nth-child(3) {
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+  > :last-child {
+    border-radius: 0 10px 0 0;
+    border-left: 1px solid var(--border-color);
+  }
 }
 
 .tab-button {
-    height: 3rem;
-    font-size: 1.375rem;
-    font-weight: 600;
-    color: black;
-    border-bottom: solid 1px var(--border-color);
-    border-right: 0;
-    border-left: 0;
-    border-top: 0;
-    transition: all 0.25s ease-in-out;
-    background-color: var(--tab);
-    // box-shadow: var(--shadow-bottom);
+  height: 3rem;
+  font-size: 1.375rem;
+  font-weight: 600;
+  color: black;
+  border-bottom: solid 1px var(--border-color);
+  border-right: 0;
+  border-left: 0;
+  border-top: 0;
+  transition: all 0.25s ease-in-out;
+  background-color: var(--tab);
+  // box-shadow: var(--shadow-bottom);
 
-    &.active {
-        background-color: var(--tab-active);
-        border-bottom: 3px solid var(--border-color);
-    }
+  &.active {
+    background-color: var(--tab-active);
+    border-bottom: 3px solid var(--border-color);
+  }
 }
 
 .footer {
-    height: 5rem;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 0 0 10px 10px;
-    box-shadow: var(--shadow-top);
+  height: 5rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0 0 10px 10px;
+  box-shadow: var(--shadow-top);
 
-    button {
-        height: 3rem;
-        width: 80%;
-        border-radius: 10px;
-        background: var(--accept);
-        transition: background-color 0.2s ease-in-out;
-        box-shadow: var(--shadow);
+  button {
+    height: 3rem;
+    width: 80%;
+    border-radius: 10px;
+    background: var(--accept);
+    transition: background-color 0.2s ease-in-out;
+    box-shadow: var(--shadow);
 
-        &:hover {
-            background-color: var(--accept-hover);
-        }
+    &:hover {
+      background-color: var(--accept-hover);
     }
+  }
 }
 
 ability-table,
 trait-table,
 spellslots-table,
 proficiencies-table {
-    flex: 0 0 calc(100% - 3rem);
+  flex: 0 0 calc(100% - 3rem);
 }

src/app/journal/journal-stats/ability-panel/ability-panel.component.spec.ts

@@ -8,7 +8,7 @@ describe('AbilityPanelComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AbilityPanelComponent]
+      declarations: [AbilityPanelComponent],
     });
     fixture = TestBed.createComponent(AbilityPanelComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.scss

@@ -1,9 +1,9 @@
 .details-cost-charge {
-    display: flex;
-    background-color: var(--secondary-color);
-    justify-content: space-between;
-    margin: 0, 875rem;
-    font-size: 600;
-    padding: 0.5rem 2rem;
-    border-radius: 10px;
+  display: flex;
+  background-color: var(--secondary-color);
+  justify-content: space-between;
+  margin: 0, 875rem;
+  font-size: 600;
+  padding: 0.5rem 2rem;
+  border-radius: 10px;
 }

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.spec.ts

@@ -8,7 +8,7 @@ describe('AbilityDetailsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AbilityDetailsComponent]
+      declarations: [AbilityDetailsComponent],
     });
     fixture = TestBed.createComponent(AbilityDetailsComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.html

@@ -1,6 +1,11 @@
 <div class="dimensions">
   <div class="title">
-    Fähigkeit @if(isUpdate && !isAddedFromCharacter){anpassen}@else{erstellen}
+    Fähigkeit
+    @if (isUpdate && !isAddedFromCharacter) {
+      anpassen
+    } @else {
+      erstellen
+    }
   </div>
 
   <div class="flex-form t-15">
@@ -47,8 +52,8 @@
           <!-- <mat-label>Kosten</mat-label> -->
           <mat-select [(ngModel)]="cost">
             @for (cost of costs; track cost) {
-            <mat-option [value]="cost.value">{{ cost.display }}</mat-option
-            >}
+              <mat-option [value]="cost.value">{{ cost.display }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -59,22 +64,24 @@
           <!-- <mat-label>Nutzungen</mat-label> -->
           <mat-select [(ngModel)]="charges">
             @for (charge of chargesTranslator; track charge) {
-            <mat-option [value]="charge.value">{{ charge.display }}</mat-option
-            >}
+              <mat-option [value]="charge.value">{{
+                charge.display
+              }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
     </div>
 
     <div class="horizontal-buttons">
-      @if(isUpdate && !isAddedFromCharacter){
-      <ui-button [color]="'green'" style="width: 45%" (click)="update()"
-        >Aktualisieren</ui-button
-      >
-      }@else{
-      <ui-button [color]="'green'" style="width: 45%" (click)="add()"
-        >Hinzufügen</ui-button
-      >
+      @if (isUpdate && !isAddedFromCharacter) {
+        <ui-button [color]="'green'" style="width: 45%" (click)="update()"
+          >Aktualisieren</ui-button
+        >
+      } @else {
+        <ui-button [color]="'green'" style="width: 45%" (click)="add()"
+          >Hinzufügen</ui-button
+        >
       }
       <ui-button [color]="'red'" style="width: 45%" (click)="cancel()"
         >Abbrechen</ui-button

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.scss

@@ -1,8 +1,8 @@
 .dimensions {
-    width: 50rem;
-    background-color: var(--modal-background);
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    box-shadow: var(--shadow);
-    padding: 0 2rem;
+  width: 50rem;
+  background-color: var(--modal-background);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+  padding: 0 2rem;
 }

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.spec.ts

@@ -8,7 +8,7 @@ describe('AbilityModalComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AbilityModalComponent]
+      declarations: [AbilityModalComponent],
     });
     fixture = TestBed.createComponent(AbilityModalComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.html

@@ -1,41 +1,46 @@
 <div class="ability-box">
   <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)">
     <!-- ITEMS -->
-    @for(ability of abilities; let index = $index; track ability){
-    <div
-      class="item"
-      [class]="
-        ability.currentlyUsedCharges === ability.charges &&
-        ability.charges !== 0
-          ? 'used'
-          : ''
-      "
-      (click)="openDetailsPanel(index)"
-      cdkDrag
-    >
-      <div class="header">
-        <div class="name">{{ ability.name }}</div>
-        <div class="cost">{{ costTranslator[ability.cost] }}</div>
-      </div>
+    @for (ability of abilities; let index = $index; track ability) {
+      <div
+        class="item"
+        [class]="
+          ability.currentlyUsedCharges === ability.charges &&
+          ability.charges !== 0
+            ? 'used'
+            : ''
+        "
+        (click)="openDetailsPanel(index)"
+        cdkDrag
+      >
+        <div class="header">
+          <div class="name">{{ ability.name }}</div>
+          <div class="cost">{{ costTranslator[ability.cost] }}</div>
+        </div>
 
-      <p [innerHTML]="ability.shortDescription"></p>
+        <p [innerHTML]="ability.shortDescription"></p>
 
-      <div class="charges-box" *ngIf="ability.charges != 0">
-        Nutzungen: @for(_ of getArray(ability.charges); let chargeIndex =
-        $index; track _){
-        <input
-          [id]="'checkbox' + index + '-' + chargeIndex"
-          type="checkbox"
-          (click)="$event.stopPropagation()"
-          (change)="
-            $event.stopPropagation(); handleChangedCharges(index, $event.target)
-          "
-        />
-        }
+        <div class="charges-box" *ngIf="ability.charges != 0">
+          Nutzungen:
+          @for (
+            _ of getArray(ability.charges);
+            let chargeIndex = $index;
+            track _
+          ) {
+            <input
+              [id]="'checkbox' + index + '-' + chargeIndex"
+              type="checkbox"
+              (click)="$event.stopPropagation()"
+              (change)="
+                $event.stopPropagation();
+                handleChangedCharges(index, $event.target)
+              "
+            />
+          }
+        </div>
       </div>
-    </div>
-    }@empty{
-    <div class="empty-list">Noch keine Fähigkeit hinzugefügt</div>
+    } @empty {
+      <div class="empty-list">Noch keine Fähigkeit hinzugefügt</div>
     }
   </div>
   <div class="footer">

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.spec.ts

@@ -8,7 +8,7 @@ describe('AbilityTableComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AbilityTableComponent]
+      declarations: [AbilityTableComponent],
     });
     fixture = TestBed.createComponent(AbilityTableComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.ts

@@ -35,7 +35,7 @@ export class AbilityTableComponent {
   public constructor(
     public dataAccessor: DataService,
     private detailsAccessor: DetailsService,
-    private modalAccessor: ModalService
+    private modalAccessor: ModalService,
   ) {}
 
   public ngOnInit(): void {
@@ -66,7 +66,7 @@ export class AbilityTableComponent {
           this.addAbility(result.data);
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -95,7 +95,7 @@ export class AbilityTableComponent {
       setTimeout(() => {
         (
           document.getElementById(
-            'checkbox' + abilityIndex + '-' + chargeIndex
+            'checkbox' + abilityIndex + '-' + chargeIndex,
           ) as HTMLInputElement
         ).checked = true;
       });
@@ -108,7 +108,7 @@ export class AbilityTableComponent {
       setTimeout(() => {
         (
           document.getElementById(
-            'checkbox' + abilityIndex + '-' + chargeIndex
+            'checkbox' + abilityIndex + '-' + chargeIndex,
           ) as HTMLInputElement
         ).checked = false;
       });
@@ -151,7 +151,7 @@ export class AbilityTableComponent {
           this.openModal(true, index);
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

src/app/journal/journal-stats/ability-panel/proficiencies-table/proficiencies-table.component.spec.ts

@@ -8,7 +8,7 @@ describe('ProficienciesTableComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ProficienciesTableComponent]
+      declarations: [ProficienciesTableComponent],
     });
     fixture = TestBed.createComponent(ProficienciesTableComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/proficiencies-table/proficiencies-table.component.ts

@@ -27,7 +27,7 @@ export class ProficienciesTableComponent {
   public constructor(
     public dataAccessor: DataService,
     public modalAccessor: ModalService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
   ) {}
 
   public ngOnInit(): void {
@@ -39,7 +39,7 @@ export class ProficienciesTableComponent {
     moveItemInArray(
       this.proficiencies.get('tools')!.value,
       event.previousIndex,
-      event.currentIndex
+      event.currentIndex,
     );
     this.updateDatabase();
   }
@@ -48,7 +48,7 @@ export class ProficienciesTableComponent {
     moveItemInArray(
       this.proficiencies.get('languages')!.value,
       event.previousIndex,
-      event.currentIndex
+      event.currentIndex,
     );
     this.updateDatabase();
   }
@@ -66,7 +66,7 @@ export class ProficienciesTableComponent {
           // Do nothing
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -83,7 +83,7 @@ export class ProficienciesTableComponent {
     this.proficiencies.setControl('tools', this.formBuilder.array(tools));
     this.proficiencies.setControl(
       'languages',
-      this.formBuilder.array(languages)
+      this.formBuilder.array(languages),
     );
   }
 }

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.html

@@ -2,34 +2,40 @@
   <div class="title">Sprachen und Werkzeuge hinzufügen</div>
   <div class="heading left b-05">Sprachen</div>
   <div style="display: flex; flex-direction: column; gap: 0.5rem">
-    @for(tool of proficiencies.languages; let languageIndex = $index; track
-    tool){
-    <div class="item-row">
-      <mat-form-field appearance="outline">
-        <input matInput [(ngModel)]="proficiencies.languages[languageIndex]" />
-      </mat-form-field>
-      <icon-button
-        [icon]="'delete'"
-        (click)="deleteLanguage(languageIndex)"
-      ></icon-button>
-    </div>
+    @for (
+      tool of proficiencies.languages;
+      let languageIndex = $index;
+      track tool
+    ) {
+      <div class="item-row">
+        <mat-form-field appearance="outline">
+          <input
+            matInput
+            [(ngModel)]="proficiencies.languages[languageIndex]"
+          />
+        </mat-form-field>
+        <icon-button
+          [icon]="'delete'"
+          (click)="deleteLanguage(languageIndex)"
+        ></icon-button>
+      </div>
     }
     <icon-button [icon]="'add'" (click)="addLanguage()"></icon-button>
   </div>
 
   <div class="heading left b-05">Werkzeuge</div>
   <div style="display: flex; flex-direction: column; gap: 0.5rem">
-    @for(tool of proficiencies.tools; let toolIndex = $index; track tool){
-    <div class="item-row">
-      <mat-form-field appearance="outline">
-        <input matInput [(ngModel)]="proficiencies.tools[toolIndex]" />
-      </mat-form-field>
-      <icon-button
-        style="margin-left: 0.25rem"
-        [icon]="'delete'"
-        (click)="deleteTool(toolIndex)"
-      ></icon-button>
-    </div>
+    @for (tool of proficiencies.tools; let toolIndex = $index; track tool) {
+      <div class="item-row">
+        <mat-form-field appearance="outline">
+          <input matInput [(ngModel)]="proficiencies.tools[toolIndex]" />
+        </mat-form-field>
+        <icon-button
+          style="margin-left: 0.25rem"
+          [icon]="'delete'"
+          (click)="deleteTool(toolIndex)"
+        ></icon-button>
+      </div>
     }
     <icon-button [icon]="'add'" (click)="addTool()"></icon-button>
   </div>

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.spec.ts

@@ -8,7 +8,7 @@ describe('ToolsModalComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ToolsModalComponent]
+      declarations: [ToolsModalComponent],
     });
     fixture = TestBed.createComponent(ToolsModalComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.ts

@@ -24,14 +24,14 @@ export class ToolsModalComponent {
     moveItemInArray(
       this.proficiencies.tools,
       event.previousIndex,
-      event.currentIndex
+      event.currentIndex,
     );
   }
   public dropLanguages(event: CdkDragDrop<string[]>): void {
     moveItemInArray(
       this.proficiencies.languages,
       event.previousIndex,
-      event.currentIndex
+      event.currentIndex,
     );
   }
   public addTool(): void {

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.html

@@ -1,57 +1,57 @@
 <div class="dimensions">
-  @if(!isMonk){
-  <div class="title">Zauberplätze</div>
-  <div class="content">
-    Hier kann die Anzahl der verfügbaren Zauberplätze je Zauberstufe angepasst
-    werden
-  </div>
-  <mat-slide-toggle
-    class="t-1"
-    [checked]="showSpellslots"
-    (change)="onSpellslotsSwitchChanged($event)"
-    >Zauberplätze in der Übersicht anzeigen
-  </mat-slide-toggle>
-  <!-- Zauberplätze in der Übersicht anzeigen -->
-  @if(showSpellslots){
-  <div class="t-1">
-    @for(level of spellslots; let levelIndex = $index; track level){
-    <div class="t-05">
-      Level {{ levelIndex + 1 }}
-      <select
-        [(ngModel)]="spellslots[levelIndex].totalSlots"
-        style="padding-left: 0.5rem"
-      >
-        <option *ngFor="let number of spellNumbersArray" [value]="number">
-          {{ number }}
-        </option>
-      </select>
-      <icon-button
-        style="display: inline; margin-left: 0.25rem"
-        [icon]="'delete'"
-        (click)="removeSpellLevel(levelIndex)"
-      ></icon-button>
+  @if (!isMonk) {
+    <div class="title">Zauberplätze</div>
+    <div class="content">
+      Hier kann die Anzahl der verfügbaren Zauberplätze je Zauberstufe angepasst
+      werden
     </div>
+    <mat-slide-toggle
+      class="t-1"
+      [checked]="showSpellslots"
+      (change)="onSpellslotsSwitchChanged($event)"
+      >Zauberplätze in der Übersicht anzeigen
+    </mat-slide-toggle>
+    <!-- Zauberplätze in der Übersicht anzeigen -->
+    @if (showSpellslots) {
+      <div class="t-1">
+        @for (level of spellslots; let levelIndex = $index; track level) {
+          <div class="t-05">
+            Level {{ levelIndex + 1 }}
+            <select
+              [(ngModel)]="spellslots[levelIndex].totalSlots"
+              style="padding-left: 0.5rem"
+            >
+              <option *ngFor="let number of spellNumbersArray" [value]="number">
+                {{ number }}
+              </option>
+            </select>
+            <icon-button
+              style="display: inline; margin-left: 0.25rem"
+              [icon]="'delete'"
+              (click)="removeSpellLevel(levelIndex)"
+            ></icon-button>
+          </div>
+        }
+      </div>
+      <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
     }
-  </div>
-  <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
-  } } @else{
-
-  <div class="title">KI-Punkte</div>
-  <mat-slide-toggle
-    [checked]="kiPoints.showKiPoints"
-    (change)="onKiPointsSwitchChanged($event)"
-    >KI Punkte in der Übersicht anzeigen
-  </mat-slide-toggle>
-  <div *ngIf="kiPoints.showKiPoints">
-    Verfügbare KI Punkte
-    <div>
-      <select [(ngModel)]="kiPoints.totalPoints">
-        <option *ngFor="let number of kiNumbersArray" [value]="number">
-          {{ number }}
-        </option>
-      </select>
+  } @else {
+    <div class="title">KI-Punkte</div>
+    <mat-slide-toggle
+      [checked]="kiPoints.showKiPoints"
+      (change)="onKiPointsSwitchChanged($event)"
+      >KI Punkte in der Übersicht anzeigen
+    </mat-slide-toggle>
+    <div *ngIf="kiPoints.showKiPoints">
+      Verfügbare KI Punkte
+      <div>
+        <select [(ngModel)]="kiPoints.totalPoints">
+          <option *ngFor="let number of kiNumbersArray" [value]="number">
+            {{ number }}
+          </option>
+        </select>
+      </div>
     </div>
-  </div>
   }
 
   <div class="horizontal-buttons">

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.scss

@@ -1,7 +1,7 @@
 .dimensions {
-    width: 35rem;
-    background-color: var(--modal-background);
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    padding: 0 2rem;
+  width: 35rem;
+  background-color: var(--modal-background);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  padding: 0 2rem;
 }

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.spec.ts

@@ -8,7 +8,7 @@ describe('SpellslotsModalComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SpellslotsModalComponent]
+      declarations: [SpellslotsModalComponent],
     });
     fixture = TestBed.createComponent(SpellslotsModalComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.ts

@@ -49,7 +49,7 @@ export class SpellslotsModalComponent {
     });
     this.kiPoints.usedPoints = Math.min(
       this.kiPoints.usedPoints,
-      this.kiPoints.totalPoints
+      this.kiPoints.totalPoints,
     );
     const updatedSlotsAndPoints: any = {
       spellslots: {
@@ -78,7 +78,7 @@ export class SpellslotsModalComponent {
   public update(): void {
     this.modalAccessor.handleModalClosing(
       'update',
-      this.updateSlotsandPoints()
+      this.updateSlotsandPoints(),
     );
   }
 }

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.html

@@ -14,55 +14,63 @@
       <div class="ki-add-buttons"></div>
     </div>
 
-    @if(showSpellslots){
-    <div class="spell-container">
-      <div
-        style="
-          font-size: 1.5rem;
-          padding: 1.25rem 0 0.5rem 1.5rem;
-          font-weight: 600;
-        "
-      >
-        Zauberplätze
-      </div>
-      @for(level of spellslots; let levelIndex = $index; track level){
-      <div
-        class="level-row"
-        [ngClass]="{ used: level.usedSlots == level.totalSlots }"
-      >
-        <div style="width: 6rem">Level {{ levelIndex + 1 }}:</div>
-        <div class="checkboxes">
-          @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
-          slotIndex = $index; track checkbox){
-          <input
-            [id]="'checkbox' + levelIndex + '-' + slotIndex"
-            type="checkbox"
-            (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
-          />
-          }
+    @if (showSpellslots) {
+      <div class="spell-container">
+        <div
+          style="
+            font-size: 1.5rem;
+            padding: 1.25rem 0 0.5rem 1.5rem;
+            font-weight: 600;
+          "
+        >
+          Zauberplätze
         </div>
+        @for (level of spellslots; let levelIndex = $index; track level) {
+          <div
+            class="level-row"
+            [ngClass]="{ used: level.usedSlots == level.totalSlots }"
+          >
+            <div style="width: 6rem">Level {{ levelIndex + 1 }}:</div>
+            <div class="checkboxes">
+              @for (
+                checkbox of getArray(spellslots[levelIndex].totalSlots);
+                let slotIndex = $index;
+                track checkbox
+              ) {
+                <input
+                  [id]="'checkbox' + levelIndex + '-' + slotIndex"
+                  type="checkbox"
+                  (change)="
+                    handleUsedSlots(levelIndex, slotIndex, $event.target)
+                  "
+                />
+              }
+            </div>
+          </div>
+        }
       </div>
-      }
-    </div>
 
-    <div class="value-row">
-      <value-box [value]="spellSaveDC" [label]="'Rettungswurf-SG'"></value-box>
-      <div>
-        <div class="value-box">
-          {{ attributeTranslator[spellcastingAttribute] }}
+      <div class="value-row">
+        <value-box
+          [value]="spellSaveDC"
+          [label]="'Rettungswurf-SG'"
+        ></value-box>
+        <div>
+          <div class="value-box">
+            {{ attributeTranslator[spellcastingAttribute] }}
+          </div>
+          <div class="value-label t-0375">Zauberwirken-Attribut</div>
         </div>
-        <div class="value-label t-0375">Zauberwirken-Attribut</div>
+        <value-box
+          [value]="spellAttackModifier"
+          [label]="'Zauber-Angriffsbonus'"
+        ></value-box>
+      </div>
+    }
+    @if (!kiPoints.showKiPoints && !showSpellslots) {
+      <div class="empty-list">
+        Noch keine {{ isMonk ? "Ki-Punkte" : "Zauberplätze" }} hinzugefügt
       </div>
-      <value-box
-        [value]="spellAttackModifier"
-        [label]="'Zauber-Angriffsbonus'"
-      ></value-box>
-    </div>
-
-    } @if(!kiPoints.showKiPoints && !showSpellslots){
-    <div class="empty-list">
-      Noch keine {{ isMonk ? "Ki-Punkte" : "Zauberplätze" }} hinzugefügt
-    </div>
     }
   </div>
   <!-- MODAL BUTTON -->

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.scss

@@ -1,85 +1,85 @@
 .slots-box {
-    height: 100%;
+  height: 100%;
 }
 
 .slots-container {
-    height: calc(100% - 5rem);
-    overflow: auto;
-    position: relative;
+  height: calc(100% - 5rem);
+  overflow: auto;
+  position: relative;
 }
 
 .spell-container {
-    margin: 15px 10px;
-    background-color: var(--items);
-    border: var(--border);
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    padding-bottom: 1.25rem;
+  margin: 15px 10px;
+  background-color: var(--items);
+  border: var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  padding-bottom: 1.25rem;
 
-    .level-row {
-        padding: 1rem 1.5rem 0 1.5rem;
-        display: flex;
-        font-size: 1.25rem;
-        font-weight: 600;
+  .level-row {
+    padding: 1rem 1.5rem 0 1.5rem;
+    display: flex;
+    font-size: 1.25rem;
+    font-weight: 600;
 
-        .checkboxes {
-            margin-left: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
+    .checkboxes {
+      margin-left: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
     }
+  }
 }
 
 .value-row {
-    position: absolute;
-    width: 100%;
-    bottom: 1.5rem;
+  position: absolute;
+  width: 100%;
+  bottom: 1.5rem;
 }
 
 .used {
-    opacity: 0.6;
+  opacity: 0.6;
 }
 
 input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border: 1px solid #000;
-    position: relative;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border: 1px solid #000;
+  position: relative;
 }
 
 input[type="checkbox"]:checked::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 12px;
-    height: 12px;
-    background: #815139;
-    transform: translate(-50%, -50%);
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background: #815139;
+  transform: translate(-50%, -50%);
 }
 
 .value-box {
-    max-width: 8rem;
-    padding: 0 0.25rem 0 0.25rem;
-    height: 2.75rem;
-    font-size: 1.5rem;
-    text-align: center;
-    border-radius: 10px;
-    border: none;
-    box-shadow: var(--shadow);
-    background-color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  max-width: 8rem;
+  padding: 0 0.25rem 0 0.25rem;
+  height: 2.75rem;
+  font-size: 1.5rem;
+  text-align: center;
+  border-radius: 10px;
+  border: none;
+  box-shadow: var(--shadow);
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .value-label {
-    width: 7rem;
-    font-weight: 500;
-    text-align: center;
+  width: 7rem;
+  font-weight: 500;
+  text-align: center;
 }

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.spec.ts

@@ -8,7 +8,7 @@ describe('SpellslotsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SpellslotsComponent]
+      declarations: [SpellslotsComponent],
     });
     fixture = TestBed.createComponent(SpellslotsComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.ts

@@ -33,7 +33,7 @@ export class SpellslotsComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    public modalAccessor: ModalService
+    public modalAccessor: ModalService,
   ) {
     this.isMonk = this.dataAccessor.characterData.class === 'Monk';
   }
@@ -74,7 +74,7 @@ export class SpellslotsComponent {
           this.updateSlotsAndPoints(result.data);
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -146,7 +146,7 @@ export class SpellslotsComponent {
   public handleUsedSlots(
     levelIndex: number,
     slotIndex: number,
-    eventTarget: any
+    eventTarget: any,
   ) {
     // if now checked, it means the slot was just used.
     if (eventTarget.checked) {
@@ -170,7 +170,7 @@ export class SpellslotsComponent {
       setTimeout(() => {
         (
           document.getElementById(
-            'checkbox' + levelIndex + '-' + slotIndex
+            'checkbox' + levelIndex + '-' + slotIndex,
           ) as HTMLInputElement
         ).checked = true;
       });
@@ -179,7 +179,7 @@ export class SpellslotsComponent {
       setTimeout(() => {
         (
           document.getElementById(
-            'checkbox' + levelIndex + '-' + slotIndex
+            'checkbox' + levelIndex + '-' + slotIndex,
           ) as HTMLInputElement
         ).checked = false;
       });

src/app/journal/journal-stats/ability-panel/trait-table/trait-details/trait-details.component.spec.ts

@@ -8,7 +8,7 @@ describe('TraitDetailsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TraitDetailsComponent]
+      declarations: [TraitDetailsComponent],
     });
     fixture = TestBed.createComponent(TraitDetailsComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.html

@@ -1,7 +1,10 @@
 <div class="dimensions">
   <div class="title">
-    @if(isUpdate && !isAddedFromCharacter){Eigenschaft apassen}
-    @else{Eigenschaft erstellen}
+    @if (isUpdate && !isAddedFromCharacter) {
+      Eigenschaft apassen
+    } @else {
+      Eigenschaft erstellen
+    }
   </div>
   <div class="flex-form t-15">
     <div>
@@ -40,14 +43,14 @@
     </div>
 
     <div class="horizontal-buttons">
-      @if(isUpdate && !isAddedFromCharacter){
-      <ui-button [color]="'green'" style="width: 45%" (click)="update()"
-        >Aktualisieren</ui-button
-      >
-      }@else{
-      <ui-button [color]="'green'" style="width: 45%" (click)="add()"
-        >Hinzufügen</ui-button
-      >
+      @if (isUpdate && !isAddedFromCharacter) {
+        <ui-button [color]="'green'" style="width: 45%" (click)="update()"
+          >Aktualisieren</ui-button
+        >
+      } @else {
+        <ui-button [color]="'green'" style="width: 45%" (click)="add()"
+          >Hinzufügen</ui-button
+        >
       }
       <ui-button [color]="'red'" style="width: 45%" (click)="cancel()"
         >Abbrechen</ui-button

src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.scss

@@ -1,5 +1,5 @@
 .modal-input {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }

src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.spec.ts

@@ -8,7 +8,7 @@ describe('TraitModalComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TraitModalComponent]
+      declarations: [TraitModalComponent],
     });
     fixture = TestBed.createComponent(TraitModalComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.html

@@ -1,13 +1,13 @@
 <div class="trait-box">
   <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)">
     <!--  ITEMS -->
-    @for(trait of traits; let index = $index; track trait){
-    <div class="item" (click)="openDetailsPanel(index)" cdkDrag>
-      <div class="name">{{ trait.name }}</div>
-      <p [innerHTML]="trait.shortDescription"></p>
-    </div>
-    }@empty{
-    <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
+    @for (trait of traits; let index = $index; track trait) {
+      <div class="item" (click)="openDetailsPanel(index)" cdkDrag>
+        <div class="name">{{ trait.name }}</div>
+        <p [innerHTML]="trait.shortDescription"></p>
+      </div>
+    } @empty {
+      <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
     }
   </div>
   <div class="footer">

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.spec.ts

@@ -8,7 +8,7 @@ describe('TraitTableComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TraitTableComponent]
+      declarations: [TraitTableComponent],
     });
     fixture = TestBed.createComponent(TraitTableComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.ts

@@ -26,7 +26,7 @@ export class TraitTableComponent {
   public constructor(
     public dataAccessor: DataService,
     public modalAccessor: ModalService,
-    private detailsAccesssor: DetailsService
+    private detailsAccesssor: DetailsService,
   ) {}
 
   public ngOnInit(): void {
@@ -51,7 +51,7 @@ export class TraitTableComponent {
           this.addTrait(result.data);
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -91,7 +91,7 @@ export class TraitTableComponent {
           this.openModal(true, index);
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-details/attribute-details.component.html

@@ -1,32 +1,44 @@
 <div>
-  @switch(attribute.name){ @case('strength'){
-  <ng-container [ngTemplateOutlet]="strengthTemplate"></ng-container> }
-  @case('dexterity'){
-  <ng-container [ngTemplateOutlet]="dexterityTemplate"></ng-container>
-  } @case('constitution'){
-  <ng-container [ngTemplateOutlet]="constitutionTemplate"></ng-container> }
-  @case('intelligence'){
-  <ng-container [ngTemplateOutlet]="intelligenceTemplate"></ng-container>
-  } @case ('wisdom'){
-  <ng-container [ngTemplateOutlet]="wisdomTemplate"></ng-container> }
-  @case('charisma'){
-  <ng-container [ngTemplateOutlet]="charismaTemplate"></ng-container> }
-  @default{ Leider gab es einen Fehler bei der Datenübertragung. Bitte öffne ein
-  Issue auf Github. } }
+  @switch (attribute.name) {
+    @case ("strength") {
+      <ng-container [ngTemplateOutlet]="strengthTemplate"></ng-container>
+    }
+    @case ("dexterity") {
+      <ng-container [ngTemplateOutlet]="dexterityTemplate"></ng-container>
+    }
+    @case ("constitution") {
+      <ng-container [ngTemplateOutlet]="constitutionTemplate"></ng-container>
+    }
+    @case ("intelligence") {
+      <ng-container [ngTemplateOutlet]="intelligenceTemplate"></ng-container>
+    }
+    @case ("wisdom") {
+      <ng-container [ngTemplateOutlet]="wisdomTemplate"></ng-container>
+    }
+    @case ("charisma") {
+      <ng-container [ngTemplateOutlet]="charismaTemplate"></ng-container>
+    }
+    @default {
+      Leider gab es einen Fehler bei der Datenübertragung. Bitte öffne ein Issue
+      auf Github.
+    }
+  }
 </div>
 <div class="attribute-container">
   <value-box [value]="attribute.value" [label]="'Attributwert'"></value-box>
   <value-box [value]="modifier" [label]="'Modifikator'"></value-box>
 </div>
 
-@if(attribute.name !== 'constitution'){
-<div class="subheading">Beeinflusste Fähigkeiten:</div>
-<div class="skills">
-  @for(skill of skillsTable[attribute.name]; track skill){
-  <div class="skill-item">{{ skill }}</div>
-  }
-</div>
-} @else { Resistenzen ausarbeiten }
+@if (attribute.name !== "constitution") {
+  <div class="subheading">Beeinflusste Fähigkeiten:</div>
+  <div class="skills">
+    @for (skill of skillsTable[attribute.name]; track skill) {
+      <div class="skill-item">{{ skill }}</div>
+    }
+  </div>
+} @else {
+  Resistenzen ausarbeiten
+}
 
 <mat-expansion-panel>
   <mat-expansion-panel-header>

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-details/attribute-details.component.scss

@@ -1,40 +1,40 @@
 .attribute-container {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 2rem;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 2rem;
 }
 
 .skills {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 .skill-item {
-    background-color: var(--tab);
-    border-radius: 1rem;
-    font-weight: 500;
-    padding: 0.25rem 0.5rem;
-    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
+  background-color: var(--tab);
+  border-radius: 1rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
 }
 
 mat-expansion-panel {
-    border: var(--border) !important;
-    border-radius: 10px !important;
-    box-shadow: var(--shadow) !important;
-    margin-top: 2.5rem;
+  border: var(--border) !important;
+  border-radius: 10px !important;
+  box-shadow: var(--shadow) !important;
+  margin-top: 2.5rem;
 
-    mat-panel-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-    }
+  mat-panel-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
 
-    table {
-        border: var(--border);
-    }
+  table {
+    border: var(--border);
+  }
 }
 
 td {
-    padding: 0.375rem 1rem;
+  padding: 0.375rem 1rem;
 }

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-details/attribute-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('AttributeDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AttributeDetailsComponent]
-    })
-    .compileComponents();
-    
+      imports: [AttributeDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(AttributeDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component.scss

@@ -1,39 +1,39 @@
 .attribute-box {
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    text-align: center;
-    cursor: pointer;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  text-align: center;
+  cursor: pointer;
 
-    .attribute-name {
-        cursor: pointer;
-        font-weight: 600;
-    }
+  .attribute-name {
+    cursor: pointer;
+    font-weight: 600;
+  }
 
-    input {
-        border: none;
-        outline: none;
-        box-shadow: none;
-        text-align: center;
-        background-color: transparent;
-        width: 100%;
-        font-size: 1.25rem;
-        font-weight: 600;
-    }
+  input {
+    border: none;
+    outline: none;
+    box-shadow: none;
+    text-align: center;
+    background-color: transparent;
+    width: 100%;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
 
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
-    input[type="number"] {
-        -moz-appearance: textfield;
-    }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 
-    .attribute-modifier {
-        font-size: 2rem;
-        font-weight: 700;
-    }
+  .attribute-modifier {
+    font-size: 2rem;
+    font-weight: 700;
+  }
 }

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component.spec.ts

@@ -8,7 +8,7 @@ describe('AttributeFieldComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AttributeFieldComponent]
+      declarations: [AttributeFieldComponent],
     });
     fixture = TestBed.createComponent(AttributeFieldComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component.ts

@@ -28,7 +28,7 @@ export class AttributeFieldComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   ngOnInit(): void {
@@ -37,7 +37,7 @@ export class AttributeFieldComponent {
 
   private initAttributeSubscription(): void {
     const observable: Observable<Attribute> = eval(
-      `this.dataAccessor.${this.attributeName}$`
+      `this.dataAccessor.${this.attributeName}$`,
     );
     observable.subscribe((newValue: Attribute) => {
       this.attribute = newValue;

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component.scss

@@ -1,11 +1,11 @@
 .attribute-panel {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 2.75rem);
-    gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 2.75rem);
+  gap: 2rem;
 
-    @media (height < 934px) {
-        justify-content: space-between;
-        gap: none;
-    }
+  @media (height < 934px) {
+    justify-content: space-between;
+    gap: none;
+  }
 }

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component.spec.ts

@@ -8,7 +8,7 @@ describe('AttributePanelComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AttributePanelComponent]
+      declarations: [AttributePanelComponent],
     });
     fixture = TestBed.createComponent(AttributePanelComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/attribute-skill-container/attribute-skill-container.component.scss

@@ -1,22 +1,22 @@
 .attribute-skill-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 
-    .skill-column-left {
-        width: 35%;
-        @media (width < 1700px) {
-            width: 32%;
-        }
+  .skill-column-left {
+    width: 35%;
+    @media (width < 1700px) {
+      width: 32%;
     }
+  }
 
-    .skill-column-right {
-        display: flex;
-        flex-direction: column;
-        width: 60%;
-        @media (width < 1700px) {
-            width: 64%;
-        }
-        gap: 1.5rem;
+  .skill-column-right {
+    display: flex;
+    flex-direction: column;
+    width: 60%;
+    @media (width < 1700px) {
+      width: 64%;
     }
+    gap: 1.5rem;
+  }
 }

src/app/journal/journal-stats/attribute-skill-container/attribute-skill-container.component.spec.ts

@@ -8,7 +8,7 @@ describe('AttributeSkillContainerComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AttributeSkillContainerComponent]
+      declarations: [AttributeSkillContainerComponent],
     });
     fixture = TestBed.createComponent(AttributeSkillContainerComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-details/save-throw-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('SaveThrowDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SaveThrowDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [SaveThrowDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SaveThrowDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component.scss

@@ -1,27 +1,27 @@
 .save-throw-field {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-    height: 2.25rem;
-    @media (height < 934px) {
-        height: 2.0675rem;
-    }
-    .save-throw-field__input {
-        width: 15%;
-    }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  height: 2.25rem;
+  @media (height < 934px) {
+    height: 2.0675rem;
+  }
+  .save-throw-field__input {
+    width: 15%;
+  }
 
-    .save-throw-field__name {
-        width: 50%;
-        font-size: 1.125rem;
-        font-weight: 600;
-        text-align: start;
-    }
+  .save-throw-field__name {
+    width: 50%;
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-align: start;
+  }
 
-    .save-throw-field__value {
-        width: 20%;
-        font-size: 1.5rem;
-        font-weight: 600;
-    }
+  .save-throw-field__value {
+    width: 20%;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
 }

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component.spec.ts

@@ -8,7 +8,7 @@ describe('SaveThrowFieldComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SaveThrowFieldComponent]
+      declarations: [SaveThrowFieldComponent],
     });
     fixture = TestBed.createComponent(SaveThrowFieldComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component.ts

@@ -13,7 +13,7 @@ import { SaveThrowDetailsComponent } from '../save-throw-details/save-throw-deta
 export class SaveThrowFieldComponent {
   constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   @Input() attributeName: string = '';
@@ -39,7 +39,7 @@ export class SaveThrowFieldComponent {
 
   private initAttributeSubscription(): void {
     const observable: Observable<Attribute> = eval(
-      `this.dataAccessor.${this.attributeName}$`
+      `this.dataAccessor.${this.attributeName}$`,
     );
     observable.subscribe((newValue: Attribute) => {
       this.attribute = newValue;

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component.html

@@ -1,5 +1,5 @@
 <div class="save-throw-panel">
-  @for(attribute of attributes; track attributes){
-  <save-throw-field [attributeName]="attribute"></save-throw-field>
+  @for (attribute of attributes; track attributes) {
+    <save-throw-field [attributeName]="attribute"></save-throw-field>
   }
 </div>

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component.scss

@@ -1,6 +1,6 @@
 .save-throw-panel {
-    border: var(--border);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
+  border: var(--border);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
 }

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component.spec.ts

@@ -8,7 +8,7 @@ describe('SaveThrowPanelComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SaveThrowPanelComponent]
+      declarations: [SaveThrowPanelComponent],
     });
     fixture = TestBed.createComponent(SaveThrowPanelComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-details/skill-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('SkillDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SkillDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [SkillDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(SkillDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component.scss

@@ -1,34 +1,34 @@
 .skill-box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-    height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  height: 2.25rem;
 
-    @media (height < 934px) {
-        height: 2.0675rem;
-    }
+  @media (height < 934px) {
+    height: 2.0675rem;
+  }
 
-    .skill-proficiency-input {
-        width: 15%;
-    }
+  .skill-proficiency-input {
+    width: 15%;
+  }
 
-    .skill-attribute-name {
-        width: 15%;
-        font-weight: 600;
-        color: #494949;
-    }
+  .skill-attribute-name {
+    width: 15%;
+    font-weight: 600;
+    color: #494949;
+  }
 
-    .skill-name {
-        width: 52%;
-        font-size: 1.125em;
-        font-weight: 600;
-        text-align: start;
-    }
+  .skill-name {
+    width: 52%;
+    font-size: 1.125em;
+    font-weight: 600;
+    text-align: start;
+  }
 
-    .skill-modifier {
-        width: 18%;
-        font-size: 1.5em;
-        font-weight: 600;
-    }
+  .skill-modifier {
+    width: 18%;
+    font-size: 1.5em;
+    font-weight: 600;
+  }
 }

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component.spec.ts

@@ -8,7 +8,7 @@ describe('SkillFieldComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SkillFieldComponent]
+      declarations: [SkillFieldComponent],
     });
     fixture = TestBed.createComponent(SkillFieldComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component.ts

@@ -21,7 +21,7 @@ export class SkillFieldComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public skillNames: any = {
@@ -65,7 +65,7 @@ export class SkillFieldComponent {
 
   private initAttributeSubscription(): void {
     const observable: Observable<Attribute> = eval(
-      `this.dataAccessor.${this.skillNames[this.skillName].long}$`
+      `this.dataAccessor.${this.skillNames[this.skillName].long}$`,
     );
     observable.subscribe((newValue: Attribute) => {
       this.attribute = newValue;
@@ -75,7 +75,7 @@ export class SkillFieldComponent {
 
   private initSkillSubscription(): void {
     const observable: Observable<Skill> = eval(
-      `this.dataAccessor.${this.skillName}$`
+      `this.dataAccessor.${this.skillName}$`,
     );
     observable.subscribe((newValue: Skill) => {
       this.skill = newValue;

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-panel.component.scss

@@ -1,11 +1,11 @@
 .skill-panel {
-    display: flex;
-    flex-direction: column;
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    @media (height < 900px) {
-        margin-bottom: 4rem;
-    }
+  display: flex;
+  flex-direction: column;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  @media (height < 900px) {
+    margin-bottom: 4rem;
+  }
 }

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-panel.component.spec.ts

@@ -8,7 +8,7 @@ describe('SkillPanelComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SkillPanelComponent]
+      declarations: [SkillPanelComponent],
     });
     fixture = TestBed.createComponent(SkillPanelComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/info-row/armor-class/armor-class-details/armor-class-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('ArmorClassDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ArmorClassDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [ArmorClassDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ArmorClassDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/armor-class/armor-class.component.spec.ts

@@ -8,7 +8,7 @@ describe('ArmorClassComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ArmorClassComponent]
+      declarations: [ArmorClassComponent],
     });
     fixture = TestBed.createComponent(ArmorClassComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/info-row/armor-class/armor-class.component.ts

@@ -11,7 +11,7 @@ import { ArmorClassDetailsComponent } from './armor-class-details/armor-class-de
 export class ArmorClassComponent {
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public armorClass: number = 0;

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.html

@@ -13,25 +13,27 @@
   <div>
     <div class="heading left t-0 b-075">Momentane Zustäne</div>
     <mat-accordion>
-      @for (condition of conditions; let index = $index; track condition ) {
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>
-          <mat-panel-title>{{ condition }}</mat-panel-title>
-        </mat-expansion-panel-header>
-        <ul>
-          @for(description of conditionDescriptions[condition]; track
-          description){
-          <li>{{ description }}</li>
-          }
-        </ul>
-        <icon-button
-          [icon]="'delete'"
-          style="margin: auto"
-          (click)="removeCondition(index)"
-        ></icon-button>
-      </mat-expansion-panel>
+      @for (condition of conditions; let index = $index; track condition) {
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>{{ condition }}</mat-panel-title>
+          </mat-expansion-panel-header>
+          <ul>
+            @for (
+              description of conditionDescriptions[condition];
+              track description
+            ) {
+              <li>{{ description }}</li>
+            }
+          </ul>
+          <icon-button
+            [icon]="'delete'"
+            style="margin: auto"
+            (click)="removeCondition(index)"
+          ></icon-button>
+        </mat-expansion-panel>
       } @empty {
-      <div class="empty-list">keine Zustände</div>
+        <div class="empty-list">keine Zustände</div>
       }
     </mat-accordion>
   </div>
@@ -44,25 +46,27 @@
       <mat-label>Zustand</mat-label>
       <mat-select [(ngModel)]="currentCondition">
         @for (condition of notUsedConditions(); track condition) {
-        <mat-option [value]="condition">{{ condition }}</mat-option
-        >}
+          <mat-option [value]="condition">{{ condition }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
-    @if(currentCondition !== '') {
-    <icon-button
-      style="display: inline; margin-left: 0.25rem"
-      [icon]="'add'"
-      (click)="addCondition()"
-    ></icon-button>
+    @if (currentCondition !== "") {
+      <icon-button
+        style="display: inline; margin-left: 0.25rem"
+        [icon]="'add'"
+        (click)="addCondition()"
+      ></icon-button>
 
-    <div>
-      <ul>
-        @for(description of conditionDescriptions[currentCondition]; track
-        description){
-        <li>{{ description }}</li>
-        }
-      </ul>
-    </div>
+      <div>
+        <ul>
+          @for (
+            description of conditionDescriptions[currentCondition];
+            track description
+          ) {
+            <li>{{ description }}</li>
+          }
+        </ul>
+      </div>
     }
   </div>
 </div>

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { StatusDetailsComponent } from './conditions-details.component';
+import { ConditionsDetailsComponent } from './conditions-details.component';
 
-describe('StatusDetailsComponent', () => {
-  let component: StatusDetailsComponent;
-  let fixture: ComponentFixture<StatusDetailsComponent>;
+describe('ConditionDetailsComponent', () => {
+  let component: ConditionsDetailsComponent;
+  let fixture: ComponentFixture<ConditionsDetailsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [StatusDetailsComponent],
+      imports: [ConditionsDetailsComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(StatusDetailsComponent);
+    fixture = TestBed.createComponent(ConditionsDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.ts

@@ -102,7 +102,7 @@ export class ConditionsDetailsComponent {
 
   public notUsedConditions(): string[] {
     return this.conditionOptions.filter(
-      (condition) => !this.conditions.includes(condition)
+      (condition) => !this.conditions.includes(condition),
     );
   }
 

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

@@ -1,10 +1,10 @@
 <div class="condition-container">
   <div class="condition" (click)="openConditionDetails()">
     <div class="condition-list">
-      @for (condition of conditions; track condition ) {
-      <div class="condition-item">{{ condition }}</div>
+      @for (condition of conditions; track condition) {
+        <div class="condition-item">{{ condition }}</div>
       } @empty {
-      <div class="empty">-</div>
+        <div class="empty">-</div>
       }
     </div>
     <div class="condition-label">Zustände</div>

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

@@ -1,66 +1,66 @@
 .condition-container {
-    display: flex;
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    height: 6rem;
-    width: 17rem;
+  display: flex;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  height: 6rem;
+  width: 17rem;
 }
 
 .condition {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    height: 6rem;
-    justify-content: space-between;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 6rem;
+  justify-content: space-between;
 }
 
 .condition-list {
-    height: 4rem;
-    margin: 0.25rem 0.25rem 0 0.25rem;
-    overflow-y: auto;
-    background-color: var(--background-color);
-    border-radius: 10px;
+  height: 4rem;
+  margin: 0.25rem 0.25rem 0 0.25rem;
+  overflow-y: auto;
+  background-color: var(--background-color);
+  border-radius: 10px;
 }
 
 .condition-item {
-    width: 98%;
-    padding-left: 0.5rem;
+  width: 98%;
+  padding-left: 0.5rem;
 }
 
 .empty {
-    text-align: center;
-    font-size: 2rem;
-    font-weight: 600;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
 }
 
 .condition-label {
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0 0.5rem 0.25rem 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-align: center;
+  padding: 0 0.5rem 0.25rem 0.5rem;
 }
 
 // General
 .vertical-line {
-    position: relative;
-    width: 1px;
+  position: relative;
+  width: 1px;
 }
 
 .vertical-line::before {
-    content: "";
-    position: absolute;
-    top: 10%;
-    bottom: 10%;
-    left: 0;
-    border-left: 1px solid black;
+  content: "";
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+  left: 0;
+  border-left: 1px solid black;
 }
 
 .exhaustion {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }

src/app/journal/journal-stats/info-row/conditions/conditions.component.spec.ts

@@ -8,10 +8,9 @@ describe('ConditionsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ConditionsComponent]
-    })
-    .compileComponents();
-    
+      imports: [ConditionsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ConditionsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -12,7 +12,7 @@ import { ExhaustionDetailsComponent } from './exhaustion-details/exhaustion-deta
 export class ConditionsComponent {
   public constructor(
     private dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public exhaustion: number = 0;
@@ -59,7 +59,7 @@ export class ConditionsComponent {
           this.dataAccessor.conditions = this.conditions;
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

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

@@ -1,3 +1,3 @@
 .highlighted {
-    border: 2px solid black !important;
+  border: 2px solid black !important;
 }

src/app/journal/journal-stats/info-row/conditions/exhaustion-details/exhaustion-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('ExhaustionDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ExhaustionDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [ExhaustionDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ExhaustionDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/death-save/death-save-details/death-save-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('DeathSaveDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DeathSaveDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [DeathSaveDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(DeathSaveDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/death-save/death-save-details/death-save-details.component.ts

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-death-save-details',
   templateUrl: './death-save-details.component.html',
-  styleUrl: './death-save-details.component.scss'
+  styleUrl: './death-save-details.component.scss',
 })
-export class DeathSaveDetailsComponent {
-
-}
+export class DeathSaveDetailsComponent {}

src/app/journal/journal-stats/info-row/death-save/death-save.component.scss

@@ -1,43 +1,43 @@
 .death-save-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 12rem;
-    height: 6rem;
-    border: var(--border);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 12rem;
+  height: 6rem;
+  border: var(--border);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
 }
 
 .save-row {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
 }
 
 .save-label {
-    font-weight: 600;
-    text-align: center;
-    padding: 0 0.5rem 0 0.5rem;
+  font-weight: 600;
+  text-align: center;
+  padding: 0 0.5rem 0 0.5rem;
 }
 
 .save-checkbox {
-    display: flex;
-    gap: 0.5rem;
-    margin-right: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  margin-right: 1rem;
 }
 
 .death-save {
-    text-align: center;
-    font-size: 1.25rem;
-    font-weight: 600;
-    padding-bottom: 0.25rem;
-    text-align: center;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+  text-align: center;
 }
 
 .fail {
-    input[type="checkbox"] {
-        accent-color: var(--delete) !important;
-    }
+  input[type="checkbox"] {
+    accent-color: var(--delete) !important;
+  }
 }

src/app/journal/journal-stats/info-row/death-save/death-save.component.spec.ts

@@ -8,7 +8,7 @@ describe('DeathSaveComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DeathSaveComponent]
+      declarations: [DeathSaveComponent],
     });
     fixture = TestBed.createComponent(DeathSaveComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/info-row/death-save/death-save.component.ts

@@ -11,7 +11,7 @@ import { DeathSaveDetailsComponent } from './death-save-details/death-save-detai
 export class DeathSaveComponent {
   public constructor(
     private dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public deathSave: number[] = [0, 0];

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

@@ -1,4 +1,4 @@
-.row-container{
-    display:flex;
-    justify-content: space-between;
-}
+.row-container {
+  display: flex;
+  justify-content: space-between;
+}

src/app/journal/journal-stats/info-row/info-row.component.spec.ts

@@ -8,10 +8,9 @@ describe('InfoRowComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [InfoRowComponent]
-    })
-    .compileComponents();
-    
+      imports: [InfoRowComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(InfoRowComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/initiative/initiative-details/initiative-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('InitiativeDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [InitiativeDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [InitiativeDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(InitiativeDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/initiative/initiative.component.spec.ts

@@ -8,7 +8,7 @@ describe('InitiativeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [InitiativeComponent]
+      declarations: [InitiativeComponent],
     });
     fixture = TestBed.createComponent(InitiativeComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/info-row/initiative/initiative.component.ts

@@ -11,7 +11,7 @@ import { InitiativeDetailsComponent } from './initiative-details/initiative-deta
 export class InitiativeComponent {
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public initiative: number = 0;

src/app/journal/journal-stats/info-row/movement/movement-details/movement-details.component.scss

@@ -1,18 +1,18 @@
 mat-expansion-panel {
-    border: var(--border) !important;
-    border-radius: 10px !important;
-    box-shadow: var(--shadow) !important;
-    margin-top: 2.5rem;
+  border: var(--border) !important;
+  border-radius: 10px !important;
+  box-shadow: var(--shadow) !important;
+  margin-top: 2.5rem;
 
-    mat-panel-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-    }
-    table {
-        border: var(--border);
+  mat-panel-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  table {
+    border: var(--border);
 
-        td {
-            margin-left: 1rem;
-        }
+    td {
+      margin-left: 1rem;
     }
+  }
 }

src/app/journal/journal-stats/info-row/movement/movement-details/movement-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('MovementDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MovementDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [MovementDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(MovementDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/movement/movement.component.spec.ts

@@ -8,7 +8,7 @@ describe('MovementComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [MovementComponent]
+      declarations: [MovementComponent],
     });
     fixture = TestBed.createComponent(MovementComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/info-row/movement/movement.component.ts

@@ -11,7 +11,7 @@ import { MovementDetailsComponent } from './movement-details/movement-details.co
 export class MovementComponent {
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public movement: number = 0;

src/app/journal/journal-stats/info-row/proficiency/proficiency-details/proficiency-details.component.spec.ts

@@ -8,10 +8,9 @@ describe('ProficiencyDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ProficiencyDetailsComponent]
-    })
-    .compileComponents();
-    
+      declarations: [ProficiencyDetailsComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ProficiencyDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/journal/journal-stats/info-row/proficiency/proficiency-field.component.spec.ts

@@ -8,7 +8,7 @@ describe('ProficiencyFieldComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ProficiencyFieldComponent]
+      declarations: [ProficiencyFieldComponent],
     });
     fixture = TestBed.createComponent(ProficiencyFieldComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/info-row/proficiency/proficiency-field.component.ts

@@ -11,7 +11,7 @@ import { ProficiencyDetailsComponent } from './proficiency-details/proficiency-d
 export class ProficiencyFieldComponent {
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public proficiency: number = 0;

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

@@ -1,63 +1,63 @@
 .flex-center {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .stats-container {
-    display: flex;
-    justify-content: space-between;
-    margin: 1.5rem 1.5rem 0 1.5rem;
-    gap: 1.5rem;
-    width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin: 1.5rem 1.5rem 0 1.5rem;
+  gap: 1.5rem;
+  width: 100%;
 }
 
 attribute-skill-container {
-    width: 25%;
+  width: 25%;
 
-    @media (width < 1700px) {
-        width: 28%;
-    }
+  @media (width < 1700px) {
+    width: 28%;
+  }
 }
 
 .container2 {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    width: 75%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 75%;
 
-    @media (width < 1700px) {
-        width: 72%;
-    }
+  @media (width < 1700px) {
+    width: 72%;
+  }
 }
 
 .rest {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .life-weapon-container {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    width: 49%;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 49%;
 
-    @media (height < 934px) {
-        gap: 1.5rem;
-    }
+  @media (height < 934px) {
+    gap: 1.5rem;
+  }
 }
 
 ability-panel {
-    width: 49%;
+  width: 49%;
 }
 
 .life {
-    width: 100%;
-    height: 20%;
+  width: 100%;
+  height: 20%;
 }
 
 .weapon {
-    width: 100%;
-    min-height: 50%;
-    max-height: 70%;
+  width: 100%;
+  min-height: 50%;
+  max-height: 70%;
 }

src/app/journal/journal-stats/journal-stats.component.spec.ts

@@ -8,7 +8,7 @@ describe('JournalStatsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [JournalStatsComponent]
+      declarations: [JournalStatsComponent],
     });
     fixture = TestBed.createComponent(JournalStatsComponent);
     component = fixture.componentInstance;

src/app/journal/journal-stats/life-container/hit-dice/hit-dice.component.html

@@ -14,25 +14,25 @@
 
 <div class="hit-dice-container">
   <div class="input-container">
-    @for(_ of getArray(hitDice.diceNumber); track _ ; let index = $index){
-    <input
-      [id]="'checkbox' + index"
-      type="checkbox"
-      (change)="handleUsedHitDice(index, $event.target)"
-    />
+    @for (_ of getArray(hitDice.diceNumber); track _; let index = $index) {
+      <input
+        [id]="'checkbox' + index"
+        type="checkbox"
+        (change)="handleUsedHitDice(index, $event.target)"
+      />
     }
   </div>
-  @if(showEditButtons){
-  <div style="display: flex; flex-direction: column">
-    <icon-button
-      [icon]="'add'"
-      (click)="hitDice.diceNumber = hitDice.diceNumber + 1"
-    ></icon-button>
-    <icon-button
-      [icon]="'remove'"
-      style="margin-top: 1rem"
-      (click)="hitDice.diceNumber = hitDice.diceNumber - 1"
-    ></icon-button>
-  </div>
+  @if (showEditButtons) {
+    <div style="display: flex; flex-direction: column">
+      <icon-button
+        [icon]="'add'"
+        (click)="hitDice.diceNumber = hitDice.diceNumber + 1"
+      ></icon-button>
+      <icon-button
+        [icon]="'remove'"
+        style="margin-top: 1rem"
+        (click)="hitDice.diceNumber = hitDice.diceNumber - 1"
+      ></icon-button>
+    </div>
   }
 </div>

src/app/journal/journal-stats/life-container/hit-dice/hit-dice.component.scss

@@ -1,44 +1,44 @@
 .heading-line {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
 }
 .hit-dice-container {
+  display: flex;
+  flex-direction: row;
+  gap: 3rem;
+
+  .input-container {
     display: flex;
     flex-direction: row;
-    gap: 3rem;
-
-    .input-container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        width: 20rem;
-        row-gap: 0.5rem;
-        column-gap: 3rem;
-        // input {
-        //     flex: 0 0 4rem;
-        // }
-    }
+    flex-wrap: wrap;
+    width: 20rem;
+    row-gap: 0.5rem;
+    column-gap: 3rem;
+    // input {
+    //     flex: 0 0 4rem;
+    // }
+  }
 }
 
 input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border: 1px solid #000;
-    position: relative;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border: 1px solid #000;
+  position: relative;
 }
 
 input[type="checkbox"]:checked::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 12px;
-    height: 12px;
-    background: #815139;
-    transform: translate(-50%, -50%);
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background: #815139;
+  transform: translate(-50%, -50%);
 }

src/app/journal/journal-stats/life-container/hit-dice/hit-dice.component.spec.ts

@@ -8,7 +8,7 @@ describe('HitDiceComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [HitDiceComponent]
+      declarations: [HitDiceComponent],
     });
     fixture = TestBed.createComponent(HitDiceComponent);
     component = fixture.componentInstance;

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

@@ -1,23 +1,22 @@
-.life-container{
-    display: flex;
-    flex-direction: column;
-    // flex-wrap: wrap;
-    gap: 2rem;
+.life-container {
+  display: flex;
+  flex-direction: column;
+  // flex-wrap: wrap;
+  gap: 2rem;
 }
 
-.ac-speed-container{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    row-gap: 1rem;
+.ac-speed-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  row-gap: 1rem;
 }
 
-.small{
-    width: 25%;
+.small {
+  width: 25%;
 }
 
-.large{
-    width: 40%;
+.large {
+  width: 40%;
 }
-

src/app/journal/journal-stats/life-container/life-container.component.spec.ts

@@ -8,7 +8,7 @@ describe('LifeContainerComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [LifeContainerComponent]
+      declarations: [LifeContainerComponent],
     });
     fixture = TestBed.createComponent(LifeContainerComponent);
     component = fixture.componentInstance;

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-life-container',
   templateUrl: './life-container.component.html',
-  styleUrls: ['./life-container.component.scss']
+  styleUrls: ['./life-container.component.scss'],
 })
-export class LifeContainerComponent {
-
-}
+export class LifeContainerComponent {}

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

@@ -1,69 +1,69 @@
 .life-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    // gap: 1.5rem;
-    margin-top: 3rem;
-    margin-bottom: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  // gap: 1.5rem;
+  margin-top: 3rem;
+  margin-bottom: 2rem;
 }
 
 .life-box {
-    display: grid;
-    grid-template-rows: 1fr 1fr;
-    justify-content: center;
-    gap: 0.5rem;
-    text-align: center;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  justify-content: center;
+  gap: 0.5rem;
+  text-align: center;
 }
 
 .life-input {
-    width: 20%;
-    font-size: 1.5rem;
-    margin: auto;
-    text-align: center;
-    appearance: textfield;
-    -moz-appearance: textfield;
-    border-radius: 10px;
-    border: none;
-    box-shadow: var(--shadow);
+  width: 20%;
+  font-size: 1.5rem;
+  margin: auto;
+  text-align: center;
+  appearance: textfield;
+  -moz-appearance: textfield;
+  border-radius: 10px;
+  border: none;
+  box-shadow: var(--shadow);
 
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }
 
 hit-dice {
-    margin-top: 1.5rem;
+  margin-top: 1.5rem;
 }
 
 .button-container {
-    height: 9rem;
-    width: 27rem;
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-direction: column;
+  height: 9rem;
+  width: 27rem;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-direction: column;
 
-    .confirm {
-        width: 20rem;
-        margin: 0 auto;
-        background-color: var(--accept);
+  .confirm {
+    width: 20rem;
+    margin: 0 auto;
+    background-color: var(--accept);
 
-        &:hover {
-            background-color: var(--accept-hover);
-        }
+    &:hover {
+      background-color: var(--accept-hover);
     }
+  }
 
-    .cancel {
-        width: 20rem;
-        margin: 0 auto;
-        background-color: var(--delete);
+  .cancel {
+    width: 20rem;
+    margin: 0 auto;
+    background-color: var(--delete);
 
-        &:hover {
-            background-color: var(--delete-hover);
-        }
+    &:hover {
+      background-color: var(--delete-hover);
     }
+  }
 }

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.spec.ts

@@ -8,7 +8,7 @@ describe('LifeDetailsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [LifeDetailsComponent]
+      declarations: [LifeDetailsComponent],
     });
     fixture = TestBed.createComponent(LifeDetailsComponent);
     component = fixture.componentInstance;

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

@@ -1,106 +1,106 @@
 .life-box {
-    width: 100%;
-    height: 100%;
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  cursor: pointer;
 }
 
 .life-box-name {
-    font-size: 1.4rem;
-    font-weight: bold;
-    text-align: center;
-    cursor: pointer;
+  font-size: 1.4rem;
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
 }
 
 .life-box-bar {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    height: 4rem;
-    margin: 0 1rem;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    overflow: hidden;
-    cursor: pointer;
-    &:hover {
-        .life-box-bar-current {
-            background-color: var(--accept-hover);
-        }
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 4rem;
+  margin: 0 1rem;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  cursor: pointer;
+  &:hover {
+    .life-box-bar-current {
+      background-color: var(--accept-hover);
+    }
 
-        .life-box-bar-temporary {
-            background-color: var(--edit-hover);
-        }
+    .life-box-bar-temporary {
+      background-color: var(--edit-hover);
+    }
 
-        .life-box-bar-missing {
-            background-color: var(--delete-hover);
-        }
+    .life-box-bar-missing {
+      background-color: var(--delete-hover);
     }
+  }
 }
 
 .life-box-bar-current {
-    background-color: var(--accept);
-    transition: all 0.2s ease-in-out;
+  background-color: var(--accept);
+  transition: all 0.2s ease-in-out;
 }
 
 .life-box-bar-temporary {
-    background-color: var(--edit);
-    transition: all 0.2s ease-in-out;
+  background-color: var(--edit);
+  transition: all 0.2s ease-in-out;
 }
 
 .life-box-bar-missing {
-    background-color: var(--delete);
-    transition: all 0.2s ease-in-out;
+  background-color: var(--delete);
+  transition: all 0.2s ease-in-out;
 }
 
 .life-box-bar-label {
-    font-size: 1.5rem;
-    font-weight: bold;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  font-size: 1.5rem;
+  font-weight: bold;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .life-box-buttons {
-    display: flex;
-    justify-content: space-between;
-    margin: 1rem;
-    // flex-direction: column;
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem;
+  // flex-direction: column;
 }
 
 .life-button {
-    height: 2.5rem;
-    width: 6rem;
-    font-size: 1.25rem;
-    font-weight: 500;
-    border: none;
-    box-shadow: var(--shadow);
-    border-radius: 10px;
+  height: 2.5rem;
+  width: 6rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  border: none;
+  box-shadow: var(--shadow);
+  border-radius: 10px;
 }
 
 .add {
-    background-color: var(--accept);
-    transition: all 0.2s ease-in-out;
-    &:hover {
-        background-color: var(--accept-hover);
-    }
+  background-color: var(--accept);
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--accept-hover);
+  }
 }
 
 .temp {
-    background-color: var(--edit);
-    transition: all 0.2s ease-in-out;
-    &:hover {
-        background-color: var(--edit-hover);
-    }
+  background-color: var(--edit);
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--edit-hover);
+  }
 }
 
 .remove {
-    background-color: var(--delete);
-    transition: all 0.2s ease-in-out;
-    &:hover {
-        background-color: var(--delete-hover);
-    }
+  background-color: var(--delete);
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--delete-hover);
+  }
 }

src/app/journal/journal-stats/life-container/life/life.component.spec.ts

@@ -8,7 +8,7 @@ describe('LifeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [LifeComponent]
+      declarations: [LifeComponent],
     });
     fixture = TestBed.createComponent(LifeComponent);
     component = fixture.componentInstance;

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

@@ -21,7 +21,7 @@ export class LifeComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   ngOnInit(): void {
@@ -95,7 +95,7 @@ export class LifeComponent {
           // Do nothing
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

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

@@ -12,67 +12,67 @@
     </div>
   </div>
   <div id="spells-table" class="item-list table-content">
-    @for(spell of preparedSpells; let index = $index; track spell){
-    <div
-      matRipple
-      class="spell-item"
-      [ngClass]="{ selected: checkedSpells[index] }"
-      (click)="checkedSpells[index] = !checkedSpells[index]"
-    >
-      <!--  Range Icon -->
-      <ng-container
-        [ngTemplateOutlet]="costTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+    @for (spell of preparedSpells; let index = $index; track spell) {
+      <div
+        matRipple
+        class="spell-item"
+        [ngClass]="{ selected: checkedSpells[index] }"
+        (click)="checkedSpells[index] = !checkedSpells[index]"
+      >
+        <!--  Range Icon -->
+        <ng-container
+          [ngTemplateOutlet]="costTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Name -->
-      <ng-container
-        [ngTemplateOutlet]="spellNameTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Name -->
+        <ng-container
+          [ngTemplateOutlet]="spellNameTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Level -->
-      <ng-container
-        [ngTemplateOutlet]="spellLevelTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Level -->
+        <ng-container
+          [ngTemplateOutlet]="spellLevelTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Attack -->
-      <ng-container
-        [ngTemplateOutlet]="spellAttackTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Attack -->
+        <ng-container
+          [ngTemplateOutlet]="spellAttackTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Damage/Heal -->
-      <ng-container
-        [ngTemplateOutlet]="spellDamageTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Damage/Heal -->
+        <ng-container
+          [ngTemplateOutlet]="spellDamageTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Range -->
-      <ng-container
-        [ngTemplateOutlet]="spellRangeTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-    </div>
-    }@empty{
-    <div
-      style="
-        text-align: center;
-        margin-top: 3rem;
-        font-size: 1.25rem;
-        font-weight: 500;
-      "
-    >
-      Noch keine Zauber vorbereitet.
-      <br />
-      Dies kannst du im Menü <i><b>Zauber</b></i> tun.
-    </div>
+        <!-- Range -->
+        <ng-container
+          [ngTemplateOutlet]="spellRangeTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+      </div>
+    } @empty {
+      <div
+        style="
+          text-align: center;
+          margin-top: 3rem;
+          font-size: 1.25rem;
+          font-weight: 500;
+        "
+      >
+        Noch keine Zauber vorbereitet.
+        <br />
+        Dies kannst du im Menü <i><b>Zauber</b></i> tun.
+      </div>
     }
   </div>
 
@@ -135,23 +135,28 @@
 <!-- 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>
-    } @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>
+    @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>
+    }
+    @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>

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.scss

@@ -1,97 +1,97 @@
 .dimensions {
-    height: 50rem;
-    width: 45rem;
-    padding: 0;
-    overflow: hidden;
+  height: 50rem;
+  width: 45rem;
+  padding: 0;
+  overflow: hidden;
 }
 
 .heading-list {
-    flex: 0 0 3rem;
-    padding: 10px 2rem;
-    display: grid;
-    grid-template-columns: 6fr 18fr 11fr 8fr 20fr 16fr;
-    text-align: center;
-    font-weight: 700;
+  flex: 0 0 3rem;
+  padding: 10px 2rem;
+  display: grid;
+  grid-template-columns: 6fr 18fr 11fr 8fr 20fr 16fr;
+  text-align: center;
+  font-weight: 700;
 }
 
 .shadow-box {
-    box-shadow: var(--shadow-bottom);
-    position: relative;
-    padding-top: 1rem;
+  box-shadow: var(--shadow-bottom);
+  position: relative;
+  padding-top: 1rem;
 }
 
 .item-list {
-    height: 36rem;
-    padding: 0 1rem;
-    display: block;
-    background: transparent;
-    border-radius: 4px;
-    overflow: auto;
+  height: 36rem;
+  padding: 0 1rem;
+  display: block;
+  background: transparent;
+  border-radius: 4px;
+  overflow: auto;
 }
 
 .spell-item {
-    box-sizing: border-box;
-    margin: 15px 10px;
-    color: rgba(0, 0, 0, 0.87);
-    display: grid;
-    grid-template-columns: 6fr 0.1fr 20fr 0.1fr 10fr 0.1fr 8fr 0.1fr 20fr 0.1fr 16fr;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    background: var(--items);
-    border-radius: 10px;
-    border: var(--border);
-    font-size: 1rem;
-    font-weight: 600;
-    text-align: center;
-    cursor: pointer;
-    box-shadow:
-        0 5px 5px -3px rgba(0, 0, 0, 0.2),
-        0 8px 8px 1px rgba(0, 0, 0, 0.14),
-        0 3px 10px 2px rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s ease-in-out;
-    &:hover {
-        background-color: #f8d8c6;
-    }
+  box-sizing: border-box;
+  margin: 15px 10px;
+  color: rgba(0, 0, 0, 0.87);
+  display: grid;
+  grid-template-columns: 6fr 0.1fr 20fr 0.1fr 10fr 0.1fr 8fr 0.1fr 20fr 0.1fr 16fr;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: var(--items);
+  border-radius: 10px;
+  border: var(--border);
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  cursor: pointer;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 8px 1px rgba(0, 0, 0, 0.14),
+    0 3px 10px 2px rgba(0, 0, 0, 0.12);
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    background-color: #f8d8c6;
+  }
 }
 
 .selected {
-    background-color: #f8d8c6;
-    border: 3px solid var(--primary);
-    &:hover {
-        background-color: var(--items);
-    }
+  background-color: #f8d8c6;
+  border: 3px solid var(--primary);
+  &:hover {
+    background-color: var(--items);
+  }
 }
 
 .bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .small {
-    font-size: 0.625rem;
+  font-size: 0.625rem;
 }
 
 .large {
-    font-size: 1.125rem;
+  font-size: 1.125rem;
 }
 
 .vertical-line {
-    position: relative;
-    width: 1px;
-    height: 3.5rem;
+  position: relative;
+  width: 1px;
+  height: 3.5rem;
 }
 
 .vertical-line::before {
-    content: "";
-    position: absolute;
-    top: 15%;
-    bottom: 15%;
-    left: 0;
-    border-left: 1px solid black;
+  content: "";
+  position: absolute;
+  top: 15%;
+  bottom: 15%;
+  left: 0;
+  border-left: 1px solid black;
 }
 
 .horizontal-buttons {
-    box-shadow: var(--shadow-top);
-    position: relative;
-    padding: 1.5rem 3rem;
+  box-shadow: var(--shadow-top);
+  position: relative;
+  padding: 1.5rem 3rem;
 }

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.spec.ts

@@ -8,10 +8,9 @@ describe('FavoriteSpellsModalComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FavoriteSpellsModalComponent]
-    })
-    .compileComponents();
-    
+      imports: [FavoriteSpellsModalComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(FavoriteSpellsModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -40,14 +40,14 @@ export class FavoriteSpellsModalComponent {
     this.checkedSpells = Array(this.preparedSpells.length).fill(false);
     this.preparedSpells.forEach((spell, index) => {
       this.checkedSpells[index] = this.selectedSpells.some(
-        (selectedSpell) => selectedSpell.id === spell.id
+        (selectedSpell) => selectedSpell.id === spell.id,
       );
     });
   }
 
   public update(): void {
     const spells: Spell[] = this.preparedSpells.filter(
-      (spell, index) => this.checkedSpells[index]
+      (spell, index) => this.checkedSpells[index],
     );
     this.modalAccessor.handleModalClosing('update', spells);
     this.checkedSpells = [];

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

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

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

@@ -8,7 +8,7 @@ describe('SpellDetailsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SpellDetailsComponent]
+      declarations: [SpellDetailsComponent],
     });
     fixture = TestBed.createComponent(SpellDetailsComponent);
     component = fixture.componentInstance;

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

@@ -13,60 +13,60 @@
     class="item-list table-content"
     (cdkDropListDropped)="dropSpells($event)"
   >
-    @for(spell of spells; let index = $index; track spell){
-    <div class="item" cdkDrag (click)="showFullSpellcard(index)">
-      <!--  Range Icon -->
-      <ng-container
-        [ngTemplateOutlet]="costTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+    @for (spell of spells; let index = $index; track spell) {
+      <div class="item" cdkDrag (click)="showFullSpellcard(index)">
+        <!--  Range Icon -->
+        <ng-container
+          [ngTemplateOutlet]="costTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Name -->
-      <ng-container
-        [ngTemplateOutlet]="spellNameTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Name -->
+        <ng-container
+          [ngTemplateOutlet]="spellNameTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Level -->
-      <ng-container
-        [ngTemplateOutlet]="spellLevelTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Level -->
+        <ng-container
+          [ngTemplateOutlet]="spellLevelTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Attack -->
-      <ng-container
-        [ngTemplateOutlet]="spellAttackTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Attack -->
+        <ng-container
+          [ngTemplateOutlet]="spellAttackTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Damage/Heal -->
-      <ng-container
-        [ngTemplateOutlet]="spellDamageTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-      <div class="vertical-line"></div>
+        <!-- Damage/Heal -->
+        <ng-container
+          [ngTemplateOutlet]="spellDamageTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+        <div class="vertical-line"></div>
 
-      <!-- Range -->
-      <ng-container
-        [ngTemplateOutlet]="spellRangeTemplate"
-        [ngTemplateOutletContext]="{ spell: spell }"
-      ></ng-container>
-    </div>
-    }@empty{
-    <div
-      style="
-        text-align: center;
-        margin-top: 3rem;
-        font-size: 1.25rem;
-        font-weight: 500;
-      "
-    >
-      Noch keine Zauber hinzugefügt
-    </div>
+        <!-- Range -->
+        <ng-container
+          [ngTemplateOutlet]="spellRangeTemplate"
+          [ngTemplateOutletContext]="{ spell: spell }"
+        ></ng-container>
+      </div>
+    } @empty {
+      <div
+        style="
+          text-align: center;
+          margin-top: 3rem;
+          font-size: 1.25rem;
+          font-weight: 500;
+        "
+      >
+        Noch keine Zauber hinzugefügt
+      </div>
     }
   </div>
   <div class="footer">
@@ -125,27 +125,28 @@
   <!-- 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>
-      } @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>
+      @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>
+      }
+      @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>

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

@@ -8,7 +8,7 @@ describe('SpellTableComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SpellTableComponent]
+      declarations: [SpellTableComponent],
     });
     fixture = TestBed.createComponent(SpellTableComponent);
     component = fixture.componentInstance;

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

@@ -49,7 +49,7 @@ export class SpellTableComponent {
   public constructor(
     public dataAccessor: DataService,
     private modalAccessor: ModalService,
-    public detailsAccessor: DetailsService
+    public detailsAccessor: DetailsService,
   ) {}
 
   public ngOnInit(): void {
@@ -70,7 +70,7 @@ export class SpellTableComponent {
           this.spells.splice(spellIndex, 1);
           this.updateSpellsInDatabase();
         }
-      }
+      },
     );
   }
 
@@ -88,7 +88,7 @@ export class SpellTableComponent {
           this.updateSpellsInDatabase();
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

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

@@ -8,18 +8,17 @@
 </div>
 
 <!-- Singel Damage -->
-@if(!weapon?.isVersatile){
-<div class="flex-row">
-  <div class="label">Schaden:</div>
-  @for(damage of weapon?.damage; let index = $index; track damage){
-  {{ damage.diceNumber }} {{ damage.diceType }} &nbsp;
-  <span *ngIf="index === 0 && damageModifier !== '0'">
-    {{ damageModifier }} &nbsp;
-  </span>
-  {{ damageTranslator[damage.damageType] }}
-
-  }
-</div>
+@if (!weapon?.isVersatile) {
+  <div class="flex-row">
+    <div class="label">Schaden:</div>
+    @for (damage of weapon?.damage; let index = $index; track damage) {
+      {{ damage.diceNumber }} {{ damage.diceType }} &nbsp;
+      <span *ngIf="index === 0 && damageModifier !== '0'">
+        {{ damageModifier }} &nbsp;
+      </span>
+      {{ damageTranslator[damage.damageType] }}
+    }
+  </div>
 }
 
 <!-- Versatility Damage -->
@@ -51,26 +50,26 @@
   <span *ngIf="weapon?.isMagical">Magisch </span>
 </div>
 
-@if(weapon?.isRanged || weapon?.canBeThrown){
-<div class="subheading left">Reichweite</div>
+@if (weapon?.isRanged || weapon?.canBeThrown) {
+  <div class="subheading left">Reichweite</div>
 
-<!-- Ranged -->
-<div *ngIf="weapon?.isRanged">
-  Reichweite:
-  {{ weapon?.range }}
-</div>
+  <!-- Ranged -->
+  <div *ngIf="weapon?.isRanged">
+    Reichweite:
+    {{ weapon?.range }}
+  </div>
 
-<!-- Thrown -->
-<div *ngIf="weapon?.canBeThrown">
-  Wurfweite:
-  {{ weapon?.throwRange }}
-</div>
+  <!-- Thrown -->
+  <div *ngIf="weapon?.canBeThrown">
+    Wurfweite:
+    {{ weapon?.throwRange }}
+  </div>
 }
 
 <!-- Description -->
-@if(weapon?.description != ""){
-<div class="subheading left">Beschreibung</div>
-<p class="content" [innerHTML]="weapon?.description"></p>
+@if (weapon?.description != "") {
+  <div class="subheading left">Beschreibung</div>
+  <p class="content" [innerHTML]="weapon?.description"></p>
 }
 <div class="vertical-buttons bottom">
   <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">

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

@@ -1,11 +1,11 @@
 .property-title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    margin-top: 1.5rem;
-    text-align: center;
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-top: 1.5rem;
+  text-align: center;
 }
 
 .label {
-    width: 8rem;
-    font-weight: 500;
+  width: 8rem;
+  font-weight: 500;
 }

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

@@ -8,7 +8,7 @@ describe('WeaponDetailsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [WeaponDetailsComponent]
+      declarations: [WeaponDetailsComponent],
     });
     fixture = TestBed.createComponent(WeaponDetailsComponent);
     component = fixture.componentInstance;

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

@@ -1,6 +1,10 @@
 <div class="dimensions">
   <div class="title">
-    @if(isUpdate){Waffe bearbeiten} @else{Waffe hinzufügen}
+    @if (isUpdate) {
+      Waffe bearbeiten
+    } @else {
+      Waffe hinzufügen
+    }
   </div>
 
   <div class="content b-0">
@@ -86,10 +90,10 @@
                 <mat-form-field appearance="outline">
                   <mat-select [(ngModel)]="attackBonus">
                     @for (attackBonus of attackBonuses; track attackBonus) {
-                    <mat-option [value]="attackBonus">{{
-                      attackBonus
-                    }}</mat-option
-                    >}
+                      <mat-option [value]="attackBonus">{{
+                        attackBonus
+                      }}</mat-option>
+                    }
                   </mat-select>
                 </mat-form-field>
               </div>
@@ -99,147 +103,164 @@
                 <mat-form-field appearance="outline">
                   <mat-select [(ngModel)]="magicBonus">
                     @for (magicBonus of magicBonuses; track magicBonus) {
-                    <mat-option [value]="magicBonus.value">
-                      {{ magicBonus.display }} </mat-option
-                    >}
+                      <mat-option [value]="magicBonus.value">
+                        {{ magicBonus.display }}
+                      </mat-option>
+                    }
                   </mat-select>
                 </mat-form-field>
               </div>
             </div>
 
             <div class="flex-row t-05">
-              @for(damageEntry of damage; let index = $index; track
-              damageEntry){
+              @for (
+                damageEntry of damage;
+                let index = $index;
+                track damageEntry
+              ) {
+                <div class="damage-box">
+                  <div class="subheading left t-025">
+                    @if (index == 0) {
+                      Schaden
+                    } @else {
+                      Weiterer Schaden
+                    }
+                  </div>
+                  <div class="input-label">Anzahl Würfel</div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="damageEntry.diceNumber">
+                      @for (number of numbers; track number) {
+                        <mat-option [value]="number"> {{ number }} </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
 
-              <div class="damage-box">
-                <div class="subheading left t-025">
-                  @if(index == 0){Schaden} @else {Weiterer Schaden}
-                </div>
-                <div class="input-label">Anzahl Würfel</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="damageEntry.diceNumber">
-                    @for (number of numbers; track number) {
-                    <mat-option [value]="number"> {{ number }} </mat-option>}
-                  </mat-select>
-                </mat-form-field>
+                  <div class="input-label t-05">
+                    Würfelart
+                    @if (isVersatile && index === 0) {
+                      (Einhändig)
+                    }
+                  </div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="damageEntry.diceType">
+                      @for (die of dice; track die) {
+                        <mat-option [value]="die"> {{ die }} </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  @if (isVersatile && index === 0) {
+                    <div class="input-label t-05">Würfelart (Zweihändig)</div>
+                    <mat-form-field appearance="outline">
+                      <mat-select [(ngModel)]="versatileDamage">
+                        @for (die of dice; track die) {
+                          <mat-option [value]="die"> {{ die }} </mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                  }
 
-                <div class="input-label t-05">
-                  Würfelart @if(isVersatile && index === 0){ (Einhändig)}
+                  <div class="input-label t-05">Schadensart</div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="damageEntry.damageType">
+                      @for (type of damageTypes; track type) {
+                        <mat-option [value]="type.value">
+                          {{ type.display }}
+                        </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  @if (index !== 0) {
+                    <icon-button
+                      [icon]="'delete'"
+                      (click)="removeDamage(index)"
+                    ></icon-button>
+                  } @else if (hasAdditionalDamage) {
+                    <div class="input-label t-05">Zusatzschaden</div>
+                    <mat-form-field appearance="outline">
+                      <mat-select [(ngModel)]="additionalDamage">
+                        @for (damage of additonalDamages; track damage) {
+                          <mat-option [value]="damage">
+                            +{{ damage }}
+                          </mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                  }
                 </div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="damageEntry.diceType">
-                    @for (die of dice; track die) {
-                    <mat-option [value]="die"> {{ die }} </mat-option>}
-                  </mat-select>
-                </mat-form-field>
-                @if(isVersatile && index === 0){
-                <div class="input-label t-05">Würfelart (Zweihändig)</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="versatileDamage">
-                    @for (die of dice; track die) {
-                    <mat-option [value]="die"> {{ die }} </mat-option>}
-                  </mat-select>
-                </mat-form-field>
-                }
-
-                <div class="input-label t-05">Schadensart</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="damageEntry.damageType">
-                    @for (type of damageTypes; track type) {
-                    <mat-option [value]="type.value">
-                      {{ type.display }}
-                    </mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
-                @if(index !== 0){
-                <icon-button
-                  [icon]="'delete'"
-                  (click)="removeDamage(index)"
-                ></icon-button>
-                } @else if (hasAdditionalDamage){
-                <div class="input-label t-05">Zusatzschaden</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="additionalDamage">
-                    @for (damage of additonalDamages; track damage) {
-                    <mat-option [value]="damage"> +{{ damage }} </mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
+                @if (damage.length < 2) {
+                  <icon-button
+                    [icon]="'add'"
+                    style="margin-top: 7rem; margin-left: 5rem"
+                    (click)="addDamage()"
+                  ></icon-button>
                 }
-              </div>
-              @if(damage.length < 2){
-              <icon-button
-                [icon]="'add'"
-                style="margin-top: 7rem; margin-left: 5rem"
-                (click)="addDamage()"
-              ></icon-button>
-              } }
+              }
             </div>
           </ng-template>
         </ng-container>
         <ng-container ngbNavItem="range">
-          @if(isRanged || canBeThrown){
-          <button ngbNavLink>Reichweite</button>
+          @if (isRanged || canBeThrown) {
+            <button ngbNavLink>Reichweite</button>
           } @else {
-          <button class="disabled-button" disabled>Reichweite</button>
+            <button class="disabled-button" disabled>Reichweite</button>
           }
           <ng-template ngbNavContent>
             <div class="numbers">
-              @if(isRanged){
-              <div class="flex-row t-1">
-                <div class="w-50">
-                  <div class="input-label">Normale Reichweite</div>
-                  <mat-form-field appearance="outline">
-                    <input
-                      class="right"
-                      type="number"
-                      matInput
-                      [(ngModel)]="range[0]"
-                    />
-                    <span class="input-value" matTextSuffix>Fuß</span>
-                  </mat-form-field>
-                </div>
-                <div>
-                  <div class="input-label">Erweiterte Reichweite</div>
-                  <mat-form-field appearance="outline">
-                    <input
-                      class="right"
-                      type="number"
-                      matInput
-                      [(ngModel)]="range[1]"
-                    />
-                    <span class="input-value" matTextSuffix>Fuß</span>
-                  </mat-form-field>
-                </div>
-              </div>
-              } @if(canBeThrown){
-              <div class="flex-row t-2">
-                <div class="w-50">
-                  <div class="input-label">Normale Wurfreichweite</div>
-                  <mat-form-field appearance="outline">
-                    <input
-                      class="right"
-                      type="number"
-                      matInput
-                      [(ngModel)]="throwRange[0]"
-                    />
-                    <span class="input-value" matTextSuffix>Fuß</span>
-                  </mat-form-field>
+              @if (isRanged) {
+                <div class="flex-row t-1">
+                  <div class="w-50">
+                    <div class="input-label">Normale Reichweite</div>
+                    <mat-form-field appearance="outline">
+                      <input
+                        class="right"
+                        type="number"
+                        matInput
+                        [(ngModel)]="range[0]"
+                      />
+                      <span class="input-value" matTextSuffix>Fuß</span>
+                    </mat-form-field>
+                  </div>
+                  <div>
+                    <div class="input-label">Erweiterte Reichweite</div>
+                    <mat-form-field appearance="outline">
+                      <input
+                        class="right"
+                        type="number"
+                        matInput
+                        [(ngModel)]="range[1]"
+                      />
+                      <span class="input-value" matTextSuffix>Fuß</span>
+                    </mat-form-field>
+                  </div>
                 </div>
-                <div>
-                  <div class="input-label">Erweiterte Wurfreichweite</div>
-                  <mat-form-field appearance="outline">
-                    <input
-                      class="right"
-                      type="number"
-                      matInput
-                      [(ngModel)]="throwRange[1]"
-                    />
-                    <span class="input-value" matTextSuffix>Fuß</span>
-                  </mat-form-field>
+              }
+              @if (canBeThrown) {
+                <div class="flex-row t-2">
+                  <div class="w-50">
+                    <div class="input-label">Normale Wurfreichweite</div>
+                    <mat-form-field appearance="outline">
+                      <input
+                        class="right"
+                        type="number"
+                        matInput
+                        [(ngModel)]="throwRange[0]"
+                      />
+                      <span class="input-value" matTextSuffix>Fuß</span>
+                    </mat-form-field>
+                  </div>
+                  <div>
+                    <div class="input-label">Erweiterte Wurfreichweite</div>
+                    <mat-form-field appearance="outline">
+                      <input
+                        class="right"
+                        type="number"
+                        matInput
+                        [(ngModel)]="throwRange[1]"
+                      />
+                      <span class="input-value" matTextSuffix>Fuß</span>
+                    </mat-form-field>
+                  </div>
                 </div>
-              </div>
               }
             </div>
           </ng-template>
@@ -277,14 +298,14 @@
   </div>
 
   <div class="horizontal-buttons">
-    @if(isUpdate){
-    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
-      Anpassen
-    </ui-button>
-    }@else{
-    <ui-button [color]="'green'" style="width: 40%" (click)="add()">
-      Erstellen
-    </ui-button>
+    @if (isUpdate) {
+      <ui-button [color]="'green'" style="width: 40%" (click)="update()">
+        Anpassen
+      </ui-button>
+    } @else {
+      <ui-button [color]="'green'" style="width: 40%" (click)="add()">
+        Erstellen
+      </ui-button>
     }
     <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
       Abbrechen

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

@@ -1,100 +1,100 @@
 .checkbox-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
 }
 
 .checkbox-column {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding-left: 0.5rem;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 0.5rem;
 }
 
 .damage-box {
-    width: 50%;
+  width: 50%;
 }
 
 .damage-box {
-    icon-button {
-        padding-left: 5.5rem;
-        margin-bottom: 1rem;
-        margin-top: 0.5rem;
-    }
+  icon-button {
+    padding-left: 5.5rem;
+    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+  }
 }
 
 ::ng-deep div.d-flex {
-    .mat-mdc-form-field-infix {
-        height: 40px !important;
-        min-height: 40px !important;
-        padding-top: 8px !important;
-    }
+  .mat-mdc-form-field-infix {
+    height: 40px !important;
+    min-height: 40px !important;
+    padding-top: 8px !important;
+  }
 }
 
 .numbers {
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        display: none;
-    }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    display: none;
+  }
 
-    input {
-        -moz-appearance: textfield;
-        appearance: textfield;
-    }
+  input {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
 
-    .input-value {
-        padding-left: 0.5rem;
-    }
+  .input-value {
+    padding-left: 0.5rem;
+  }
 
-    span {
-        color: darkgrey;
-    }
-    ::ng-deep .mat-mdc-text-field-wrapper {
-        width: 12rem !important;
-    }
+  span {
+    color: darkgrey;
+  }
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    width: 12rem !important;
+  }
 }
 
 div.nav-pills.flex-column.nav {
-    border-right: 1px solid darkgray;
-    padding-right: 4px;
+  border-right: 1px solid darkgray;
+  padding-right: 4px;
 }
 
 ::ng-deep .ProseMirror {
-    height: 17.5rem !important;
-    overflow-y: auto;
+  height: 17.5rem !important;
+  overflow-y: auto;
 }
 
 .navigation-bar {
-    padding-top: 0.5rem;
-    gap: 1rem;
-    height: 20rem;
-    align-items: center;
-    border-right: 1px solid rgba(0, 0, 0, 0.125);
-    padding-right: 4px;
-    width: 11rem;
+  padding-top: 0.5rem;
+  gap: 1rem;
+  height: 20rem;
+  align-items: center;
+  border-right: 1px solid rgba(0, 0, 0, 0.125);
+  padding-right: 4px;
+  width: 11rem;
 
-    .nav-link {
-        width: 100%;
-        border-radius: 10px;
-        transition: all 0.25s ease-in-out;
-        font-weight: 600;
-        color: var(--text);
+  .nav-link {
+    width: 100%;
+    border-radius: 10px;
+    transition: all 0.25s ease-in-out;
+    font-weight: 600;
+    color: var(--text);
 
-        &.active,
-        &:hover {
-            background-color: var(--tab-active);
-            box-shadow: var(--shadow);
-        }
+    &.active,
+    &:hover {
+      background-color: var(--tab-active);
+      box-shadow: var(--shadow);
     }
+  }
 
-    .disabled-button {
-        padding: 8px 0;
-        border: none;
-        font-weight: 600;
-        color: black;
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
+  .disabled-button {
+    padding: 8px 0;
+    border: none;
+    font-weight: 600;
+    color: black;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }

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

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

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

@@ -12,45 +12,45 @@
     class="item-list table-content"
     (cdkDropListDropped)="dropWeapons($event)"
   >
-    @for(weapon of weapons; let index = $index; track weapon){
-    <div class="item" cdkDrag (click)="openDetailsPanel(index)">
-      <!--  Range Icon -->
-      <ng-container
-        [ngTemplateOutlet]="distanceIconTemplate"
-        [ngTemplateOutletContext]="{ weapon: weapon }"
-      ></ng-container>
-      <div class="vertical-line"></div>
-      <ng-container
-        [ngTemplateOutlet]="weaponNameTemplate"
-        [ngTemplateOutletContext]="{ weapon: weapon }"
-      ></ng-container>
-      <div class="vertical-line"></div>
-      <ng-container
-        [ngTemplateOutlet]="weaponAttackTemplate"
-        [ngTemplateOutletContext]="{ weapon: weapon }"
-      ></ng-container>
-      <div class="vertical-line"></div>
-      <ng-container
-        [ngTemplateOutlet]="weaponDamageTemplate"
-        [ngTemplateOutletContext]="{ weapon: weapon, index: index }"
-      ></ng-container>
-      <div class="vertical-line"></div>
-      <ng-container
-        [ngTemplateOutlet]="weaponRangeTemplate"
-        [ngTemplateOutletContext]="{ weapon: weapon }"
-      ></ng-container>
-    </div>
-    } @empty{
-    <div
-      style="
-        text-align: center;
-        margin-top: 3rem;
-        font-size: 1.25rem;
-        font-weight: 500;
-      "
-    >
-      Noch keine Waffen hinzugefügt
-    </div>
+    @for (weapon of weapons; let index = $index; track weapon) {
+      <div class="item" cdkDrag (click)="openDetailsPanel(index)">
+        <!--  Range Icon -->
+        <ng-container
+          [ngTemplateOutlet]="distanceIconTemplate"
+          [ngTemplateOutletContext]="{ weapon: weapon }"
+        ></ng-container>
+        <div class="vertical-line"></div>
+        <ng-container
+          [ngTemplateOutlet]="weaponNameTemplate"
+          [ngTemplateOutletContext]="{ weapon: weapon }"
+        ></ng-container>
+        <div class="vertical-line"></div>
+        <ng-container
+          [ngTemplateOutlet]="weaponAttackTemplate"
+          [ngTemplateOutletContext]="{ weapon: weapon }"
+        ></ng-container>
+        <div class="vertical-line"></div>
+        <ng-container
+          [ngTemplateOutlet]="weaponDamageTemplate"
+          [ngTemplateOutletContext]="{ weapon: weapon, index: index }"
+        ></ng-container>
+        <div class="vertical-line"></div>
+        <ng-container
+          [ngTemplateOutlet]="weaponRangeTemplate"
+          [ngTemplateOutletContext]="{ weapon: weapon }"
+        ></ng-container>
+      </div>
+    } @empty {
+      <div
+        style="
+          text-align: center;
+          margin-top: 3rem;
+          font-size: 1.25rem;
+          font-weight: 500;
+        "
+      >
+        Noch keine Waffen hinzugefügt
+      </div>
     }
   </div>
   <div class="footer">
@@ -104,9 +104,11 @@
 
 <!-- Range -->
 <ng-template #weaponRangeTemplate let-weapon="weapon">
-  @if(weapon.isRanged){
-  <div class="weapon-range">
-    {{ weapon.range[0] }}/{{ weapon.range[1] }} ft.
-  </div>
-  }@else{ Nahkampf }
+  @if (weapon.isRanged) {
+    <div class="weapon-range">
+      {{ weapon.range[0] }}/{{ weapon.range[1] }} ft.
+    </div>
+  } @else {
+    Nahkampf
+  }
 </ng-template>

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

@@ -8,7 +8,7 @@ describe('WeaponTableComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [WeaponTableComponent]
+      declarations: [WeaponTableComponent],
     });
     fixture = TestBed.createComponent(WeaponTableComponent);
     component = fixture.componentInstance;

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

@@ -40,7 +40,7 @@ export class WeaponTableComponent {
   public constructor(
     public dataAccessor: DataService,
     public detailsAccessor: DetailsService,
-    private modalAccessor: ModalService
+    private modalAccessor: ModalService,
   ) {}
 
   public ngOnInit(): void {
@@ -97,7 +97,7 @@ export class WeaponTableComponent {
     moveItemInArray(
       this.damageModifiers,
       event.previousIndex,
-      event.currentIndex
+      event.currentIndex,
     );
     this.updateWeaponInDatabase();
   }
@@ -124,7 +124,7 @@ export class WeaponTableComponent {
         } else if (result.state === 'update') {
           this.openModal(true, index);
         } else resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 
@@ -144,7 +144,7 @@ export class WeaponTableComponent {
           this.addWeapon(result.data);
         }
         resultSubscription.unsubscribe();
-      }
+      },
     );
   }
 

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

@@ -15,16 +15,19 @@
       Zauber
     </button>
   </div>
-  @switch(active){ @case(1){
-  <weapon-table #weaponTable></weapon-table>
-  <!-- <ui-button
+  @switch (active) {
+    @case (1) {
+      <weapon-table #weaponTable></weapon-table>
+      <!-- <ui-button
     [type]="'add'"
     [size]="'xlarge'"
     [color]="'primary'"
     class="button-margin"
     (click)="openModal()"
   ></ui-button> -->
-  } @case(2){
-  <spell-table #spellTable></spell-table>
-  } }
+    }
+    @case (2) {
+      <spell-table #spellTable></spell-table>
+    }
+  }
 </div>

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

@@ -8,7 +8,7 @@ describe('WeaponsContainerComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [WeaponsContainerComponent]
+      declarations: [WeaponsContainerComponent],
     });
     fixture = TestBed.createComponent(WeaponsContainerComponent);
     component = fixture.componentInstance;

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

@@ -1,6 +1,10 @@
 <div class="dimensions">
   <div class="title">
-    @if(isModification){Zauber bearbeiten}@else{Zauber erstellen}
+    @if (isModification) {
+      Zauber bearbeiten
+    } @else {
+      Zauber erstellen
+    }
   </div>
 
   <div class="content b-0">
@@ -83,23 +87,23 @@
           <label for="needsSavingThrow">Erfordert Rettungswurf</label>
         </div>
         <div class="checkbox-row">
-          @if(!needsSavingThrow){
-          <input
-            id="needsAttackRoll"
-            type="checkbox"
-            [(ngModel)]="needsAttackRoll"
-          />
-          <label for="needsAttackRoll">Erfordert Angriffswurf</label>
-          }@else {
-          <label>Attribut</label>
-          <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
-            <option
-              *ngFor="let attribute of savingThrowAttributes"
-              [value]="attribute.value"
-            >
-              {{ attribute.display }}
-            </option>
-          </select>
+          @if (!needsSavingThrow) {
+            <input
+              id="needsAttackRoll"
+              type="checkbox"
+              [(ngModel)]="needsAttackRoll"
+            />
+            <label for="needsAttackRoll">Erfordert Angriffswurf</label>
+          } @else {
+            <label>Attribut</label>
+            <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
+              <option
+                *ngFor="let attribute of savingThrowAttributes"
+                [value]="attribute.value"
+              >
+                {{ attribute.display }}
+              </option>
+            </select>
           }
         </div>
       </div>
@@ -110,8 +114,8 @@
           <mat-form-field appearance="outline">
             <mat-select [(ngModel)]="cost">
               @for (cost of costs; track cost) {
-              <mat-option [value]="cost.value">{{ cost.display }}</mat-option
-              >}
+                <mat-option [value]="cost.value">{{ cost.display }}</mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -129,8 +133,8 @@
           <mat-form-field appearance="outline">
             <mat-select [(ngModel)]="level">
               @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
-              <mat-option [value]="level">{{ level }}</mat-option
-              >}
+                <mat-option [value]="level">{{ level }}</mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -139,10 +143,10 @@
           <mat-form-field appearance="outline">
             <mat-select [(ngModel)]="school">
               @for (school of schools; track school) {
-              <mat-option [value]="school.value">{{
-                school.display
-              }}</mat-option
-              >}
+                <mat-option [value]="school.value">{{
+                  school.display
+                }}</mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
@@ -162,68 +166,78 @@
       >
         <!-- DAMAGE -->
         <ng-container ngbNavItem="damage">
-          @if(doesDamage){
-          <button ngbNavLink>Schaden</button>
-          }@else {
-          <button class="disabled-button" disabled>Schaden</button>
+          @if (doesDamage) {
+            <button ngbNavLink>Schaden</button>
+          } @else {
+            <button class="disabled-button" disabled>Schaden</button>
           }
           <ng-template ngbNavContent>
             <div class="tab-content flex-row t-05">
-              @for(damageEntry of damage; let index = $index; track
-              damageEntry){
-
-              <div class="damage-box">
-                <div class="subheading left t-025">
-                  @if(index == 0){Schaden} @else {Weiterer Schaden}
-                </div>
-                <div class="input-label">Anzahl Würfel</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="damageEntry.diceNumber">
-                    @for (number of numbers; track number) {
-                    <mat-option [value]="number"> {{ number }} </mat-option>}
-                  </mat-select>
-                </mat-form-field>
-
-                <div class="input-label t-05">Würfelart</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="damageEntry.diceType">
-                    @for (die of dice; track die) {
-                    <mat-option [value]="die"> {{ die }} </mat-option>}
-                  </mat-select>
-                </mat-form-field>
-
-                <div class="input-label t-05">Schadensart</div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="damageEntry.damageType">
-                    @for (type of damageTypes; track type) {
-                    <mat-option [value]="type.value">
-                      {{ type.display }}
-                    </mat-option>
+              @for (
+                damageEntry of damage;
+                let index = $index;
+                track damageEntry
+              ) {
+                <div class="damage-box">
+                  <div class="subheading left t-025">
+                    @if (index == 0) {
+                      Schaden
+                    } @else {
+                      Weiterer Schaden
                     }
-                  </mat-select>
-                </mat-form-field>
-                @if(index !== 0){
-                <icon-button
-                  [icon]="'delete'"
-                  (click)="removeDamage(index)"
-                ></icon-button>
+                  </div>
+                  <div class="input-label">Anzahl Würfel</div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="damageEntry.diceNumber">
+                      @for (number of numbers; track number) {
+                        <mat-option [value]="number"> {{ number }} </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+
+                  <div class="input-label t-05">Würfelart</div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="damageEntry.diceType">
+                      @for (die of dice; track die) {
+                        <mat-option [value]="die"> {{ die }} </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+
+                  <div class="input-label t-05">Schadensart</div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="damageEntry.damageType">
+                      @for (type of damageTypes; track type) {
+                        <mat-option [value]="type.value">
+                          {{ type.display }}
+                        </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  @if (index !== 0) {
+                    <icon-button
+                      [icon]="'delete'"
+                      (click)="removeDamage(index)"
+                    ></icon-button>
+                  }
+                </div>
+                @if (damage.length < 2) {
+                  <icon-button
+                    [icon]="'add'"
+                    style="margin-top: 7rem; margin-left: 5rem"
+                    (click)="addDamage()"
+                  ></icon-button>
                 }
-              </div>
-              @if(damage.length < 2){
-              <icon-button
-                [icon]="'add'"
-                style="margin-top: 7rem; margin-left: 5rem"
-                (click)="addDamage()"
-              ></icon-button>
-              } }
+              }
             </div>
           </ng-template>
         </ng-container>
         <!-- HEAL -->
         <ng-container ngbNavItem="heal">
-          @if(doesHeal){
-          <button ngbNavLink>Heilung</button>} @else {
-          <button class="disabled-button" disabled>Heilung</button>
+          @if (doesHeal) {
+            <button ngbNavLink>Heilung</button>
+          } @else {
+            <button class="disabled-button" disabled>Heilung</button>
           }
           <ng-template ngbNavContent>
             <div class="tab-content t-05">
@@ -231,8 +245,8 @@
               <mat-form-field appearance="outline">
                 <mat-select [(ngModel)]="heal.diceNumber">
                   @for (number of numbers; track number) {
-                  <mat-option [value]="number">{{ number }}</mat-option
-                  >}
+                    <mat-option [value]="number">{{ number }}</mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
 
@@ -240,8 +254,8 @@
               <mat-form-field appearance="outline">
                 <mat-select [(ngModel)]="heal.diceType">
                   @for (die of dice; track die) {
-                  <mat-option [value]="die">{{ die }}</mat-option
-                  >}
+                    <mat-option [value]="die">{{ die }}</mat-option>
+                  }
                 </mat-select>
               </mat-form-field>
             </div>
@@ -249,10 +263,10 @@
         </ng-container>
         <!-- RANGE -->
         <ng-container ngbNavItem="range">
-          @if(isRanged || hasAreaOfEffect){
-          <button ngbNavLink>Reichweite</button>
+          @if (isRanged || hasAreaOfEffect) {
+            <button ngbNavLink>Reichweite</button>
           } @else {
-          <button class="disabled-button" disabled>Reichweite</button>
+            <button class="disabled-button" disabled>Reichweite</button>
           }
           <ng-template ngbNavContent>
             <div class="range-container">
@@ -261,22 +275,22 @@
                 <input type="number" matInput [(ngModel)]="range" />
                 <span class="suffix" matTextSuffix>Fuß</span>
               </mat-form-field>
-              @if(hasAreaOfEffect) {
-              <div class="input-label">Flächenart</div>
-              <mat-form-field appearance="outline">
-                <mat-select [(ngModel)]="areaOfEffectType">
-                  @for (areaType of areaTypes; track areaType) {
-                  <mat-option [value]="areaType.value">{{
-                    areaType.display
-                  }}</mat-option
-                  >}
-                </mat-select>
-              </mat-form-field>
-              <div class="input-label">Durchmesser</div>
-              <mat-form-field appearance="outline">
-                <input type="number" matInput [(ngModel)]="diameter" />
-                <span class="suffix" matTextSuffix>Fuß</span>
-              </mat-form-field>
+              @if (hasAreaOfEffect) {
+                <div class="input-label">Flächenart</div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="areaOfEffectType">
+                    @for (areaType of areaTypes; track areaType) {
+                      <mat-option [value]="areaType.value">{{
+                        areaType.display
+                      }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+                <div class="input-label">Durchmesser</div>
+                <mat-form-field appearance="outline">
+                  <input type="number" matInput [(ngModel)]="diameter" />
+                  <span class="suffix" matTextSuffix>Fuß</span>
+                </mat-form-field>
               }
             </div>
           </ng-template>
@@ -396,7 +410,11 @@
       style="width: 40%"
       (click)="isModification ? update() : add()"
     >
-      @if(isModification){Anwenden}@else{Erstellen}
+      @if (isModification) {
+        Anwenden
+      } @else {
+        Erstellen
+      }
     </ui-button>
     <ui-button [color]="'red'" style="width: 40%" (click)="cancel()"
       >Abbrechen

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

@@ -1,108 +1,108 @@
 .checkbox-column {
-    width: 33.3%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding-left: 0.5rem;
+  width: 33.3%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 0.5rem;
 }
 
 .checkbox-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
 }
 
 .input-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .damage-box {
-    width: 50%;
+  width: 50%;
 }
 
 .damage-box {
-    icon-button {
-        padding-left: 4rem;
-        margin-bottom: 1rem;
-        margin-top: 0.5rem;
-    }
+  icon-button {
+    padding-left: 4rem;
+    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+  }
 }
 
 .flex-row,
 .range-container {
-    ::ng-deep .mat-mdc-text-field-wrapper {
-        width: 10rem !important;
-    }
-    ::ng-deep .mat-mdc-form-field-infix {
-        height: 32px !important;
-        min-height: 32px !important;
-        padding-top: 4px !important;
-    }
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        display: none;
-    }
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    width: 10rem !important;
+  }
+  ::ng-deep .mat-mdc-form-field-infix {
+    height: 32px !important;
+    min-height: 32px !important;
+    padding-top: 4px !important;
+  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    display: none;
+  }
 
-    input {
-        -moz-appearance: textfield;
-        appearance: textfield;
-    }
+  input {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
 }
 
 .tab-content {
-    ::ng-deep .mat-mdc-text-field-wrapper {
-        width: 10rem !important;
-    }
-    ::ng-deep .mat-mdc-form-field-infix {
-        height: 40px !important;
-        min-height: 40px !important;
-        padding-top: 8px !important;
-    }
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    width: 10rem !important;
+  }
+  ::ng-deep .mat-mdc-form-field-infix {
+    height: 40px !important;
+    min-height: 40px !important;
+    padding-top: 8px !important;
+  }
 }
 
 div.nav-pills.flex-column.nav {
-    border-right: 1px solid darkgray;
-    padding-right: 4px;
+  border-right: 1px solid darkgray;
+  padding-right: 4px;
 }
 
 ::ng-deep .ProseMirror {
-    height: 17.5rem !important;
-    overflow-y: auto;
+  height: 17.5rem !important;
+  overflow-y: auto;
 }
 
 .navigation-bar {
-    padding-top: 0.5rem;
-    gap: 1rem;
-    height: 20rem;
-    align-items: center;
-    border-right: 1px solid rgba(0, 0, 0, 0.125);
-    padding-right: 4px;
-    width: 11rem;
+  padding-top: 0.5rem;
+  gap: 1rem;
+  height: 20rem;
+  align-items: center;
+  border-right: 1px solid rgba(0, 0, 0, 0.125);
+  padding-right: 4px;
+  width: 11rem;
 
-    .nav-link {
-        width: 100%;
-        border-radius: 10px;
-        transition: all 0.25s ease-in-out;
-        font-weight: 600;
-        color: var(--text);
+  .nav-link {
+    width: 100%;
+    border-radius: 10px;
+    transition: all 0.25s ease-in-out;
+    font-weight: 600;
+    color: var(--text);
 
-        &.active,
-        &:hover {
-            background-color: var(--tab-active);
-            box-shadow: var(--shadow);
-        }
+    &.active,
+    &:hover {
+      background-color: var(--tab-active);
+      box-shadow: var(--shadow);
     }
+  }
 
-    .disabled-button {
-        padding: 8px 0;
-        border: none;
-        font-weight: 600;
-        color: black;
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
+  .disabled-button {
+    padding: 8px 0;
+    border: none;
+    font-weight: 600;
+    color: black;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }

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

@@ -8,7 +8,7 @@ describe('SpellModalComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SpellModalComponent]
+      declarations: [SpellModalComponent],
     });
     fixture = TestBed.createComponent(SpellModalComponent);
     component = fixture.componentInstance;

src/app/shared-components/full-spellcard/full-spellcard.component.html

@@ -13,8 +13,15 @@
         <tr>
           <td>Komponenten:</td>
           <td>
-            @if(spell.needsVerbal){Verbal} @if(spell.needsSomatic){, Somatic}
-            @if(spell.needsMaterial){, Material}
+            @if (spell.needsVerbal) {
+              Verbal
+            }
+            @if (spell.needsSomatic) {
+              , Somatic
+            }
+            @if (spell.needsMaterial) {
+              , Material
+            }
           </td>
         </tr>
         <!-- <tr>
@@ -54,57 +61,64 @@
         </tr>
         <tr>
           <td>Reichweite</td>
-          @if (spell.isRanged){
-          <td>{{ spell.range }}</td>
+          @if (spell.isRanged) {
+            <td>{{ spell.range }}</td>
           } @else {
-          <td>Berührung</td>
+            <td>Berührung</td>
           }
         </tr>
-        @if (spell.hasAreaOfEffect){
-        <tr>
-          <td>Flächeneffekt</td>
-          <td>{{ spell.areaOfEffectType }}</td>
-        </tr>
-        <tr>
-          <td>Durchmesser</td>
-          <td>{{ spell.diameter }}</td>
-        </tr>
-        } @if (spell.needsAttackRoll){
-        <tr>
-          <td>Benötigt Angriffswurf</td>
-          <td>{{ spell.needsAttackRoll }}</td>
-        </tr>
-
-        } @if (spell.needsSavingThrow){
-        <tr>
-          <td>Benötigt Rettungswurf</td>
-          <td>{{ spell.needsSavingThrow }}</td>
-        </tr>
-        <tr>
-          <td>Rettungswurfattribut</td>
-          <td>{{ spell.savingThrowAttribute }}</td>
-        </tr>
-        } @if (spell.doesDamage){
-        <tr>
-          <td>Schaden</td>
-          <td>
-            @for(damage of spell.damage; track damage){
-            {{ damage.diceNumber }} {{ damage.diceType }}
-            {{ damage.damageType }} @if (damage.additionalDamage){ +
-            {{ damage.additionalDamage }}}
+        @if (spell.hasAreaOfEffect) {
+          <tr>
+            <td>Flächeneffekt</td>
+            <td>{{ spell.areaOfEffectType }}</td>
+          </tr>
+          <tr>
+            <td>Durchmesser</td>
+            <td>{{ spell.diameter }}</td>
+          </tr>
+        }
+        @if (spell.needsAttackRoll) {
+          <tr>
+            <td>Benötigt Angriffswurf</td>
+            <td>{{ spell.needsAttackRoll }}</td>
+          </tr>
+        }
+        @if (spell.needsSavingThrow) {
+          <tr>
+            <td>Benötigt Rettungswurf</td>
+            <td>{{ spell.needsSavingThrow }}</td>
+          </tr>
+          <tr>
+            <td>Rettungswurfattribut</td>
+            <td>{{ spell.savingThrowAttribute }}</td>
+          </tr>
+        }
+        @if (spell.doesDamage) {
+          <tr>
+            <td>Schaden</td>
+            <td>
+              @for (damage of spell.damage; track damage) {
+                {{ damage.diceNumber }} {{ damage.diceType }}
+                {{ damage.damageType }}
+                @if (damage.additionalDamage) {
+                  + {{ damage.additionalDamage }}
+                }
 
-            <br />
-            }
-          </td>
-        </tr>
-        } @if (spell.doesHeal){
-        <tr>
-          <td>Heilung</td>
-          <td>
-            {{ spell.heal.diceNumber }} {{ spell.heal.diceType }} @if
-            (spell.heal.additionalHeal){ + {{ spell.heal.additionalHeal }}}
-          </td>
-        </tr>
+                <br />
+              }
+            </td>
+          </tr>
+        }
+        @if (spell.doesHeal) {
+          <tr>
+            <td>Heilung</td>
+            <td>
+              {{ spell.heal.diceNumber }} {{ spell.heal.diceType }}
+              @if (spell.heal.additionalHeal) {
+                + {{ spell.heal.additionalHeal }}
+              }
+            </td>
+          </tr>
         }
         <h3>Beschreibung</h3>
         <div [innerHTML]="spell.description_de"></div>
@@ -113,26 +127,29 @@
   </div>
 
   <div class="delete-row">
-    @if(isFromDashboard){
-    <button class="delete-button" (click)="remove()">Entfernen</button>
-    }@else {
+    @if (isFromDashboard) {
+      <button class="delete-button" (click)="remove()">Entfernen</button>
+    } @else {
+      <!-- Add to favorites -->
+      <button
+        [class]="alreadyInFavorites ? 'disabled add-button' : 'add-button'"
+        (click)="alreadyInFavorites ? '' : addToFavorites()"
+      >
+        @if (alreadyInFavorites) {
+          Bereits in Favoriten
+        } @else {
+          Zu Favoriten hinzufügen
+        }
+      </button>
+      <!-- Modify spell (only available for custom spells) -->
+      @if (spell.isCustom) {
+        <button class="edit-button" (click)="update()">Anpassen</button>
+      }
 
-    <!-- Add to favorites -->
-    <button
-      [class]="alreadyInFavorites ? 'disabled add-button' : 'add-button'"
-      (click)="alreadyInFavorites ? '' : addToFavorites()"
-    >
-      @if(alreadyInFavorites){ Bereits in Favoriten} @else{ Zu Favoriten
-      hinzufügen }
-    </button>
-    <!-- Modify spell (only available for custom spells) -->
-    @if(spell.isCustom){
-    <button class="edit-button" (click)="update()">Anpassen</button>
+      <button class="delete-button" (click)="remove()">Entfernen</button>
+      @if (spell.isCustom) {
+        <button class="delete-button" (click)="delete()">Löschen</button>
+      }
     }
-
-    <button class="delete-button" (click)="remove()">Entfernen</button>
-    @if(spell.isCustom){
-    <button class="delete-button" (click)="delete()">Löschen</button>
-    } }
   </div>
 </div>

src/app/shared-components/full-spellcard/full-spellcard.component.scss

@@ -1,62 +1,62 @@
 @mixin button {
-    color: black;
-    border: none;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    height: 4rem;
-    width: 8rem;
-    font-size: 1.125rem;
-    font-weight: 600;
-    transition: all 0.2s ease-in-out;
+  color: black;
+  border: none;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  height: 4rem;
+  width: 8rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  transition: all 0.2s ease-in-out;
 }
 
 .full-spellcard {
-    height: 42rem;
-    width: 30rem;
-    border: solid 1px var(--border-color);
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    background: white;
-    overflow: auto;
+  height: 42rem;
+  width: 30rem;
+  border: solid 1px var(--border-color);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  background: white;
+  overflow: auto;
 }
 
 .delete-row {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 1rem;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1rem;
 }
 .delete-button {
-    background: var(--delete);
-    @include button;
-    &:hover {
-        background: var(--delete-hover);
-        scale: 1.03;
-    }
+  background: var(--delete);
+  @include button;
+  &:hover {
+    background: var(--delete-hover);
+    scale: 1.03;
+  }
 }
 
 .edit-button {
-    background: var(--edit);
-    @include button;
-    &:hover {
-        background: var(--edit-hover);
-        scale: 1.03;
-    }
+  background: var(--edit);
+  @include button;
+  &:hover {
+    background: var(--edit-hover);
+    scale: 1.03;
+  }
 }
 
 .add-button {
-    background: var(--accept);
-    @include button;
-    &:hover {
-        background: var(--accept-hover);
-        scale: 1.03;
-    }
+  background: var(--accept);
+  @include button;
+  &:hover {
+    background: var(--accept-hover);
+    scale: 1.03;
+  }
 
-    &.disabled {
-        filter: grayscale(50%);
-        &:hover {
-            scale: 1;
-            background: var(--accept);
-            cursor: default;
-        }
+  &.disabled {
+    filter: grayscale(50%);
+    &:hover {
+      scale: 1;
+      background: var(--accept);
+      cursor: default;
     }
+  }
 }

src/app/shared-components/full-spellcard/full-spellcard.component.spec.ts

@@ -8,10 +8,9 @@ describe('FullSpellcardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [FullSpellcardComponent]
-    })
-    .compileComponents();
-    
+      declarations: [FullSpellcardComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(FullSpellcardComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/shared-components/icon-button/icon-button.component.scss

@@ -1,15 +1,15 @@
 :host {
-    display: block; /* Make sure the host element is a block-level element */
-    width: 2.25rem;
-    height: 1.5rem;
+  display: block; /* Make sure the host element is a block-level element */
+  width: 2.25rem;
+  height: 1.5rem;
 }
 
 button {
-    border: none;
-    background-color: transparent;
-    transition: all 0.25s ease;
-    border-radius: 10px !important;
-    &:hover {
-        background-color: rgba(211, 211, 211, 0.5);
-    }
+  border: none;
+  background-color: transparent;
+  transition: all 0.25s ease;
+  border-radius: 10px !important;
+  &:hover {
+    background-color: rgba(211, 211, 211, 0.5);
+  }
 }

src/app/shared-components/icon-button/icon-button.component.spec.ts

@@ -8,10 +8,9 @@ describe('IconButtonComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [IconButtonComponent]
-    })
-    .compileComponents();
-    
+      declarations: [IconButtonComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(IconButtonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/shared-components/switch/switch.component.html

@@ -1,4 +1,4 @@
 <label class="switch">
-  <input #inputRef type="checkbox" />
+  <input #inputRef type="checkbox" aria-label="Hello" />
   <span class="slider round"></span>
 </label>

src/app/shared-components/switch/switch.component.scss

@@ -2,11 +2,10 @@
 .switch {
   position: relative;
   display: inline-block;
-  width: calc(var(--base-size) * 6.0); // 60px
+  width: calc(var(--base-size) * 6); // 60px
   height: calc(var(--base-size) * 3.4); // 34px
 }
 
-
 // .switch-small{
 //   --base-size: 0.3rem;
 //   position: relative;
@@ -47,8 +46,8 @@
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 .slider:before {
@@ -56,19 +55,19 @@
   content: "";
   height: calc(var(--base-size) * 2.6); // 26px
   width: calc(var(--base-size) * 2.6); // 26px
-  left: calc(var(--base-size) * .4); // 4px
-  bottom: calc(var(--base-size) * .4); // 4px
+  left: calc(var(--base-size) * 0.4); // 4px
+  bottom: calc(var(--base-size) * 0.4); // 4px
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 input:checked + .slider {
-  background-color: #2196F3;
+  background-color: #2196f3;
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
+  box-shadow: 0 0 1px #2196f3;
 }
 
 input:checked + .slider:before {
@@ -84,4 +83,4 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%; // 50%
-}
+}

src/app/shared-components/switch/switch.component.spec.ts

@@ -8,7 +8,7 @@ describe('SwitchComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SwitchComponent]
+      declarations: [SwitchComponent],
     });
     fixture = TestBed.createComponent(SwitchComponent);
     component = fixture.componentInstance;

src/app/shared-components/ui-button/ui-button.component.scss

@@ -1,141 +1,141 @@
 button {
-    display: block;
-    font-size: 1.25rem;
-    font-weight: 600;
-    height: 3rem;
-    border-radius: 10px;
-    cursor: pointer;
-    box-shadow: var(--shadow);
-    transition: background-color 0.25s ease-in-out;
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 600;
+  height: 3rem;
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  transition: background-color 0.25s ease-in-out;
 }
 .default {
-    width: 100%;
+  width: 100%;
 }
 
 .green {
-    background-color: var(--accept);
-    &:hover {
-        background-color: var(--accept-hover);
-    }
+  background-color: var(--accept);
+  &:hover {
+    background-color: var(--accept-hover);
+  }
 }
 
 .red {
-    background-color: var(--delete);
-    &:hover {
-        background-color: var(--delete-hover);
-    }
+  background-color: var(--delete);
+  &:hover {
+    background-color: var(--delete-hover);
+  }
 }
 
 .blue {
-    background-color: var(--edit);
-    &:hover {
-        background-color: var(--edit-hover);
-    }
+  background-color: var(--edit);
+  &:hover {
+    background-color: var(--edit-hover);
+  }
 }
 
 .neutral {
-    background-color: var(--neutral);
-    &:hover {
-        background-color: var(--neutral-hover);
-    }
+  background-color: var(--neutral);
+  &:hover {
+    background-color: var(--neutral-hover);
+  }
 }
 
 .w1 {
-    width: 1rem !important;
+  width: 1rem !important;
 }
 
 .w2 {
-    width: 2rem !important;
+  width: 2rem !important;
 }
 
 .w3 {
-    width: 3rem !important;
+  width: 3rem !important;
 }
 
 .w4 {
-    width: 4rem !important;
+  width: 4rem !important;
 }
 
 .w5 {
-    width: 5rem !important;
+  width: 5rem !important;
 }
 
 .w6 {
-    width: 6rem !important;
+  width: 6rem !important;
 }
 
 .w7 {
-    width: 7rem !important;
+  width: 7rem !important;
 }
 
 .w8 {
-    width: 8rem !important;
+  width: 8rem !important;
 }
 
 .w9 {
-    width: 9rem !important;
+  width: 9rem !important;
 }
 
 .w10 {
-    width: 10rem !important;
+  width: 10rem !important;
 }
 
 .w11 {
-    width: 11rem !important;
+  width: 11rem !important;
 }
 
 .w12 {
-    width: 12rem !important;
+  width: 12rem !important;
 }
 
 .w13 {
-    width: 13rem !important;
+  width: 13rem !important;
 }
 
 .w14 {
-    width: 14rem !important;
+  width: 14rem !important;
 }
 
 .w15 {
-    width: 15rem !important;
+  width: 15rem !important;
 }
 
 .w16 {
-    width: 16rem !important;
+  width: 16rem !important;
 }
 
 .w17 {
-    width: 17rem !important;
+  width: 17rem !important;
 }
 
 .w18 {
-    width: 18rem !important;
+  width: 18rem !important;
 }
 
 .w19 {
-    width: 19rem !important;
+  width: 19rem !important;
 }
 
 .w20 {
-    width: 20rem !important;
+  width: 20rem !important;
 }
 
 .w21 {
-    width: 21rem !important;
+  width: 21rem !important;
 }
 
 .w22 {
-    width: 22rem !important;
+  width: 22rem !important;
 }
 
 .w23 {
-    width: 23rem !important;
+  width: 23rem !important;
 }
 
 .w24 {
-    width: 24rem !important;
+  width: 24rem !important;
 }
 
 .w25 {
-    width: 25rem !important;
+  width: 25rem !important;
 }

src/app/shared-components/ui-button/ui-button.component.spec.ts

@@ -8,7 +8,7 @@ describe('UiButtonComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [UiButtonComponent]
+      declarations: [UiButtonComponent],
     });
     fixture = TestBed.createComponent(UiButtonComponent);
     component = fixture.componentInstance;

src/app/shared-components/value-box/value-box.component.html

@@ -1,14 +1,14 @@
 <div class="container">
-  @if(isInput){
-  <input
-    [(ngModel)]="data"
-    (ngModelChange)="onChange($event)"
-    (blur)="onTouched()"
-    id="input"
-    type="number"
-  />
+  @if (isInput) {
+    <input
+      [(ngModel)]="data"
+      (ngModelChange)="onChange($event)"
+      (blur)="onTouched()"
+      id="input"
+      type="number"
+    />
   } @else {
-  <div class="value" id="input">{{ value }}</div>
+    <div class="value" id="input">{{ value }}</div>
   }
   <label for="input">{{ label }}</label>
 </div>

src/app/shared-components/value-box/value-box.component.scss

@@ -1,33 +1,33 @@
 .container {
-    max-width: 5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.375rem;
+  max-width: 5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
 }
 
 input,
 .value {
-    width: 3.5rem;
-    height: 2.75rem;
-    font-size: 1.5rem;
-    text-align: center;
-    border-radius: 10px;
-    border: none;
-    box-shadow: var(--shadow);
-    background-color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 3.5rem;
+  height: 2.75rem;
+  font-size: 1.5rem;
+  text-align: center;
+  border-radius: 10px;
+  border: none;
+  box-shadow: var(--shadow);
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }
 
 label {
-    text-align: center;
-    font-weight: 500;
+  text-align: center;
+  font-weight: 500;
 }

src/app/shared-components/value-box/value-box.component.spec.ts

@@ -8,10 +8,9 @@ describe('ValueBoxComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ValueBoxComponent]
-    })
-    .compileComponents();
-    
+      declarations: [ValueBoxComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ValueBoxComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/button-styles.scss

@@ -1,20 +1,20 @@
 .horizontal-buttons {
-    display: flex;
-    justify-content: space-between;
-    padding: 2rem 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem 0;
 }
 
 .vertical-buttons {
-    width: 27rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.5rem;
+  width: 27rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 .bottom {
-    position: absolute;
-    bottom: 0;
-    margin-bottom: 2rem;
-    margin-top: 2rem;
+  position: absolute;
+  bottom: 0;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
 }

src/helpers.scss

@@ -1,251 +1,251 @@
 .t-0 {
-    margin-top: 0 !important;
+  margin-top: 0 !important;
 }
 
 .t-0125 {
-    margin-top: 0.125rem !important;
+  margin-top: 0.125rem !important;
 }
 
 .t-025 {
-    margin-top: 0.25rem !important;
+  margin-top: 0.25rem !important;
 }
 
 .t-0375 {
-    margin-top: 0.375rem !important;
+  margin-top: 0.375rem !important;
 }
 
 .t-05 {
-    margin-top: 0.5rem !important;
+  margin-top: 0.5rem !important;
 }
 
 .t-0625 {
-    margin-top: 0.625rem !important;
+  margin-top: 0.625rem !important;
 }
 
 .t-075 {
-    margin-top: 0.75rem !important;
+  margin-top: 0.75rem !important;
 }
 
 .t-0875 {
-    margin-top: 0.875rem !important;
+  margin-top: 0.875rem !important;
 }
 
 .t-1 {
-    margin-top: 1rem !important;
+  margin-top: 1rem !important;
 }
 
 .t-1125 {
-    margin-top: 1.125rem !important;
+  margin-top: 1.125rem !important;
 }
 
 .t-125 {
-    margin-top: 1.25rem !important;
+  margin-top: 1.25rem !important;
 }
 
 .t-1375 {
-    margin-top: 1.375rem !important;
+  margin-top: 1.375rem !important;
 }
 
 .t-15 {
-    margin-top: 1.5rem !important;
+  margin-top: 1.5rem !important;
 }
 
 .t-1625 {
-    margin-top: 1.625rem !important;
+  margin-top: 1.625rem !important;
 }
 
 .t-175 {
-    margin-top: 1.75rem !important;
+  margin-top: 1.75rem !important;
 }
 
 .t-1875 {
-    margin-top: 1.875rem !important;
+  margin-top: 1.875rem !important;
 }
 
 .t-2 {
-    margin-top: 2rem !important;
+  margin-top: 2rem !important;
 }
 
 .b-0 {
-    margin-bottom: 0 !important;
+  margin-bottom: 0 !important;
 }
 
 .b-0125 {
-    margin-bottom: 0.125rem !important;
+  margin-bottom: 0.125rem !important;
 }
 
 .b-025 {
-    margin-bottom: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
 }
 
 .b-0375 {
-    margin-bottom: 0.375rem !important;
+  margin-bottom: 0.375rem !important;
 }
 
 .b-05 {
-    margin-bottom: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .b-0625 {
-    margin-bottom: 0.625rem !important;
+  margin-bottom: 0.625rem !important;
 }
 
 .b-075 {
-    margin-bottom: 0.75rem !important;
+  margin-bottom: 0.75rem !important;
 }
 
 .b-0875 {
-    margin-bottom: 0.875rem !important;
+  margin-bottom: 0.875rem !important;
 }
 
 .b-1 {
-    margin-bottom: 1rem !important;
+  margin-bottom: 1rem !important;
 }
 
 .b-1125 {
-    margin-bottom: 1.125rem !important;
+  margin-bottom: 1.125rem !important;
 }
 
 .b-125 {
-    margin-bottom: 1.25rem !important;
+  margin-bottom: 1.25rem !important;
 }
 
 .b-1375 {
-    margin-bottom: 1.375rem !important;
+  margin-bottom: 1.375rem !important;
 }
 
 .b-15 {
-    margin-bottom: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .b-1625 {
-    margin-bottom: 1.625rem !important;
+  margin-bottom: 1.625rem !important;
 }
 
 .b-175 {
-    margin-bottom: 1.75rem !important;
+  margin-bottom: 1.75rem !important;
 }
 
 .b-1875 {
-    margin-bottom: 1.875rem !important;
+  margin-bottom: 1.875rem !important;
 }
 
 .b-2 {
-    margin-bottom: 2rem !important;
+  margin-bottom: 2rem !important;
 }
 
 .left {
-    text-align: left !important;
+  text-align: left !important;
 }
 
 .center {
-    text-align: center !important;
+  text-align: center !important;
 }
 
 .right {
-    text-align: right !important;
+  text-align: right !important;
 }
 
 .row {
-    display: flex !important;
+  display: flex !important;
 }
 
 .column {
-    display: flex !important;
-    flex-direction: column !important;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 // Überprüfen, ob es verwendet wird
 
 .flex-centered {
-    align-items: center;
-    justify-content: center;
+  align-items: center;
+  justify-content: center;
 }
 
 .flex-left {
-    justify-content: start;
+  justify-content: start;
 }
 
 .flex-right {
-    justify-content: end;
+  justify-content: end;
 }
 
 .gap-01 {
-    gap: 0.1rem;
+  gap: 0.1rem;
 }
 
 .gap-02 {
-    gap: 0.2rem;
+  gap: 0.2rem;
 }
 
 .gap-03 {
-    gap: 0.3rem;
+  gap: 0.3rem;
 }
 
 .gap-04 {
-    gap: 0.4rem;
+  gap: 0.4rem;
 }
 
 .gap-05 {
-    gap: 0.5rem;
+  gap: 0.5rem;
 }
 
 .gap-06 {
-    gap: 0.6rem;
+  gap: 0.6rem;
 }
 
 .gap-07 {
-    gap: 0.7rem;
+  gap: 0.7rem;
 }
 
 .gap-08 {
-    gap: 0.8rem;
+  gap: 0.8rem;
 }
 
 .gap-09 {
-    gap: 0.9rem;
+  gap: 0.9rem;
 }
 
 .gap-10 {
-    gap: 1rem;
+  gap: 1rem;
 }
 
 .gap-11 {
-    gap: 1.1rem;
+  gap: 1.1rem;
 }
 
 .gap-12 {
-    gap: 1.2rem;
+  gap: 1.2rem;
 }
 
 .gap-13 {
-    gap: 1.3rem;
+  gap: 1.3rem;
 }
 
 .gap-14 {
-    gap: 1.4rem;
+  gap: 1.4rem;
 }
 
 .gap-15 {
-    gap: 1.5rem;
+  gap: 1.5rem;
 }
 
 .gap-16 {
-    gap: 1.6rem;
+  gap: 1.6rem;
 }
 
 .gap-17 {
-    gap: 1.7rem;
+  gap: 1.7rem;
 }
 
 .gap-18 {
-    gap: 1.8rem;
+  gap: 1.8rem;
 }
 
 .gap-19 {
-    gap: 1.9rem;
+  gap: 1.9rem;
 }
 
 .gap-20 {
-    gap: 2rem;
+  gap: 2rem;
 }

src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/main.ts

@@ -4,6 +4,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

src/services/data/data.service.ts

@@ -201,7 +201,7 @@ export class DataService {
    */
   public updateFavoriteSpell(spell: Spell): void {
     const index = this._favoriteSpells.findIndex(
-      (favorite) => favorite.id === spell.id
+      (favorite) => favorite.id === spell.id,
     );
     if (index > -1) {
       this._favoriteSpells[index] = spell;
@@ -251,7 +251,7 @@ export class DataService {
    */
   public updateCustomSpell(spell: Spell): void {
     const index = this._customSpells.findIndex(
-      (customSpell) => customSpell.id === spell.id
+      (customSpell) => customSpell.id === spell.id,
     );
     this._customSpells[index] = spell;
     this.spellsService.customSpells = this._customSpells;
@@ -651,32 +651,32 @@ export class DataService {
   }
 
   private strengthSubject = new BehaviorSubject<Attribute>(
-    { name: 'strength', value: 10, proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'strength', value: 10, proficiency: true }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public strength$ = this.strengthSubject.asObservable();
 
   private dexteritySubject = new BehaviorSubject<Attribute>(
-    { name: 'dexterity', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'dexterity', value: 10, proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public dexterity$ = this.dexteritySubject.asObservable();
 
   private constitutionSubject = new BehaviorSubject<Attribute>(
-    { name: 'constitution', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'constitution', value: 10, proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public constitution$ = this.constitutionSubject.asObservable();
 
   private intelligenceSubject = new BehaviorSubject<Attribute>(
-    { name: 'intelligence', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'intelligence', value: 10, proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public intelligence$ = this.intelligenceSubject.asObservable();
 
   private wisdomSubject = new BehaviorSubject<Attribute>(
-    { name: 'wisdom', value: 10, proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'wisdom', value: 10, proficiency: true }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public wisdom$ = this.wisdomSubject.asObservable();
 
   private charismaSubject = new BehaviorSubject<Attribute>(
-    { name: 'charisma', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'charisma', value: 10, proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public charisma$ = this.charismaSubject.asObservable();
 
@@ -711,92 +711,92 @@ export class DataService {
   }
 
   private acrobaticsSubject = new BehaviorSubject<Skill>(
-    { name: 'acrobatics', proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'acrobatics', proficiency: true }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public acrobatics$ = this.acrobaticsSubject.asObservable();
 
   private animalHandlingSubject = new BehaviorSubject<Skill>(
-    { name: 'animalHandling', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'animalHandling', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public animalHandling$ = this.animalHandlingSubject.asObservable();
 
   private arcanaSubject = new BehaviorSubject<Skill>(
-    { name: 'arcana', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'arcana', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public arcana$ = this.arcanaSubject.asObservable();
 
   private athleticsSubject = new BehaviorSubject<Skill>(
-    { name: 'athletics', proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'athletics', proficiency: true }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public athletics$ = this.athleticsSubject.asObservable();
 
   private deceptionSubject = new BehaviorSubject<Skill>(
-    { name: 'deception', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'deception', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public deception$ = this.deceptionSubject.asObservable();
 
   private historySubject = new BehaviorSubject<Skill>(
-    { name: 'history', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'history', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public history$ = this.historySubject.asObservable();
 
   private insightSubject = new BehaviorSubject<Skill>(
-    { name: 'insight', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'insight', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public insight$ = this.insightSubject.asObservable();
 
   private intimidationSubject = new BehaviorSubject<Skill>(
-    { name: 'intimidation', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'intimidation', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public intimidation$ = this.intimidationSubject.asObservable();
 
   private investigationSubject = new BehaviorSubject<Skill>(
-    { name: 'investigation', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'investigation', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public investigation$ = this.investigationSubject.asObservable();
 
   private medicineSubject = new BehaviorSubject<Skill>(
-    { name: 'medicine', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'medicine', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public medicine$ = this.medicineSubject.asObservable();
 
   private natureSubject = new BehaviorSubject<Skill>(
-    { name: 'nature', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'nature', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public nature$ = this.natureSubject.asObservable();
 
   private perceptionSubject = new BehaviorSubject<Skill>(
-    { name: 'perception', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'perception', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public perception$ = this.perceptionSubject.asObservable();
 
   private performanceSubject = new BehaviorSubject<Skill>(
-    { name: 'performance', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'performance', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public performance$ = this.performanceSubject.asObservable();
 
   private persuasionSubject = new BehaviorSubject<Skill>(
-    { name: 'persuasion', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'persuasion', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public persuasion$ = this.persuasionSubject.asObservable();
 
   private religionSubject = new BehaviorSubject<Skill>(
-    { name: 'religion', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'religion', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public religion$ = this.religionSubject.asObservable();
 
   private sleightOfHandSubject = new BehaviorSubject<Skill>(
-    { name: 'sleightOfHand', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'sleightOfHand', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public sleightOfHand$ = this.sleightOfHandSubject.asObservable();
 
   private stealthSubject = new BehaviorSubject<Skill>(
-    { name: 'stealth', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'stealth', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public stealth$ = this.stealthSubject.asObservable();
 
   private survivalSubject = new BehaviorSubject<Skill>(
-    { name: 'survival', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'survival', proficiency: false }, //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public survival$ = this.survivalSubject.asObservable();
 
@@ -883,7 +883,7 @@ export class DataService {
   public async addData(
     collection: string,
     data: any,
-    key?: string
+    key?: string,
   ): Promise<void> {
     if (key) {
       return this.db

src/services/spells/spells.service.ts

@@ -43,13 +43,13 @@ export class SpellsService {
    */
   public deleteCustomSpell(spellToDelete: Spell): void {
     const customIndex = this.customSpells.findIndex(
-      (spell) => spell.id === spellToDelete.id
+      (spell) => spell.id === spellToDelete.id,
     );
     if (customIndex > -1) {
       this.customSpells.splice(customIndex, 1);
     }
     const fullIndex = this.spells.findIndex(
-      (spell) => spell.id === spellToDelete.id
+      (spell) => spell.id === spellToDelete.id,
     );
     if (fullIndex > -1) {
       this.spells.splice(fullIndex, 1);

src/styles.scss

@@ -7,223 +7,223 @@
 @import url("./button-styles.scss");
 
 :root {
-    // COLORS to use but not official
-    // --primary: #d8ac96;
-    --primary-light: #e8c7b5;
-    --primary-dark: #d89777;
-    --secondary-color: #efc8af;
-    --secondary-color-light: #f8e1d7;
-    --secondary-color-dark: #cfaa8c;
-    --tertiary-color: #b9835d;
-    --tertiary-color-light: #cfaa8c;
-    --tertiary-color-dark: #8f5f3b;
-    --quaternary-color: #84a36f;
-    --quaternary-color-light: #7a9e65;
-    --quaternary-color-dark: #6eae52;
-
-    --field-background-color: #efc8af;
-
-    --border-color: #8d8c8c;
-    --border-color-active: #b76840;
-
-    --modal-background: antiquewhite;
-
-    --button-color: #efc8af;
-
-    --header: #ffdec6;
-
-    --text: #000000;
-
-    // shadows
-    --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-    --shadow-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
-    --shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
-    --shadow-medium: 4px 4px 10px 6px rgba(0, 0, 0, 0.2);
-    --shadow-large: 4px 4px 10px 8px rgba(0, 0, 0, 0.2);
-
-    // OFFICIAL COLORS
-
-    --primary-old: #d8ac96;
-    --primary: #b0826b;
-
-    // Buttons
-    --accept: #84a36f;
-    --accept-hover: #6f9158;
-    --delete: #a45a52;
-    --delete-hover: #8f4a42;
-    --edit: #86a5b7;
-    --edit-hover: #6f8e9f;
-    --neutral: #b9835d;
-    --neutral-hover: #a76b43;
-    --tab: #c79980;
-    --tab-active: #bc8567;
-    //
-    // c28c6f
-
-    // Spellcards
-
-    --abjuration-background: #cab8de;
-    --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
-    --conjuration-background: #714c81;
-    --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
-    --divination-background: #f0e3ce;
-    --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
-    --enchantment-background: #629179;
-    --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
-    --evocation-background: #a46a7d;
-    --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
-    --illusion-background: #69a;
-    --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
-    --necromancy-background: #000000;
-    --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
-    --transmutation-background: rgb(51, 52, 138);
-    --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f, 0 0 9px #69088f, 0 0 12px #3a088f,
-        0 0 15px #080a8f;
-
-    // General
-
-    --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-    --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-    --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-    --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-
-    --old-primary: #d8ac96;
-    --primary-color: #a9836f;
-    --background-color: #fff2e9;
-    --field-background-color: #efc8af;
-    --border-color: #8d8c8c;
-
-    // --modal-background: antiquewhite;
-    --modal-background: antiquewhite;
-    --header: #ffdec6;
-    --text: #000000;
-    --items: #fff2e9;
-    --items-hover: #f7e3d7;
-
-    --border: 1px solid var(--border-color);
-
-    // Responsiveness
-    .responsive-small {
-        display: none;
-    }
-
-    .responsive-large {
-        display: block;
-    }
-
-    @media (width < 1640px) {
-        .responsive-large {
-            display: none;
-        }
-        .responsive-small {
-            display: block;
-        }
-    }
-
-    // LISTS
-
-    .item-list {
-        width: 100%;
-        overflow: auto;
-    }
-
-    .item {
-        background-color: var(--items);
-        box-sizing: border-box;
-        border: var(--border);
-        border-radius: 10px;
-        box-shadow: var(--shadow);
-        cursor: move;
-        transition: background-color 0.2s ease-in-out;
-        &:hover {
-            background-color: var(--items-hover);
-        }
-    }
+  // COLORS to use but not official
+  // --primary: #d8ac96;
+  --primary-light: #e8c7b5;
+  --primary-dark: #d89777;
+  --secondary-color: #efc8af;
+  --secondary-color-light: #f8e1d7;
+  --secondary-color-dark: #cfaa8c;
+  --tertiary-color: #b9835d;
+  --tertiary-color-light: #cfaa8c;
+  --tertiary-color-dark: #8f5f3b;
+  --quaternary-color: #84a36f;
+  --quaternary-color-light: #7a9e65;
+  --quaternary-color-dark: #6eae52;
+
+  --field-background-color: #efc8af;
+
+  --border-color: #8d8c8c;
+  --border-color-active: #b76840;
+
+  --modal-background: antiquewhite;
+
+  --button-color: #efc8af;
+
+  --header: #ffdec6;
+
+  --text: #000000;
+
+  // shadows
+  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
+  --shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
+  --shadow-medium: 4px 4px 10px 6px rgba(0, 0, 0, 0.2);
+  --shadow-large: 4px 4px 10px 8px rgba(0, 0, 0, 0.2);
+
+  // OFFICIAL COLORS
+
+  --primary-old: #d8ac96;
+  --primary: #b0826b;
+
+  // Buttons
+  --accept: #84a36f;
+  --accept-hover: #6f9158;
+  --delete: #a45a52;
+  --delete-hover: #8f4a42;
+  --edit: #86a5b7;
+  --edit-hover: #6f8e9f;
+  --neutral: #b9835d;
+  --neutral-hover: #a76b43;
+  --tab: #c79980;
+  --tab-active: #bc8567;
+  //
+  // c28c6f
+
+  // Spellcards
+
+  --abjuration-background: #cab8de;
+  --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
+  --conjuration-background: #714c81;
+  --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
+  --divination-background: #f0e3ce;
+  --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
+  --enchantment-background: #629179;
+  --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
+  --evocation-background: #a46a7d;
+  --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
+  --illusion-background: #69a;
+  --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
+  --necromancy-background: #000000;
+  --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
+  --transmutation-background: rgb(51, 52, 138);
+  --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f,
+    0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
+
+  // General
+
+  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+
+  --old-primary: #d8ac96;
+  --primary-color: #a9836f;
+  --background-color: #fff2e9;
+  --field-background-color: #efc8af;
+  --border-color: #8d8c8c;
+
+  // --modal-background: antiquewhite;
+  --modal-background: antiquewhite;
+  --header: #ffdec6;
+  --text: #000000;
+  --items: #fff2e9;
+  --items-hover: #f7e3d7;
+
+  --border: 1px solid var(--border-color);
+
+  // Responsiveness
+  .responsive-small {
+    display: none;
+  }
 
-    .empty-list {
-        text-align: center;
-        margin-top: 2rem;
-        font-size: 1.25rem;
-        font-weight: 500;
-    }
+  .responsive-large {
+    display: block;
+  }
 
-    .footer {
-        height: 5rem;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 0 0 10px 10px;
-        box-shadow: var(--shadow-top);
+  @media (width < 1640px) {
+    .responsive-large {
+      display: none;
     }
-
-    // DRAG AND DROP
-
-    .cdk-drag-preview {
-        box-sizing: border-box;
-        border-radius: 10px;
-        background-color: var(--items-hover);
-        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);
+    .responsive-small {
+      display: block;
     }
+  }
 
-    .cdk-drag-placeholder {
-        opacity: 0;
-    }
+  // LISTS
 
-    .cdk-drag-animating {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-    }
+  .item-list {
+    width: 100%;
+    overflow: auto;
+  }
 
-    .item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  .item {
+    background-color: var(--items);
+    box-sizing: border-box;
+    border: var(--border);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    cursor: move;
+    transition: background-color 0.2s ease-in-out;
+    &:hover {
+      background-color: var(--items-hover);
     }
+  }
 
-    // GENERAL STYLES
-
-    //  Checkbox
+  .empty-list {
+    text-align: center;
+    margin-top: 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
 
-    input[type="checkbox"] {
-        accent-color: var(--accept) !important;
-    }
+  .footer {
+    height: 5rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0 0 10px 10px;
+    box-shadow: var(--shadow-top);
+  }
 
-    // Scrollbar
-    ::-webkit-scrollbar {
-        width: 0.5rem;
-        margin: 0.125rem 0;
-        height: 0.5rem;
-    }
+  // DRAG AND DROP
 
-    ::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 10px;
-    }
+  .cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 10px;
+    background-color: var(--items-hover);
+    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);
+  }
+
+  .item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  // GENERAL STYLES
+
+  //  Checkbox
+
+  input[type="checkbox"] {
+    accent-color: var(--accept) !important;
+  }
+
+  // Scrollbar
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    margin: 0.125rem 0;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+  }
 
-    ::-webkit-scrollbar-thumb {
-        background: #888;
-        border-radius: 10px;
-    }
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+  }
 
-    ::-webkit-scrollbar-thumb:hover {
-        background: #555;
-        border-radius: 10px;
-    }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+    border-radius: 10px;
+  }
 }
 
 .suffix {
-    text-align: right;
-    padding-right: 0.5rem;
-    color: grey;
-    font-size: 0.75rem;
+  text-align: right;
+  padding-right: 0.5rem;
+  color: grey;
+  font-size: 0.75rem;
 }
 
 // Line styles
 
 .centered-line {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 // TODO: Check which of the below are still used
@@ -231,179 +231,187 @@
 //  Info Row
 
 .info-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    border: solid 1px var(--border-color);
-    background-color: var(--field-background-color);
-    box-shadow: var(--shadow);
-    border-radius: 10px;
-    height: 6rem;
-    @media (width > 1699px) {
-        width: 10rem;
-    }
-    @media (width < 1640px) {
-        width: 7rem;
-    }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  height: 6rem;
+  @media (width > 1699px) {
+    width: 10rem;
+  }
+  @media (width < 1640px) {
+    width: 7rem;
+  }
 }
 
 .info-input {
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 5rem;
-    margin-top: 0.375rem;
-    font-size: 2rem;
-    font-weight: 600;
+  border: none;
+  outline: none;
+  text-align: center;
+  background-color: transparent;
+  width: 5rem;
+  margin-top: 0.375rem;
+  font-size: 2rem;
+  font-weight: 600;
 }
 .info-input::-webkit-outer-spin-button,
 .info-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
 }
 
 .info-label {
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.25rem 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-align: center;
+  padding: 0.25rem 0.5rem;
 }
 
 input[type="checkbox"] {
-    height: 1.25rem;
-    width: 1.25rem;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 // DETAILS + MODAL
 
 .dimensions {
-    width: 50rem;
-    background-color: var(--modal-background);
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    padding: 0 2rem;
-    box-shadow: var(--shadow);
+  width: 50rem;
+  background-color: var(--modal-background);
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  padding: 0 2rem;
+  box-shadow: var(--shadow);
 }
 
 .title {
-    font-size: 2rem;
-    font-weight: bold;
-    margin-top: 1.5rem;
-    text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  margin-top: 1.5rem;
+  text-align: center;
 }
 
 .heading {
-    font-size: 1.5rem;
-    margin-top: 1.5rem;
-    font-weight: bold;
-    text-align: center;
+  font-size: 1.5rem;
+  margin-top: 1.5rem;
+  font-weight: bold;
+  text-align: center;
 }
 
 .subheading {
-    font-size: 1.25rem;
-    margin-top: 1.5rem;
-    font-weight: bold;
-    text-align: center;
+  font-size: 1.25rem;
+  margin-top: 1.5rem;
+  font-weight: bold;
+  text-align: center;
 }
 
 .content {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .input-label {
-    font-weight: 600;
-    padding-left: 0.25rem;
+  font-weight: 600;
+  padding-left: 0.25rem;
 }
 
 .value-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
 }
 
 .mat-mdc-text-field-wrapper {
-    background-color: white !important;
-    border-radius: 5px !important;
+  background-color: white !important;
+  border-radius: 5px !important;
 }
 
 .flex-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  .flex-row {
     display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-
-    .flex-row {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        gap: 2rem;
-    }
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2rem;
+  }
 }
 
 .hint {
-    font-size: 0.75rem;
-    font-weight: 400;
-    padding-left: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 400;
+  padding-left: 0.25rem;
 }
 
 // RICH TEXT EDITOR
 .ProseMirror {
-    padding-left: 1rem !important;
-    height: 8rem;
-    overflow: auto;
+  padding-left: 1rem !important;
+  height: 8rem;
+  overflow: auto;
 }
 
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
-    display: none;
+  display: none;
 }
 
 html,
 body {
-    height: 100%;
-    margin: 0;
-    font-family: var(--bs-body-font-family) !important;
+  height: 100%;
+  margin: 0;
+  font-family: var(--bs-body-font-family) !important;
 }
 
 .flex-row {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .flex-column {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 // Overriding the default styles of angular material
 
-.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
-    color: var(--primary) !important;
+.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
+  .mdc-list-item__primary-text {
+  color: var(--primary) !important;
 }
 
 .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
-.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
-    color: var(--primary) !important;
+.mat-primary
+  .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
+  color: var(--primary) !important;
 }
 
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
-    border-color: var(--primary) !important;
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__trailing {
+  border-color: var(--primary) !important;
 }
 
-.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input {
-    caret-color: var(--primary) !important;
+.mdc-text-field--outlined:not(.mdc-text-field--disabled)
+  .mdc-text-field__input {
+  caret-color: var(--primary) !important;
 }
 
 .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
-    color: var(--primary) !important;
+  color: var(--primary) !important;
 }
 
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
-    color: var(--primary) !important;
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-floating-label,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-floating-label--float-above {
+  color: var(--primary) !important;
 }