finished info row. Primitive styling. Next details panel

.nx/cache/d/daemon.log

@@ -459593,3 +459593,155 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-17T11:55:41.078Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-17T11:55:41.079Z - [WATCHER]: .nx/cache/d/daemon.log was modified
 [NX Daemon Server] - 2023-11-17T11:55:41.080Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-17T14:24:52.410Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-17T14:24:52.417Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-17T14:24:52.423Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T14:24:52.425Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-17T14:24:52.425Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T14:24:52.428Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-17T14:24:53.002Z - 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-17T14:24:53.002Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-17T14:24:53.004Z - Time taken for 'hash changed files from watcher' 73.8740000128746ms
+[NX Daemon Server] - 2023-11-17T14:24:53.005Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-17T14:24:53.005Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-17T14:24:53.006Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-17T15:22:11.502Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-17T15:22:11.505Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-17T15:22:11.512Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T15:22:11.514Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-17T15:22:11.514Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T15:22:11.515Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-17T15:22:11.622Z - 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-17T15:22:11.622Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-17T15:22:11.623Z - Time taken for 'hash changed files from watcher' 42.04159998893738ms
+[NX Daemon Server] - 2023-11-17T15:22:11.624Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-17T15:22:11.624Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-17T15:22:11.625Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-18T12:03:45.501Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-18T12:03:45.510Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-18T12:03:45.513Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-18T12:03:45.515Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-18T12:03:45.515Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-18T12:03:45.517Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-18T12:03:46.065Z - 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-18T12:03:46.065Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-18T12:03:46.067Z - Time taken for 'hash changed files from watcher' 73.54170000553131ms
+[NX Daemon Server] - 2023-11-18T12:03:46.067Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-18T12:03:46.068Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-18T12:03:46.069Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-19T09:40:22.771Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-19T09:40:22.779Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-19T09:40:22.784Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-19T09:40:22.786Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-19T09:40:22.786Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-19T09:40:22.788Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-19T09:40:23.434Z - 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-19T09:40:23.435Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-19T09:40:23.436Z - Time taken for 'hash changed files from watcher' 168.86129999160767ms
+[NX Daemon Server] - 2023-11-19T09:40:23.437Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-19T09:40:23.438Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-19T09:40:23.438Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":17772}
+{"processId":10560}

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

@@ -1,7 +1,6 @@
 <div class="attribute-skill-container">
   <div class="skill-column-left">
     <attribute-panel></attribute-panel>
-    <proficiency-field></proficiency-field>
   </div>
 
   <div class="skill-column-right">

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

@@ -1,10 +0,0 @@
-<div class="proficiency-container">
-  <input
-    type="number"
-    class="proficiency-input"
-    style="width: 6rem"
-    [(ngModel)]="proficiency"
-    (change)="updateValue()"
-  />
-  <div class="proficiency-label">Übungsbonus</div>
-</div>

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

@@ -1,31 +0,0 @@
-.proficiency-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #8d8c8c;
-    margin-top: 3rem;
-}
-
-.proficiency-input{
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 100%;
-    font-size: 2rem;
-    font-weight: 600;
-}
-.proficiency-input::-webkit-outer-spin-button,
-.proficiency-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-
-.proficiency-label{
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}

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

@@ -0,0 +1,9 @@
+<div class="info-container">
+  <input
+    type="number"
+    class="info-input"
+    [(ngModel)]="armorClass"
+    (change)="updateValue()"
+  />
+  <div class="info-label">Rüstungsklasse</div>
+</div>

src/app/journal/journal-stats/life-container/status/status-details/status-details.component.spec.ts → src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.spec.ts

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

src/app/journal/journal-stats/life-container/status/status-details/status-details.component.ts → src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.ts

@@ -2,11 +2,11 @@ import { Component, Input } from '@angular/core';
 import { DetailsService } from 'src/services/details/details.service';
 
 @Component({
-  selector: 'app-status-details',
-  templateUrl: './status-details.component.html',
-  styleUrl: './status-details.component.scss',
+  selector: 'conditions-details',
+  templateUrl: './conditions-details.component.html',
+  styleUrl: './conditions-details.component.scss',
 })
-export class StatusDetailsComponent {
+export class ConditionsDetailsComponent {
   public constructor(public detailsAccessor: DetailsService) {}
 
   @Input() public conditions: string[] = [];

src/app/journal/journal-stats/life-container/status/status.component.html → src/app/journal/journal-stats/info-row/conditions/conditions.component.html

@@ -1,13 +1,15 @@
-<div class="status-container">
-  <div class="status">
-    <div class="status-list">
+<div class="condition-container">
+  <div class="condition">
+    <div class="condition-list">
       @for (condition of conditions; track condition ) {
-      <div class="status-item">
+      <div class="condition-item">
         <div style="padding-left: 0.5rem">{{ condition }}</div>
       </div>
-      } @empty { - }
+      } @empty {
+      <div class="empty-list">-</div>
+      }
     </div>
-    <div class="status-label" (click)="openDetailsPanel()">Zustände</div>
+    <div class="condition-label" (click)="openDetailsPanel()">Zustände</div>
   </div>
 
   <div class="vertical-line"></div>
@@ -15,11 +17,11 @@
   <div class="exhaustion">
     <input
       type="number"
-      class="exhaustion-input"
+      class="info-input"
       style="width: 6rem"
       [(ngModel)]="exhaustion"
       (change)="updateExhaustion()"
     />
-    <div class="exhaustion-label">Erschöpfung</div>
+    <div class="info-label">Erschöpfung</div>
   </div>
 </div>

src/app/journal/journal-stats/life-container/status/status.component.scss → src/app/journal/journal-stats/info-row/conditions/conditions.component.scss

@@ -1,11 +1,12 @@
-.status-container{
+.condition-container{
     display: flex;
     border: 1px solid #8d8c8c;
     height: 7rem;
+    width: 16rem;
 
 }
 
-.status{
+.condition{
     width: 100%;
     display:flex;
     flex-direction: column;
@@ -13,25 +14,37 @@
     
 }
 
-.status-list{
+.condition-list{
     display: flex;
     flex-direction: column;
     // justify-content: space-between;
     align-items: center;
     width: 100%;
-    margin-top: 0.5rem;
+    height: 5rem;
+    padding-top: 0.5rem;
+    overflow-y: auto;
 }
 
-.status-item{
+.condition-item{
     width: 98%;
 }
 
+.empty-list{
+    height: 5rem;
+    display: flex;  
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: 600;
+}
+
 
-.status-label{
+.condition-label{
     font-size: 1.25rem;
     font-weight: 600;
     text-align: center;
-    padding: 0 0.5rem 0 0.5rem;
+    height: 2.5rem;
+    padding: 0 0.5rem 0.5rem 0.5rem;
 }
 
 // General
@@ -58,25 +71,3 @@
     width: 100%;
 }
 
-.exhaustion-input{
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 100%;
-    font-size: 2rem;
-    font-weight: 600;
-}
-.exhaustion-input::-webkit-outer-spin-button,
-.exhaustion-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-
-.exhaustion-label{
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}

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

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

src/app/journal/journal-stats/life-container/status/status.component.ts → src/app/journal/journal-stats/info-row/conditions/conditions.component.ts

@@ -1,21 +1,21 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { DetailsService } from 'src/services/details/details.service';
-import { StatusDetailsComponent } from './status-details/status-details.component';
+import { ConditionsDetailsComponent } from './conditions-details/conditions-details.component';
 
 @Component({
-  selector: 'status',
-  templateUrl: './status.component.html',
-  styleUrl: './status.component.scss',
+  selector: 'conditions',
+  templateUrl: './conditions.component.html',
+  styleUrl: './conditions.component.scss',
 })
-export class StatusComponent {
+export class ConditionsComponent {
   public constructor(
     private dataAccessor: DataService,
     public detailsAccessor: DetailsService
   ) {}
 
   public exhaustion: number = 0;
-  public conditions: string[] = ['Blind', 'Kampfunfähig', 'Betäubt'];
+  public conditions: string[] = ['Blind', 'Kampfunfähig'];
 
   public availableConditions: string[] = [
     'Betäubt',
@@ -35,20 +35,20 @@ export class StatusComponent {
   ];
 
   public ngOnInit(): void {
-    // this.conditions = this.dataAcessor.conditions()
-    // this.exhaustion = this.dataAccessor.exhaustion();
+    this.conditions = this.dataAccessor.conditions;
+    this.exhaustion = this.dataAccessor.exhaustion;
   }
 
   public updateExhaustion(): void {
-    // this.dataAccessor.exhaustion = this.exhaustion;
+    this.dataAccessor.exhaustion = this.exhaustion;
   }
 
   public updateCondition(): void {
-    // this.dataAccessor.statuses = this.conditions;
+    this.dataAccessor.conditions = this.conditions;
   }
 
   public openDetailsPanel(): void {
-    this.detailsAccessor.openPanel(StatusDetailsComponent, {
+    this.detailsAccessor.openPanel(ConditionsDetailsComponent, {
       conditions: JSON.parse(JSON.stringify(this.conditions)),
     });
     const resultSubscription = this.detailsAccessor.result$.subscribe(

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

@@ -0,0 +1,45 @@
+<div class="death-save-container">
+  <div style="margin: 0.5rem">
+    <div class="save-row">
+      <div class="save-label">Erfolg</div>
+      <div class="save-checkbox">
+        <input
+          type="checkbox"
+          [(ngModel)]="deathSaveSucc1"
+          (change)="updateValue()"
+        />
+        <input
+          type="checkbox"
+          [(ngModel)]="deathSaveSucc2"
+          (change)="updateValue()"
+        />
+        <input
+          type="checkbox"
+          [(ngModel)]="deathSaveSucc3"
+          (change)="updateValue()"
+        />
+      </div>
+    </div>
+    <div class="save-row">
+      <div class="save-label">Fehlschlag</div>
+      <div class="save-checkbox">
+        <input
+          type="checkbox"
+          [(ngModel)]="deathSaveFail1"
+          (change)="updateValue()"
+        />
+        <input
+          type="checkbox"
+          [(ngModel)]="deathSaveFail2"
+          (change)="updateValue()"
+        />
+        <input
+          type="checkbox"
+          [(ngModel)]="deathSaveFail3"
+          (change)="updateValue()"
+        />
+      </div>
+    </div>
+  </div>
+  <div class="death-save">Todesrettungswürfe</div>
+</div>

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

@@ -0,0 +1,36 @@
+.death-save-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 12rem;
+    height: 7rem;
+    border: 1px solid #8d8c8c;
+}
+
+.save-row{
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    // align-items: center;
+}
+
+.save-label{
+    // font-size: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+    padding: 0 0.5rem 0 0.5rem;
+
+}
+
+.save-checkbox{
+    display: flex;
+    gap: 0.5rem;
+    margin-right: 1rem;
+}
+
+.death-save{
+    text-align: center;
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0.5rem 0 
+}

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 
 @Component({
-  selector: 'app-death-save',
+  selector: 'death-save',
   templateUrl: './death-save.component.html',
   styleUrls: ['./death-save.component.scss'],
 })

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

@@ -0,0 +1,8 @@
+<div class="row-container">
+  <armor-class></armor-class>
+  <initiative></initiative>
+  <movement></movement>
+  <proficiency></proficiency>
+  <conditions></conditions>
+  <death-save></death-save>
+</div>

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

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

src/app/journal/journal-stats/life-container/status/status.component.spec.ts → src/app/journal/journal-stats/info-row/info-row.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { StatusComponent } from './status.component';
+import { InfoRowComponent } from './info-row.component';
 
-describe('StatusComponent', () => {
-  let component: StatusComponent;
-  let fixture: ComponentFixture<StatusComponent>;
+describe('InfoRowComponent', () => {
+  let component: InfoRowComponent;
+  let fixture: ComponentFixture<InfoRowComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [StatusComponent]
+      imports: [InfoRowComponent]
     })
     .compileComponents();
     
-    fixture = TestBed.createComponent(StatusComponent);
+    fixture = TestBed.createComponent(InfoRowComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'info-row',
+  templateUrl: './info-row.component.html',
+  styleUrl: './info-row.component.scss',
+})
+export class InfoRowComponent {}

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

@@ -0,0 +1,9 @@
+<div class="info-container">
+  <input
+    type="number"
+    class="info-input"
+    [(ngModel)]="initiative"
+    (change)="updateValue()"
+  />
+  <div class="info-label">Initiative</div>
+</div>

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

@@ -0,0 +1,9 @@
+<div class="info-container">
+  <input
+    type="number"
+    class="info-input"
+    [(ngModel)]="movement"
+    (change)="updateValue()"
+  />
+  <div class="info-label">Bewegungsrate</div>
+</div>

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

@@ -0,0 +1,9 @@
+<div class="info-container">
+  <input
+    type="number"
+    class="info-input"
+    [(ngModel)]="proficiency"
+    (change)="updateValue()"
+  />
+  <div class="info-label">Übungsbonus</div>
+</div>

src/app/journal/journal-stats/attribute-skill-container/proficiency-field/proficiency-field.component.ts → src/app/journal/journal-stats/info-row/proficiency/proficiency-field.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 
 @Component({
-  selector: 'proficiency-field',
+  selector: 'proficiency',
   templateUrl: './proficiency-field.component.html',
   styleUrls: ['./proficiency-field.component.scss'],
 })

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

@@ -4,14 +4,7 @@
     <attribute-skill-container></attribute-skill-container>
 
     <div class="container2">
-      <div class="info-row">
-        <armor-class></armor-class>
-        <proficiency></proficiency>
-        <movement></movement>
-        <initiative></initiative>
-        <status></status>
-        <app-death-save></app-death-save>
-      </div>
+      <info-row></info-row>
 
       <div class="rest">
         <div class="life-weapon-container">

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

@@ -26,11 +26,11 @@ attribute-skill-container{
     width: 75%;
 }
 
-.info-row{
-    display: flex;
-    justify-content: space-between;
+info-row{
+    // display: flex;
+    // justify-content: space-between;
     border: 1px solid #0000ff;
-    width: 100%;
+    // width: 100%;
     // height: 5vh;
 }
 

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

@@ -1,9 +0,0 @@
-<div class="armor-class-container">
-  <input
-    type="number"
-    class="armor-class-input"
-    [(ngModel)]="armorClass"
-    (change)="updateValue()"
-  />
-  <div class="armor-class-label">Rüstungsklasse</div>
-</div>

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

@@ -1,30 +0,0 @@
-.armor-class-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #8d8c8c;
-}
-
-.armor-class-input{
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 100%;
-    font-size: 2rem;
-    font-weight: 600;
-}
-.armor-class-input::-webkit-outer-spin-button,
-.armor-class-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-
-.armor-class-label{
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}

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

@@ -1,51 +0,0 @@
-<div class="death-save-container">
-  <div class="save-row">
-    <label>Erfolg</label>
-    <div class="save-checkbox">
-      <input
-        type="checkbox"
-        [(ngModel)]="deathSaveSucc1"
-        (change)="updateValue()"
-      />
-    </div>
-    <div class="save-checkbox">
-      <input
-        type="checkbox"
-        [(ngModel)]="deathSaveSucc2"
-        (change)="updateValue()"
-      />
-    </div>
-    <div class="save-checkbox">
-      <input
-        type="checkbox"
-        [(ngModel)]="deathSaveSucc3"
-        (change)="updateValue()"
-      />
-    </div>
-  </div>
-  <div class="save-row">
-    <label>Fehlschlag</label>
-    <div class="save-checkbox">
-      <input
-        type="checkbox"
-        [(ngModel)]="deathSaveFail1"
-        (change)="updateValue()"
-      />
-    </div>
-    <div class="save-checkbox">
-      <input
-        type="checkbox"
-        [(ngModel)]="deathSaveFail2"
-        (change)="updateValue()"
-      />
-    </div>
-    <div class="save-checkbox">
-      <input
-        type="checkbox"
-        [(ngModel)]="deathSaveFail3"
-        (change)="updateValue()"
-      />
-    </div>
-  </div>
-  <div class="death-save">Todesrettungswürfe</div>
-</div>

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

@@ -1,16 +0,0 @@
-.death-save-container{
-    display: flex;
-    flex-direction: column;
-}
-
-.save-row{
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    // justify-content: space-between;
-    // align-items: center;
-}
-
-.save-checkbox{
-    align-self: end;
-}

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

@@ -1,11 +0,0 @@
-<div class="exhaustion-container">
-  <input
-    type="number"
-    class="exhaustion"
-    style="width: 6rem"
-    [(ngModel)]="exhaustion"
-    (change)="updateValue()"
-  />
-  <br />
-  <label>Erschöpfungen</label>
-</div>

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

@@ -1,5 +0,0 @@
-.exhaustion-container{
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #8d8c8c;
-}

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

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

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

@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-import { DataService } from 'src/services/data/data.service';
-
-@Component({
-  selector: 'exhaustion',
-  templateUrl: './exhaustion.component.html',
-  styleUrls: ['./exhaustion.component.scss'],
-})
-export class ExhaustionComponent {
-  public constructor(public dataAccessor: DataService) {}
-
-  public exhaustion: number = 0;
-
-  ngOnInit(): void {
-    this.initAttributeSubscription();
-  }
-
-  // TODO: remove subscription and add a simplet getter and setter
-
-  private initAttributeSubscription(): void {
-    this.dataAccessor.exhaustion$.subscribe((newValue: any) => {
-      this.exhaustion = newValue.value;
-    });
-  }
-
-  public updateValue(): void {
-    this.dataAccessor.updateCharacterData({
-      name: 'exhaustion',
-      value: this.exhaustion,
-    });
-  }
-}

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

@@ -1,10 +0,0 @@
-<div class="initiative-container">
-  <input
-    type="number"
-    class="initiative-input"
-    style="width: 6rem"
-    [(ngModel)]="initiative"
-    (change)="updateValue()"
-  />
-  <div class="initiative-label">Initiative</div>
-</div>

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

@@ -1,30 +0,0 @@
-.initiative-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #8d8c8c;
-}
-
-.initiative-input{
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 100%;
-    font-size: 2rem;
-    font-weight: 600;
-}
-.initiative-input::-webkit-outer-spin-button,
-.initiative-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-
-.initiative-label{
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}

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

@@ -1,16 +1,4 @@
 <div class="life-container">
-  <div class="ac-speed-container">
-    <!-- Row 1 -->
-    <armor-class class="small"></armor-class>
-    <movement class="small"></movement>
-    <app-death-save class="large"></app-death-save>
-
-    <!-- Row 2 -->
-    <initiative class="small"></initiative>
-    <proficiency class="small"></proficiency>
-    <status class="large"></status>
-  </div>
-
   <!-- Hit Points -->
   <life style="width: 100%"></life>
 </div>

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

@@ -40,7 +40,7 @@ export class LifeDetailsComponent {
         temporaryHitPoints: this.temporaryHitPoints,
       });
     } else if (result === 'dismiss') {
-      this.detailsAccessor.closePanel({ state: result });
+      this.detailsAccessor.closePanel(result);
     }
   }
 }

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

@@ -81,12 +81,13 @@ export class LifeComponent {
     const resultSubscription = this.detailsAccessor.result$.subscribe(
       (result) => {
         console.log(result);
-        this.maxHitPoints = result.data.maxHitPoints;
-        this.currentHitPoints = result.data.currentHitPoints;
-        this.temporaryHitPoints = result.data.temporaryHitPoints;
-
-        this.calculatePercentages();
-        this.updateDatabase();
+        if (result.state === 'update') {
+          this.maxHitPoints = result.data.maxHitPoints;
+          this.currentHitPoints = result.data.currentHitPoints;
+          this.temporaryHitPoints = result.data.temporaryHitPoints;
+          this.calculatePercentages();
+          this.updateDatabase();
+        }
         resultSubscription.unsubscribe();
       }
     );

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

@@ -1,10 +0,0 @@
-<div class="movement-container">
-  <input
-    type="number"
-    class="movement-input"
-    style="width: 6rem"
-    [(ngModel)]="movement"
-    (change)="updateValue()"
-  />
-  <div class="movement-label">Bewegungsrate</div>
-</div>

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

@@ -1,30 +0,0 @@
-.movement-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #8d8c8c;
-}
-
-.movement-input{
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 100%;
-    font-size: 2rem;
-    font-weight: 600;
-}
-.movement-input::-webkit-outer-spin-button,
-.movement-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-
-.movement-label{
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}

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

@@ -1,10 +0,0 @@
-<div class="proficiency-container">
-  <input
-    type="number"
-    class="proficiency-input"
-    style="width: 6rem"
-    [(ngModel)]="proficiency"
-    (change)="updateValue()"
-  />
-  <div class="proficiency-label">Übungsbonus</div>
-</div>

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

@@ -1,31 +0,0 @@
-.proficiency-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #8d8c8c;
-    height: 7rem;
-}
-
-.proficiency-input{
-    border: none;
-    outline: none;
-    text-align: center;
-    background-color: transparent;
-    width: 100%;
-    font-size: 2rem;
-    font-weight: 600;
-}
-.proficiency-input::-webkit-outer-spin-button,
-.proficiency-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-
-.proficiency-label{
-    font-size: 1.25rem;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.5rem;
-}

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

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

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

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { DataService } from 'src/services/data/data.service';
-
-@Component({
-  selector: 'proficiency',
-  templateUrl: './proficiency.component.html',
-  styleUrls: ['./proficiency.component.scss'],
-})
-export class ProficiencyComponent {
-  public constructor(public dataAccessor: DataService) {}
-
-  public proficiency: number = 0;
-
-  ngOnInit(): void {
-    this.initAttributeSubscription();
-  }
-
-  private initAttributeSubscription(): void {
-    this.dataAccessor.proficiency$.subscribe((newValue: any) => {
-      this.proficiency = newValue.value;
-    });
-  }
-
-  public updateValue(): void {
-    this.dataAccessor.updateCharacterData({
-      name: 'proficiency',
-      value: this.proficiency,
-    });
-  }
-}

src/app/journal/journal.module.ts

@@ -20,15 +20,12 @@ import { SkillFieldComponent } from './journal-stats/attribute-skill-container/s
 import { AttributeSkillContainerComponent } from './journal-stats/attribute-skill-container/attribute-skill-container.component';
 import { LifeContainerComponent } from './journal-stats/life-container/life-container.component';
 import { WeaponsContainerComponent } from './journal-stats/weapons-container/weapons-container.component';
-import { ArmorClassComponent } from './journal-stats/life-container/armor-class/armor-class.component';
-import { MovementComponent } from './journal-stats/life-container/movement/movement.component';
+import { ArmorClassComponent } from './journal-stats/info-row/armor-class/armor-class.component';
+import { MovementComponent } from './journal-stats/info-row/movement/movement.component';
 import { HitDiceComponent } from './journal-stats/life-container/hit-dice/hit-dice.component';
-import { InitiativeComponent } from './journal-stats/life-container/initiative/initiative.component';
-import { ProficiencyComponent } from './journal-stats/life-container/proficiency/proficiency.component';
-import { ExhaustionComponent } from './journal-stats/life-container/exhaustion/exhaustion.component';
-import { StatusComponent } from './journal-stats/life-container/status/status.component';
-import { StatusDetailsComponent } from './journal-stats/life-container/status/status-details/status-details.component';
-import { DeathSaveComponent } from './journal-stats/life-container/death-save/death-save.component';
+import { InitiativeComponent } from './journal-stats/info-row/initiative/initiative.component';
+import { ConditionsDetailsComponent } from './journal-stats/info-row/conditions/conditions-details/conditions-details.component';
+import { DeathSaveComponent } from './journal-stats/info-row/death-save/death-save.component';
 import { LifeComponent } from './journal-stats/life-container/life/life.component';
 import { IconComponent } from './icon/icon.component';
 import { WeaponTableComponent } from './journal-stats/weapons-container/weapon-table/weapon-table.component';
@@ -42,6 +39,8 @@ import { TraitTableComponent } from './journal-stats/ability-panel/trait-table/t
 import { TraitModalComponent } from './journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component';
 import { SpellslotsComponent } from './journal-stats/ability-panel/spellslots/spellslots.component';
 import { SpellslotsModalComponent } from './journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component';
+import { InfoRowComponent } from './journal-stats/info-row/info-row.component';
+import { ConditionsComponent } from './journal-stats/info-row/conditions/conditions.component';
 
 import { SharedComponentsModule } from '../shared-components/shared-components.module';
 import { ProficienciesTableComponent } from './journal-stats/ability-panel/proficiencies-table/proficiencies-table.component';
@@ -56,7 +55,7 @@ import { AttributePanelComponent } from './journal-stats/attribute-skill-contain
 import { SkillPanelComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-panel.component';
 import { SaveThrowPanelComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component';
 import { SaveThrowFieldComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component';
-import { ProficiencyFieldComponent } from './journal-stats/attribute-skill-container/proficiency-field/proficiency-field.component';
+import { ProficiencyFieldComponent } from './journal-stats/info-row/proficiency/proficiency-field.component';
 
 @NgModule({
   declarations: [
@@ -77,8 +76,6 @@ import { ProficiencyFieldComponent } from './journal-stats/attribute-skill-conta
     MovementComponent,
     HitDiceComponent,
     InitiativeComponent,
-    ProficiencyComponent,
-    ExhaustionComponent,
     DeathSaveComponent,
     LifeComponent,
     IconComponent,
@@ -106,8 +103,9 @@ import { ProficiencyFieldComponent } from './journal-stats/attribute-skill-conta
     SaveThrowPanelComponent,
     SaveThrowFieldComponent,
     ProficiencyFieldComponent,
-    StatusComponent,
-    StatusDetailsComponent,
+    ConditionsDetailsComponent,
+    InfoRowComponent,
+    ConditionsComponent,
   ],
   imports: [
     CommonModule,

src/services/data/data.service.ts

@@ -515,43 +515,29 @@ export class DataService {
   });
   public experience$ = this.experienceSubject.asObservable();
 
-  private exhaustionSubject = new BehaviorSubject<object>({
-    name: 'exhaustion',
-    value: 0,
-  });
-  public exhaustion$ = this.exhaustionSubject.asObservable();
+  private _exhaustion: number = 0;
 
-  // #endregion
+  public get exhaustion(): number {
+    return this._exhaustion;
+  }
 
-  // #region Weapons and Items observables
+  public set exhaustion(newValue: number) {
+    console.log('exhaustion: ', newValue);
+    this._exhaustion = newValue;
+  }
 
-  private weaponsSubject = new BehaviorSubject<object>({
-    name: 'weapons',
-    value: [{ name: '', attackBonus: '', damage: '', damageType: '' }],
-  });
-  public weapons$ = this.experienceSubject.asObservable();
+  private _conditions: string[] = ['Blind', 'Kampfunfähig'];
 
-  private spellsSubject = new BehaviorSubject<object>({
-    name: 'spells',
-    value: [{ name: '', attackBonus: '', damage: '', damageType: '' }],
-  });
-  public spells$ = this.experienceSubject.asObservable();
-
-  private abilitiesSubject = new BehaviorSubject<object>({
-    name: 'abilities',
-    value: [
-      {
-        name: '',
-        doesDamage: false,
-        doesHeal: false,
-        damageType: '',
-        description: '',
-      },
-    ],
-  });
-  public abilities$ = this.experienceSubject.asObservable();
+  public get conditions(): string[] {
+    return this._conditions;
+  }
 
-  // #region Attribute observables
+  public set conditions(newValue: string[]) {
+    console.log('conditions: ', newValue);
+    this._conditions = newValue;
+  }
+
+  // #endregion
 
   /**
    *

src/styles.scss

@@ -36,6 +36,44 @@ $dialog-position-right: 20%;
 }
 
 
+//  Info Row
+
+.info-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #8d8c8c;
+    width: 10rem;
+    height: 7rem;
+}
+
+.info-input{
+    border: none;
+    outline: none;
+    text-align: center;
+    background-color: transparent;
+    width: 5rem;
+    margin-top: 1rem;
+    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;
+}
+
+.info-label{
+    font-size: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+    padding: 0.5rem;
+}
+
+
+
 // details-panel
 
 .vertical-button-wrapper-3{