Whole info-row details finished besides conditions

.nx/cache/d/daemon.log

@@ -459820,3 +459820,77 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-20T18:05:08.806Z - Time taken for 'hash changed files from watcher' 22.765500009059906ms
 [NX Daemon Server] - 2023-11-20T18:05:08.807Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-20T18:05:08.807Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-21T06:06:42.507Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-21T06:06:42.514Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-21T06:06:42.518Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-21T06:06:42.519Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-21T06:06:42.524Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-21T06:06:42.525Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-21T06:06:43.048Z - 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-21T06:06:43.049Z - [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-21T06:06:43.050Z - Time taken for 'hash changed files from watcher' 33.52220004796982ms
+[NX Daemon Server] - 2023-11-21T06:06:43.051Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-21T06:06:43.051Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-21T06:28:50.823Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-21T06:28:50.825Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-21T06:28:50.832Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-21T06:28:50.834Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-21T06:28:50.834Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-21T06:28:50.836Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-21T06:28:50.939Z - 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-21T06:28:50.940Z - [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-21T06:28:50.941Z - Time taken for 'hash changed files from watcher' 27.9268000125885ms
+[NX Daemon Server] - 2023-11-21T06:28:50.942Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-21T06:28:50.942Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":15616}
+{"processId":19268}

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

@@ -8,9 +8,9 @@
   abgeschwächt werden.
 </div>
 
-<div class="value-container">
-  <div class="save-value">
+<div class="details-value-container">
+  <div class="details-value">
     {{ saveModifier }}
   </div>
-  <div class="save-label">Modifikator</div>
+  <div class="details-label">Modifikator</div>
 </div>

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

@@ -4,31 +4,6 @@
     font-weight: bold;
 }
 
-.value-container{
-    display: flex;
-    flex-direction: column;
-    margin-top: 2rem;
-}
-
-.save-value{
-    width: 3.5rem;
-    height: 3rem;
-    font-size: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin:auto;
-    border-radius: 10px;
-    background-color: white;
-    box-shadow: var(--shadow-small);
-}
-
-.save-label{
-    margin-top: 0.5rem;
-    font-weight: 500;
-    text-align: center;
-}
-
 .save-calculation-heading{
     font-size: 1.25rem;
     font-weight: 500;

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

@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class SaveThrowDetailsComponent {
   @Input() attributeName: string = '';
-  @Input() saveModifier: string = '0';
+  @Input() saveModifier: string = '';
 }

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

@@ -3,6 +3,7 @@
     class="save-throw-field__input"
     type="checkbox"
     [(ngModel)]="attribute.proficiency"
+    (click)="$event.stopPropagation()"
   />
 
   <div class="save-throw-field__name">{{ nameTranslator[attributeName] }}</div>

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

@@ -0,0 +1,10 @@
+<div class="details-title">{{ skillNames[skillName] }}</div>
+
+<div class="details-content">{{ descriptions[skillName] }}</div>
+
+<div class="details-value-container">
+  <div class="details-value" style="margin-top: 1.5rem">
+    {{ skillModifier }}
+  </div>
+  <div class="details-label">Modifikator</div>
+</div>

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

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

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

@@ -0,0 +1,71 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-skill-details',
+  templateUrl: './skill-details.component.html',
+  styleUrl: './skill-details.component.scss',
+})
+export class SkillDetailsComponent {
+  @Input() skillName: string = '';
+  @Input() skillModifier: string = '';
+
+  skillNames: any = {
+    acrobatics: 'Akrobatik',
+    animalHandling: 'Tierkunde',
+    arcana: 'Arkana',
+    athletics: 'Athletik',
+    deception: 'Täuschen',
+    history: 'Geschichte',
+    insight: 'Motiv erkennen',
+    intimidation: 'Einschüchtern',
+    investigation: 'Nachforschung',
+    medicine: 'Heilkunde',
+    nature: 'Naturkunde',
+    perception: 'Wahrnehmung',
+    performance: 'Auftreten',
+    persuasion: 'Überreden',
+    religion: 'Religion',
+    sleightOfHands: 'Fingerfertigkeit',
+    stealth: 'Heimlichkeit',
+    survival: 'Überleben',
+  };
+
+  public descriptions: any = {
+    acrobatics:
+      'Würfe auf Akrobatik decken alle Versuche ab, in denen ein Charakter in schwierigen Situtationen auf den Beinen bleiben will. Dies beinhaltet z.B. das Balancieren auf einem Seil, das Rennen über instabile Oberflächen, das Balancieren auf einem schmalen Vorsprung und das Springen über Hindernisse.',
+    animalHandling:
+      'Würfe auf Tierkunde decken alle Versuche ab, ein domestiziertes Tier zu beruhigen, ein Reittier vor dem Scheuen zu bewahren oder intuitiv zu verstehen, wie es einem wilden Tier geht und was seine Absichten sind.',
+    arcana:
+      'Würfe auf Arkana decken alle Versuche ab, magische Energie zu identifizieren, zu verstehen oder zu manipulieren.',
+    athletics:
+      'Würfe auf Athletik decken alle Versuche ab, die körperliche Kraft eines Charakters zu testen. Dies beinhaltet z.B. das Klettern, das Schwimmen und das Springen.',
+    deception:
+      'Würfe auf Täuschen zeigen an, ob ein Charakter überzeugend die Wahrheit verbergen kann, sei es nun verbal oder durch konkretes Handeln. Dies beinhaltet z.B. das Lügen, das Verbergen von Emotionen hinter einer Maske und das Verkleiden.',
+    history:
+      'Würfe auf Geschichte decken alle Versuche ab, sich an historische Ereignisse und Personen, vergangene Zeitalter, alte Reiche und vergessene Kulturen zu erinnern.',
+    insight:
+      'Würfe auf Motiv erkennen decken alle Versuche ab, die wahren Absichten einer anderen Person zu erkennen. Dies beinhaltet z.B. das Erkennen von Lügen, das Interpretieren von Körpersprache und das Voraussagen seiner nächsten Schritte.',
+    intimidation:
+      'Würfe auf Einschüchtern decken alle Versuche ab, eine andere Person durch Drohungen, offensichtliche Gewalt oder subtile Hinweise zu beeinflussen.',
+    investigation:
+      'Würfe auf Nachforschung decken alle Versuche ab, Hinweise zu finden und zu interpretieren, die auf eine vorherige Aktivität hindeuten. Dies beinhalet z.B. auch das Rekonstruieren von Tathergängen oder das Aufspüren verborgener Gegenstände.',
+    medicine:
+      'Würfe auf Heilkunde decken alle Versuche ab, einen Charakter zu stabilisieren, eine Krankheit zu heilen oder eine Wunde zu verbinden.',
+    nature:
+      'Würfe auf Naturkunde decken alle Versuche ab, die Eigenschaften von wilden Tieren, Pflanzen und anderen Wesen zu erkennen.',
+    perception:
+      'Würfe auf Wahrnehmung decken alle Versuche ab, die Umgebung zu beobachten und zu bemerken, was sich in der Nähe befindet. Dies beinhaltet z.B. das Erkennen von versteckten Feinden, das Hören von Gesprächen hinter einer Tür, das Entdecken von Hinweisen und das Beobachten von Gefahren.',
+    performance:
+      'Würfe auf Auftreten decken alle Versuche ab, ein Publikum zu unterhalten, sei es nun durch Musik, Tanzen, Schauspielerei oder andere Formen der Unterhaltung.',
+    persuasion:
+      'Würfe auf Überreden decken alle Versuche ab, eine andere Person durch Überzeugung, Logik oder Argumentation zu beeinflussen.',
+    religion:
+      'Würfe auf Religion decken alle Versuche ab, religiöse Rituale zu verstehen, religiöse Symbole zu erkennen und religiöse Traditionen zu interpretieren.',
+    sleightOfHands:
+      'Würfe auf Fingerfertigkeit decken alle Versuche ab, etwas zu stehlen, einen Trick zu vollführen oder eine Handlung zu vollführen, ohne dass es jemand bemerkt.',
+    stealth:
+      'Würfe auf Heimlichkeit decken alle Versuche ab, sich zu verstecken, sich leise zu bewegen und sich zu verbergen.',
+    survival:
+      'Würfe auf Überleben decken alle Versuche ab, in der Wildnis zu überleben. Dies beinhaltet z.B. das Jagen und das Navigieren durch die Wildnis.',
+  };
+}

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

@@ -1,9 +1,10 @@
-<div class="skill-box">
+<div class="skill-box" (click)="openDetails()">
   <input
     type="checkbox"
     class="skill-proficiency-input"
     [(ngModel)]="skillProficiency"
     (change)="updateValue()"
+    (click)="$event.stopPropagation()"
   />
   <label class="skill-attribute-name">{{
     skillNames[skillName].attribute

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

@@ -1,8 +1,10 @@
 import { Component, Input } from '@angular/core';
 import { Skill } from 'src/interfaces/skill';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
 import { Observable } from 'rxjs';
 import { Attribute } from 'src/interfaces/attribute';
+import { SkillDetailsComponent } from '../skill-details/skill-details.component';
 
 @Component({
   selector: 'app-skill-field',
@@ -17,7 +19,10 @@ export class SkillFieldComponent {
   public skillProficiency: boolean = false;
   private proficiencyBonus: number = 0;
 
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public skillNames: any = {
     acrobatics: { skill: 'Akrobatik', attribute: 'GES', long: 'dexterity' },
@@ -104,4 +109,11 @@ export class SkillFieldComponent {
       return mod.toString();
     }
   }
+
+  public openDetails(): void {
+    this.detailsAccessor.openPanel(SkillDetailsComponent, {
+      skillName: this.skillName,
+      skillModifier: this.skillModifier,
+    });
+  }
 }

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

@@ -0,0 +1,16 @@
+<div class="details-title">Rüstungsklasse</div>
+
+<div class="details-content">
+  Die Rüstungsklasse wird verwendet, um zu bestimmen, ob ein Angriff erfolgreich
+  ist oder nicht. Ein Angreifer muss einen Würfelwurf (normalerweise einen W20)
+  ablegen und dabei mindestens die Rüstungsklasse des Ziels erreichen. Wenn der
+  Wurf erfolgreich ist, verursacht der Angriff Schaden, ansonsten wird der
+  Angriff abgewehrt.
+</div>
+
+<div class="details-value-container">
+  <div class="details-value" style="margin-top: 1.5rem">
+    {{ armorClass }}
+  </div>
+  <div class="details-label">Wert</div>
+</div>

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

@@ -0,0 +1,5 @@
+.calculation{
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-top: 1.5rem;
+}

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

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

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

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-armor-class-details',
+  templateUrl: './armor-class-details.component.html',
+  styleUrl: './armor-class-details.component.scss',
+})
+export class ArmorClassDetailsComponent {
+  @Input() armorClass: number = 0;
+}

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

@@ -1,9 +1,10 @@
-<div class="info-container">
+<div class="info-container" (click)="openDetails()">
   <input
     type="number"
     class="info-input"
     [(ngModel)]="armorClass"
     (change)="updateValue()"
+    (click)="$event.stopPropagation()"
   />
   <div class="info-label">Rüstungsklasse</div>
 </div>

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import { DetailsService } from 'src/services/details/details.service';
 import { DataService } from 'src/services/data/data.service';
+import { ArmorClassDetailsComponent } from './armor-class-details/armor-class-details.component';
 
 @Component({
   selector: 'armor-class',
@@ -8,7 +9,10 @@ import { DataService } from 'src/services/data/data.service';
   styleUrls: ['./armor-class.component.scss'],
 })
 export class ArmorClassComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public armorClass: number = 0;
 
@@ -19,4 +23,10 @@ export class ArmorClassComponent {
   public updateValue(): void {
     this.dataAccessor.armorClass = this.armorClass;
   }
+
+  public openDetails(): void {
+    this.detailsAccessor.openPanel(ArmorClassDetailsComponent, {
+      armorClass: this.armorClass,
+    });
+  }
 }

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

@@ -1,4 +1,13 @@
-<div class="status-item-container">
+<div class="details-title">Zustände</div>
+
+<div class="details-content">
+  Zustände ändern die Fähigkeiten einer Kreatur auf verschiedene Arten und
+  können die Folgen von Zaubern, Klassenmerkmalen, Monsterangriffen oder anderen
+  Fähigkeiten sein. Der Zustand hält solange an, bis er aufgehoben wird, oder
+  wie seine Wirkungsdauer ist.
+</div>
+
+<div class="current-status-container">
   @for (condition of conditions; let index = $index; track condition ) {
   <div class="status-item">
     {{ condition }}
@@ -6,8 +15,15 @@
       X
     </button>
   </div>
+  @for(description of conditionDescriptions[condition]; track description){
+  <div class="status-item-description">
+    {{ description }}
+  </div>
+  } } @empty {
+  <div class="empty-list">-</div>
   }
 </div>
+
 <select [(ngModel)]="currentCondition">
   <option *ngFor="let status of notUsedConditions()" [value]="status">
     {{ status }}

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

@@ -1,3 +1,9 @@
-.status-item-container{
-    margin: 2rem
+
+.current-status-container{
+    margin-top: 2rem;
+}
+
+.status-item{
+    font-size: 1.25rem;
+    font-weight: 500;
 }

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

@@ -29,6 +29,77 @@ export class ConditionsDetailsComponent {
     'Versteinert',
   ];
 
+  public conditionDescriptions: any = {
+    Betäubt: [
+      'Ein betäubter Charakter ist kampfunfähig und kann somit keine Aktion und Reaktion ausführen.',
+      'Er scheitert automatisch bei Stärke- und Geschicklichkeitswürfen.',
+      'Angriffe gegen ihn haben Vorteil.',
+    ],
+    Bewusstlos: [
+      'Ein bewusstloser Charakter ist kampfunfähig und kann somit keine Aktion und Reaktion ausführen.',
+      'Er lässt fallen, was er in der Hand hält und stürzt zu Boden',
+      'Er scheitert automatisch bei Stärke- und Geschicklichkeitsrettungswürfen',
+      'Angriffe gegen ihn haben Vorteil.',
+      'Jeder Angriff, der ihn trifft, ist ein kritischer Treffer, wenn der Angreifer innerhalb von 1,5 Metern von dem Charakter ist.',
+    ],
+    Bezaubert: [
+      'Ein bezauberter Charakter kann den Bezauberer weder angreifen, noch als Ziel für schädigende Fähigkeiten oder Zauber auswählen.',
+      'Der Bezauberer ist im Vorteil bei Fähigkeitswürfen, die sich auf die Interaktion mit dem bezauberten Charakter beziehen.',
+    ],
+    Blind: [
+      'Ein blinder Charakter kann nicht sehen. Er scheitert automatisch bei allen Attributwürfen, die auf Sicht basieren.',
+      'Angriffe gegen ihn haben Vorteil, seine Angriffe wiederum haben Nachteil.',
+    ],
+    Festgesetzt: [
+      'Die Bewegungsrate eines festgesetzten Charakters wird auf 0 gesetzt.',
+      'Angriffe gegen ihn haben Vorteil, seine Angriffe wiederum haben Nachteil.',
+      'Er scheitert automatisch bei allen Geschicklichkeitsrettungswürfen.',
+    ],
+    Gelähmt: [
+      'Ein gelähmter Charakter ist kampfunfähig und kann somit keine Aktion und Reaktion ausführen.',
+      'Er kann sich weder bewegen noch sprechen',
+      'Er scheitert automatisch bei Stärke- und Geschicklichkeitsrettungswürfen.',
+      'Angriffe gegen ihn haben Vorteil.',
+      'Jeder Angriff, der ihn trifft, ist ein kritischer Treffer, wenn der Angreifer innerhalb von 1,5 Metern von dem Charakter ist.',
+    ],
+    Gepackt: [
+      'Die Bewegungsrate eines festgesetzten Charakters wird auf 0 gesetzt.',
+      'Der Zustand endet, wenn die packende Kreatur kampfunfähig wird',
+      'Der Zustand endet auch, wenn ein Effekt die gepackte Kreatur aus der Reichweite der packenden Kreatur oder des packenden Effekts zieht. ',
+    ],
+    Kampfunfähig: [
+      'Ein kampfunfähiger Charakter kann keine Aktionen oder Reaktionen ausführen.',
+    ],
+    Liegend: [
+      'Ein liegender Charakter kann sich nur kriechend bewegen.',
+      'Alle seine Angriffe haben Nachteil.',
+      'Alle Angriffe gegen ihn haben Vorteil, wenn der Angreifer innerhalb von 1,5 Metern von dem Charakter ist, ansonsten haben sie nachteil.',
+    ],
+    Taub: [
+      'Ein tauber Charakter kann nicht hören und scheitert automatisch bei allen Attributwürfen, die auf Hören basieren.',
+    ],
+    Unsichtbar: [
+      'Ein unsichtbarer Charakter kann nicht gesehen werden, außer durch magische Mittel oder besondere Sinne.',
+      'Wenn er sich verbergen will, gilt er als komplett verschleiert, kann sich jedoch durch Geräusche und Fußspuren verraten.',
+      'Er hat Vorteil bei Angriffen, Angriffe gegen ihn wiederum sind im Nachteil.',
+    ],
+    Verängstigt: [
+      'Ein verängstigter Charakter hat Nachteil bei allen Attributswürfen und Angriffen, solange die Quelle seiner Angst in Sichtweite ist.',
+      'Er kann nicht freiwillig näher an die Quelle seiner Angst heranrücken.',
+    ],
+    Vergiftet: [
+      'Ein vergifteter Charakter hat Nachteil bei allen Attributs- und Angriffswürfen.',
+    ],
+    Versteinert: [
+      'Ein versteinerter Charakter wird mit ihrere gesamten nicht-magischen Ausrüstung versteinert und sein Gewicht verzehnfacht sich.',
+      'Der CHarakter ist kampfunfähig, kann also weder Aktion noch Reaktion ausführen, sich bewegen, sprechen oder die Umgebung wahrnehmen.',
+      'Angriffe gegen ihn sind im Vorteil',
+      'Er scheitert automatisch bei allen Stärke- und Geschicklichkeitswürfen.',
+      'Er ist immun gegen jeglichen Schaden',
+      'Er ist immun gegen Gifte und Krankheiten, außer gegen solche, die sich bereits vorher in ihm befunden HttpBackend. Diese werden aufgehalten, nicht neutralisiert.',
+    ],
+  };
+
   public notUsedConditions(): string[] {
     return this.conditionOptions.filter(
       (condition) => !this.conditions.includes(condition)

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

@@ -1,5 +1,5 @@
 <div class="condition-container">
-  <div class="condition">
+  <div class="condition" (click)="openConditionDetails()">
     <div class="condition-list">
       @for (condition of conditions; track condition ) {
       <div class="condition-item">
@@ -9,12 +9,12 @@
       <div class="empty-list">-</div>
       }
     </div>
-    <div class="condition-label" (click)="openDetailsPanel()">Zustände</div>
+    <div class="condition-label">Zustände</div>
   </div>
 
   <div class="vertical-line"></div>
 
-  <div class="exhaustion">
+  <div class="exhaustion" (click)="openExhaustionDetails()">
     <input
       type="number"
       class="info-input"

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { DetailsService } from 'src/services/details/details.service';
 import { ConditionsDetailsComponent } from './conditions-details/conditions-details.component';
+import { ExhaustionDetailsComponent } from './exhaustion-details/exhaustion-details.component';
 
 @Component({
   selector: 'conditions',
@@ -47,7 +48,7 @@ export class ConditionsComponent {
     this.dataAccessor.conditions = this.conditions;
   }
 
-  public openDetailsPanel(): void {
+  public openConditionDetails(): void {
     this.detailsAccessor.openPanel(ConditionsDetailsComponent, {
       conditions: JSON.parse(JSON.stringify(this.conditions)),
     });
@@ -61,4 +62,10 @@ export class ConditionsComponent {
       }
     );
   }
+
+  public openExhaustionDetails(): void {
+    this.detailsAccessor.openPanel(ExhaustionDetailsComponent, {
+      exhaustion: this.exhaustion,
+    });
+  }
 }

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

@@ -0,0 +1,48 @@
+<div class="details-title">Erschöpfung</div>
+
+<div class="details-content">
+  Einige Spezialfähigkeiten und Umweltgefahren, wie Hunger oder extreme
+  Temperaturen können zu Erschöpfung führen. Jede Stufe fügt einen weiteren
+  Malus hinzu, sodass mehrere Mali gleichzeitig möglich sind. Erschöpfung kann
+  z.B. durch eine lange Rast reduziert werden.
+</div>
+
+<div class="details-value-container">
+  <div class="details-value" style="margin-top: 1.5rem">
+    {{ exhaustion }}
+  </div>
+  <div class="details-label">aktuelle Erschöpfung</div>
+</div>
+
+<div class="exhaustion-table">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th scope="col">Stufe</th>
+        <th scope="col">Effekt</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>Nachteil auf Attributwürfe</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Bewegungsrate halbiert</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>Nachteil auf Angriffs- und Rettungswürfe</td>
+      </tr>
+      <tr>
+        <td>4</td>
+        <td>Bewegungsrate fällt auf 0</td>
+      </tr>
+      <tr>
+        <td>5</td>
+        <td>Sofortiger Tod</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,3 @@
+.exhaustion-table{
+    margin-top: 2rem,
+}

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

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

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

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-exhaustion-details',
+  templateUrl: './exhaustion-details.component.html',
+  styleUrl: './exhaustion-details.component.scss',
+})
+export class ExhaustionDetailsComponent {
+  @Input() public exhaustion: number = 0;
+}

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

@@ -0,0 +1,18 @@
+<div class="details-title">Todesrettungswürfe</div>
+
+<div class="details-content">
+  Immer wenn ein Charakter seinen Zug mit 0 Trefferpunkten beginnt und nicht
+  stabilisiert wurde, muss er einen Todesrettungswurf ablegen. Ist das Ergebnis
+  10 oder höher, ist der Wurf erfolgreich, ansonsten fehlgeschlagen. Beim
+  dritten Erfolg wird der Charakter stabilisiert, beim dritten Fehlschlag stirbt
+  er.
+</div>
+
+<div class="details-value-container">
+  <div class="details-bold">Eine 1 oder 20 würfeln</div>
+  <div class="details-content">
+    Würfelt ein Charakter eine 1, zählt der Wurf als zwei Fehlschläge. Würfelt
+    er eine 20, erhält er sofort einen Lebenspunkt dazu und ist nicht mehr
+    bewustlos.
+  </div>
+</div>

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

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

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

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

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

@@ -1,8 +1,8 @@
-<div class="death-save-container">
+<div class="death-save-container" (click)="openDetails()">
   <div style="margin: 0.5rem">
     <div class="save-row">
       <div class="save-label">Erfolg</div>
-      <div class="save-checkbox">
+      <div class="save-checkbox" (click)="$event.stopPropagation()">
         <input
           type="checkbox"
           [(ngModel)]="deathSaveSucc1"
@@ -22,7 +22,7 @@
     </div>
     <div class="save-row">
       <div class="save-label">Fehlschlag</div>
-      <div class="save-checkbox">
+      <div class="save-checkbox" (click)="$event.stopPropagation()">
         <input
           type="checkbox"
           [(ngModel)]="deathSaveFail1"

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { DeathSaveDetailsComponent } from './death-save-details/death-save-details.component';
 
 @Component({
   selector: 'death-save',
@@ -7,7 +9,10 @@ import { DataService } from 'src/services/data/data.service';
   styleUrls: ['./death-save.component.scss'],
 })
 export class DeathSaveComponent {
-  public constructor(private dataAccessor: DataService) {}
+  public constructor(
+    private dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public deathSave: number[] = [0, 0];
 
@@ -89,4 +94,8 @@ export class DeathSaveComponent {
       }
     });
   }
+
+  public openDetails(): void {
+    this.detailsAccessor.openPanel(DeathSaveDetailsComponent, {});
+  }
 }

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

@@ -0,0 +1,15 @@
+<div class="details-title">Initiative</div>
+
+<div class="details-content">
+  Der Initiativebonus wird verwendet, um die Initiative des aktuellen Kampfes
+  oder einer zeitkritischen Situation zu bestimmen. Jeder Charakter wirft einen
+  W20 und addiert seinen Initiativebonus. Der Charakter mit dem höchsten
+  Ergebnis darf zuerst agieren.
+</div>
+
+<div class="details-value-container">
+  <div class="details-value" style="margin-top: 1.5rem">
+    {{ initiative }}
+  </div>
+  <div class="details-label">Wert</div>
+</div>

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

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

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

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-initiative-details',
+  templateUrl: './initiative-details.component.html',
+  styleUrl: './initiative-details.component.scss',
+})
+export class InitiativeDetailsComponent {
+  @Input() initiative: number = 0;
+}

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

@@ -1,9 +1,10 @@
-<div class="info-container">
+<div class="info-container" (click)="openDetails()">
   <input
     type="number"
     class="info-input"
     [(ngModel)]="initiative"
     (change)="updateValue()"
+    (click)="$event.stopPropagation()"
   />
   <div class="info-label">Initiative</div>
 </div>

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { InitiativeDetailsComponent } from './initiative-details/initiative-details.component';
 
 @Component({
   selector: 'initiative',
@@ -7,7 +9,10 @@ import { DataService } from 'src/services/data/data.service';
   styleUrls: ['./initiative.component.scss'],
 })
 export class InitiativeComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public initiative: number = 0;
 
@@ -18,4 +23,10 @@ export class InitiativeComponent {
   public updateValue(): void {
     this.dataAccessor.initiative = this.initiative;
   }
+
+  public openDetails(): void {
+    this.detailsAccessor.openPanel(InitiativeDetailsComponent, {
+      initiative: this.initiative,
+    });
+  }
 }

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

@@ -0,0 +1,77 @@
+<div class="details-title">Bewegungsrate</div>
+
+<div class="details-content">
+  Die Bewegungsrate gibt an, wie Weit ein Charakter pro Runde laufen kann. Die
+  Bewegungsrate wird in Fuß angegeben, wobei 5 Fuß 1,5 Metern und somit einem
+  Feld entsprechen. Die Bewegung kann an einem Stück verwendet werden, oder in
+  mehrere Teile aufgeteilt werden. In schwierigem Gelände halbiert sich die
+  Bewegungsrate.
+</div>
+
+<div class="details-value-container">
+  <div class="details-value" style="margin-top: 1.5rem">
+    {{ movement }}
+  </div>
+  <div class="details-label">Wert</div>
+</div>
+
+<div class="distance-table">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th scope="col">Fuß</th>
+        <th scope="col">Meter</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>5</td>
+        <td>1,5</td>
+      </tr>
+      <tr>
+        <td>10</td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>15</td>
+        <td>4,5</td>
+      </tr>
+      <tr>
+        <td>20</td>
+        <td>6</td>
+      </tr>
+      <tr>
+        <td>25</td>
+        <td>7,5</td>
+      </tr>
+      <tr>
+        <td>30</td>
+        <td>9</td>
+      </tr>
+      <tr>
+        <td>35</td>
+        <td>10,5</td>
+      </tr>
+      <tr>
+        <td>40</td>
+        <td>12</td>
+      </tr>
+      <tr>
+        <td>45</td>
+        <td>13,5</td>
+      </tr>
+      <tr>
+        <td>50</td>
+        <td>15</td>
+      </tr>
+      <tr>
+        <td>55</td>
+        <td>16,5</td>
+      </tr>
+      <tr>
+        <td>60</td>
+        <td>18</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,7 @@
+.distance-table{
+    margin-top: 2rem;
+}
+
+td{
+    margin-left: 1rem;
+}

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

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

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

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-movement-details',
+  templateUrl: './movement-details.component.html',
+  styleUrl: './movement-details.component.scss',
+})
+export class MovementDetailsComponent {
+  @Input() movement: number = 0;
+}

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

@@ -1,9 +1,10 @@
-<div class="info-container">
+<div class="info-container" (click)="openDetails()">
   <input
     type="number"
     class="info-input"
     [(ngModel)]="movement"
     (change)="updateValue()"
+    (click)="$event.stopPropagation()"
   />
   <div class="info-label">Bewegungsrate</div>
 </div>

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { MovementDetailsComponent } from './movement-details/movement-details.component';
 
 @Component({
   selector: 'movement',
@@ -7,7 +9,10 @@ import { DataService } from 'src/services/data/data.service';
   styleUrls: ['./movement.component.scss'],
 })
 export class MovementComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public movement: number = 0;
 
@@ -18,4 +23,10 @@ export class MovementComponent {
   public updateValue(): void {
     this.dataAccessor.movement = this.movement;
   }
+
+  public openDetails(): void {
+    this.detailsAccessor.openPanel(MovementDetailsComponent, {
+      movement: this.movement,
+    });
+  }
 }

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

@@ -0,0 +1,14 @@
+<div class="details-title">Übungsbonus</div>
+
+<div class="details-content">
+  Der Übungsbonus wird auf alle Rettungs-, Angriffs- und Fertigkeitswürfe
+  addiert, in denen ein Spieler geübt ist. Der Übungsbonus steigt mit der
+  Charakterstufe.
+</div>
+
+<div class="details-value-container">
+  <div class="details-value" style="margin-top: 1.5rem">
+    {{ proficiency }}
+  </div>
+  <div class="details-label">Wert</div>
+</div>

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

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

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

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-proficiency-details',
+  templateUrl: './proficiency-details.component.html',
+  styleUrl: './proficiency-details.component.scss',
+})
+export class ProficiencyDetailsComponent {
+  @Input() proficiency: number = 0;
+}

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

@@ -1,9 +1,10 @@
-<div class="info-container">
+<div class="info-container" (click)="openDetails()">
   <input
     type="number"
     class="info-input"
     [(ngModel)]="proficiency"
     (change)="updateValue()"
+    (click)="$event.stopPropagation()"
   />
   <div class="info-label">Übungsbonus</div>
 </div>

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { ProficiencyDetailsComponent } from './proficiency-details/proficiency-details.component';
 
 @Component({
   selector: 'proficiency',
@@ -7,7 +9,10 @@ import { DataService } from 'src/services/data/data.service';
   styleUrls: ['./proficiency-field.component.scss'],
 })
 export class ProficiencyFieldComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public proficiency: number = 0;
 
@@ -27,4 +32,10 @@ export class ProficiencyFieldComponent {
       value: this.proficiency,
     });
   }
+
+  public openDetails(): void {
+    this.detailsAccessor.openPanel(ProficiencyDetailsComponent, {
+      proficiency: this.proficiency,
+    });
+  }
 }

src/app/journal/journal.module.ts

@@ -58,6 +58,13 @@ import { SaveThrowPanelComponent } from './journal-stats/attribute-skill-contain
 import { SaveThrowFieldComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component';
 import { ProficiencyFieldComponent } from './journal-stats/info-row/proficiency/proficiency-field.component';
 import { SaveThrowDetailsComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-details/save-throw-details.component';
+import { SkillDetailsComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-details/skill-details.component';
+import { ArmorClassDetailsComponent } from './journal-stats/info-row/armor-class/armor-class-details/armor-class-details.component';
+import { InitiativeDetailsComponent } from './journal-stats/info-row/initiative/initiative-details/initiative-details.component';
+import { MovementDetailsComponent } from './journal-stats/info-row/movement/movement-details/movement-details.component';
+import { ProficiencyDetailsComponent } from './journal-stats/info-row/proficiency/proficiency-details/proficiency-details.component';
+import { DeathSaveDetailsComponent } from './journal-stats/info-row/death-save/death-save-details/death-save-details.component';
+import { ExhaustionDetailsComponent } from './journal-stats/info-row/conditions/exhaustion-details/exhaustion-details.component';
 
 @NgModule({
   declarations: [
@@ -110,6 +117,13 @@ import { SaveThrowDetailsComponent } from './journal-stats/attribute-skill-conta
     ConditionsComponent,
     AttributeDetailsComponent,
     SaveThrowDetailsComponent,
+    SkillDetailsComponent,
+    ArmorClassDetailsComponent,
+    InitiativeDetailsComponent,
+    MovementDetailsComponent,
+    ProficiencyDetailsComponent,
+    DeathSaveDetailsComponent,
+    ExhaustionDetailsComponent,
   ],
   imports: [
     CommonModule,

src/styles.scss

@@ -102,6 +102,7 @@ $dialog-position-right: 20%;
     justify-content: center;
 }
 
+//
 
 .details-title{
     text-align: center;
@@ -122,14 +123,40 @@ $dialog-position-right: 20%;
     margin-top: 1.5rem;
 }
 
+
+.details-content{
+    margin-top: 1.5rem;
+}
+
 .details-bold{
     font-weight: 500;
 }
 
-.details-content{
-    font-size: 1rem;
-    margin-top: 1.5rem;
-    font-weight: 400;
+.centered{
+    text-align: center;
+}
+
+.details-value-container{
+    margin-top: 2rem;
+}
+
+.details-value{
+    width: 3.5rem;
+    height: 3rem;
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin:auto;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: var(--shadow-small);
+}
+
+.details-label{
+    margin-top: 0.5rem;
+    font-weight: 500;
+    text-align: center;
 }
 
 .details-name{
@@ -142,7 +169,6 @@ $dialog-position-right: 20%;
 .details-long-description{
     margin: 2rem 1rem;
     font-size: 1rem;
-    // margin-top: 2rem;
 }