commit right before restructuring the whole layout to have a 1 line stats row

.nx/cache/d/daemon.log

@@ -459479,3 +459479,117 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-16T21:06:14.551Z - Time taken for 'hash changed files from watcher' 23.557300001382828ms
 [NX Daemon Server] - 2023-11-16T21:06:14.551Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-16T21:06:14.551Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-17T06:08:55.651Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-17T06:08:55.655Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-17T06:08:55.661Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T06:08:55.663Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-17T06:08:55.664Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T06:08:55.665Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-17T06:08:55.806Z - 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-17T06:08:55.806Z - [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-17T06:08:55.808Z - Time taken for 'hash changed files from watcher' 58.17899999022484ms
+[NX Daemon Server] - 2023-11-17T06:08:55.818Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-17T06:08:55.821Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-17T06:08:55.822Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-17T06:31:57.012Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-17T06:31:57.020Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-17T06:31:57.021Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T06:31:57.021Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-17T06:31:57.023Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T06:31:57.025Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-17T06:31:57.753Z - 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-17T06:31:57.753Z - [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-17T06:31:57.755Z - Time taken for 'hash changed files from watcher' 143.3910000026226ms
+[NX Daemon Server] - 2023-11-17T06:31:57.755Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-17T06:31:57.756Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-17T06:31:57.756Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-17T11:55:40.224Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-17T11:55:40.227Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-17T11:55:40.262Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T11:55:40.265Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-17T11:55:40.269Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-17T11:55:40.273Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-17T11:55:41.075Z - 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-17T11:55:41.076Z - [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-17T11:55:41.078Z - Time taken for 'hash changed files from watcher' 60.74700000882149ms
+[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/cache/d/server-process.json

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

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

@@ -1,4 +1,4 @@
-<div #backdrop class="backdrop" (click)="closePanel()"></div>
+<div #backdrop class="backdrop" (click)="dismissPanel()"></div>
 <div #detailsPanel class="panel">
   <ng-template
     *ngComponentOutlet="detailsPanelComponent; inputs: inputData"

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

@@ -16,7 +16,6 @@ export class DetailsPanelComponent {
 
   ngOnInit() {
     this.details.detailsPanel$.subscribe((data) => {
-      // console.log('offcanvasComponent', data);
       this.detailsPanelComponent = data.component;
       this.inputData = data.data;
       this.backdrop.nativeElement.classList.add('backdrop--open');
@@ -27,6 +26,10 @@ export class DetailsPanelComponent {
     });
   }
 
+  public dismissPanel(): void {
+    this.details.closePanel('dismiss');
+  }
+
   public closePanel(): void {
     this.backdrop.nativeElement.classList.remove('backdrop--open');
     this.offcanvas.nativeElement.classList.remove('panel--open');

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

@@ -1 +0,0 @@
-<p>infopanel works!</p>

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

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

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-infopanel',
-  templateUrl: './infopanel.component.html',
-  styleUrls: ['./infopanel.component.scss']
-})
-export class InfopanelComponent {
-
-}

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

@@ -12,7 +12,7 @@ app-tabbar{
     bottom: 0;
     display: flex;
     justify-content: center;
-    margin: auto;
+    width: 100%;
 }
 
 

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

@@ -4,22 +4,16 @@
       <button ngbNavLink [routerLink]="'./stats'">Kampf</button>
     </li>
     <li [ngbNavItem]="2">
-      <button ngbNavLink [routerLink]="'./character'">Character</button>
+      <button ngbNavLink [routerLink]="'./character'">Charakter</button>
     </li>
     <li [ngbNavItem]="3">
       <button ngbNavLink [routerLink]="'./inventory'">Inventar</button>
     </li>
     <li [ngbNavItem]="4">
-      <button ngbNavLink [routerLink]="'./skills'">Fähigkeiten</button>
+      <button ngbNavLink [routerLink]="'./skills'">Notizen</button>
     </li>
     <li [ngbNavItem]="5">
       <button ngbNavLink [routerLink]="'./spells'">Zauber</button>
     </li>
   </ul>
-
-  <!-- <button routerLink="./stats">Kampf</button>
-    <button routerLink="./character">Character</button>
-    <button routerLink="./inventory">Inventar</button>
-    <button routerLink="./skills">Fähigkeiten</button>
-    <button routerLink="./spells">Zauber</button> -->
 </div>

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

@@ -0,0 +1,34 @@
+.li{
+    width: 10%;
+}
+
+button{
+    width: 8rem;
+    height: 4rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: black;
+    border: 1px solid black !important;
+    transition: all 0.25s ease-in-out;
+    background-color: var(--primary-color-light);
+}
+
+button:hover{
+    height: 4.125rem;
+    color: black;
+    background-color: var(--primary-color);
+}
+
+button.active{
+    height: 4.5rem;
+    width: 9rem;
+    font-size: 1.625rem;
+    background-color: var(--primary-color) !important;
+}
+
+
+li{
+    display: flex;
+    align-items: flex-end;
+}
+

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

@@ -1,11 +1,9 @@
 <div class="armor-class-container">
   <input
     type="number"
-    class="armor-class"
-    style="width: 6rem"
+    class="armor-class-input"
     [(ngModel)]="armorClass"
     (change)="updateValue()"
   />
-  <br />
-  <label>Rüstungsklasse</label>
+  <div class="armor-class-label">Rüstungsklasse</div>
 </div>

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

@@ -1,5 +1,30 @@
 .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/armor-class/armor-class.component.ts

@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { DataService } from 'src/services/data/data.service';
 
 @Component({
-  selector: 'app-armor-class',
+  selector: 'armor-class',
   templateUrl: './armor-class.component.html',
   styleUrls: ['./armor-class.component.scss'],
 })

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 
 @Component({
-  selector: 'app-exhaustion',
+  selector: 'exhaustion',
   templateUrl: './exhaustion.component.html',
   styleUrls: ['./exhaustion.component.scss'],
 })
@@ -15,6 +15,8 @@ export class ExhaustionComponent {
     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;

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

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

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

@@ -1,5 +1,30 @@
 .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/initiative/initiative.component.ts

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

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

@@ -1,14 +1,16 @@
 <div class="life-container">
-  <app-armor-class></app-armor-class>
-  <app-movement></app-movement>
-  <app-initiative></app-initiative>
-  <app-proficiency></app-proficiency>
-  <app-exhaustion></app-exhaustion>
-  <app-death-save></app-death-save>
+  <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>
 
-  <div class="cont30">Inspiration</div>
-  <div>stati</div>
+    <!-- Row 2 -->
+    <initiative class="small"></initiative>
+    <proficiency class="small"></proficiency>
+    <status class="large"></status>
+  </div>
 
-  <!-- Trefferpunkte -->
+  <!-- Hit Points -->
   <app-life style="width: 100%"></app-life>
 </div>

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

@@ -1,12 +1,23 @@
 .life-container{
+    display: flex;
+    flex-direction: column;
+    // flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.ac-speed-container{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 100%;
+    justify-content: space-between;
+    row-gap: 1rem;
+}
+
+.small{
+    width: 25%;
+}
+
+.large{
+    width: 40%;
 }
 
-.cont30{
-    width: 30%;
-    height: 10vh;
-    border: 1px solid #8d8c8c;
-}

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

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

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

@@ -1,5 +1,30 @@
 .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/movement/movement.component.ts

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

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

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

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

@@ -1,5 +1,31 @@
 .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.ts

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

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

@@ -0,0 +1,31 @@
+<div class="status-item-container">
+  @for (condition of conditions; let index = $index; track condition ) {
+  <div class="status-item">
+    {{ condition }}
+    <button class="status-item-remove" (click)="removeCondition(index)">
+      X
+    </button>
+  </div>
+  }
+</div>
+<select [(ngModel)]="currentCondition">
+  <option *ngFor="let status of notUsedConditions()" [value]="status">
+    {{ status }}
+  </option>
+</select>
+<button (click)="addCondition()">hinzufügen</button>
+
+<div class="vertical-button-wrapper-2">
+  <ui-button
+    [type]="'apply'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

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

@@ -0,0 +1,3 @@
+.status-item-container{
+    margin: 2rem
+}

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

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

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

@@ -0,0 +1,53 @@
+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',
+})
+export class StatusDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
+
+  @Input() public conditions: string[] = [];
+  public currentCondition: string = '';
+
+  public conditionOptions: string[] = [
+    'Betäubt',
+    'Bewusstlos',
+    'Bezaubert',
+    'Blind',
+    'Festgesetzt',
+    'Gelähmt',
+    'Gepackt',
+    'Kampfunfähig',
+    'Liegend',
+    'Taub',
+    'Unsichtbar',
+    'Verängstigt',
+    'Vergiftet',
+    'Versteinert',
+  ];
+
+  public notUsedConditions(): string[] {
+    return this.conditionOptions.filter(
+      (condition) => !this.conditions.includes(condition)
+    );
+  }
+
+  public addCondition(): void {
+    this.conditions.push(this.currentCondition);
+  }
+
+  public removeCondition(index: number): void {
+    this.conditions.splice(index, 1);
+  }
+
+  public close(result: string): void {
+    if (result === 'update') {
+      this.detailsAccessor.closePanel(result, this.conditions);
+    } else if (result === 'dismiss') {
+      this.detailsAccessor.closePanel({ state: result });
+    }
+  }
+}

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

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

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

@@ -0,0 +1,82 @@
+.status-container{
+    display: flex;
+    border: 1px solid #8d8c8c;
+    height: 7rem;
+
+}
+
+.status{
+    width: 100%;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    
+}
+
+.status-list{
+    display: flex;
+    flex-direction: column;
+    // justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+.status-item{
+    width: 98%;
+}
+
+
+.status-label{
+    font-size: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+    padding: 0 0.5rem 0 0.5rem;
+}
+
+// General
+.vertical-line{
+  position: relative;
+  width: 1px;
+//   height: 3.5rem;
+}
+
+.vertical-line::before {
+  content: "";
+  position: absolute;
+  top: 10%; 
+  bottom: 10%; 
+  left: 0;
+  border-left: 1px solid black;
+}
+
+.exhaustion{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.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/life-container/status/status.component.spec.ts

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

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

@@ -0,0 +1,64 @@
+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';
+
+@Component({
+  selector: 'status',
+  templateUrl: './status.component.html',
+  styleUrl: './status.component.scss',
+})
+export class StatusComponent {
+  public constructor(
+    private dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
+
+  public exhaustion: number = 0;
+  public conditions: string[] = ['Blind', 'Kampfunfähig', 'Betäubt'];
+
+  public availableConditions: string[] = [
+    'Betäubt',
+    'Bewusstlos',
+    'Bezaubert',
+    'Blind',
+    'Festgesetzt',
+    'Gelähmt',
+    'Gepackt',
+    'Kampfunfähig',
+    'Liegend',
+    'Taub',
+    'Unsichtbar',
+    'Verängstigt',
+    'Vergiftet',
+    'Versteinert',
+  ];
+
+  public ngOnInit(): void {
+    // this.conditions = this.dataAcessor.conditions()
+    // this.exhaustion = this.dataAccessor.exhaustion();
+  }
+
+  public updateExhaustion(): void {
+    // this.dataAccessor.exhaustion = this.exhaustion;
+  }
+
+  public updateCondition(): void {
+    // this.dataAccessor.statuses = this.conditions;
+  }
+
+  public openDetailsPanel(): void {
+    this.detailsAccessor.openPanel(StatusDetailsComponent, {
+      conditions: JSON.parse(JSON.stringify(this.conditions)),
+    });
+    const resultSubscription = this.detailsAccessor.result$.subscribe(
+      (result) => {
+        console.log(result);
+        if (result.state === 'update') {
+          this.conditions = result.data;
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
+}

src/app/journal/journal.module.ts

@@ -15,7 +15,6 @@ import { JournalInventoryComponent } from './journal-inventory/journal-inventory
 import { JournalSpellbookComponent } from './journal-spellbook/journal-spellbook.component';
 import { JournalSpellcardsComponent } from './journal-spellcards/journal-spellcards.component';
 import { JournalCharacterComponent } from './journal-character/journal-character.component';
-import { InfopanelComponent } from './journal-home/infopanel/infopanel.component';
 import { AttributeFieldComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component';
 import { SkillFieldComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component';
 import { AttributeSkillContainerComponent } from './journal-stats/attribute-skill-container/attribute-skill-container.component';
@@ -27,6 +26,8 @@ import { HitDiceComponent } from './journal-stats/life-container/hit-dice/hit-di
 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 { LifeComponent } from './journal-stats/life-container/life/life.component';
 import { IconComponent } from './icon/icon.component';
@@ -67,7 +68,6 @@ import { ProficiencyFieldComponent } from './journal-stats/attribute-skill-conta
     JournalCharacterComponent,
     TabbarComponent,
     OffcanvasComponent,
-    InfopanelComponent,
     AttributeFieldComponent,
     SkillFieldComponent,
     AttributeSkillContainerComponent,
@@ -106,6 +106,8 @@ import { ProficiencyFieldComponent } from './journal-stats/attribute-skill-conta
     SaveThrowPanelComponent,
     SaveThrowFieldComponent,
     ProficiencyFieldComponent,
+    StatusComponent,
+    StatusDetailsComponent,
   ],
   imports: [
     CommonModule,