feat: Implemented Backgroundstory

src/app/character/character-creator/character-creator.component.ts

@@ -142,6 +142,7 @@ export class CharacterCreatorComponent {
           subclass: '',
           race: this.characterSpecies,
           background: this.characterBackground,
+          backgroundStory: '',
           level: 1,
           experience: 0,
           image: '',

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

@@ -76,8 +76,7 @@
       <ng-container ngbNavItem="stroy">
         <button ngbNavLink>Geschichte</button>
         <ng-template ngbNavContent>
-          <!-- <class></class> -->
-          story works!
+          <story></story>
         </ng-template>
       </ng-container>
     </div>

src/app/journal/journal-character/story/story.component.html

@@ -1 +1,32 @@
-<p>story works!</p>
+<div class="story-container">
+  <div class="edit">
+    <icon-button
+      [icon]="editMode ? 'cross' : 'edit'"
+      (click)="editMode ? cancel() : edit()"
+    ></icon-button>
+  </div>
+  <div class="title">Hintergrundgeschichte</div>
+
+  @if(characterData.backgroundStory != "" && !editMode){
+  <div class="t-2" [innerHTML]="characterData.backgroundStory"></div>
+  }@else if(editMode){
+  <div class="NgxEditor__Wrapper t-15">
+    <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+    <ngx-editor
+      [editor]="editor"
+      [(ngModel)]="editBackgroundStory"
+      placeholder="Hier kann die Hintergrundgeschichte erzählt werden."
+    ></ngx-editor>
+  </div>
+  <div class="horizontal-buttons" style="justify-content: space-around">
+    <ui-button [color]="'green'" (click)="update()" [width]="'w15'"
+      >Anwenden</ui-button
+    >
+    <ui-button [color]="'red'" (click)="cancel()" [width]="'w15'"
+      >Verwerfen</ui-button
+    >
+  </div>
+  }@else { Hintergrundgeschichte bearbeiten
+  <button (click)="edit()">Bearbeiten</button>
+  }
+</div>

src/app/journal/journal-character/story/story.component.scss

@@ -0,0 +1,30 @@
+.story-container {
+    width: 800px;
+    height: calc(100vh - 10.5rem);
+    overflow: auto;
+    margin: auto;
+    border: 1px solid black;
+    padding: 2rem;
+    border-radius: 10px;
+    background-color: var(--items-hover);
+    box-shadow: var(--shadow-large);
+    position: absolute;
+    top: 8.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .edit {
+        position: absolute;
+        right: 1rem;
+        top: 3rem;
+    }
+}
+
+.title {
+    margin-top: 0;
+}
+
+::ng-deep .ProseMirror {
+    height: 30rem !important;
+    overflow-y: auto;
+}

src/app/journal/journal-character/story/story.component.ts

@@ -1,10 +1,46 @@
 import { Component } from '@angular/core';
+import { DataService } from 'src/services/data/data.service';
+import { Editor } from 'ngx-editor';
 
 @Component({
-  selector: 'app-story',
+  selector: 'story',
   templateUrl: './story.component.html',
-  styleUrl: './story.component.scss'
+  styleUrl: './story.component.scss',
 })
 export class StoryComponent {
+  public characterData: any;
+  public editBackgroundStory: string = '';
+  public editMode: boolean = false;
 
+  editor: Editor = new Editor();
+  html = '';
+  toolbar: any = [
+    // default value
+    ['bold', 'italic'],
+    ['bullet_list'],
+    [{ heading: ['h3', 'h4', 'h5', 'h6'] }],
+  ];
+
+  constructor(private dataAccessor: DataService) {}
+
+  ngOnInit() {
+    this.characterData = this.dataAccessor.characterData;
+  }
+
+  update() {
+    this.characterData.backgroundStory = this.editBackgroundStory;
+    this.dataAccessor.characterData = this.characterData;
+    this.editBackgroundStory = '';
+    this.editMode = false;
+  }
+
+  cancel() {
+    this.editBackgroundStory = this.characterData.backgroundStory;
+    this.editMode = false;
+  }
+
+  edit() {
+    this.editBackgroundStory = this.characterData.backgroundStory;
+    this.editMode = true;
+  }
 }

src/services/data/data.service.ts

@@ -160,6 +160,7 @@ export class DataService {
     subclass: '',
     race: '',
     background: '',
+    backgroundStory: '',
     level: 1,
     experience: 0,
   };

src/services/translator/translator.service.ts

@@ -69,6 +69,7 @@ export class TranslatorService {
     Sorcerer: { display: 'Zauberer', value: 'Sorcerer' },
     Warlock: { display: 'Hexenmeister', value: 'Warlock' },
     Wizard: { display: 'Magier', value: 'Wizard' },
+    Test: { display: 'Test', value: 'Test' },
   };
 
   public genders: any = {