worked on the attribute details. content finished, styling missing

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

@@ -0,0 +1,173 @@
+<div>
+  @switch(attribute.name){ @case('strength'){
+  <ng-container [ngTemplateOutlet]="strengthTemplate"></ng-container> }
+  @case('dexterity'){
+  <ng-container [ngTemplateOutlet]="dexterityTemplate"></ng-container>
+  } @case('constitution'){
+  <ng-container [ngTemplateOutlet]="constitutionTemplate"></ng-container> }
+  @case('intelligence'){
+  <ng-container [ngTemplateOutlet]="intelligenceTemplate"></ng-container>
+  } @case ('wisdom'){
+  <ng-container [ngTemplateOutlet]="wisdomTemplate"></ng-container> }
+  @case('charisma'){
+  <ng-container [ngTemplateOutlet]="charismaTemplate"></ng-container> }
+  @default{ Leider gab es einen Fehler bei der Datenübertragung. Bitte öffne ein
+  Issue auf Github. } }
+</div>
+
+<div class="attribute-value">{{ attribute.value }} => {{ modifier }}</div>
+<div class="modifier-table">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th scope="col">Attributwert</th>
+        <th scope="col">Modifikator</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>6-7</td>
+        <td>-3</td>
+      </tr>
+      <tr>
+        <td>7-8</td>
+        <td>-2</td>
+      </tr>
+      <tr>
+        <td>9-10</td>
+        <td>-1</td>
+      </tr>
+      <tr>
+        <td>11-12</td>
+        <td>0</td>
+      </tr>
+      <tr>
+        <td>13-14</td>
+        <td>+1</td>
+      </tr>
+      <tr>
+        <td>15-16</td>
+        <td>+2</td>
+      </tr>
+      <tr>
+        <td>17-18</td>
+        <td>+3</td>
+      </tr>
+      <tr>
+        <td>19-20</td>
+        <td>+4</td>
+      </tr>
+      <tr>
+        <td>21-22</td>
+        <td>+5</td>
+      </tr>
+      <tr>
+        <td>22-23</td>
+        <td>+6</td>
+      </tr>
+      <tr>
+        <td>24-25</td>
+        <td>+7</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<ng-template #strengthTemplate>
+  <div class="attribute-name">Stärke</div>
+  <div class="attribute-description">
+    Stärke misst die physische Kraft und Muskulatur deines Charakters. Ein hoher
+    Stärkewert deutet auf körperliche Robustheit, Muskelkraft und
+    Durchsetzungsvermögen hin. Charaktere mit hoher Stärke sind oft besser in
+    der Lage, schwere Lasten zu tragen, mächtige Waffen zu schwingen und
+    physische Herausforderungen zu bewältigen.
+  </div>
+  <div class="skills">
+    Beeinflusste Fähigkeiten:
+    <div class="skill-item">Athletik</div>
+  </div>
+</ng-template>
+
+<ng-template #dexterityTemplate>
+  <div class="attribute-name">Geschicklichkeit</div>
+  <div class="attribute-description">
+    Geschicklichkeit repräsentiert die Beweglichkeit, Reflexe und allgemeine
+    Körperbeherrschung deines Charakters. Ein hoher Geschicklichkeitswert deutet
+    auf schnelle Reaktionen, geschickte Bewegungen und eine gute
+    Hand-Auge-Koordination hin. Charaktere mit hoher Geschicklichkeit sind oft
+    geschickte Diebe, Bogenschützen oder Akrobaten.
+  </div>
+  Beeinflusste Fähigkeiten:
+  <div class="skills">
+    <div class="skill-item">Akrobatik</div>
+    <div class="skill-item">Fingerfertigkeit</div>
+    <div class="skill-item">Heimlichkeit</div>
+  </div>
+</ng-template>
+
+<ng-template #constitutionTemplate>
+  <div class="attribute-name">Konstitution</div>
+  <div class="attribute-description">
+    Konstitution steht für die Widerstandsfähigkeit, Gesundheit und Ausdauer
+    deines Charakters. Ein hoher Konstitutionswert bedeutet, dass dein Charakter
+    robust ist und gut mit physischem Stress umgehen kann. Charaktere mit hoher
+    Konstitution haben oft eine höhere Lebenspunktzahl und sind
+    widerstandsfähiger gegenüber Krankheiten und Gift.
+  </div>
+</ng-template>
+
+<ng-template #intelligenceTemplate>
+  <div class="attribute-name">Intelligenz</div>
+  <div class="attribute-description">
+    Intelligenz misst die geistige Schärfe, das logische Denkvermögen und die
+    Lernfähigkeit deines Charakters. Ein hoher Intelligenzwert deutet auf eine
+    gute Allgemeinbildung, Wissensdurst und analytische Fähigkeiten hin.
+    Charaktere mit hoher Intelligenz sind oft Magier, Forscher oder Strategen.
+  </div>
+  Beeinflusste Fähigkeiten:
+  <div class="skills">
+    <div class="skill-item">Arkana</div>
+    <div class="skill-item">Geschichte</div>
+    <div class="skill-item">Nachforschung</div>
+    <div class="skill-item">Natur</div>
+    <div class="skill-item">Religion</div>
+  </div>
+</ng-template>
+
+<ng-template #wisdomTemplate>
+  <div class="attribute-name">Weisheit</div>
+  <div class="attribute-description">
+    Beschreibung: Weisheit repräsentiert die Wahrnehmung, Intuition und
+    emotionale Intelligenz deines Charakters. Ein hoher Weisheitswert deutet auf
+    eine gute Urteilsfähigkeit, Einsicht und innere Stärke hin. Charaktere mit
+    hoher Weisheit sind oft Kleriker, Druiden oder Weise.
+  </div>
+  Beeinflusste Fähigkeiten:
+  <div class="skills">
+    <div class="skill-item">Tierkunde</div>
+    <div class="skill-item">Geschichte</div>
+    <div class="skill-item">Motiv erkennen</div>
+    <div class="skill-item">Heilkunde</div>
+    <div class="skill-item">Wahrnehmung</div>
+    <div class="skill-item">Überlebenskunst</div>
+  </div>
+</ng-template>
+
+<ng-template #charismaTemplate>
+  <div class="attribute-name">Charisma</div>
+  <div class="attribute-description">
+    Charisma spiegelt die Ausstrahlung, Überzeugungskraft und soziale
+    Fähigkeiten deines Charakters wider. Ein hoher Charismawert bedeutet, dass
+    dein Charakter charmant, einnehmend und überzeugend ist. Charaktere mit
+    hohem Charisma können oft besser mit anderen kommunizieren, überzeugen und
+    Führungsaufgaben übernehmen. Charisma ist oft wichtig für Barden, Anführer
+    oder Diplomaten.
+  </div>
+  Beeinflusste Fähigkeiten:
+  <div class="skills">
+    <div class="skill-item">Täuschung</div>
+    <div class="skill-item">Einschütern</div>
+    <div class="skill-item">Auftreten</div>
+    <div class="skill-item">Überzeugen</div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,18 @@
+
+
+
+
+.skills{
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-left: 1rem;
+
+}
+
+.skill-item{
+    background-color: var(--primary-color);
+    border-radius: 1rem;
+    padding: 0.25rem 0.5rem;
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
+}

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

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

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

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+import { Attribute } from 'src/interfaces/attribute';
+
+@Component({
+  selector: 'app-attribute-details',
+  templateUrl: './attribute-details.component.html',
+  styleUrl: './attribute-details.component.scss',
+})
+export class AttributeDetailsComponent {
+  public constructor(public detailsService: DetailsService) {}
+  @Input() public attribute!: Attribute;
+  @Input() public modifier!: string;
+}

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

@@ -1,4 +1,4 @@
-<div class="attribute-box">
+<div class="attribute-box" (click)="openDetails()">
   <div>
     <label class="attribute-name">{{ attributeNames[attributeName] }}</label>
   </div>
@@ -8,6 +8,7 @@
       class="attribute-value"
       [(ngModel)]="attribute.value"
       (change)="updateValue()"
+      (click)="$event.stopPropagation()"
     />
   </div>
 </div>

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

@@ -2,6 +2,11 @@
     border: solid 1px black;
     text-align: center;
 
+    .attribute-name{
+        // font-size: 1.5rem;
+        font-weight: 600;
+    }
+
     input{
         border: none;
         outline: none;
@@ -18,4 +23,5 @@
         font-weight: 700;
     }
 }
+
         

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

@@ -1,7 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { Attribute } from 'src/interfaces/attribute';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
 import { Observable } from 'rxjs';
+import { AttributeDetailsComponent } from './attribute-details/attribute-details.component';
 
 @Component({
   selector: 'attribute-field',
@@ -24,7 +26,10 @@ export class AttributeFieldComponent {
     charisma: 'Charisma',
   };
 
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   ngOnInit(): void {
     this.initProficiencySubscription();
@@ -77,4 +82,12 @@ export class AttributeFieldComponent {
       return mod.toString();
     }
   }
+
+  public openDetails(): void {
+    console.log(this.attribute);
+    this.detailsAccessor.openPanel(AttributeDetailsComponent, {
+      attribute: this.attribute,
+      modifier: this.attributeModifier,
+    });
+  }
 }

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

@@ -13,19 +13,10 @@ export class ArmorClassComponent {
   public armorClass: number = 0;
 
   ngOnInit(): void {
-    this.initAttributeSubscription();
-  }
-
-  private initAttributeSubscription(): void {
-    this.dataAccessor.armorClass$.subscribe((newValue: any) => {
-      this.armorClass = newValue.value;
-    });
+    this.armorClass = this.dataAccessor.armorClass;
   }
 
   public updateValue(): void {
-    this.dataAccessor.updateCharacterData({
-      name: 'armorClass',
-      value: this.armorClass,
-    });
+    this.dataAccessor.armorClass = this.armorClass;
   }
 }

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

@@ -19,7 +19,8 @@ export class DeathSaveComponent {
   public deathSaveFail3: boolean = false;
 
   ngOnInit(): void {
-    this.initAttributeSubscription();
+    this.deathSave = this.dataAccessor.deathSaves;
+    this.displayDeathSaves();
   }
 
   public updateValue(): void {
@@ -46,21 +47,10 @@ export class DeathSaveComponent {
     }
 
     this.deathSave = [successCount, failCount];
-    this.dataAccessor.updateCharacterData({
-      name: 'deathSave',
-      value: this.deathSave,
-    });
-    this.displayDeathSaves();
-  }
-
-  private initAttributeSubscription(): void {
-    this.dataAccessor.deathSave$.subscribe((newValue: any) => {
-      this.deathSave = newValue.value;
-    });
+    this.dataAccessor.deathSaves = this.deathSave;
     this.displayDeathSaves();
   }
 
-  // Die automaische anzeige /korrektur der deathsaves muss noch angepasst werden
   public displayDeathSaves(): void {
     setTimeout(() => {
       if (this.deathSave[0] == 0) {

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

@@ -12,19 +12,10 @@ export class InitiativeComponent {
   public initiative: number = 0;
 
   ngOnInit(): void {
-    this.initAttributeSubscription();
-  }
-
-  private initAttributeSubscription(): void {
-    this.dataAccessor.initiative$.subscribe((newValue: any) => {
-      this.initiative = newValue.value;
-    });
+    this.initiative = this.dataAccessor.initiative;
   }
 
   public updateValue(): void {
-    this.dataAccessor.updateCharacterData({
-      name: 'initiative',
-      value: this.initiative,
-    });
+    this.dataAccessor.initiative = this.initiative;
   }
 }

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

@@ -12,19 +12,10 @@ export class MovementComponent {
   public movement: number = 0;
 
   ngOnInit(): void {
-    this.initAttributeSubscription();
-  }
-
-  private initAttributeSubscription(): void {
-    this.dataAccessor.speed$.subscribe((newValue: any) => {
-      this.movement = newValue.value;
-    });
+    this.movement = this.dataAccessor.movement;
   }
 
   public updateValue(): void {
-    this.dataAccessor.updateCharacterData({
-      name: 'armorClass',
-      value: this.movement,
-    });
+    this.dataAccessor.movement = this.movement;
   }
 }

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

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

src/app/journal/journal.module.ts

@@ -41,6 +41,7 @@ import { SpellslotsComponent } from './journal-stats/ability-panel/spellslots/sp
 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 { AttributeDetailsComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-details/attribute-details.component';
 
 import { SharedComponentsModule } from '../shared-components/shared-components.module';
 import { ProficienciesTableComponent } from './journal-stats/ability-panel/proficiencies-table/proficiencies-table.component';
@@ -106,6 +107,7 @@ import { ProficiencyFieldComponent } from './journal-stats/info-row/proficiency/
     ConditionsDetailsComponent,
     InfoRowComponent,
     ConditionsComponent,
+    AttributeDetailsComponent,
   ],
   imports: [
     CommonModule,

src/services/data/data.service.ts

@@ -452,6 +452,12 @@ export class DataService {
     // TODO: Datenbank updaten
   }
 
+  private proficiencySubject = new BehaviorSubject<any>({
+    name: 'proficiencyBonus',
+    value: 2,
+  });
+  public proficiency$ = this.proficiencySubject.asObservable();
+
   private _hitPoints = {
     maxHitPoints: 10,
     currentHitPoints: 8,
@@ -467,53 +473,82 @@ export class DataService {
     return this._hitPoints;
   }
 
-  private armorClassSubject = new BehaviorSubject<object>({
-    name: 'armorClass',
-    value: 19,
-  });
-  public armorClass$ = this.armorClassSubject.asObservable();
+  private _armorClass: number = 19;
 
-  private initiativeSubject = new BehaviorSubject<object>({
-    name: 'initiative',
-    value: 2,
-  });
-  public initiative$ = this.initiativeSubject.asObservable();
+  public get armorClass(): number {
+    return this._armorClass;
+  }
 
-  private speedSubject = new BehaviorSubject<object>({
-    name: 'speed',
-    value: 30,
-  });
-  public speed$ = this.speedSubject.asObservable();
+  public set armorClass(newValue: number) {
+    console.log('armorClass: ', newValue);
+    this._armorClass = newValue;
+  }
 
-  private hitDiceSubject = new BehaviorSubject<object>({
-    name: 'hitDice',
-    value: '',
-  });
-  public hitDice$ = this.hitDiceSubject.asObservable();
+  private _initiative: number = 2;
 
-  private deathSaveSubject = new BehaviorSubject<object>({
-    name: 'deathSave',
-    value: [0, 0],
-  });
-  public deathSave$ = this.deathSaveSubject.asObservable();
+  public get initiative(): number {
+    return this._initiative;
+  }
 
-  private inspirationSubject = new BehaviorSubject<object>({
-    name: 'inspiration',
-    value: 0,
-  });
-  public inspiration$ = this.inspirationSubject.asObservable();
+  public set initiative(newValue: number) {
+    console.log('initiative: ', newValue);
+    this._initiative = newValue;
+  }
 
-  private proficiencySubject = new BehaviorSubject<any>({
-    name: 'proficiencyBonus',
-    value: 2,
-  });
-  public proficiency$ = this.proficiencySubject.asObservable();
+  private _movement: number = 30;
 
-  private experienceSubject = new BehaviorSubject<object>({
-    name: 'experience',
-    value: 0,
-  });
-  public experience$ = this.experienceSubject.asObservable();
+  public get movement(): number {
+    return this._movement;
+  }
+
+  public set movement(newValue: number) {
+    console.log('movement: ', newValue);
+    this._movement = newValue;
+  }
+
+  private _hitDice: any[] = [{ diceNumber: '1', diceType: 'd10' }];
+
+  public get hitDice(): any[] {
+    return this._hitDice;
+  }
+
+  public set hitDice(newValue: any[]) {
+    console.log('hitDice: ', newValue);
+    this._hitDice = newValue;
+  }
+
+  private _deathSaves: number[] = [0, 0];
+
+  public get deathSaves(): number[] {
+    return this._deathSaves;
+  }
+
+  public set deathSaves(newValue: number[]) {
+    console.log('deathSaves: ', newValue);
+    this._deathSaves = newValue;
+  }
+
+  private _inspiration: boolean = false;
+
+  public get inspiration(): boolean {
+    return this._inspiration;
+  }
+
+  public set inspiration(newValue: boolean) {
+    console.log('inspiration: ', newValue);
+    this._inspiration = newValue;
+  }
+
+  private _experience: number = 0;
+
+  public get experience(): number {
+    return this._experience;
+  }
+
+  public set experience(newValue: number) {
+    console.log('experience: ', newValue);
+    this._experience = newValue;
+  }
 
   private _exhaustion: number = 0;