all 4 panels are functionally realized but not properly styled

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

@@ -1,16 +1,11 @@
-<!-- <div class="attribute-skill-container">
-  <app-attribute-field
-    [attributeName]="attributeObject.name"
-  ></app-attribute-field>
-
-  <div class="skills-container">
-    <ng-container *ngFor="let skill of attributeObject.skills">
-      <app-skill-field [skillName]="skill"></app-skill-field>
-    </ng-container>
+<div class="attribute-skill-container">
+  <div class="skill-column-left">
+    <attribute-panel></attribute-panel>
+    <proficiency-field></proficiency-field>
   </div>
-</div> -->
 
-<div class="attribute-skill-container">
-  <attribute-panel></attribute-panel>
-  <skill-panel></skill-panel>
+  <div class="skill-column-right">
+    <save-throw-panel></save-throw-panel>
+    <skill-panel></skill-panel>
+  </div>
 </div>

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

@@ -4,13 +4,22 @@
     justify-content: space-between;
     border: solid 1px black;;
 
-    attribute-panel{
+    .skill-column-left{
         width: 35%;
         border: solid 1px green;
     }
 
     skill-panel{
-        width: 60%;
+        // width: 60%;
         border: solid 1px cyan;
     }
+
+    .skill-column-right{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 60%;
+        border: solid 1px red;
+        gap: 2rem;
+    }
 }

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+<div class="save-throw-field">
+  <input class="save-throw-field__input" type="checkbox" />
+
+  <div class="save-throw-field__name">{{ nameTranslator[attribute] }}</div>
+
+  <div class="save-throw-field__value">{{ modifier }}</div>
+</div>

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

@@ -0,0 +1,25 @@
+.save-throw-field{
+    border: solid 1px black;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    .save-throw-field__input{
+        width: 15%;
+    }
+
+    .save-throw-field__name{
+        width: 50%;
+        font-size: 1.125rem;
+        font-weight: 600;
+        text-align: start;
+    }
+    
+    .save-throw-field__value{
+        width: 20%;
+        font-size: 1.5rem;
+        font-weight: 600;
+    }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'save-throw-field',
+  templateUrl: './save-throw-field.component.html',
+  styleUrls: ['./save-throw-field.component.scss'],
+})
+export class SaveThrowFieldComponent {
+  @Input() attribute: string = '';
+
+  public modifier: string = '+5';
+
+  public nameTranslator: any = {
+    strength: 'Stärke',
+    dexterity: 'Geschicklichkeit',
+    constitution: 'Konstitution',
+    intelligence: 'Intelligenz',
+    wisdom: 'Weisheit',
+    charisma: 'Charisma',
+  };
+}

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

@@ -0,0 +1,5 @@
+<div class="save-throw-panel">
+  <ng-container *ngFor="let attribute of attributes">
+    <save-throw-field [attribute]="attribute"></save-throw-field>
+  </ng-container>
+</div>

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

@@ -0,0 +1,5 @@
+// .save-throw-panel{
+//     background-color: var(--background-color);
+//     border-radius: 10px;
+
+// }

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

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

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'save-throw-panel',
+  templateUrl: './save-throw-panel.component.html',
+  styleUrls: ['./save-throw-panel.component.scss'],
+})
+export class SaveThrowPanelComponent {
+  constructor() {}
+
+  public attributes = [
+    'strength',
+    'dexterity',
+    'constitution',
+    'intelligence',
+    'wisdom',
+    'charisma',
+  ];
+}

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

@@ -5,9 +5,9 @@
     [(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>
+  <label class="skill-modifier">{{ skillModifier }}</label>
 </div>

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

@@ -3,35 +3,30 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap:1rem;
-
-    input{
-        border: none;
-        outline: none;
-        box-shadow: none;
-        text-align: center;
-        background-color: transparent;
-        width: 30%;
-        font-size: 1.5rem;
-        font-weight: 600;
-    }
+    justify-content: space-between;
+    text-align: center;
 
     .skill-proficiency-input{
-        width: 10%;
-    }
-
-    .skill-modifier{
-        width: 10%;
-        font-size: 1.5rem;
-        font-weight: 600;
-        text-align: end;
-
+        width: 8%;
     }
 
     .skill-attribute-name{
-        width: 10%;
+        width: 15%;
         font-size: 1rem;
         font-weight: 600;
         color: #494949;
     }
+
+    .skill-name{
+        width: 50%;
+        font-size: 1.125rem;
+        font-weight: 600;
+        text-align: start;
+    }
+    
+    .skill-modifier{
+        width: 20%;
+        font-size: 1.5rem;
+        font-weight: 600;
+    }
 }

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

@@ -22,13 +22,13 @@ export class SkillFieldComponent {
   public skillNames: any = {
     acrobatics: { skill: 'Akrobatik', attribute: 'GES', long: 'dexterity' },
     animalHandling: { skill: 'Tierkunde', attribute: 'WIS', long: 'wisdom' },
-    arcana: { skill: 'Arkanes Wissen', attribute: 'INT', long: 'intelligence' },
+    arcana: { skill: 'Arkana', attribute: 'INT', long: 'intelligence' },
     athletics: { skill: 'Athletik', attribute: 'STR', long: 'strength' },
     deception: { skill: 'Täuschung', attribute: 'CHA', long: 'charisma' },
     history: { skill: 'Geschichte', attribute: 'INT', long: 'intelligence' },
     insight: { skill: 'Einsicht', attribute: 'WIS', long: 'wisdom' },
     intimidation: {
-      skill: 'Einschüchterung',
+      skill: 'Einschüchtern',
       attribute: 'CHA',
       long: 'charisma',
     },

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

@@ -1 +1,5 @@
-<p>skill-panel works!</p>
+<div class="skill-panel">
+  <ng-container *ngFor="let skill of skills">
+    <app-skill-field [skillName]="skill"></app-skill-field>
+  </ng-container>
+</div>

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

@@ -0,0 +1,5 @@
+.skill-panel{
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}

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

@@ -5,4 +5,25 @@ import { Component } from '@angular/core';
   templateUrl: './skill-panel.component.html',
   styleUrls: ['./skill-panel.component.scss'],
 })
-export class SkillPanelComponent {}
+export class SkillPanelComponent {
+  public skills: any = [
+    'acrobatics',
+    'animalHandling',
+    'arcana',
+    'athletics',
+    'deception',
+    'history',
+    'insight',
+    'intimidation',
+    'investigation',
+    'medicine',
+    'nature',
+    'perception',
+    'performance',
+    'persuasion',
+    'religion',
+    'sleightOfHand',
+    'stealth',
+    'survival',
+  ];
+}

src/app/journal/journal.module.ts

@@ -16,8 +16,8 @@ import { JournalSpellbookComponent } from './journal-spellbook/journal-spellbook
 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-field/attribute-field.component';
-import { SkillFieldComponent } from './journal-stats/attribute-skill-container/skill-field/skill-field.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';
 import { LifeContainerComponent } from './journal-stats/life-container/life-container.component';
 import { WeaponsContainerComponent } from './journal-stats/weapons-container/weapons-container.component';
@@ -53,6 +53,9 @@ import { WeaponDetailsComponent } from './journal-stats/weapons-container/weapon
 import { SpellDetailsComponent } from './journal-stats/weapons-container/spell-table/spell-details/spell-details.component';
 import { AttributePanelComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component';
 import { SkillPanelComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-panel.component';
+import { SaveThrowPanelComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component';
+import { SaveThrowFieldComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component';
+import { ProficiencyFieldComponent } from './journal-stats/attribute-skill-container/proficiency-field/proficiency-field.component';
 
 @NgModule({
   declarations: [
@@ -100,6 +103,9 @@ import { SkillPanelComponent } from './journal-stats/attribute-skill-container/s
     SpellDetailsComponent,
     AttributePanelComponent,
     SkillPanelComponent,
+    SaveThrowPanelComponent,
+    SaveThrowFieldComponent,
+    ProficiencyFieldComponent,
   ],
   imports: [
     CommonModule,