Skills and attributes are fully functional

next step is save-skill-container

src/app/journal/journal-stats/attribute-field/attribute-field.component.ts

@@ -59,17 +59,10 @@ export class AttributeFieldComponent {
   // }
 
   public updateValue(): void {
-    // attribute.name is strengt
-    console.log(this.attribute.name);
-    console.log(this.attribute.value);
-    console.log(this.attribute.proficiency);
     this.dataAccessor.updateAttribute({
       name: this.attribute.name,
       value: this.attribute.value,
       proficiency: this.attribute.proficiency,
-      // name: 'strength',
-      // value: 18,
-      // proficiency: false,
     });
   }
 

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

@@ -8,12 +8,50 @@
       </ng-container>
     </div>
 
-    <div class="skill-proficiency-container">
-      <div>+2 Proficiency</div>
+    <!-- <div class="skill-proficiency-container">
       <ng-container *ngFor="let skill of skillArray">
         <app-skill-field [skillName]="skill"></app-skill-field>
       </ng-container>
+    </div> -->
+
+    <div class="skill-save-container">
+      <div class="skill-save-box">
+        <ng-container *ngFor="let skill of strengthSkills">
+          <app-skill-field [skillName]="skill"></app-skill-field>
+        </ng-container>
+      </div>
+
+      <div class="skill-save-box">
+        <ng-container *ngFor="let skill of dexteritySkills">
+          <app-skill-field [skillName]="skill"></app-skill-field>
+        </ng-container>
+      </div>
+
+      <div class="skill-save-box">
+        <ng-container *ngFor="let skill of constitutionSkills">
+          <app-skill-field [skillName]="skill"></app-skill-field>
+        </ng-container>
+      </div>
+
+      <div class="skill-save-box">
+        <ng-container *ngFor="let skill of intelligenceSkills">
+          <app-skill-field [skillName]="skill"></app-skill-field>
+        </ng-container>
+      </div>
+
+      <div class="skill-save-box">
+        <ng-container *ngFor="let skill of wisdomSkills">
+          <app-skill-field [skillName]="skill"></app-skill-field>
+        </ng-container>
+      </div>
+
+      <div class="skill-save-box">
+        <ng-container *ngFor="let skill of charismaSkills">
+          <app-skill-field [skillName]="skill"></app-skill-field>
+        </ng-container>
+      </div>
     </div>
+
     <div class="life-weapon-container">life and weapon container</div>
     <div class="platzhalter">platzhalter</div>
   </div>

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

@@ -37,7 +37,7 @@
         text-align: center;
     }
 
-    .skill-proficiency-container{
+    .skill-save-container{
         display: flex;
         flex-direction: column;
         gap: 2rem;

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

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { DatabaseService } from 'src/services/database/database.service';
-import { Attribute } from 'src/interfaces/attribute';
 
 @Component({
   selector: 'app-journal-stats',
@@ -43,4 +42,28 @@ export class JournalStatsComponent {
     'stealth',
     'survival',
   ];
+
+  public strengthSkills: string[] = ['athletics'];
+  public dexteritySkills: string[] = ['acrobatics', 'sleightOfHand', 'stealth'];
+  public constitutionSkills: string[] = [];
+  public intelligenceSkills: string[] = [
+    'arcana',
+    'history',
+    'investigation',
+    'nature',
+    'religion',
+  ];
+  public wisdomSkills: string[] = [
+    'animalHandling',
+    'insight',
+    'medicine',
+    'perception',
+    'survival',
+  ];
+  public charismaSkills: string[] = [
+    'deception',
+    'intimidation',
+    'performance',
+    'persuasion',
+  ];
 }

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

@@ -0,0 +1,10 @@
+<div class="save-field-container">
+  <input
+    type="checkbox"
+    class="save-proficiency-input"
+    [(ngModel)]="saveProficiency"
+    (change)="updateValue()"
+  />
+  <label class="save-modifier">{{ saveModifier }}</label>
+  <label class="save-name">Rettungswurf</label>
+</div>

src/app/journal/journal-stats/save-field/save-field.component.spec.ts

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

src/app/journal/journal-stats/save-field/save-field.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-save-field',
+  templateUrl: './save-field.component.html',
+  styleUrls: ['./save-field.component.scss'],
+})
+export class SaveFieldComponent {
+  @Input() saveName: string = '';
+  public saveModifier: string = '0';
+  public saveProficiency: boolean = false;
+
+  public updateValue(): void {
+    return;
+  }
+}

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

@@ -0,0 +1 @@
+<p>save-skill-container works!</p>

src/app/journal/journal-stats/save-skill-container/save-skill-container.component.spec.ts

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

src/app/journal/journal-stats/save-skill-container/save-skill-container.component.ts

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

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

@@ -1,5 +1,13 @@
 <div class="skill-box">
-  <input class="attribute-value" [(ngModel)]="skill.value" />
-  <label class="attribute-name">{{ skillNames[skillName].attribute }}</label>
-  <label class="attribute-name">{{ skillNames[skillName].skill }}</label>
+  <input
+    type="checkbox"
+    class="skill-proficiency-input"
+    [(ngModel)]="skillProficiency"
+    (change)="updateValue()"
+  />
+  <label class="skill-modifier">{{ skillModifier }}</label>
+  <label class="skill-attribute-name">{{
+    skillNames[skillName].attribute
+  }}</label>
+  <label class="skill-name">{{ skillNames[skillName].skill }}</label>
 </div>

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

@@ -15,4 +15,23 @@
         font-size: 1.5rem;
         font-weight: 600;
     }
+
+    .skill-proficiency-input{
+        width: 10%;
+    }
+
+    .skill-modifier{
+        width: 10%;
+        font-size: 1.5rem;
+        font-weight: 600;
+        text-align: end;
+
+    }
+
+    .skill-attribute-name{
+        width: 10%;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #494949;
+    }
 }

src/app/journal/journal-stats/skill-field/skill-field.component.ts

@@ -11,9 +11,10 @@ import { Attribute } from 'src/interfaces/attribute';
 })
 export class SkillFieldComponent {
   @Input() skillName: string = '';
-  public skill: Skill = { name: '', value: 0 };
+  public skill: Skill = { name: '', proficiency: false };
   private attribute: Attribute = { name: '', value: 0 };
   public skillModifier: string = '0';
+  public skillProficiency: boolean = false;
 
   public constructor(public dataAccessor: DataService) {}
 
@@ -51,8 +52,8 @@ export class SkillFieldComponent {
   };
 
   ngOnInit(): void {
-    // console.log('init');
     this.initAttributeSubscription();
+    this.initSkillSubscription();
   }
 
   private initAttributeSubscription(): void {
@@ -65,13 +66,32 @@ export class SkillFieldComponent {
     });
   }
 
-  private calculateModifier(): string {
-    const mod: number = Math.floor((this.attribute.value - 10) / 2);
+  private initSkillSubscription(): void {
+    const observable: Observable<Skill> = eval(
+      `this.dataAccessor.${this.skillName}$`
+    );
+    observable.subscribe((newValue: Skill) => {
+      this.skill = newValue;
+      this.skillProficiency = this.skill.proficiency;
+      this.skillModifier = this.calculateModifier();
+    });
+  }
+
+  public updateValue(): void {
+    this.dataAccessor.updateSkill({
+      name: this.skillName,
+      proficiency: this.skillProficiency,
+    });
+  }
+
+  public calculateModifier(): string {
+    let mod: number = Math.floor((this.attribute.value - 10) / 2);
+    if (this.skillProficiency) {
+      mod += 2;
+    }
     if (mod > 0) {
-      // console.log('mod: +', mod);
       return '+' + mod;
     } else {
-      // console.log(mod.toString());
       return mod.toString();
     }
   }

src/app/journal/journal.module.ts

@@ -14,6 +14,8 @@ import { OffcanvasComponent } from './journal-home/offcanvas/offcanvas.component
 import { InfopanelComponent } from './journal-home/infopanel/infopanel.component';
 import { AttributeFieldComponent } from './journal-stats/attribute-field/attribute-field.component';
 import { SkillFieldComponent } from './journal-stats/skill-field/skill-field.component';
+import { SaveFieldComponent } from './journal-stats/save-field/save-field.component';
+import { SaveSkillContainerComponent } from './journal-stats/save-skill-container/save-skill-container.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +30,8 @@ import { SkillFieldComponent } from './journal-stats/skill-field/skill-field.com
     InfopanelComponent,
     AttributeFieldComponent,
     SkillFieldComponent,
+    SaveFieldComponent,
+    SaveSkillContainerComponent,
   ],
   imports: [CommonModule, JournalRoutingModule, NgbModule, FormsModule],
 })

src/interfaces/skill.ts

@@ -1,6 +1,5 @@
 export interface Skill {
   name: string;
-  value: number;
-  proficiency?: boolean;
+  proficiency: boolean;
   bardicExpertise?: boolean;
 }

src/services/data/data.service.ts

@@ -150,12 +150,12 @@ export class DataService {
   }
 
   private strengthSubject = new BehaviorSubject<Attribute>(
-    { name: 'strengt', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'strength', value: 10, proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public strength$ = this.strengthSubject.asObservable();
 
   private dexteritySubject = new BehaviorSubject<Attribute>(
-    { name: 'dexterity', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'dexterity', value: 17, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public dexterity$ = this.dexteritySubject.asObservable();
 
@@ -165,17 +165,17 @@ export class DataService {
   public constitution$ = this.constitutionSubject.asObservable();
 
   private intelligenceSubject = new BehaviorSubject<Attribute>(
-    { name: 'intelligence', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'intelligence', value: 13, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public intelligence$ = this.intelligenceSubject.asObservable();
 
   private wisdomSubject = new BehaviorSubject<Attribute>(
-    { name: 'wisdom', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'wisdom', value: 10, proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public wisdom$ = this.wisdomSubject.asObservable();
 
   private charismaSubject = new BehaviorSubject<Attribute>(
-    { name: 'charisma', value: 10, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'charisma', value: 19, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public charisma$ = this.charismaSubject.asObservable();
 
@@ -187,7 +187,11 @@ export class DataService {
    *
    * @param newValue The new value of the skill
    */
-  updateSkills(newValue: Skill) {
+  updateSkill(newValue: Skill) {
+    console.log('--------------');
+    console.log(newValue);
+    console.log('--------------');
+
     const functionCall: string = newValue.name + 'Subject.next(newValue)';
     eval(`this.${functionCall}`);
     console.log('updateSkill: ', newValue.name);
@@ -195,92 +199,92 @@ export class DataService {
   }
 
   private acrobaticsSubject = new BehaviorSubject<Skill>(
-    { name: 'acrobatics', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'acrobatics', proficiency: true } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public acrobatics$ = this.acrobaticsSubject.asObservable();
 
   private animalHandlingSubject = new BehaviorSubject<Skill>(
-    { name: 'animalHandling', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'animalHandling', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public animalHandling$ = this.animalHandlingSubject.asObservable();
 
   private arcanaSubject = new BehaviorSubject<Skill>(
-    { name: 'arcana', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'arcana', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public arcana$ = this.arcanaSubject.asObservable();
 
   private athleticsSubject = new BehaviorSubject<Skill>(
-    { name: 'athletics', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'athletics', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public athletics$ = this.athleticsSubject.asObservable();
 
   private deceptionSubject = new BehaviorSubject<Skill>(
-    { name: 'deception', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'deception', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public deception$ = this.deceptionSubject.asObservable();
 
   private historySubject = new BehaviorSubject<Skill>(
-    { name: 'history', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'history', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public history$ = this.historySubject.asObservable();
 
   private insightSubject = new BehaviorSubject<Skill>(
-    { name: 'insight', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'insight', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public insight$ = this.insightSubject.asObservable();
 
   private intimidationSubject = new BehaviorSubject<Skill>(
-    { name: 'intimidation', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'intimidation', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public intimidation$ = this.intimidationSubject.asObservable();
 
   private investigationSubject = new BehaviorSubject<Skill>(
-    { name: 'investigation', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'investigation', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public investigation$ = this.investigationSubject.asObservable();
 
   private medicineSubject = new BehaviorSubject<Skill>(
-    { name: 'medicine', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'medicine', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public medicine$ = this.medicineSubject.asObservable();
 
   private natureSubject = new BehaviorSubject<Skill>(
-    { name: 'nature', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'nature', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public nature$ = this.natureSubject.asObservable();
 
   private perceptionSubject = new BehaviorSubject<Skill>(
-    { name: 'perception', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'perception', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public perception$ = this.perceptionSubject.asObservable();
 
   private performanceSubject = new BehaviorSubject<Skill>(
-    { name: 'performance', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'performance', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public performance$ = this.performanceSubject.asObservable();
 
   private persuasionSubject = new BehaviorSubject<Skill>(
-    { name: 'persuasion', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'persuasion', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public persuasion$ = this.persuasionSubject.asObservable();
 
   private religionSubject = new BehaviorSubject<Skill>(
-    { name: 'religion', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'religion', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public religion$ = this.religionSubject.asObservable();
 
   private sleightOfHandSubject = new BehaviorSubject<Skill>(
-    { name: 'sleightOfHand', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'sleightOfHand', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public sleightOfHand$ = this.sleightOfHandSubject.asObservable();
 
   private stealthSubject = new BehaviorSubject<Skill>(
-    { name: 'stealth', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'stealth', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public stealth$ = this.stealthSubject.asObservable();
 
   private survivalSubject = new BehaviorSubject<Skill>(
-    { name: 'survival', value: 1, proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
+    { name: 'survival', proficiency: false } //erstmal nur gemockt, später muss der Wert aus der Datenbank kommen
   );
   public survival$ = this.survivalSubject.asObservable();