outsourced the different cards, implemented deletion now working on the add button and full spellcard

.nx/cache/d/daemon.log

@@ -460752,3 +460752,329 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-12-07T21:05:44.028Z - [WATCHER]: .nx/cache/d/daemon.log was modified
 [NX Daemon Server] - 2023-12-07T21:05:44.028Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-12-07T21:05:44.029Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-07T21:27:24.724Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-07T21:27:24.727Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-07T21:27:24.733Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-07T21:27:24.735Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-07T21:27:24.735Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-07T21:27:24.736Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-07T21:27:24.826Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-07T21:27:24.827Z - [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] - 2023-12-07T21:27:24.828Z - Time taken for 'hash changed files from watcher' 36.47639998793602ms
+[NX Daemon Server] - 2023-12-07T21:27:24.829Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-12-07T21:27:24.829Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-12-07T21:27:24.830Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-08T06:27:07.735Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-08T06:27:07.741Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-08T06:27:07.745Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-08T06:27:07.748Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-08T06:27:07.749Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-08T06:27:07.752Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-08T06:27:07.908Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-08T06:27:07.908Z - [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] - 2023-12-08T06:27:07.911Z - Time taken for 'hash changed files from watcher' 23.64079999923706ms
+[NX Daemon Server] - 2023-12-08T06:27:07.912Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-09T08:43:05.653Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-09T08:43:05.660Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-09T08:43:05.663Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-09T08:43:05.667Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-09T08:43:05.668Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-09T08:43:05.673Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-09T08:43:06.707Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-09T08:43:06.707Z - [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] - 2023-12-09T08:43:06.708Z - Time taken for 'hash changed files from watcher' 37.45649999380112ms
+[NX Daemon Server] - 2023-12-09T08:43:06.709Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-09T08:55:35.385Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-09T08:55:35.388Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-09T08:55:35.399Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-09T08:55:35.401Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-09T08:55:35.401Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-09T08:55:35.403Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-09T08:55:36.116Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-09T08:55:36.116Z - [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] - 2023-12-09T08:55:36.118Z - Time taken for 'hash changed files from watcher' 26.426199972629547ms
+[NX Daemon Server] - 2023-12-09T08:55:36.118Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-10T12:34:56.069Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-10T12:34:56.072Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-10T12:34:56.084Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-10T12:34:56.086Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-10T12:34:56.086Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-10T12:34:56.088Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-10T12:34:57.149Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-10T12:34:57.149Z - [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] - 2023-12-10T12:34:57.151Z - Time taken for 'hash changed files from watcher' 58.71040000021458ms
+[NX Daemon Server] - 2023-12-10T12:34:57.151Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-11T16:47:14.117Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-11T16:47:14.120Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-11T16:47:14.130Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-11T16:47:14.132Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-11T16:47:14.132Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-11T16:47:14.133Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-11T16:47:14.958Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-11T16:47:14.958Z - [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] - 2023-12-11T16:47:14.960Z - Time taken for 'hash changed files from watcher' 17.89919999241829ms
+[NX Daemon Server] - 2023-12-11T16:47:14.961Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-12T06:20:23.344Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-12T06:20:23.349Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-12T06:20:23.351Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-12T06:20:23.352Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-12-12T06:20:23.354Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-12T06:20:23.355Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-12T06:20:24.174Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-12T06:20:24.175Z - [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] - 2023-12-12T06:20:24.177Z - Time taken for 'hash changed files from watcher' 23.921300023794174ms
+[NX Daemon Server] - 2023-12-12T06:20:24.177Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-12T17:07:34.216Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-12T17:07:34.220Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-12T17:07:34.235Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-12T17:07:34.238Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-12T17:07:34.238Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-12T17:07:34.239Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-12T17:07:35.368Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-12T17:07:35.368Z - [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] - 2023-12-12T17:07:35.369Z - Time taken for 'hash changed files from watcher' 0.8055999875068665ms
+[NX Daemon Server] - 2023-12-12T17:07:35.370Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-12T17:35:05.837Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-12T17:35:05.841Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-12T17:35:05.861Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-12T17:35:05.864Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-12-12T17:35:05.864Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-12T17:35:05.866Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-12T17:35:06.233Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-12-12T17:35:06.233Z - [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] - 2023-12-12T17:35:06.236Z - Time taken for 'hash changed files from watcher' 10.856200009584427ms
+[NX Daemon Server] - 2023-12-12T17:35:06.238Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":26784}
+{"processId":19752}

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

@@ -0,0 +1,38 @@
+<div class="add-card">
+  @if(isModification == undefined) {
+  <icon
+    class="add"
+    [size]="'l'"
+    [type]="'UI'"
+    [icon]="'add'"
+    [class]="'pointer'"
+  ></icon>
+  <button
+    class="slide-button add-card-button"
+    (click)="continueToSpellSelection(false)"
+  >
+    Auswählen
+  </button>
+  <button
+    class="slide-button add-card-button"
+    (click)="continueToSpellSelection(true)"
+  >
+    Bearbeiten
+  </button>
+  <button class="slide-button add-card-button" (click)="emitNewSpell()">
+    Erstellen
+  </button>
+  } @else {
+
+  <input
+    id="typeahead-basic"
+    type="text"
+    class="form-control"
+    (selectItem)="spellSelected($event.item); $event.preventDefault()"
+    [(ngModel)]="newSpellName"
+    [ngbTypeahead]="search"
+    placeholder="Name des Zaubers"
+  />
+  <button (click)="resetThis()">Abbrechen</button>
+  }
+</div>

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

@@ -0,0 +1,53 @@
+.add-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    height: 14rem;
+    width: 10rem;
+    border: solid 1px var(--border-color);
+    border-radius: 10px;
+    // background-image: url("../../../../assets/images/spells/add-spell.jpg");
+    // background-size: auto 100%;
+    // background-position: center;
+    box-shadow: var(--shadow-small);
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+        .slide-button {
+            transform: translateX(0);
+        }
+    }
+
+    .add {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.slide-button {
+    transform: translateX(-120%);
+    transition: transform 0.3s ease-in-out;
+}
+
+.add-card-button {
+    height: 3rem;
+    background-color: var(--primary-color);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    font-size: 1.25rem;
+    font-weight: 600;
+    width: 90%;
+    margin: 0 0.5rem;
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+        background-color: var(--primary-color-dark);
+        scale: 1.03;
+    }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddCardComponent } from './add-card.component';
+
+describe('AddCardComponent', () => {
+  let component: AddCardComponent;
+  let fixture: ComponentFixture<AddCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AddCardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AddCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,82 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, OperatorFunction } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import { FormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
+import { SpellsService } from 'src/services/spells/spells.service';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'add-card',
+  templateUrl: './add-card.component.html',
+  styleUrl: './add-card.component.scss',
+})
+export class AddCardComponent {
+  @Input() level!: number;
+
+  @Output() createNewSpell = new EventEmitter<any>();
+  @Output() onSpellSelected = new EventEmitter<any>();
+
+  public newSpellName: string = '';
+  private availableSpells: string[] = [];
+  public isModification: boolean | undefined;
+
+  public constructor(private spellsAccessor: SpellsService) {}
+
+  public ngOnInit(): void {
+    this.availableSpells = this.spellsAccessor.getListOfSpells(this.level);
+    this.spellsAccessor.closeSubject$.subscribe((level) => {
+      if (level !== this.level) {
+        this.resetThis();
+      }
+    });
+  }
+
+  // Enlarged view
+
+  public showLargeSpellcard(reference: HTMLDivElement): void {
+    console.log(reference);
+
+    // reference.classList.add('large');
+  }
+
+  public emitNewSpell(): void {
+    this.createNewSpell.emit(this.level);
+    this.resetThis();
+  }
+
+  public continueToSpellSelection(modify: boolean): void {
+    this.isModification = modify;
+    this.spellsAccessor.closeAllOthers(this.level);
+  }
+
+  public spellSelected(spellname: any): void {
+    const response = {
+      spell: this.spellsAccessor.getSpell(spellname),
+      isToModify: this.isModification,
+    };
+    this.onSpellSelected.emit(response);
+    this.resetThis();
+  }
+
+  public resetThis(): void {
+    this.newSpellName = '';
+    this.isModification = undefined;
+  }
+
+  public search: OperatorFunction<string, readonly string[]> = (
+    text$: Observable<string>
+  ) =>
+    text$.pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map((term) =>
+        term.length < 2
+          ? []
+          : this.availableSpells
+              .filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
+              .slice(0, 5)
+      )
+    );
+}

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

@@ -3,48 +3,56 @@
     @for(level of [0,1,2,3,4,5,6,7,8,9]; track level; let index = $index) {
 
     <div class="example-container">
-      <h2>{{ getSpellLevel(index) }}</h2>
-      <icon
-        [size]="'l'"
-        [type]="'UI'"
-        [icon]="showSpellList[index] ? 'visible' : 'hidden'"
-        [class]="'pointer'"
-        (click)="toggleSpellList(0)"
-      ></icon>
+      <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
         cdkDropList
         cdkDropListOrientation="horizontal"
-        [cdkDropListData]="level0"
+        [cdkDropListData]="getSpellList(index)"
         class="spell-list"
         (cdkDropListDropped)="drop($event)"
         [class]="showSpellList[index] ? '' : 'hidden'"
       >
         @for (spell of getSpellList(index); let spellIndex = $index; track
         spell) {
-        <div
-          class="spellcard"
-          (click)="openModal(true, index, spellIndex)"
+        <spellcard
           cdkDrag
-        >
-          <div class="name">{{ spell.name }}</div>
-          <div>{{ spell.cost }}</div>
-          <div>{{ spell.level }}</div>
-          <div>{{ spell.school }}</div>
+          [id]="spellIndex"
+          (cdkDragStarted)="dragStart(index)"
+          (cdkDragReleased)="dragEnd($event)"
+          [spell]="spell"
+          (click)="showFullSpellcard(spell, level, spellIndex)"
+        ></spellcard>
+        } @if (draggingIndex === index){
+        <div class="deletion-card" [id]="'deletion' + index">
+          Hier zum Löschen ablegen
         </div>
+        } @else {
+        <add-card
+          [level]="index"
+          (createNewSpell)="openSpellModal(false, index)"
+          (onSpellSelected)="handleSpellSelection($event, index)"
+        ></add-card>
         }
-        <div class="add-card" (click)="openModal(false, index)">
-          <icon
-            class="add"
-            [size]="'l'"
-            [type]="'UI'"
-            [icon]="'add'"
-            [class]="'pointer'"
-          ></icon>
-        </div>
       </div>
     </div>
 
     }
   </div>
 </div>
+
+<!-- (click)="openSpellModal(true, index, spellIndex)" -->

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

@@ -8,23 +8,76 @@
 }
 
 .example-container {
+  margin-bottom: 1rem;
+}
+
+.level-row {
+  width: 16rem;
+  gap: 1rem;
+  padding: 0.25rem 1rem;
+  background: white;
+  border: solid 1px var(--border-color);
+  border-bottom: none;
+  border-radius: 10px 10px 0 0;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+
+  &.collapsed {
+    animation: borders 0.4s forwards;
+  }
+}
+
+@keyframes borders {
+  0% {
+    border: solid 1px var(--border-color);
+    border-radius: 10px 10px 0 0;
+  }
+  50% {
+    border: solid 1px var(--border-color);
+    border-radius: 10px 10px 0 0;
+  }
+  100% {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+  }
+}
+
+.level-flex {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.heading-2 {
+  margin: 0;
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 2rem;
 }
 
 .spell-list {
-  border: solid 1px #ccc;
+  border: solid 1px var(--border-color);
   height: 16rem;
-  // width: 96%;
-  // margin: 0 1rem;
   background: white;
-  border-radius: 10px;
-  overflow: hidden;
+  border-radius: 0 10px 10px 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1rem;
   padding: 0 1rem;
   overflow-x: auto;
-  transition: height 0.4s ease-in-out;
+  overflow-y: hidden;
+  transition: height 0.3s ease-in-out;
+  box-shadow: var(--shadow);
 
   &.hidden {
     height: 0;
@@ -34,40 +87,6 @@
   }
 }
 
-@mixin card {
-  height: 14rem;
-  // width: 10rem;
-  flex: 0 0 10rem;
-  border: solid 1px var(--border-color);
-  border-radius: 10px;
-  background: white;
-}
-
-.spellcard {
-  @include card;
-  cursor: move;
-
-  .name {
-    font-weight: 600;
-    font-size: 1.125rem;
-    text-align: center;
-    margin-top: 0.25rem;
-  }
-}
-
-.add-card {
-  @include card;
-  position: relative;
-  cursor: pointer;
-
-  .add {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
 .animate-visibility {
   animation: icon-switch 0.5s ease-in-out;
 }
@@ -84,11 +103,31 @@
   }
 }
 
+.deletion-card {
+  height: 14rem;
+  width: 10rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  border: solid 1px var(--border-color);
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background-color: var(--delete);
+  transition: scale 0.2s ease-in-out;
+  box-shadow: var(--shadow);
+
+  &:hover {
+    scale: 1.1;
+  }
+}
+
 //  CDK DRAG
 
 .cdk-drag-preview {
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 10px;
   box-shadow:
     0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 10px 1px rgba(0, 0, 0, 0.14),
@@ -98,9 +137,10 @@
 .cdk-drag-placeholder {
   background: #e0e0e0;
   border: dotted 3px #999;
+  border-radius: 10px;
   min-height: 60px;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  font-size: 0 !important;
+  color: transparent !important;
 
   .name {
     display: none;

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

@@ -10,7 +10,15 @@ import {
 import { Spell } from 'src/interfaces/spell';
 import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
+import { SpellsService } from 'src/services/spells/spells.service';
 import { SpellModalComponent } from 'src/app/journal/spell-modal/spell-modal.component';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, OperatorFunction } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import { FormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
+import { FormControl } from '@angular/forms';
+import { FullSpellcardComponent } from 'src/app/shared-components/full-spellcard/full-spellcard.component';
 
 @Component({
   selector: 'app-journal-spellcards',
@@ -42,6 +50,8 @@ export class JournalSpellcardsComponent {
     true,
   ];
 
+  public draggingIndex: number | undefined;
+
   public constructor(
     public dataAccessor: DataService,
     private modalAccessor: ModalService
@@ -52,12 +62,35 @@ export class JournalSpellcardsComponent {
 
   ///////// FUNCTIONS //////////
 
-  public openModal(
+  public showFullSpellcard(
+    spell: Spell,
+    level: number,
+    spellIndex: number
+  ): void {
+    this.modalAccessor.openModal(FullSpellcardComponent, { spell: spell });
+    const resultSubscription = this.modalAccessor.result$.subscribe(
+      (result) => {
+        resultSubscription.unsubscribe();
+        if (result.state === 'delete') {
+          this.getSpellList(level).splice(spellIndex, 1);
+        } else if (result.state === 'update') {
+          console.log('update');
+          setTimeout(() => {
+            this.openSpellModal(true, level, spellIndex);
+          }, 100);
+        } else if (result.state !== 'cancel') {
+          console.log(result.state);
+          throw new Error('Unexpected result state, please send a bug report.');
+        }
+      }
+    );
+  }
+
+  public openSpellModal(
     isUpdate: boolean,
     level: number,
     spellIndex?: number
   ): void {
-    console.log(spellIndex);
     this.modalAccessor.openModal(SpellModalComponent, {
       spell:
         spellIndex !== undefined
@@ -69,10 +102,15 @@ export class JournalSpellcardsComponent {
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         if (result.state === 'update') {
-          console.log(result.data);
-          this.updateSpell(result.data, level!, spellIndex!);
+          // level was not modified
+          if (level === result.data.level) {
+            this.updateSpell(result.data, level!, spellIndex!);
+          } else {
+            // level was modified
+            this.getSpellList(level).splice(spellIndex!, 1);
+            this.addSpell(result.data, result.data.level);
+          }
         } else if (result.state === 'add') {
-          console.log('im else: ', result.data);
           this.addSpell(result.data, level);
         }
         resultSubscription.unsubscribe();
@@ -80,9 +118,38 @@ export class JournalSpellcardsComponent {
     );
   }
 
+  public openSpellModalModifyOfficial(spell: Spell): void {
+    this.modalAccessor.openModal(SpellModalComponent, {
+      spell: spell,
+      isUpdate: true,
+      level: spell.level,
+    });
+    const resultSubscription = this.modalAccessor.result$.subscribe(
+      (result) => {
+        if (result.state === 'update') {
+          this.addSpell(result.data, result.data.level);
+        } else {
+          throw new Error('Unexpected result state, please send a bug report.');
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
+
+  public handleSpellSelection(event: any, level: number): void {
+    const newSpell = event.spell;
+    const isToModify = event.isToModify;
+
+    if (isToModify) {
+      this.openSpellModalModifyOfficial(newSpell);
+    } else {
+      this.addSpell(newSpell, level);
+    }
+  }
+
   public addSpell(spell: Spell, level: number) {
-    this.getSpellList(level)?.push(spell);
-    this.updateSpellsInDatabase();
+    this.getSpellList(level).push(spell);
+    // this.updateSpellsInDatabase();
   }
 
   public updateSpell(spell: Spell, level: number, index: number): void {
@@ -90,7 +157,7 @@ export class JournalSpellcardsComponent {
     this.updateSpellsInDatabase();
   }
 
-  public getSpellList(level: number): Spell[] | undefined {
+  public getSpellList(level: number): Spell[] {
     switch (level) {
       case 0:
         return this.level0;
@@ -113,7 +180,7 @@ export class JournalSpellcardsComponent {
       case 9:
         return this.level9;
       default:
-        return undefined;
+        throw new Error('Invalid spell level');
     }
   }
 
@@ -144,12 +211,12 @@ export class JournalSpellcardsComponent {
     }
   }
 
-  toggleSpellList(index: number) {
-    console.log(index);
+  public toggleSpellList(index: number) {
     this.showSpellList[index] = !this.showSpellList[index];
   }
 
-  drop(event: CdkDragDrop<any[]>) {
+  public drop(event: CdkDragDrop<any[]>) {
+    // console.log(event);
     if (event.previousContainer === event.container) {
       moveItemInArray(
         event.container.data,
@@ -164,6 +231,7 @@ export class JournalSpellcardsComponent {
         event.currentIndex
       );
 
+      // Update level of moved spell
       const movedSpell = event.container.data[event.currentIndex];
       const newContainer = event.container.id;
 
@@ -202,6 +270,20 @@ export class JournalSpellcardsComponent {
     }
   }
 
+  public dragStart(index: number) {
+    this.draggingIndex = index;
+  }
+
+  public dragEnd(event: any) {
+    if (event.event.target.classList.contains('deletion-card')) {
+      this.getSpellList(this.draggingIndex!).splice(
+        event.source.element.nativeElement.id,
+        1
+      );
+    }
+    this.draggingIndex = undefined;
+  }
+
   private loadSpells(): void {
     this.level0 = this.dataAccessor.spellLevel0;
     this.level1 = this.dataAccessor.spellLevel1;

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

@@ -0,0 +1,6 @@
+<div class="spellcard" #spellcard>
+  <div class="name">{{ spell.name }}</div>
+  <div>{{ spell.cost }}</div>
+  <div>{{ spell.level }}</div>
+  <div>{{ spell.school }}</div>
+</div>

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

@@ -0,0 +1,21 @@
+.spellcard {
+    height: 14rem;
+    width: 10rem;
+    border: solid 1px var(--border-color);
+    border-radius: 10px;
+    background: white;
+    box-shadow: var(--shadow-small);
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+
+    // &:hover {
+    //     box-shadow: var(--shadow-small);
+    // }
+
+    .name {
+        font-weight: 600;
+        font-size: 1.125rem;
+        text-align: center;
+        margin-top: 0.25rem;
+    }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Spell } from 'src/interfaces/spell';
+
+@Component({
+  selector: 'spellcard',
+  templateUrl: './spellcard.component.html',
+  styleUrl: './spellcard.component.scss',
+})
+export class SpellcardComponent {
+  @Input() public spell!: Spell;
+
+  public showLargeSpellcard(reference: any) {
+    reference.classList.add('large');
+  }
+}

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

@@ -20,6 +20,7 @@
     <div for="" class="life-label">Temporäre Trefferpunkte</div>
   </div>
 </div>
+<app-hit-dice></app-hit-dice>
 
 <div class="vertical-button-wrapper-2">
   <ui-button

src/app/journal/journal.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { CdkTableModule } from '@angular/cdk/table';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgxSmartModalModule } from 'ngx-smart-modal';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { JournalRoutingModule } from './journal-routing.module';
 import { JournalHomeComponent } from './journal-home/journal-home.component';
@@ -76,6 +77,8 @@ import { JournalSettingsComponent } from './journal-settings/journal-settings.co
 import { SimpleItemModalComponent } from './journal-inventory/simple-item-modal/simple-item-modal.component';
 import { FoodDetailsComponent } from './journal-inventory/food-details/food-details.component';
 import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
+import { SpellcardComponent } from './journal-spellcards/spellcard/spellcard.component';
+import { AddCardComponent } from './journal-spellcards/add-card/add-card.component';
 
 @NgModule({
   declarations: [
@@ -146,6 +149,8 @@ import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
     FoodDetailsComponent,
     TabBarComponent,
     WeaponModalComponent,
+    SpellcardComponent,
+    AddCardComponent,
   ],
   imports: [
     CommonModule,
@@ -156,6 +161,7 @@ import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
     DragDropModule,
     NgxSmartModalModule.forChild(),
     SharedComponentsModule,
+    ReactiveFormsModule,
   ],
 })
 export class JournalModule {}

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

@@ -48,7 +48,7 @@
             *ngFor="let level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
             [value]="level"
           >
-            {{ level }}
+            @if(level == 0){Zaubertrick}@else{ {{ level }}}
           </option>
         </select>
         <label>Stufe</label>

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

@@ -134,7 +134,6 @@ export class SpellModalComponent {
   }
 
   private loadspell(): void {
-    console.log(this.spell);
     this.name = this.spell.name;
     this.level = this.spell.level;
     this.cost = this.spell.cost;
@@ -165,7 +164,7 @@ export class SpellModalComponent {
       name: this.name,
       damage: this.damage,
       heal: this.heal,
-      level: this.level,
+      level: parseInt(this.level.toString()),
       cost: this.cost,
       canRitual: this.canRitual,
       school: this.school,
@@ -186,6 +185,7 @@ export class SpellModalComponent {
       doesHeal: this.doesHeal,
     };
     console.log('New Spell from modal: ', spell);
+    console.log('type of level', typeof spell.level);
     return spell;
   }
 

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

@@ -0,0 +1,10 @@
+<div class="full-spellcard-container">
+  <div class="full-spellcard">
+    {{ spell | json }}
+  </div>
+
+  <div class="delete-row">
+    <button class="delete-button" (click)="delete()">Löschen</button>
+    <button class="edit-button" (click)="update()">Anpassen</button>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+@mixin button {
+    color: black;
+    border: none;
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    height: 3rem;
+    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;
+}
+
+.delete-row {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 1rem;
+}
+.delete-button {
+    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;
+    }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FullSpellcardComponent } from './full-spellcard.component';
+
+describe('FullSpellcardComponent', () => {
+  let component: FullSpellcardComponent;
+  let fixture: ComponentFixture<FullSpellcardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FullSpellcardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FullSpellcardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { Spell } from 'src/interfaces/spell';
+import { ModalService } from 'src/services/modal/modal.service';
+
+@Component({
+  selector: 'app-full-spellcard',
+  templateUrl: './full-spellcard.component.html',
+  styleUrl: './full-spellcard.component.scss',
+})
+export class FullSpellcardComponent {
+  @Input() public spell!: Spell;
+
+  public constructor(private modalAccessor: ModalService) {}
+
+  public delete(): void {
+    this.modalAccessor.handleModalClosing('delete', undefined);
+  }
+
+  public update(): void {
+    this.modalAccessor.handleModalClosing('update', undefined);
+  }
+}

src/app/shared-components/shared-components.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SwitchComponent } from './switch/switch.component';
 import { UiButtonComponent } from './ui-button/ui-button.component';
+import { FullSpellcardComponent } from './full-spellcard/full-spellcard.component';
 
 @NgModule({
-  declarations: [SwitchComponent, UiButtonComponent],
+  declarations: [SwitchComponent, UiButtonComponent, FullSpellcardComponent],
   imports: [CommonModule],
   exports: [SwitchComponent, UiButtonComponent],
 })

src/services/spells/spells.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SpellsService } from './spells.service';
+
+describe('SpellsService', () => {
+  let service: SpellsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SpellsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/services/spells/spells.service.ts

@@ -0,0 +1,300 @@
+import { Injectable } from '@angular/core';
+import { Spell } from 'src/interfaces/spell';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SpellsService {
+  // Functions
+
+  private _closeSubject = new Subject<number>();
+
+  public closeSubject$ = this._closeSubject.asObservable();
+
+  public closeAllOthers(level: number): void {
+    this._closeSubject.next(level);
+  }
+
+  // Spells
+  private level0: string[] = [
+    'Führung (Guidance)',
+    'Totenläuten (Toll the Dead)',
+    'Thaumaturgie (Thaumaturgy)',
+  ];
+
+  private level1: string[] = [
+    'Heilende Berührung (Cure Wounds)',
+    'Magie entdecken (Detect Magic)',
+    'Segen (Bless)',
+    'Heilendes Wort (Healing Word)',
+    'Lenkendes Geschoss (Guiding Bolt)',
+  ];
+
+  private level2: string[] = [];
+
+  private level3: string[] = [];
+
+  private level4: string[] = [];
+
+  private level5: string[] = [];
+
+  private level6: string[] = [];
+
+  private level7: string[] = [];
+
+  private level8: string[] = [];
+
+  private level9: string[] = [];
+
+  public getListOfSpells(level: number) {
+    switch (level) {
+      case 0:
+        return this.level0;
+      case 1:
+        return this.level1;
+      case 2:
+        return this.level2;
+      case 3:
+        return this.level3;
+      case 4:
+        return this.level4;
+      case 5:
+        return this.level5;
+      case 6:
+        return this.level6;
+      case 7:
+        return this.level7;
+      case 8:
+        return this.level8;
+      case 9:
+        return this.level9;
+      default:
+        return this.level0;
+    }
+  }
+
+  public getSpell(name: string): Spell {
+    switch (name) {
+      case 'Führung (Guidance)':
+        return this.guidance;
+      case 'Totenläuten (Toll the Dead)':
+        return this.tollTheDead;
+      case 'Thaumaturgie (Thaumaturgy)':
+        return this.thaumaturgie;
+      case 'Heilende Berührung (Cure Wounds)':
+        return this.cureWounds;
+      case 'Magie entdecken (Detect Magic)':
+        return this.detectMagic;
+      case 'Segen (Bless)':
+        return this.bless;
+      case 'Heilendes Wort (Healing Word)':
+        return this.healingWord;
+      case 'Lenkendes Geschoss (Guiding Bolt)':
+        return this.guidingBolt;
+      default:
+        return this.guidance;
+    }
+  }
+
+  private guidance: Spell = {
+    name: 'Führung',
+    level: 0,
+    cost: 'action',
+    canRitual: false,
+    needsVerbal: true,
+    needsSomatic: true,
+    needsMaterial: true,
+    needsConcentration: true,
+    needsAttackRoll: false,
+    needsSavingThrow: false,
+    doesDamage: false,
+    damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+    doesHeal: false,
+    heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+    description:
+      'Du berührst eine Kreatur und für eine Minute erhält sie einen Bonus von 1W4 auf Angriffs- und Rettungswürfe.',
+    school: 'enchantment',
+    isRanged: false,
+    range: 5,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private tollTheDead: Spell = {
+    name: 'Totenläuten',
+    level: 0,
+    cost: 'action',
+    canRitual: false,
+    needsVerbal: true,
+    needsSomatic: false,
+    needsMaterial: true,
+    needsConcentration: false,
+    needsAttackRoll: false,
+    needsSavingThrow: true,
+    savingThrowAttribute: 'wisdom',
+    doesDamage: true,
+    damage: [{ diceNumber: '1', diceType: 'd8', damageType: 'necrotic' }],
+    doesHeal: false,
+    heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+    description:
+      'Eine Kreatur, die du berührst, erleidet 1W8 Nekrotischen Schaden, wenn sie einen Rettungswurf auf Konstitution nicht besteht.',
+    school: 'necromancy',
+    isRanged: true,
+    range: 60,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private thaumaturgie: Spell = {
+    name: 'Thaumaturgie',
+    level: 0,
+    cost: 'action',
+    canRitual: false,
+    needsVerbal: true,
+    needsSomatic: false,
+    needsMaterial: false,
+    needsConcentration: false,
+    needsAttackRoll: false,
+    needsSavingThrow: false,
+    doesDamage: false,
+    damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+    doesHeal: false,
+    heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+    description:
+      'Du erzeugst einen der folgenden magischen Effekte innerhalb von 9 Metern: \b\b • Deine Stimme wird dreimal lauter.\b • Du lässt einen unverschlossenen Tür oder ein Fenster aufspringen. \b• Du lässt eine Flamme aufleuchten, erlöschen oder ihre Farbe ändern. \b• Du lässt den Boden für eine Minute beben.\b • Du erzeugst Geräusche, die von dir ausgehen, wie das Flüstern einer Stimme, das Brüllen eines Löwen, das Knurren von Donner oder das Klappern von Metall. \b• Du lässt eine Tür oder ein Fenster, das du berührst, für eine Minute verriegeln oder entriegeln.',
+    school: 'transmutation',
+    isRanged: false,
+    range: 9,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private cureWounds: Spell = {
+    name: 'Heilende Berührung',
+    level: 1,
+    cost: 'action',
+    canRitual: false,
+    needsVerbal: true,
+    needsSomatic: true,
+    needsMaterial: false,
+    needsConcentration: false,
+    needsAttackRoll: false,
+    needsSavingThrow: false,
+    doesDamage: false,
+    damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+    doesHeal: true,
+    heal: { diceNumber: '1', diceType: 'd8', additionalHeal: 5 },
+    description:
+      'Deine Berührung kann Wunden heilen. Berühre eine Kreatur und spende ihr 1W8 + deinem Fertigkeitsbonus Trefferpunkte. Dieser Zauber hat keine Wirkung auf Untote oder Konstrukte. Wenn du diesen Zauber mit einem Zauberplatz des 2. Grades oder höher wirkst, erhöht sich die Heilung um 1W8 für jeden Grad über dem 1.',
+    school: 'evocation',
+    isRanged: false,
+    range: 5,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private detectMagic: Spell = {
+    name: 'Magie entdecken',
+    level: 1,
+    cost: 'action',
+    canRitual: true,
+    needsVerbal: true,
+    needsSomatic: true,
+    needsMaterial: true,
+    needsConcentration: false,
+    needsAttackRoll: false,
+    needsSavingThrow: false,
+    doesDamage: false,
+    damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+    doesHeal: false,
+    heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+    description:
+      'Dein Blick wird magisch, um magische Kräfte zu erkennen. Für die Dauer erfährst du die Anzahl und die Art aller magischen Kräfte, die du innerhalb von 30 Fuß wahrnehmen kannst. Du erfährst auch die Schule der Magie, falls vorhanden.',
+    school: 'divination',
+    isRanged: false,
+    range: 30,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private bless: Spell = {
+    name: 'Segen',
+    level: 1,
+    cost: 'action',
+    canRitual: false,
+    needsVerbal: true,
+    needsSomatic: true,
+    needsMaterial: true,
+    needsConcentration: true,
+    needsAttackRoll: false,
+    needsSavingThrow: false,
+    doesDamage: false,
+    damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+    doesHeal: false,
+    heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+    description:
+      'Du segnest bis zu drei Kreaturen deiner Wahl innerhalb von 9 Metern. Jedes Mal, wenn ein Ziel einen Angriffs- oder Rettungswurf macht, bevor der Zauber endet, kann das Ziel einen Würfelwurf von 1W4 auf den Wurf machen und den Wurf um die gewürfelte Zahl erhöhen.',
+    school: 'enchantment',
+    isRanged: false,
+    range: 9,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private healingWord: Spell = {
+    name: 'Heilendes Wort',
+    level: 1,
+    cost: 'bonus action',
+    canRitual: false,
+    needsVerbal: true,
+    needsSomatic: false,
+    needsMaterial: false,
+    needsConcentration: false,
+    needsAttackRoll: false,
+    needsSavingThrow: false,
+    doesDamage: false,
+    damage: [{ diceNumber: '', diceType: '', damageType: '' }],
+    doesHeal: true,
+    heal: { diceNumber: '1', diceType: 'd4', additionalHeal: 0 },
+    description:
+      'Ein Wort der Heilung flüstert von dir und berührt bis zu sechs Kreaturen deiner Wahl innerhalb von 18 Metern. Jede Kreatur erhält 1W4 + deinen Fertigkeitsbonus Trefferpunkte.',
+    school: 'evocation',
+    isRanged: true,
+    range: 90,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+
+  private guidingBolt: Spell = {
+    name: 'Lenkendes Geschoss',
+    level: 1,
+    cost: 'action',
+    canRitual: false,
+    needsVerbal: false,
+    needsSomatic: true,
+    needsMaterial: false,
+    needsConcentration: false,
+    needsAttackRoll: true,
+    needsSavingThrow: false,
+    doesDamage: true,
+    damage: [{ diceNumber: '3', diceType: 'd4', damageType: 'force' }],
+    doesHeal: false,
+    heal: { diceNumber: '', diceType: '', additionalHeal: 0 },
+    description:
+      'Du schießt drei magische Geschosse auf Kreaturen oder Objekte innerhalb von 30 Fuß. Du kannst sie auf ein Ziel oder mehrere verteilen. Du kannst auch mehrere Geschosse auf ein Ziel abfeuern. Mache für jedes Geschoss einen Angriffswurf. Ein Geschoss trifft und verursacht 1W4 + 1 Kraftschaden.',
+    school: 'evocation',
+    isRanged: true,
+    range: 30,
+    hasAreaOfEffect: false,
+    areaOfEffectType: '',
+    radius: 0,
+  };
+}

src/styles.scss

@@ -1,17 +1,16 @@
 /* You can add global styles to this file, and also import other style files */
 
 /* Importing Bootstrap SCSS file. */
-@import 'bootstrap/scss/bootstrap';
+// TODO: remove bootstrap styles
+@import "bootstrap/scss/bootstrap";
 
 $dialog-position-top: 10%;
 $dialog-position-left: 20%;
 $dialog-position-right: 20%;
 
-@import 'node_modules/ngx-smart-modal/styles/ngx-smart-modal.scss';
-
-
-:root{
+@import "node_modules/ngx-smart-modal/styles/ngx-smart-modal.scss";
 
+:root {
     // COLORS
     --primary-color: #d8ac96;
     --primary-color-light: #e8c7b5;
@@ -31,27 +30,33 @@ $dialog-position-right: 20%;
     --field-background-color: #efc8af;
 
     --border-color: #8d8c8c;
-    --border-color2: #8d8c8c;
 
+    --accept: #84a36f;
+    --accept-hover: #6f9158;
+    --delete: #a45a52;
+    --delete-hover: #8f4a42;
+    --edit: #86a5b7;
+    --edit-hover: #6f8e9f;
 
     // shadows
-    --shadow-small: 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);                   
-    
-    @mixin field-styling{
+    --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+    --shadow-small: 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);
+
+    @mixin field-styling {
         border: solid 1px var(--border-color);
         background-color: var(--field-background-color);
         box-shadow: var(--shadow-small);
         border-radius: 10px;
     }
 
-    // 
-    .responsive-small{
+    //
+    .responsive-small {
         display: none;
     }
 
-    .responsive-large{
+    .responsive-large {
         display: block;
     }
 
@@ -69,7 +74,6 @@ $dialog-position-right: 20%;
         width: 0.5rem;
         margin: 0.125rem 0;
         height: 0.5rem;
-
     }
 
     ::-webkit-scrollbar-track {
@@ -88,11 +92,9 @@ $dialog-position-right: 20%;
     }
 }
 
-
-
 //  Info Row
 
-.info-container{
+.info-container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -102,15 +104,15 @@ $dialog-position-right: 20%;
     box-shadow: var(--shadow-small);
     border-radius: 10px;
     height: 7rem;
-    @media (width > 1699px){
-       width: 10rem;     
+    @media (width > 1699px) {
+        width: 10rem;
     }
     @media (width < 1640px) {
-        width: 7rem
+        width: 7rem;
     }
 }
 
-.info-input{
+.info-input {
     border: none;
     outline: none;
     text-align: center;
@@ -127,7 +129,7 @@ $dialog-position-right: 20%;
     margin: 0;
 }
 
-.info-label{
+.info-label {
     font-size: 1.25rem;
     font-weight: 600;
     text-align: center;
@@ -139,19 +141,18 @@ input[type="checkbox"] {
     width: 1.25rem;
 }
 
-
 // Value Box
 
-.value-row{
+.value-row {
     display: flex;
     justify-content: space-around;
 }
 
-.value-container{
+.value-container {
     width: 6rem;
 }
 
-.value-box{
+.value-box {
     width: 3.5rem;
     height: 3rem;
     font-size: 1.5rem;
@@ -164,7 +165,7 @@ input[type="checkbox"] {
     box-shadow: var(--shadow-small);
 }
 
-.value-input{
+.value-input {
     border: none;
     outline: none;
     text-align: center;
@@ -175,23 +176,19 @@ input[type="checkbox"] {
         -webkit-appearance: none;
         appearance: none;
         margin: 0;
-    }   
+    }
 }
 
-.value-label{
+.value-label {
     font-size: 1.25rem;
     font-weight: 600;
     text-align: center;
     padding: 0.5rem;
 }
 
-
-
-
-
 // details-panel
 
-.vertical-button-wrapper-3{
+.vertical-button-wrapper-3 {
     width: 100%;
     position: absolute;
     bottom: 2rem;
@@ -204,7 +201,7 @@ input[type="checkbox"] {
     justify-content: center;
 }
 
-.vertical-button-wrapper-2{
+.vertical-button-wrapper-2 {
     width: 100%;
     position: absolute;
     bottom: 2rem;
@@ -217,7 +214,7 @@ input[type="checkbox"] {
     justify-content: center;
 }
 
-.button-wrapper-3-block{
+.button-wrapper-3-block {
     display: grid;
     grid-template-rows: 1fr 1fr 1fr;
     grid-template-columns: 1fr;
@@ -228,7 +225,7 @@ input[type="checkbox"] {
     padding-bottom: 2rem;
 }
 
-.button-wrapper-2-block{
+.button-wrapper-2-block {
     display: grid;
     grid-template-rows: 1fr 1fr;
     grid-template-columns: 1fr;
@@ -241,216 +238,197 @@ input[type="checkbox"] {
 
 //
 
-.details-title{
+.details-title {
     text-align: center;
     font-size: 2rem;
     font-weight: bold;
     margin-top: 1.5rem;
 }
 
-.details-heading{
+.details-heading {
     font-size: 1.5rem;
     font-weight: bold;
     margin-top: 1.5rem;
 }
 
-.details-subheading{
+.details-subheading {
     font-size: 1.25rem;
     font-weight: bold;
     margin-top: 1.5rem;
 }
 
-
-.details-content{
+.details-content {
     margin-top: 1.5rem;
 }
 
-.details-content-small{
+.details-content-small {
     margin-top: 0.5rem;
 }
 
-.details-bold{
+.details-bold {
     font-weight: 500;
 }
 
-.centered{
+.centered {
     text-align: center;
 }
 
-.details-value-container{
+.details-value-container {
     margin-top: 2rem;
 }
 
-
-.details-flex-row{
+.details-flex-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.top-1{
+.top-1 {
     margin-top: 1rem;
 }
 
-.top-2{
+.top-2 {
     margin-top: 2rem;
 }
 
-.top-3{
+.top-3 {
     margin-top: 3rem;
 }
 
-.details-value{
+.details-value {
     width: 3.5rem;
     height: 3rem;
     font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin:auto;
+    margin: auto;
     border-radius: 10px;
     background-color: white;
     box-shadow: var(--shadow-small);
 }
 
-.details-label{
+.details-label {
     margin-top: 0.5rem;
     font-weight: 500;
     text-align: center;
 }
 
-.details-name{
+.details-name {
     font-size: 1.5rem;
     font-weight: bold;
     margin-top: 1.5rem;
-    text-align:center;
+    text-align: center;
 }
 
-.details-long-description{
+.details-long-description {
     margin: 2rem 1rem;
     font-size: 1rem;
 }
 
+//
 
-
-
-
-
-
-
-
-
-
-
-
-// 
-
-
-.flex-row{
+.flex-row {
     display: flex;
     flex-direction: row;
 }
 
-.flex-column{
+.flex-column {
     display: flex;
     flex-direction: column;
 }
 
-.flex-centered{
+.flex-centered {
     align-items: center;
     justify-content: center;
 }
 
-.flex-left{
+.flex-left {
     justify-content: start;
 }
 
-.flex-right{
+.flex-right {
     justify-content: end;
 }
 
-.gap-01{
+.gap-01 {
     gap: 0.1rem;
 }
 
-.gap-02{
+.gap-02 {
     gap: 0.2rem;
 }
 
-.gap-03{
+.gap-03 {
     gap: 0.3rem;
 }
 
-.gap-04{
+.gap-04 {
     gap: 0.4rem;
 }
 
-.gap-05{
+.gap-05 {
     gap: 0.5rem;
 }
 
-.gap-06{
+.gap-06 {
     gap: 0.6rem;
 }
 
-.gap-07{
+.gap-07 {
     gap: 0.7rem;
 }
 
-.gap-08{
+.gap-08 {
     gap: 0.8rem;
 }
 
-.gap-09{
+.gap-09 {
     gap: 0.9rem;
 }
 
-.gap-10{
+.gap-10 {
     gap: 1rem;
 }
 
-.gap-11{
+.gap-11 {
     gap: 1.1rem;
 }
 
-.gap-12{
+.gap-12 {
     gap: 1.2rem;
 }
 
-.gap-13{
+.gap-13 {
     gap: 1.3rem;
 }
 
-.gap-14{
+.gap-14 {
     gap: 1.4rem;
 }
 
-.gap-15{
+.gap-15 {
     gap: 1.5rem;
 }
 
-.gap-16{
+.gap-16 {
     gap: 1.6rem;
 }
 
-.gap-17{
+.gap-17 {
     gap: 1.7rem;
 }
 
-.gap-18{
+.gap-18 {
     gap: 1.8rem;
 }
 
-.gap-19{
+.gap-19 {
     gap: 1.9rem;
 }
 
-.gap-20{
+.gap-20 {
     gap: 2rem;
 }
 
 // Drag and Drop Table
-
-
-/* Importing Bootstrap SCSS file. */
-@import 'bootstrap/scss/bootstrap';