started working on teh npc function

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Editor } from 'ngx-editor';
 import { DateAdapter } from '@angular/material/core';
 import { JournalEntry } from 'src/interfaces/interfaces';

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

@@ -1,11 +1,82 @@
-<div
-  style="
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  "
->
-  <img style="height: 100%" src="assets/images/npc_coming_soon.jpeg" alt="" />
+<div class="npcs-container">
+  <!-- ALLIES -->
+  <!-- <div class="npc-list-title">Verbündete</div>
+  <button class="toggle-button" (click)="collapse.toggle()">
+    @if (isAlliesCollapsed) {
+      Verbündete anzeigen
+    } @else {
+      Verbündete verbergen
+    }
+  </button>
+
+  <div
+    #collapse="ngbCollapse"
+    class="npc-list"
+    [(ngbCollapse)]="isAlliesCollapsed"
+  >
+    @if (isNewEntry) {
+
+    } @else {
+      <div class="npc-wrapper" (click)="addNpc('Ally')">
+        <div class="npc add-button">
+          <img src="assets/icons/UIIcons/add.svg" />
+        </div>
+      </div>
+    }
+    @for (npc of npcs.allies; track npc) {
+      <div class="npc-wrapper">
+        <div class="npc">
+          <div class="npc-title">{{ npc.name }}</div>
+        </div>
+      </div>
+    }
+  </div> -->
+
+  <!-- ss -->
+  <mat-accordion class="example-headers-align" multi>
+    <mat-expansion-panel [expanded]="true">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <div class="npc-list-title">Verbündete</div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <divider [appearance]="'gold-2'" class="b-1"></divider>
+      <div class="npc-wrapper" (click)="addNpc('Ally')">
+        <div class="npc add-button">
+          <img src="assets/icons/UIIcons/add.svg" />
+        </div>
+      </div>
+      @for (npc of npcs.allies; let index = $index; track npc) {
+        <div class="npc-wrapper">
+          <div class="npc" (click)="selectNpc(index, 'allies')">
+            <div class="npc-title">{{ npc.name }}</div>
+          </div>
+        </div>
+      }
+    </mat-expansion-panel>
+    <mat-expansion-panel [expanded]="true">
+      <mat-expansion-panel-header>
+        <mat-panel-title
+          ><div class="npc-list-title">Feinde</div></mat-panel-title
+        >
+      </mat-expansion-panel-header>
+      <!-- Enemies here -->
+    </mat-expansion-panel>
+
+    <mat-expansion-panel [expanded]="true">
+      <mat-expansion-panel-header>
+        <div class="npc-list-title">Andere</div>
+      </mat-expansion-panel-header>
+      <!-- Others here -->
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>
+
+<!-- <div style="margin: 5rem 0 0 30rem">{{ currentNpc | json }}</div> -->
+
+<div class="read-container">
+  <div class="name">{{ currentNpc.name }}</div>
+  <divider [appearance]="'gold-2'" class="b-1"></divider>
+  <div class="short">{{ currentNpc.shortDescription }}</div>
+  <div class="long">{{ currentNpc.longDescription }}</div>
 </div>

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

@@ -0,0 +1,94 @@
+.npcs-container {
+  width: 18rem;
+  height: 100%;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  background-image: url("../../../assets/images/texture-10.jpg");
+  border-right: var(--gold-3);
+  box-shadow: var(--shadow);
+  padding-top: 3rem;
+}
+
+.npc-list-title {
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.npc-wrapper {
+  width: 16rem;
+  margin-bottom: 1rem;
+
+  .npc {
+    width: 14rem;
+    padding: 1rem;
+    border: var(--gold-2);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    cursor: pointer;
+    background-image: url("../../../assets/images/texture-0.jpg");
+    &:hover {
+      background-image: url("../../../assets/images/texture-5.jpg");
+    }
+
+    &.active {
+      background-image: url("../../../assets/images/texture-30.jpg") !important;
+    }
+    .npc-title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: 500;
+    }
+
+    .unsaved {
+      margin-top: 0.375rem;
+      text-align: center;
+      color: rgb(52, 33, 33);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+  }
+  .add-button {
+    height: 3.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.read-container {
+  width: 800px;
+  height: calc(100vh - 6rem);
+  margin-top: 1.5rem;
+  margin-left: calc(50vw - 400px + 9rem);
+  padding: 1rem 2rem 2rem;
+  overflow: auto;
+  border-radius: 6px;
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-0.jpg");
+  box-shadow: var(--shadow);
+}
+
+// MATERIAL
+
+// .mat-expansion-panel-header.mat-expanded {
+//   border-bottom: var(--gold-2);
+// }
+
+.mat-expansion-panel {
+  border: var(--gold-2);
+}
+
+::ng-deep .mat-expansion-panel-body {
+  padding: 0 1rem 1rem !important;
+}
+
+.mat-accordion {
+  width: 16rem;
+}

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

@@ -1,8 +1,109 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { Editor } from 'ngx-editor';
+import { Npc, Npcs } from 'src/interfaces/interfaces';
+import { DataService } from 'src/services/data/data.service';
 
 @Component({
   selector: 'app-journal-npcs',
   templateUrl: './journal-npcs.component.html',
   styleUrl: './journal-npcs.component.scss',
 })
-export class JournalNpcsComponent {}
+export class JournalNpcsComponent {
+  editor: Editor = new Editor();
+  toolbar: any = [
+    // default value
+    ['bold', 'italic'],
+    ['bullet_list'],
+    [{ heading: ['h3', 'h4', 'h5', 'h6'] }],
+  ];
+
+  public isAlliesCollapsed = false;
+  public isEnemiesCollapsed = false;
+  public isOthersCollapsed = false;
+
+  private newNpcType: string = '';
+
+  /** Used to show the interactale form or the display version of an entry. */
+  public isInEditMode = false;
+
+  /** The index of the currently active entry */
+  public currentIndex: number = 0;
+
+  private backupIndex: number = -1;
+  /** Indicates, if the currentEntry is a newly generated one that is still not saved. */
+  public isNewNpc = false;
+
+  /**The array of JournalEntries, synched to the   */
+  public npcs: Npcs = {
+    allies: [
+      {
+        name: 'Guardfield',
+        shortDescription: 'Ein ganz besonderer Guard',
+        longDescription:
+          'Man kann es gar nicht in Worte fassen, wie siehr wir alle diese Wache bewundern!',
+      },
+      {
+        name: 'Bob',
+        shortDescription: 'Ein ganz besonderer Guard',
+        longDescription:
+          'Man kann es gar nicht in Worte fassen, wie siehr wir alle diese Wache bewundern!',
+      },
+      {
+        name: 'Hans',
+        shortDescription: 'Ein ganz besonderer Guard',
+        longDescription:
+          'Man kann es gar nicht in Worte fassen, wie siehr wir alle diese Wache bewundern!',
+      },
+    ],
+    enemies: [],
+    others: [],
+  };
+
+  /** Holds the data for the current entry */
+  public currentNpc: Npc = {
+    name: '',
+    shortDescription: '',
+    longDescription: '',
+  };
+
+  private dataService: DataService = inject(DataService);
+  onInit(): void {
+    // this.npcs = this.dataService.npcsData;
+    // console.log('JournalNpcsComponent: ', this.npcs);
+  }
+
+  // FUNCTIONS
+
+  public selectNpc(index: number, type: string): void {
+    this.currentIndex = index;
+    this.newNpcType = type;
+    this.currentNpc = this.getNpc();
+    this.isNewNpc = false;
+    this.isInEditMode = false;
+  }
+
+  public addNpc(type: string): void {
+    this.currentNpc = {
+      name: '',
+      shortDescription: '',
+      longDescription: '',
+    };
+    this.isInEditMode = true;
+    this.isNewNpc = true;
+    this.backupIndex = this.currentIndex;
+    this.newNpcType = type;
+  }
+
+  private getNpc(): Npc {
+    switch (this.newNpcType) {
+      case 'allies':
+        return this.npcs.allies[this.currentIndex];
+      case 'enemies':
+        return this.npcs.enemies[this.currentIndex];
+      case 'others':
+        return this.npcs.others[this.currentIndex];
+      default:
+        return this.npcs.allies[this.currentIndex];
+    }
+  }
+}

src/app/journal/journal.module.ts

@@ -7,6 +7,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxEditorModule } from 'ngx-editor';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 
 // Material Design
@@ -202,6 +203,7 @@ import { DividerComponent } from '../shared-components/divider/divider.component
     DividerComponent,
     MatDatepickerModule,
     MatNativeDateModule,
+    NgbCollapseModule,
   ],
 })
 export class JournalModule {}