finalized the life component

.nx/cache/d/daemon.log

@@ -458254,3 +458254,78 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-10-31T12:07:58.413Z - Time taken for 'hash changed files from watcher' 26.558299899101257ms
 [NX Daemon Server] - 2023-10-31T12:07:58.413Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-10-31T12:07:58.414Z - Done responding to the client null
+[NX Daemon Server] - 2023-10-31T12:09:57.870Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-10-31T12:09:57.872Z - [WATCHER]: Subscribed to changes within: C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-10-31T12:09:57.874Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-10-31T12:09:57.876Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-10-31T12:09:57.876Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-10-31T12:09:57.877Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-10-31T12:09:57.963Z - 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-10-31T12:09:57.963Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (C:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-10-31T12:09:57.965Z - Time taken for 'hash changed files from watcher' 42.81840002536774ms
+[NX Daemon Server] - 2023-10-31T12:09:57.965Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-10-31T12:09:57.966Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-01T05:15:27.593Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-01T05:15:27.601Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-01T05:15:27.605Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-01T05:15:27.607Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-01T05:15:27.607Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-01T05:15:27.609Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-01T05:15:28.135Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-11-01T05:15:28.135Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-01T05:15:28.136Z - Time taken for 'hash changed files from watcher' 122.3555999994278ms
+[NX Daemon Server] - 2023-11-01T05:15:28.137Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-01T05:15:28.137Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-01T05:15:28.138Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":4716}
+{"processId":11768}

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

@@ -1,22 +1,26 @@
 <div class="life-box">
   <div class="life-box-name">Trefferpunkte</div>
   <div class="life-box-bar">
-    <div class="life-box-buttons">
-      <button>+</button>
-      <button>-</button>
-    </div>
-    {{ currentHitPoints }}
-    {{ maxHitPoints }}
-    {{ temporaryHitPoints }}
-    <div class="life-box-buttons">
-      <button>+</button>
-      <button>-</button>
+    <div
+      class="life-box-bar-current"
+      [style.width.%]="currentHitPointsPercentage"
+    ></div>
+    <div
+      class="life-box-bar-temporary"
+      [style.width.%]="temporaryHitPointsPercentage"
+    ></div>
+    <div
+      class="life-box-bar-missing"
+      [style.width.%]="missingHitPointsPercentage"
+    ></div>
+    <div class="life-box-bar-label">
+      {{ currentHitPoints }}/{{ maxHitPoints
+      }}{{ temporaryHitPoints > 0 ? " (+" + temporaryHitPoints + ")" : "" }}
     </div>
   </div>
-  <div class="life-box-labels">
-    <label style="align-self: flex-start" class="life-box-label"
-      >Permanent</label
-    >
-    <label style="align-self: flex-end" class="life-box-label">Temporär</label>
+  <div class="life-box-buttons">
+    <button (click)="addHitPoints()">Heilung +</button>
+    <button (click)="removeHitPoints()">Schaden -</button>
+    <button (click)="addTemporaryHitPoints()">Temporäre Trefferpunkte +</button>
   </div>
 </div>

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

@@ -1,7 +1,8 @@
 .life-box{
-    // width: 28vw;
     border: solid 1px black;
-    // align-self: center;
+    width: 100%;
+    height: 100%;
+    // position: relative;
 }
 
 .life-box-name{
@@ -11,27 +12,32 @@
 }
 
 .life-box-bar{
+    position: relative;
     display: flex;
     flex-direction: row;
+    height: 4rem;
+}
 
+.life-box-bar-current{
+    background-color: rgba(12, 105, 1, 0.4);
 }
 
-.life-box-labels{
-    display: flex;
-    flex-direction: row;
-    padding: 0 1rem 0 1rem;
+.life-box-bar-temporary{
+    background-color: rgba(140, 254, 125, 0.4);
 }
 
-.life-box-label{
-    font-size: 0.6rem;
+.life-box-bar-missing{
+    background-color: rgba(111, 0, 0, 0.5);
+}
+
+.life-box-bar-label{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .life-box-buttons{
     display: flex;
     flex-direction: column;
-
-    button{
-        width: 1rem;
-        height: 1rem;
-    }
-}
+}

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

@@ -13,6 +13,10 @@ export class LifeComponent {
   public currentHitPoints: number = 0;
   public temporaryHitPoints: number = 0;
 
+  public currentHitPointsPercentage: number = 0;
+  public temporaryHitPointsPercentage: number = 0;
+  public missingHitPointsPercentage: number = 0;
+
   ngOnInit(): void {
     this.initMaxSubscription();
     this.initCurrentSubscription();
@@ -22,18 +26,68 @@ export class LifeComponent {
   private initMaxSubscription(): void {
     this.dataAccessor.hitPointMaximum$.subscribe((newValue: any) => {
       this.maxHitPoints = newValue.value;
+      this.calculatePercentages();
     });
   }
 
   private initCurrentSubscription(): void {
     this.dataAccessor.currentHitPoints$.subscribe((newValue: any) => {
       this.currentHitPoints = newValue.value;
+      this.calculatePercentages();
     });
   }
 
   private initTemporarySubscription(): void {
     this.dataAccessor.temporaryHitPoints$.subscribe((newValue: any) => {
       this.temporaryHitPoints = newValue.value;
+      this.calculatePercentages();
     });
   }
+
+  public addHitPoints(): void {
+    console.log('addCurrentHitPoints');
+    if (this.currentHitPoints < this.maxHitPoints) {
+      this.dataAccessor.updateCharacterData({
+        name: 'currentHitPoints',
+        value: this.currentHitPoints + 1,
+      });
+    }
+  }
+
+  public removeHitPoints(): void {
+    if (this.temporaryHitPoints > 0) {
+      this.dataAccessor.updateCharacterData({
+        name: 'temporaryHitPoints',
+        value: this.temporaryHitPoints - 1,
+      });
+    } else if (this.currentHitPoints > 0) {
+      console.log('removeCurrentHitPoints');
+      this.dataAccessor.updateCharacterData({
+        name: 'currentHitPoints',
+        value: this.currentHitPoints - 1,
+      });
+    }
+  }
+
+  public addTemporaryHitPoints(): void {
+    if (this.currentHitPoints > 0) {
+      this.dataAccessor.updateCharacterData({
+        name: 'temporaryHitPoints',
+        value: this.temporaryHitPoints + 1,
+      });
+    }
+  }
+
+  private calculatePercentages() {
+    this.currentHitPointsPercentage =
+      (this.currentHitPoints / this.maxHitPoints) * 100;
+    this.temporaryHitPointsPercentage =
+      (this.temporaryHitPoints / this.maxHitPoints) * 100;
+    this.missingHitPointsPercentage =
+      ((this.maxHitPoints - (this.currentHitPoints + this.temporaryHitPoints)) *
+        100) /
+      this.maxHitPoints;
+  }
+
+  // TODO: Set life: Modalmit dem man die Were genau einstellen kann
 }

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

@@ -1 +1,3 @@
 <p>weapons-container works!</p>
+
+<!-- Tabelle -->

src/services/data/data.service.ts

@@ -168,13 +168,13 @@ export class DataService {
 
   private hitPointMaximumSubject = new BehaviorSubject<object>({
     name: 'hitPointMaximum',
-    value: 12,
+    value: 10,
   });
   public hitPointMaximum$ = this.hitPointMaximumSubject.asObservable();
 
   private currentHitPointsSubject = new BehaviorSubject<object>({
     name: 'currentHitPoints',
-    value: 7,
+    value: 5,
   });
   public currentHitPoints$ = this.currentHitPointsSubject.asObservable();