From 82dd597d6d3d909600839bb343c7b3cf8345d3dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 09:28:29 +0200
Subject: [PATCH 01/13] Visualize InventorySlots and Create them

---
 src/app/app.module.ts                         | 10 +++++-
 .../character-editor.component.html           | 10 ++++++
 .../inventory-slot-creator.component.html     | 11 +++++++
 .../inventory-slot-creator.component.scss     |  0
 .../inventory-slot-creator.component.spec.ts  | 23 +++++++++++++
 .../inventory-slot-creator.component.ts       | 27 ++++++++++++++++
 .../inventory-slot-editor.component.html      | 12 +++++++
 .../inventory-slot-editor.component.scss      |  6 ++++
 .../inventory-slot-editor.component.spec.ts   | 23 +++++++++++++
 .../inventory-slot-editor.component.ts        | 32 +++++++++++++++++++
 .../game-model/characters/Character.ts        | 29 ++++++++++++++---
 .../InventoryCharacteristic.ts                | 14 ++++++++
 .../intentory-slots/InventorySlot.ts          | 16 ++++++++++
 13 files changed, 207 insertions(+), 6 deletions(-)
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
 create mode 100644 src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts
 create mode 100644 src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 152535a..f756385 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -91,6 +91,12 @@ import {
 import {
   InheritedItemCharacteristicEditorComponent
 } from "./editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component";
+import {
+  InventorySlotEditorComponent
+} from "./editor/character-editor/inventory-slot-editor/inventory-slot-editor.component";
+import {
+  InventorySlotCreatorComponent
+} from "./editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -120,7 +126,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ItemGroupEditorComponent,
     ItemEditorComponent,
     ItemgroupInheritorComponent,
-    InheritedItemCharacteristicEditorComponent
+    InheritedItemCharacteristicEditorComponent,
+    InventorySlotEditorComponent,
+    InventorySlotCreatorComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/editor/character-editor/character-editor.component.html b/src/app/editor/character-editor/character-editor.component.html
index 959cad6..a8a7060 100644
--- a/src/app/editor/character-editor/character-editor.component.html
+++ b/src/app/editor/character-editor/character-editor.component.html
@@ -56,3 +56,13 @@
     </mat-accordion>
   </mat-card-content>
 </mat-card>
+
+
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Inventory-Slots</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <app-inventory-slot-editor [character]="character" [itemgroups]="gameModel!.itemgroupsAsList"></app-inventory-slot-editor>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
new file mode 100644
index 0000000..3dd619f
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
@@ -0,0 +1,11 @@
+<h1 mat-dialog-title>Create Inventory Slot</h1>
+<mat-dialog-content>
+  <mat-form-field appearance="outline" class="long-form">
+    <mat-label>Slot-Name</mat-label>
+    <input matInput [formControl]="slotNameCtrl">
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-raised-button (click)="cancel()">Cancel</button>
+  <button mat-raised-button [disabled]="slotNameCtrl.invalid" (click)="submit()">Submit</button>
+</mat-dialog-actions>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
new file mode 100644
index 0000000..c8771c8
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventorySlotCreatorComponent } from './inventory-slot-creator.component';
+
+describe('InventorySlotCreatorComponent', () => {
+  let component: InventorySlotCreatorComponent;
+  let fixture: ComponentFixture<InventorySlotCreatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InventorySlotCreatorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InventorySlotCreatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
new file mode 100644
index 0000000..1058c63
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
@@ -0,0 +1,27 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
+import {FormControl, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-inventory-slot-creator',
+  templateUrl: './inventory-slot-creator.component.html',
+  styleUrl: './inventory-slot-creator.component.scss'
+})
+export class InventorySlotCreatorComponent {
+
+  slotNameCtrl = new FormControl('', [Validators.required]);
+
+  constructor(private dialogRef: MatDialogRef<InventorySlotCreatorComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: InventorySlot | undefined) {
+  }
+
+
+  submit() {
+    this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
+  }
+
+  cancel() {
+    this.dialogRef.close()
+  }
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
new file mode 100644
index 0000000..71a6528
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -0,0 +1,12 @@
+<mat-accordion>
+  <mat-expansion-panel *ngFor="let slot of character!.inventorySlots">
+    <mat-expansion-panel-header>
+      <mat-panel-title>{{slot.slotName}}</mat-panel-title>
+    </mat-expansion-panel-header>
+    <div class="panel-actions">
+      <button mat-raised-button color="primary">Edit</button>
+      <button mat-raised-button color="warn">Delete</button>
+    </div>
+  </mat-expansion-panel>
+  <button mat-stroked-button class="add-btn" (click)="addInventorySlot()">Add Inventory-Slot</button>
+</mat-accordion>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
new file mode 100644
index 0000000..bbb5df8
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
@@ -0,0 +1,6 @@
+.panel-actions {
+  float: right;
+}
+.add-btn {
+  width: 100%;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts
new file mode 100644
index 0000000..8e5c454
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventorySlotEditorComponent } from './inventory-slot-editor.component';
+
+describe('InventorySlotEditorComponent', () => {
+  let component: InventorySlotEditorComponent;
+  let fixture: ComponentFixture<InventorySlotEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InventorySlotEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InventorySlotEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
new file mode 100644
index 0000000..c364410
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
@@ -0,0 +1,32 @@
+import {Component, Input} from '@angular/core';
+import {Character} from "../../../project/game-model/characters/Character";
+import {ItemGroup} from "../../../project/game-model/inventory/ItemGroup";
+import {InventorySlot} from "../../../project/game-model/inventory/intentory-slots/InventorySlot";
+import {MatDialog} from "@angular/material/dialog";
+import {InventorySlotCreatorComponent} from "./inventory-slot-creator/inventory-slot-creator.component";
+
+@Component({
+  selector: 'app-inventory-slot-editor',
+  templateUrl: './inventory-slot-editor.component.html',
+  styleUrl: './inventory-slot-editor.component.scss'
+})
+export class InventorySlotEditorComponent {
+
+  @Input() character: Character | undefined
+  @Input() itemgroups: ItemGroup[] = []
+
+  constructor(private dialog: MatDialog)  {
+  }
+
+  addInventorySlot() {
+    const dialogRef = this.dialog.open(InventorySlotCreatorComponent, {
+      minWidth: "400px"
+    })
+
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != undefined) {
+        this.character!.inventorySlots.push(res)
+      }
+    })
+  }
+}
diff --git a/src/app/project/game-model/characters/Character.ts b/src/app/project/game-model/characters/Character.ts
index 51ec902..b787090 100644
--- a/src/app/project/game-model/characters/Character.ts
+++ b/src/app/project/game-model/characters/Character.ts
@@ -7,19 +7,41 @@ import {SimpleTemplateGamesystem} from "../templates/simpleGamesystem/SimpleTemp
 import {ProductTemplateSystem} from "../templates/productGamesystem/ProductTemplateSystem";
 import {ProductGamesystem} from "../gamesystems/ProductGamesystem";
 import {CharacterRelation} from "./CharacterRelation";
+import {InventorySlot} from "../inventory/intentory-slots/InventorySlot";
+import {Tupel} from "../../../shared/Tupel";
 
 export class Character extends ModelComponent implements TemplateElement {
 
   characterSpecificTemplateSystems: Gamesystem<any, any>[] = []
-
   characterRelations: CharacterRelation[] = []
-
   characterRelationGamesystems: Gamesystem<any, any>[] = []
+  inventorySlots: InventorySlot[] = []
+  combinableInventorySlots: Tupel<InventorySlot, InventorySlot>[] = []
 
   constructor(componentName: string, componentDescription: string) {
     super(componentName, componentDescription, ModelComponentType.CHARACTER);
   }
 
+  addInventorySlot(inventorySlot: InventorySlot) {
+    if(this.inventorySlots.find(slot => slot.slotName === inventorySlot.slotName) == undefined) {
+      this.inventorySlots.push(inventorySlot);
+    }
+  }
+
+  removeInventorySlot(removedInventorySlot: InventorySlot) {
+    this.inventorySlots = this.inventorySlots.filter(slot => removedInventorySlot.slotName !== slot.slotName);
+  }
+
+  addCombinedInventorySlot(combinedSlot: Tupel<InventorySlot, InventorySlot>) {
+    if(this.combinableInventorySlots.find(tupel => tupel.value00 === combinedSlot.value00 && tupel.value01 === combinedSlot.value01) != undefined) {
+      this.combinableInventorySlots.push(combinedSlot);
+    }
+  }
+
+  removeCombinedInventorySlot(combinedSlot: Tupel<InventorySlot, InventorySlot>) {
+    this.combinableInventorySlots = this.combinableInventorySlots.filter(slots => slots.value00 != combinedSlot.value00 && slots.value01 != combinedSlot.value01);
+  }
+
   addCharacterSpecificSimpleTemplatesystem(gamesystem: Gamesystem<any, any>, recursiveCall: boolean = false) {
     if(!this.isTemplateSystemCharacterSpecific(gamesystem.componentName)) {
       if(gamesystem instanceof SimpleTemplateGamesystem) {
@@ -65,9 +87,6 @@ export class Character extends ModelComponent implements TemplateElement {
         this.addAsymetricCharacterRelationGamesystem(gamesystem.parentGamesystem, true)
       }
 
-    } else {
-      console.log("Was already added")
-      console.log(this)
     }
   }
 
diff --git a/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts b/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts
new file mode 100644
index 0000000..04c8c85
--- /dev/null
+++ b/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts
@@ -0,0 +1,14 @@
+import {ItemGroupCharacteristic} from "../ItemgroupCharacteristic";
+
+export class InventoryCharacteristic {
+  increasingCharacteristic: ItemGroupCharacteristic
+  decreasingCharacteristic: ItemGroupCharacteristic
+
+
+  constructor(increasingCharacteristic: ItemGroupCharacteristic, decreasingCharacteristic: ItemGroupCharacteristic) {
+    this.increasingCharacteristic = increasingCharacteristic;
+    this.decreasingCharacteristic = decreasingCharacteristic;
+  }
+
+
+}
diff --git a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
new file mode 100644
index 0000000..05290ae
--- /dev/null
+++ b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
@@ -0,0 +1,16 @@
+import {ItemGroupCharacteristic} from "../ItemgroupCharacteristic";
+import {InventoryCharacteristic} from "./InventoryCharacteristic";
+import {ItemGroup} from "../ItemGroup";
+
+export class InventorySlot {
+  slotName: string
+  slotCharacteristics: InventoryCharacteristic[] = []
+  requiredInheritances: ItemGroup[] = [] //if empty: non reqierements
+
+
+  constructor(slotName: string) {
+    this.slotName = slotName;
+  }
+
+
+}

From 0e954f1b4827dff1b1a59e8ba552203e726572f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 09:32:57 +0200
Subject: [PATCH 02/13] Rename Inventoryslots

---
 .../inventory-slot-creator.component.html      |  2 +-
 .../inventory-slot-creator.component.scss      |  3 +++
 .../inventory-slot-creator.component.ts        | 18 +++++++++++++++---
 .../inventory-slot-editor.component.html       |  2 +-
 .../inventory-slot-editor.component.ts         |  9 +++++++++
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
index 3dd619f..f1f80a3 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Create Inventory Slot</h1>
+<h1 mat-dialog-title>{{data == undefined ? 'Create New Inventory Slot':'Rename Inventory Slot'}}</h1>
 <mat-dialog-content>
   <mat-form-field appearance="outline" class="long-form">
     <mat-label>Slot-Name</mat-label>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
index e69de29..4e80027 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
@@ -0,0 +1,3 @@
+.long-form {
+  width: 100%;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
index 1058c63..a2b75db 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
 import {FormControl, Validators} from "@angular/forms";
@@ -8,17 +8,29 @@ import {FormControl, Validators} from "@angular/forms";
   templateUrl: './inventory-slot-creator.component.html',
   styleUrl: './inventory-slot-creator.component.scss'
 })
-export class InventorySlotCreatorComponent {
+export class InventorySlotCreatorComponent implements OnInit{
 
   slotNameCtrl = new FormControl('', [Validators.required]);
 
   constructor(private dialogRef: MatDialogRef<InventorySlotCreatorComponent>,
               @Inject(MAT_DIALOG_DATA) public data: InventorySlot | undefined) {
+
   }
 
+  ngOnInit() {
+    if(this.data != undefined) {
+      this.slotNameCtrl.setValue(this.data.slotName);
+    }
+  }
 
   submit() {
-    this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
+    if(this.data != undefined) {
+      this.data.slotName = this.slotNameCtrl.value!;
+      this.dialogRef.close(this.data);
+    } else {
+      this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
+    }
+
   }
 
   cancel() {
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index 71a6528..7ec0516 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -4,7 +4,7 @@
       <mat-panel-title>{{slot.slotName}}</mat-panel-title>
     </mat-expansion-panel-header>
     <div class="panel-actions">
-      <button mat-raised-button color="primary">Edit</button>
+      <button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
       <button mat-raised-button color="warn">Delete</button>
     </div>
   </mat-expansion-panel>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
index c364410..d78ac36 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
@@ -29,4 +29,13 @@ export class InventorySlotEditorComponent {
       }
     })
   }
+
+  renameInventorySlot(inventorySlot: InventorySlot) {
+   this.dialog.open(InventorySlotCreatorComponent, {
+      minWidth: "400px",
+      data: inventorySlot
+    })
+  }
+
+  protected readonly indexedDB = indexedDB;
 }

From 19057fee939953062cb5193f618e6d2993aefed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 09:34:21 +0200
Subject: [PATCH 03/13] Delete InventorySlots

---
 .../inventory-slot-editor.component.html                      | 2 +-
 .../inventory-slot-editor/inventory-slot-editor.component.ts  | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index 7ec0516..d17d8d8 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -5,7 +5,7 @@
     </mat-expansion-panel-header>
     <div class="panel-actions">
       <button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
-      <button mat-raised-button color="warn">Delete</button>
+      <button mat-raised-button color="warn" (click)="deleteInventorySlot(slot)">Delete</button>
     </div>
   </mat-expansion-panel>
   <button mat-stroked-button class="add-btn" (click)="addInventorySlot()">Add Inventory-Slot</button>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
index d78ac36..3b33670 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
@@ -37,5 +37,7 @@ export class InventorySlotEditorComponent {
     })
   }
 
-  protected readonly indexedDB = indexedDB;
+  deleteInventorySlot(inventorySlot: InventorySlot) {
+    this.character!.removeInventorySlot(inventorySlot)
+  }
 }

From 4eb428277db392abea9a0fca8bb331684f742c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 09:55:34 +0200
Subject: [PATCH 04/13] Use Table Visualization for InventorySlots

---
 src/app/app.module.ts                         |  6 +-
 .../inventory-slot-creator.component.html     | 11 ---
 .../inventory-slot-creator.component.scss     |  3 -
 .../inventory-slot-creator.component.spec.ts  | 23 ------
 .../inventory-slot-creator.component.ts       | 39 ----------
 .../inventory-slot-editor.component.html      | 77 ++++++++++++++++---
 .../inventory-slot-editor.component.scss      | 53 +++++++++++++
 .../inventory-slot-editor.component.ts        | 54 ++++++++-----
 8 files changed, 153 insertions(+), 113 deletions(-)
 delete mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
 delete mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
 delete mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
 delete mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f756385..d623170 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -94,9 +94,6 @@ import {
 import {
   InventorySlotEditorComponent
 } from "./editor/character-editor/inventory-slot-editor/inventory-slot-editor.component";
-import {
-  InventorySlotCreatorComponent
-} from "./editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -127,8 +124,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ItemEditorComponent,
     ItemgroupInheritorComponent,
     InheritedItemCharacteristicEditorComponent,
-    InventorySlotEditorComponent,
-    InventorySlotCreatorComponent
+    InventorySlotEditorComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
deleted file mode 100644
index f1f80a3..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<h1 mat-dialog-title>{{data == undefined ? 'Create New Inventory Slot':'Rename Inventory Slot'}}</h1>
-<mat-dialog-content>
-  <mat-form-field appearance="outline" class="long-form">
-    <mat-label>Slot-Name</mat-label>
-    <input matInput [formControl]="slotNameCtrl">
-  </mat-form-field>
-</mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-raised-button (click)="cancel()">Cancel</button>
-  <button mat-raised-button [disabled]="slotNameCtrl.invalid" (click)="submit()">Submit</button>
-</mat-dialog-actions>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
deleted file mode 100644
index 4e80027..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.long-form {
-  width: 100%;
-}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
deleted file mode 100644
index c8771c8..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InventorySlotCreatorComponent } from './inventory-slot-creator.component';
-
-describe('InventorySlotCreatorComponent', () => {
-  let component: InventorySlotCreatorComponent;
-  let fixture: ComponentFixture<InventorySlotCreatorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InventorySlotCreatorComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(InventorySlotCreatorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
deleted file mode 100644
index a2b75db..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
-import {FormControl, Validators} from "@angular/forms";
-
-@Component({
-  selector: 'app-inventory-slot-creator',
-  templateUrl: './inventory-slot-creator.component.html',
-  styleUrl: './inventory-slot-creator.component.scss'
-})
-export class InventorySlotCreatorComponent implements OnInit{
-
-  slotNameCtrl = new FormControl('', [Validators.required]);
-
-  constructor(private dialogRef: MatDialogRef<InventorySlotCreatorComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: InventorySlot | undefined) {
-
-  }
-
-  ngOnInit() {
-    if(this.data != undefined) {
-      this.slotNameCtrl.setValue(this.data.slotName);
-    }
-  }
-
-  submit() {
-    if(this.data != undefined) {
-      this.data.slotName = this.slotNameCtrl.value!;
-      this.dialogRef.close(this.data);
-    } else {
-      this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
-    }
-
-  }
-
-  cancel() {
-    this.dialogRef.close()
-  }
-}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index d17d8d8..b35cc1f 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -1,12 +1,65 @@
-<mat-accordion>
-  <mat-expansion-panel *ngFor="let slot of character!.inventorySlots">
-    <mat-expansion-panel-header>
-      <mat-panel-title>{{slot.slotName}}</mat-panel-title>
-    </mat-expansion-panel-header>
-    <div class="panel-actions">
-      <button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
-      <button mat-raised-button color="warn" (click)="deleteInventorySlot(slot)">Delete</button>
-    </div>
-  </mat-expansion-panel>
-  <button mat-stroked-button class="add-btn" (click)="addInventorySlot()">Add Inventory-Slot</button>
-</mat-accordion>
+<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Slot Name</th>
+    <td mat-cell *matCellDef="let slot">
+      <span *ngIf="slot !== editedSlot">
+        {{slot.slotName}}
+      </span>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="slot === editedSlot">
+        <mat-label>Slot Name</mat-label>
+        <input matInput [(ngModel)]="slot.slotName">
+      </mat-form-field>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let slot">
+      <button mat-icon-button (click)="editInventorySlot(slot)" *ngIf="editedSlot !== slot" [disabled]="editedSlot != null"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button (click)="finishEditing()" *ngIf="editedSlot === slot"><mat-icon>done</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let slot">
+      <button mat-icon-button (click)="deleteInventorySlot(slot)" color="warn"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="expand">
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+      <button mat-icon-button (click)="addInventorySlot()"><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button aria-label="expand row" (click)="(expandedSlot = expandedSlot === element ? null : element); $event.stopPropagation()">
+        @if (expandedSlot === element) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+      <div class="example-element-detail"
+           [@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
+
+        <div class="example-element-description">
+          Something
+
+        </div>
+      </div>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedSlot === element"
+      (click)="expandedSlot = expandedSlot === element ? null : element">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+</table>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
index bbb5df8..f12bdfb 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
@@ -4,3 +4,56 @@
 .add-btn {
   width: 100%;
 }
+
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #545456;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #4e5157;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.example-element-diagram {
+  min-width: 80px;
+  border: 2px solid black;
+  padding: 8px;
+  font-weight: lighter;
+  margin: 8px 0;
+  height: 104px;
+}
+
+.example-element-symbol {
+  font-weight: bold;
+  font-size: 40px;
+  line-height: normal;
+}
+
+.example-element-description {
+  padding: 16px;
+}
+
+.example-element-description-attribution {
+  opacity: 0.5;
+}
+
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
+  width: 32px;
+  align-content: center;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
index 3b33670..5e8f9c8 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
@@ -1,43 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {Character} from "../../../project/game-model/characters/Character";
 import {ItemGroup} from "../../../project/game-model/inventory/ItemGroup";
 import {InventorySlot} from "../../../project/game-model/inventory/intentory-slots/InventorySlot";
 import {MatDialog} from "@angular/material/dialog";
-import {InventorySlotCreatorComponent} from "./inventory-slot-creator/inventory-slot-creator.component";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {MatTableDataSource} from "@angular/material/table";
 
 @Component({
   selector: 'app-inventory-slot-editor',
   templateUrl: './inventory-slot-editor.component.html',
-  styleUrl: './inventory-slot-editor.component.scss'
+  styleUrl: './inventory-slot-editor.component.scss',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({height: '0px', minHeight: '0'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
-export class InventorySlotEditorComponent {
+export class InventorySlotEditorComponent implements OnInit{
 
   @Input() character: Character | undefined
   @Input() itemgroups: ItemGroup[] = []
+  displayedColumns: string[] = ['name', 'edit', 'delete']
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+  dataSource: MatTableDataSource<InventorySlot> = new MatTableDataSource<InventorySlot>();
+
+  expandedSlot: InventorySlot | null = null
+  editedSlot: InventorySlot | null = null
 
   constructor(private dialog: MatDialog)  {
   }
 
-  addInventorySlot() {
-    const dialogRef = this.dialog.open(InventorySlotCreatorComponent, {
-      minWidth: "400px"
-    })
-
-    dialogRef.afterClosed().subscribe(res => {
-      if(res != undefined) {
-        this.character!.inventorySlots.push(res)
-      }
-    })
+  ngOnInit() {
+    this.dataSource.data = this.character!.inventorySlots;
   }
 
-  renameInventorySlot(inventorySlot: InventorySlot) {
-   this.dialog.open(InventorySlotCreatorComponent, {
-      minWidth: "400px",
-      data: inventorySlot
-    })
+  addInventorySlot() {
+    this.editedSlot = new InventorySlot("New Inventory Slot");
+    this.character!.addInventorySlot(this.editedSlot);
+    this.dataSource.data = this.character!.inventorySlots;
+  }
+
+  editInventorySlot(inventorySlot: InventorySlot) {
+    this.editedSlot = inventorySlot
   }
 
   deleteInventorySlot(inventorySlot: InventorySlot) {
-    this.character!.removeInventorySlot(inventorySlot)
+    this.character!.removeInventorySlot(inventorySlot);
+    this.dataSource.data = this.character!.inventorySlots;
+  }
+
+  finishEditing() {
+    this.editedSlot = null;
   }
 }

From 99454753a6e562e4155277e3429ce378f552846e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 10:54:52 +0200
Subject: [PATCH 05/13] Visualize ItemSlotCharacteristics and add new ones

---
 src/app/app.module.ts                         | 15 +++++-
 .../characteristic-selector.component.html    | 12 +++++
 .../characteristic-selector.component.scss    |  0
 .../characteristic-selector.component.spec.ts | 23 +++++++++
 .../characteristic-selector.component.ts      | 46 +++++++++++++++++
 ...-slot-characteristic-editor.component.html | 44 ++++++++++++++++
 ...-slot-characteristic-editor.component.scss |  9 ++++
 ...ot-characteristic-editor.component.spec.ts | 23 +++++++++
 ...ry-slot-characteristic-editor.component.ts | 51 +++++++++++++++++++
 .../inventory-slot-editor.component.html      |  5 +-
 .../inventory-slot-editor.component.scss      |  1 -
 .../InventoryCharacteristic.ts                | 10 ++--
 .../intentory-slots/InventorySlot.ts          |  9 +++-
 13 files changed, 236 insertions(+), 12 deletions(-)
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.scss
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.spec.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.scss
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.spec.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d623170..87991f4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -94,6 +94,13 @@ import {
 import {
   InventorySlotEditorComponent
 } from "./editor/character-editor/inventory-slot-editor/inventory-slot-editor.component";
+import {
+  InventorySlotCharacteristicEditorComponent
+} from "./editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component";
+import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
+import {
+  CharacteristicSelectorComponent
+} from "./editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -124,7 +131,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ItemEditorComponent,
     ItemgroupInheritorComponent,
     InheritedItemCharacteristicEditorComponent,
-    InventorySlotEditorComponent
+    InventorySlotEditorComponent,
+    InventorySlotCharacteristicEditorComponent,
+    CharacteristicSelectorComponent
   ],
   imports: [
     BrowserModule,
@@ -188,7 +197,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelTitle,
     MatCardTitle,
     MatExpansionPanelHeader,
-    MatExpansionPanelDescription
+    MatExpansionPanelDescription,
+    MatAutocomplete,
+    MatAutocompleteTrigger
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html
new file mode 100644
index 0000000..b0f99f4
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html
@@ -0,0 +1,12 @@
+<mat-form-field class="example-full-width">
+  <mat-label>Number</mat-label>
+  <input matInput
+         aria-label="State"
+         [matAutocomplete]="auto"
+         [formControl]="myControl">
+  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected()">
+    @for (option of filteredOptions | async; track option) {
+      <mat-option [value]="option.characteristicName">{{option.characteristicName}}</mat-option>
+    }
+  </mat-autocomplete>
+</mat-form-field>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.spec.ts
new file mode 100644
index 0000000..9735d95
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharacteristicSelectorComponent } from './characteristic-selector.component';
+
+describe('CharacteristicSelectorComponent', () => {
+  let component: CharacteristicSelectorComponent;
+  let fixture: ComponentFixture<CharacteristicSelectorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CharacteristicSelectorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CharacteristicSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.ts
new file mode 100644
index 0000000..a04c507
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.ts
@@ -0,0 +1,46 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {AsyncPipe} from "@angular/common";
+import {FormControl, FormsModule} from "@angular/forms";
+import {MatAutocomplete, MatOption} from "@angular/material/autocomplete";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {map, Observable, startWith} from "rxjs";
+import {ItemGroupCharacteristic} from "../../../../../project/game-model/inventory/ItemgroupCharacteristic";
+
+@Component({
+  selector: 'app-characteristic-selector',
+  templateUrl: './characteristic-selector.component.html',
+  styleUrl: './characteristic-selector.component.scss'
+})
+export class CharacteristicSelectorComponent implements OnInit{
+  myControl = new FormControl('');
+  @Input() options: ItemGroupCharacteristic[] = []
+  @Input() selectedInput: ItemGroupCharacteristic | undefined
+  filteredOptions: Observable<ItemGroupCharacteristic[]>;
+
+  @Output('onSelectOption') selectedOptionEmitter: EventEmitter<ItemGroupCharacteristic> = new EventEmitter<ItemGroupCharacteristic>();
+
+  constructor() {
+    this.filteredOptions = this.myControl.valueChanges.pipe(
+      startWith(''),
+      map(state => (state ? this._filterStates(state) : this.options.slice())),
+    );
+  }
+
+  ngOnInit() {
+    if(this.selectedInput != undefined) {
+      this.myControl.setValue(this.selectedInput.characteristicName);
+    }
+  }
+
+  private _filterStates(value: any): ItemGroupCharacteristic[] {
+    const filterValue = value.toLowerCase();
+
+    return this.options.filter(state => state.characteristicName.toLowerCase().includes(filterValue));
+  }
+
+  onOptionSelected() {
+    const selectedOption = this.options.find(characteristic => characteristic.characteristicName.toLowerCase() === this.myControl.value!.toLowerCase());
+    this.selectedOptionEmitter.emit(selectedOption!)
+  }
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
new file mode 100644
index 0000000..556ad7e
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
@@ -0,0 +1,44 @@
+<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+  <ng-container matColumnDef="increasing">
+    <th mat-header-cell *matHeaderCellDef>Increasing Characteristic</th>
+    <td mat-cell *matCellDef="let slotCharacteristic">
+      <span *ngIf="editedCharacteristic !== slotCharacteristic">{{slotCharacteristic.increasingCharacteristic.characteristicName}}</span>
+      <app-characteristic-selector *ngIf="editedCharacteristic === slotCharacteristic"
+                                   [options]="availableCharacteristics"
+                                   [selectedInput]="slotCharacteristic.increasingCharacteristic"
+                                   (onSelectOption)="onSelectIncreasingCharacteristic($event, slotCharacteristic)">
+
+      </app-characteristic-selector>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="decreasing">
+    <th mat-header-cell *matHeaderCellDef>Decreasing Characteristic</th>
+    <td mat-cell *matCellDef="let slotCharacteristic">
+      <span *ngIf="editedCharacteristic !== slotCharacteristic">{{slotCharacteristic.increasingCharacteristic.characteristicName}}</span>
+      <app-characteristic-selector *ngIf="editedCharacteristic === slotCharacteristic"
+                                   [options]="availableCharacteristics"
+                                   [selectedInput]="slotCharacteristic.decreasingCharacteristic"
+                                   (onSelectOption)="onSelectDecreasingCharacteristic($event, slotCharacteristic)">
+      </app-characteristic-selector>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let slotCharacteristic">
+      <button mat-icon-button (click)="finishEditing()" *ngIf="editedCharacteristic === slotCharacteristic"><mat-icon>done</mat-icon></button>
+      <button mat-icon-button *ngIf="editedCharacteristic !== slotCharacteristic" [disabled]="editedCharacteristic != null"><mat-icon>edit</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef>
+      <button mat-icon-button (click)="addInventorySlotCharacteristic()"><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let slotCharacteristic">
+      <button mat-icon-button color="warn"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.scss
new file mode 100644
index 0000000..7b288e0
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.scss
@@ -0,0 +1,9 @@
+.table {
+  width: 100%;
+}
+
+
+.mat-column-edit, .mat-column-delete {
+  width: 32px;
+  align-content: center;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.spec.ts
new file mode 100644
index 0000000..f5ddc62
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventorySlotCharacteristicEditorComponent } from './inventory-slot-characteristic-editor.component';
+
+describe('InventorySlotCharacteristicEditorComponent', () => {
+  let component: InventorySlotCharacteristicEditorComponent;
+  let fixture: ComponentFixture<InventorySlotCharacteristicEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InventorySlotCharacteristicEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InventorySlotCharacteristicEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
new file mode 100644
index 0000000..93332da
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
@@ -0,0 +1,51 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
+import {ItemGroupCharacteristic} from "../../../../project/game-model/inventory/ItemgroupCharacteristic";
+import {ItemGroup} from "../../../../project/game-model/inventory/ItemGroup";
+import {MatTable, MatTableDataSource} from "@angular/material/table";
+import {
+  InventoryCharacteristic
+} from "../../../../project/game-model/inventory/intentory-slots/InventoryCharacteristic";
+
+@Component({
+  selector: 'app-inventory-slot-characteristic-editor',
+  templateUrl: './inventory-slot-characteristic-editor.component.html',
+  styleUrl: './inventory-slot-characteristic-editor.component.scss'
+})
+export class InventorySlotCharacteristicEditorComponent implements OnInit{
+
+  @Input() inventorySlot: InventorySlot | undefined
+  @Input() itemgroups: ItemGroup[] = []
+
+  availableCharacteristics: ItemGroupCharacteristic[] = []
+
+  datasource: MatTableDataSource<InventoryCharacteristic> = new MatTableDataSource<InventoryCharacteristic>();
+  displayedColumns: string[] = ['increasing', 'decreasing', 'edit', 'delete']
+  editedCharacteristic: InventoryCharacteristic | null = null;
+
+  ngOnInit() {
+    this.itemgroups.forEach(itemgroup => {
+      this.availableCharacteristics = this.availableCharacteristics.concat(itemgroup.itemGroupCharacteristics);
+    })
+    this.datasource.data = this.inventorySlot!.slotCharacteristics;
+  }
+
+  addInventorySlotCharacteristic() {
+    const slotCharacteristic = new InventoryCharacteristic(null, null);
+    this.inventorySlot!.addSlotCharacteristic(slotCharacteristic);
+    this.datasource.data = this.inventorySlot!.slotCharacteristics;
+    this.editedCharacteristic = slotCharacteristic;
+  }
+
+  finishEditing() {
+    this.editedCharacteristic = null;
+  }
+
+  onSelectIncreasingCharacteristic(selectedCharacteristic: ItemGroupCharacteristic, slotCharacteristic: InventoryCharacteristic) {
+    slotCharacteristic.increasingCharacteristic = selectedCharacteristic;
+  }
+
+  onSelectDecreasingCharacteristic(selectedCharacteristic: ItemGroupCharacteristic, slotCharacteristic: InventoryCharacteristic) {
+    slotCharacteristic.decreasingCharacteristic = selectedCharacteristic;
+  }
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index b35cc1f..14772d0 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -47,10 +47,7 @@
       <div class="example-element-detail"
            [@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
 
-        <div class="example-element-description">
-          Something
-
-        </div>
+        <app-inventory-slot-characteristic-editor [inventorySlot]="element" [itemgroups]="itemgroups"></app-inventory-slot-characteristic-editor>
       </div>
     </td>
   </ng-container>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
index f12bdfb..f8ae030 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
@@ -27,7 +27,6 @@ tr.example-element-row:not(.example-expanded-row):active {
 
 .example-element-detail {
   overflow: hidden;
-  display: flex;
 }
 
 .example-element-diagram {
diff --git a/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts b/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts
index 04c8c85..fbfb650 100644
--- a/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts
+++ b/src/app/project/game-model/inventory/intentory-slots/InventoryCharacteristic.ts
@@ -1,14 +1,16 @@
 import {ItemGroupCharacteristic} from "../ItemgroupCharacteristic";
 
 export class InventoryCharacteristic {
-  increasingCharacteristic: ItemGroupCharacteristic
-  decreasingCharacteristic: ItemGroupCharacteristic
+  increasingCharacteristic: ItemGroupCharacteristic | null
+  decreasingCharacteristic: ItemGroupCharacteristic | null
 
 
-  constructor(increasingCharacteristic: ItemGroupCharacteristic, decreasingCharacteristic: ItemGroupCharacteristic) {
+  constructor(increasingCharacteristic: ItemGroupCharacteristic | null, decreasingCharacteristic: ItemGroupCharacteristic | null) {
     this.increasingCharacteristic = increasingCharacteristic;
     this.decreasingCharacteristic = decreasingCharacteristic;
   }
 
-
+  isValid() {
+    return this.increasingCharacteristic != null && this.decreasingCharacteristic != null;
+  }
 }
diff --git a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
index 05290ae..a8dd304 100644
--- a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
+++ b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
@@ -3,6 +3,7 @@ import {InventoryCharacteristic} from "./InventoryCharacteristic";
 import {ItemGroup} from "../ItemGroup";
 
 export class InventorySlot {
+
   slotName: string
   slotCharacteristics: InventoryCharacteristic[] = []
   requiredInheritances: ItemGroup[] = [] //if empty: non reqierements
@@ -12,5 +13,11 @@ export class InventorySlot {
     this.slotName = slotName;
   }
 
-
+  addSlotCharacteristic(slotCharacteristic: InventoryCharacteristic) {
+    const found = this.slotCharacteristics.find(characteristiic => characteristiic.increasingCharacteristic === slotCharacteristic.increasingCharacteristic
+      && characteristiic.decreasingCharacteristic === slotCharacteristic.decreasingCharacteristic)
+    if(found == undefined) {
+      this.slotCharacteristics.push(slotCharacteristic);
+    }
+  }
 }

From e53d718c1762e85d04e2c1081b18ac1a658469be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 10:56:17 +0200
Subject: [PATCH 06/13] Edit ItemSlotCharacteristics

---
 .../characteristic-selector.component.html                    | 2 +-
 .../inventory-slot-characteristic-editor.component.html       | 3 ++-
 .../inventory-slot-characteristic-editor.component.ts         | 4 ++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html
index b0f99f4..dc87110 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component.html
@@ -1,5 +1,5 @@
 <mat-form-field class="example-full-width">
-  <mat-label>Number</mat-label>
+  <mat-label>Item Characteristic</mat-label>
   <input matInput
          aria-label="State"
          [matAutocomplete]="auto"
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
index 556ad7e..b5d3f27 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
@@ -26,7 +26,8 @@
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let slotCharacteristic">
       <button mat-icon-button (click)="finishEditing()" *ngIf="editedCharacteristic === slotCharacteristic"><mat-icon>done</mat-icon></button>
-      <button mat-icon-button *ngIf="editedCharacteristic !== slotCharacteristic" [disabled]="editedCharacteristic != null"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button *ngIf="editedCharacteristic !== slotCharacteristic" [disabled]="editedCharacteristic != null"
+              (click)="editSlotCharacteristic(slotCharacteristic)"><mat-icon>edit</mat-icon></button>
     </td>
   </ng-container>
 
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
index 93332da..12ed5b4 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
@@ -48,4 +48,8 @@ export class InventorySlotCharacteristicEditorComponent implements OnInit{
   onSelectDecreasingCharacteristic(selectedCharacteristic: ItemGroupCharacteristic, slotCharacteristic: InventoryCharacteristic) {
     slotCharacteristic.decreasingCharacteristic = selectedCharacteristic;
   }
+
+  editSlotCharacteristic(slotCharacteristic: InventoryCharacteristic) {
+    this.editedCharacteristic = slotCharacteristic;
+  }
 }

From bd243fc0803483b77805b2138a039bf029a0f8d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 11:02:37 +0200
Subject: [PATCH 07/13] Validate SlotCharacteristic before finish Editing

---
 .../inventory-slot-characteristic-editor.component.ts  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
index 12ed5b4..ce6640e 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
@@ -6,6 +6,7 @@ import {MatTable, MatTableDataSource} from "@angular/material/table";
 import {
   InventoryCharacteristic
 } from "../../../../project/game-model/inventory/intentory-slots/InventoryCharacteristic";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-inventory-slot-characteristic-editor',
@@ -23,6 +24,9 @@ export class InventorySlotCharacteristicEditorComponent implements OnInit{
   displayedColumns: string[] = ['increasing', 'decreasing', 'edit', 'delete']
   editedCharacteristic: InventoryCharacteristic | null = null;
 
+  constructor(private snackbar: MatSnackBar) {
+  }
+
   ngOnInit() {
     this.itemgroups.forEach(itemgroup => {
       this.availableCharacteristics = this.availableCharacteristics.concat(itemgroup.itemGroupCharacteristics);
@@ -38,7 +42,11 @@ export class InventorySlotCharacteristicEditorComponent implements OnInit{
   }
 
   finishEditing() {
-    this.editedCharacteristic = null;
+    if(this.editedCharacteristic != null && this.editedCharacteristic.isValid()) {
+      this.editedCharacteristic = null;
+    } else if(this.editedCharacteristic != null) {
+      this.snackbar.open("Please select a valid increasing and decreasing Characterstic", "", {duration: 2000});
+    }
   }
 
   onSelectIncreasingCharacteristic(selectedCharacteristic: ItemGroupCharacteristic, slotCharacteristic: InventoryCharacteristic) {

From 1469f2e509ad872646ed2026d005a57fd8319f0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 11:05:00 +0200
Subject: [PATCH 08/13] Delete SlotCharacteristics from InventorySlot

---
 .../inventory-slot-characteristic-editor.component.html      | 2 +-
 .../inventory-slot-characteristic-editor.component.ts        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
index b5d3f27..9a6486d 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.html
@@ -36,7 +36,7 @@
       <button mat-icon-button (click)="addInventorySlotCharacteristic()"><mat-icon>add</mat-icon></button>
     </th>
     <td mat-cell *matCellDef="let slotCharacteristic">
-      <button mat-icon-button color="warn"><mat-icon>delete</mat-icon></button>
+      <button mat-icon-button color="warn" (click)="deleteSlotCharacteristic(slotCharacteristic)"><mat-icon>delete</mat-icon></button>
     </td>
   </ng-container>
 
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
index ce6640e..d0d3c1a 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
@@ -60,4 +60,9 @@ export class InventorySlotCharacteristicEditorComponent implements OnInit{
   editSlotCharacteristic(slotCharacteristic: InventoryCharacteristic) {
     this.editedCharacteristic = slotCharacteristic;
   }
+
+  deleteSlotCharacteristic(slotCharacteristic: InventoryCharacteristic) {
+    this.inventorySlot!.slotCharacteristics = this.inventorySlot!.slotCharacteristics.filter(characteristic => characteristic !== slotCharacteristic);
+    this.datasource.data = this.inventorySlot!.slotCharacteristics;
+  }
 }

From b70aee9004e0ffc2c78ceaa5b4a03a893f743706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 11:08:19 +0200
Subject: [PATCH 09/13] Deduplicate of available Characteristics

---
 .../inventory-slot-characteristic-editor.component.ts       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
index d0d3c1a..0d21b41 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/inventory-slot-characteristic-editor.component.ts
@@ -29,7 +29,11 @@ export class InventorySlotCharacteristicEditorComponent implements OnInit{
 
   ngOnInit() {
     this.itemgroups.forEach(itemgroup => {
-      this.availableCharacteristics = this.availableCharacteristics.concat(itemgroup.itemGroupCharacteristics);
+      itemgroup.itemGroupCharacteristics.forEach(characteristic => {
+        if(!this.availableCharacteristics.includes(characteristic)) {
+          this.availableCharacteristics.push(characteristic)
+        }
+      })
     })
     this.datasource.data = this.inventorySlot!.slotCharacteristics;
   }

From bc523029fccd013a817e22729c3a5817c8570a05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 11:38:02 +0200
Subject: [PATCH 10/13] Specify Requiered Itemgroups for Itemslot

---
 src/app/app.module.ts                         | 15 ++++--
 .../inventory-slot-editor.component.html      |  1 +
 ...uiered-inheritances-creator.component.html | 13 +++++
 ...uiered-inheritances-creator.component.scss |  0
 ...red-inheritances-creator.component.spec.ts | 23 +++++++++
 ...equiered-inheritances-creator.component.ts | 28 +++++++++++
 ...quiered-inheritances-editor.component.html | 25 ++++++++++
 ...quiered-inheritances-editor.component.scss |  3 ++
 ...ered-inheritances-editor.component.spec.ts | 23 +++++++++
 ...requiered-inheritances-editor.component.ts | 49 +++++++++++++++++++
 .../intentory-slots/InventorySlot.ts          | 10 ++++
 11 files changed, 187 insertions(+), 3 deletions(-)
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.html
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.scss
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.spec.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.html
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.scss
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.spec.ts
 create mode 100644 src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 87991f4..7daa0e0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -43,7 +43,7 @@ import {
   MatColumnDef,
   MatHeaderCell,
   MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef,
   MatTable
 } from "@angular/material/table";
 import {MatCheckbox} from "@angular/material/checkbox";
@@ -101,6 +101,12 @@ import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocom
 import {
   CharacteristicSelectorComponent
 } from "./editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component";
+import {
+  RequieredInheritancesEditorComponent
+} from "./editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component";
+import {
+  RequieredInheritancesCreatorComponent
+} from "./editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -133,7 +139,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     InheritedItemCharacteristicEditorComponent,
     InventorySlotEditorComponent,
     InventorySlotCharacteristicEditorComponent,
-    CharacteristicSelectorComponent
+    CharacteristicSelectorComponent,
+    RequieredInheritancesEditorComponent,
+    RequieredInheritancesCreatorComponent
   ],
   imports: [
     BrowserModule,
@@ -199,7 +207,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelHeader,
     MatExpansionPanelDescription,
     MatAutocomplete,
-    MatAutocompleteTrigger
+    MatAutocompleteTrigger,
+    MatNoDataRow
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index 14772d0..9a715ec 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -48,6 +48,7 @@
            [@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
 
         <app-inventory-slot-characteristic-editor [inventorySlot]="element" [itemgroups]="itemgroups"></app-inventory-slot-characteristic-editor>
+        <app-requiered-inheritances-editor [inventorySlot]="element" [itemgroups]="itemgroups"></app-requiered-inheritances-editor>
       </div>
     </td>
   </ng-container>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.html b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.html
new file mode 100644
index 0000000..191b7b9
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.html
@@ -0,0 +1,13 @@
+<h1 matDialogTitle>Add Itemgroup Requierement</h1>
+<mat-dialog-content>
+  <mat-form-field appearance="outline" class="long-form">
+    <mat-label>Select Itemgroup as Requierement</mat-label>
+    <mat-select [formControl]="selectorCtrl">
+      <mat-option *ngFor="let option of itemgroups" [value]="option">{{option.componentName}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-raised-button (click)="cancel()">Cancel</button>
+  <button mat-raised-button color="primary" (click)="submit()" [disabled]="selectorCtrl.invalid">Submit</button>
+</mat-dialog-actions>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.scss b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.spec.ts
new file mode 100644
index 0000000..269a5ac
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequieredInheritancesCreatorComponent } from './requiered-inheritances-creator.component';
+
+describe('RequieredInheritancesCreatorComponent', () => {
+  let component: RequieredInheritancesCreatorComponent;
+  let fixture: ComponentFixture<RequieredInheritancesCreatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RequieredInheritancesCreatorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(RequieredInheritancesCreatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.ts b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.ts
new file mode 100644
index 0000000..498d983
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.ts
@@ -0,0 +1,28 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ItemGroup} from "../../../../../project/game-model/inventory/ItemGroup";
+import {FormControl, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-requiered-inheritances-creator',
+  templateUrl: './requiered-inheritances-creator.component.html',
+  styleUrl: './requiered-inheritances-creator.component.scss'
+})
+export class RequieredInheritancesCreatorComponent {
+
+  selectorCtrl = new FormControl('', Validators.required)
+
+  constructor(@Inject(MAT_DIALOG_DATA) public itemgroups: ItemGroup[],
+              private dialogRef: MatDialogRef<RequieredInheritancesCreatorComponent>) {
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  submit() {
+    if(this.selectorCtrl.value != undefined) {
+      this.dialogRef.close(this.selectorCtrl.value);
+    }
+  }
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.html
new file mode 100644
index 0000000..5b724d2
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.html
@@ -0,0 +1,25 @@
+<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+  <ng-container matColumnDef="itemgroupName">
+    <th mat-header-cell *matHeaderCellDef>Itemgroup Name</th>
+    <td mat-cell *matCellDef="let requieredInheritence">{{requieredInheritence.componentName}}</td>
+  </ng-container>
+  <ng-container matColumnDef="itemgroupDescription">
+    <th mat-header-cell *matHeaderCellDef>Itemgroup Description</th>
+    <td mat-cell *matCellDef="let requieredInheritence">{{requieredInheritence.componentDescription}}</td>
+  </ng-container>
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef>
+      <button mat-icon-button (click)="addInheritance()"><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let requieredInheritence">
+      <button mat-icon-button color="warn" (click)="deleteRequieredInheritence(requieredInheritence)"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+  <tr class="mat-row" *matNoDataRow>
+    <td class="mat-cell" colspan="4">No reqiered Inheritence: Items of all Itemgroups can be added</td>
+  </tr>
+</table>
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.scss
new file mode 100644
index 0000000..d8646c5
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.scss
@@ -0,0 +1,3 @@
+.mat-column-delete {
+  width: 32px;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.spec.ts
new file mode 100644
index 0000000..f98066b
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequieredInheritancesEditorComponent } from './requiered-inheritances-editor.component';
+
+describe('RequieredInheritancesEditorComponent', () => {
+  let component: RequieredInheritancesEditorComponent;
+  let fixture: ComponentFixture<RequieredInheritancesEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RequieredInheritancesEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(RequieredInheritancesEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.ts
new file mode 100644
index 0000000..ced9f17
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.ts
@@ -0,0 +1,49 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
+import {ItemGroup} from "../../../../project/game-model/inventory/ItemGroup";
+import {MatTableDataSource} from "@angular/material/table";
+import {MatDialog} from "@angular/material/dialog";
+import {
+  RequieredInheritancesCreatorComponent
+} from "./requiered-inheritances-creator/requiered-inheritances-creator.component";
+
+@Component({
+  selector: 'app-requiered-inheritances-editor',
+  templateUrl: './requiered-inheritances-editor.component.html',
+  styleUrl: './requiered-inheritances-editor.component.scss'
+})
+export class RequieredInheritancesEditorComponent implements OnInit{
+
+  @Input() inventorySlot: InventorySlot | undefined
+  @Input() itemgroups: ItemGroup[] = []
+
+  datasource: MatTableDataSource<ItemGroup> = new MatTableDataSource<ItemGroup>();
+  displayedColumns: string[] = ['itemgroupName', 'itemgroupDescription', 'delete']
+
+  constructor(private dialog: MatDialog) {
+  }
+
+  ngOnInit() {
+    this.datasource.data = this.inventorySlot!.requiredInheritances;
+  }
+
+  addInheritance() {
+    const dialogRef = this.dialog.open(RequieredInheritancesCreatorComponent, {
+      data: this.itemgroups,
+      width: "400px"
+    })
+
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != undefined) {
+        console.log("Added")
+        this.inventorySlot!.addRequieredInheritence(res);
+        this.datasource.data = this.inventorySlot!.requiredInheritances;
+      }
+    })
+  }
+
+  deleteRequieredInheritence(requieredInheritence: ItemGroup) {
+    this.inventorySlot!.removeRequieredInheritence(requieredInheritence)
+    this.datasource.data = this.inventorySlot!.requiredInheritances;
+  }
+}
diff --git a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
index a8dd304..c7657f6 100644
--- a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
+++ b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
@@ -20,4 +20,14 @@ export class InventorySlot {
       this.slotCharacteristics.push(slotCharacteristic);
     }
   }
+
+  addRequieredInheritence(itemgroup: ItemGroup) {
+    if(this.requiredInheritances.find(group => group.componentName === itemgroup.componentName) == undefined) {
+      this.requiredInheritances.push(itemgroup);
+    }
+  }
+
+  removeRequieredInheritence(itemgroup: ItemGroup) {
+    this.requiredInheritances = this.requiredInheritances.filter(group => group.componentName !== itemgroup.componentName)
+  }
 }

From 86097a898ab7bc360211ef541062c40fe81fdf91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 14:52:40 +0200
Subject: [PATCH 11/13] Persist Character Inventory Slots

---
 .../project/serializer/CharacterSerializer.ts | 12 ++++++----
 .../serializer/InventorySlotSerializer.ts     | 23 +++++++++++++++++++
 testModel/characters/Astrid Hofferson.json    |  4 +++-
 testModel/characters/Hicks Haddock.json       | 17 +++++++++++++-
 4 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 src/app/project/serializer/InventorySlotSerializer.ts

diff --git a/src/app/project/serializer/CharacterSerializer.ts b/src/app/project/serializer/CharacterSerializer.ts
index 56dcff2..e1021e2 100644
--- a/src/app/project/serializer/CharacterSerializer.ts
+++ b/src/app/project/serializer/CharacterSerializer.ts
@@ -4,6 +4,8 @@ import {SerializeConstants} from "./SerializeConstants";
 import {ModelComponentType} from "../game-model/ModelComponentType";
 import {SimpleTemplateGamesystem} from "../game-model/templates/simpleGamesystem/SimpleTemplateGamesystem";
 import {Gamesystem} from "../game-model/gamesystems/Gamesystem";
+import {ItemGroup} from "../game-model/inventory/ItemGroup";
+import {InventorySlotSerializer} from "./InventorySlotSerializer";
 
 export class CharacterSerializer {
 
@@ -19,7 +21,6 @@ export class CharacterSerializer {
     const fileName = character.componentName
     const templateGamesystemBackup = character.characterSpecificTemplateSystems.concat();
     character.characterSpecificTemplateSystems = character.characterSpecificTemplateSystems.filter(system => system instanceof SimpleTemplateGamesystem)
-    console.log("Templatesystem: ", character.characterSpecificTemplateSystems)
     const jsonString = JSON.stringify(character, (key, value) => {
       if(value instanceof Gamesystem) {
         return {
@@ -29,14 +30,15 @@ export class CharacterSerializer {
         }
       }
 
+      if(key == 'inventorySlots') {
+        return InventorySlotSerializer.serializeInventorySlots(value)
+      }
+
       if(key === 'scriptAccount') {
         return value.componentName
       }
 
       if(key === 'conditionMap' || key === 'actionMap' || key === 'initialMap') {
-        if(key === 'initialMap') {
-          console.log(value)
-        }
         if(value.get(character) == undefined) {
           return []
         }
@@ -54,6 +56,8 @@ export class CharacterSerializer {
       }
     }, SerializeConstants.JSON_INDENT)
 
+    console.log(jsonString)
+
     character.characterSpecificTemplateSystems = templateGamesystemBackup
     return new StoreComponent(jsonString, fileName, ModelComponentType.CHARACTER);
   }
diff --git a/src/app/project/serializer/InventorySlotSerializer.ts b/src/app/project/serializer/InventorySlotSerializer.ts
new file mode 100644
index 0000000..ae6a6a2
--- /dev/null
+++ b/src/app/project/serializer/InventorySlotSerializer.ts
@@ -0,0 +1,23 @@
+import {InventorySlot} from "../game-model/inventory/intentory-slots/InventorySlot";
+
+export class InventorySlotSerializer {
+
+  private static  ignoredKeys: string[] = ['']
+
+  public static serializeInventorySlots(inventorySlots: InventorySlot[]) {
+    return inventorySlots.map(inventorySlot => {
+      return {
+        slotName: inventorySlot.slotName,
+        slotCharacteristics: inventorySlot.slotCharacteristics.map(slotCharacteristic => {
+          return {
+            increasingCharacteristic: slotCharacteristic.increasingCharacteristic!.characteristicName,
+            decreasingCharacteristic: slotCharacteristic.decreasingCharacteristic!.characteristicName
+          }
+        }),
+        requiredInheritances: inventorySlot.requiredInheritances.map(itemgroup => {
+          return itemgroup.componentName
+        })
+      }
+    })
+  }
+}
diff --git a/testModel/characters/Astrid Hofferson.json b/testModel/characters/Astrid Hofferson.json
index 64ad8a6..1c8abed 100644
--- a/testModel/characters/Astrid Hofferson.json	
+++ b/testModel/characters/Astrid Hofferson.json	
@@ -66,5 +66,7 @@
             "generateIsolatedStates": true,
             "symmetric": true
         }
-    ]
+    ],
+    "inventorySlots": [],
+    "combinableInventorySlots": []
 }
\ No newline at end of file
diff --git a/testModel/characters/Hicks Haddock.json b/testModel/characters/Hicks Haddock.json
index bfb5c9c..0a3a015 100644
--- a/testModel/characters/Hicks Haddock.json	
+++ b/testModel/characters/Hicks Haddock.json	
@@ -66,5 +66,20 @@
             "generateIsolatedStates": true,
             "symmetric": true
         }
-    ]
+    ],
+    "inventorySlots": [
+        {
+            "slotName": "New Inventory Slot",
+            "slotCharacteristics": [
+                {
+                    "increasingCharacteristic": "Test0",
+                    "decreasingCharacteristic": "Test0"
+                }
+            ],
+            "requiredInheritances": [
+                "Clothing"
+            ]
+        }
+    ],
+    "combinableInventorySlots": []
 }
\ No newline at end of file

From 216d9aec07f17ed9cd27ec7d829e1b583a165338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 15:10:57 +0200
Subject: [PATCH 12/13] Load and Parse Character InventorySlots

---
 src/app/app.component.ts                      | 12 ++--
 .../parser/characterParser/CharacterParser.ts | 11 +++-
 .../characterParser/InventorySlotParser.ts    | 64 +++++++++++++++++++
 .../parser/itemParser/ItemgroupParser.ts      |  6 ++
 4 files changed, 85 insertions(+), 8 deletions(-)
 create mode 100644 src/app/project/parser/characterParser/InventorySlotParser.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4bfac7a..890bc1f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -215,11 +215,6 @@ export class AppComponent implements OnInit{
     gameModel.gamesystems = gamesystems
     gameModel.generateProductSystemContents()
 
-    const characterTemplateSystems = gameModel.getTemplateSystems(TemplateType.CHARACTER).map(templateSystem => templateSystem as SimpleTemplateGamesystem)
-    const characterRelationTemplateSystems = gameModel.getTemplateSystems(TemplateType.CHARACTER_RELATION).map(templateSystem => templateSystem as SimpleTemplateGamesystem)
-    const characterParser = new CharacterParser(characterTemplateSystems, characterRelationTemplateSystems, gameModel.scriptAccounts);
-    gameModel.characters = characterParser.parseCharacters(storedGameModel.storedCharacters)
-
     const itemgroupParser = new ItemgroupParser();
     itemgroupParser.parseItemgroups(storedGameModel.storedItemgroups);
     gameModel.itemgroups = itemgroupParser.getParsedTopItemgroups();
@@ -227,6 +222,13 @@ export class AppComponent implements OnInit{
     const itemParser = new ItemParser(itemgroupParser.getParsedItemgroups())
     itemParser.parseItems(storedGameModel.storedItems);
 
+    const characterTemplateSystems = gameModel.getTemplateSystems(TemplateType.CHARACTER).map(templateSystem => templateSystem as SimpleTemplateGamesystem)
+    const characterRelationTemplateSystems = gameModel.getTemplateSystems(TemplateType.CHARACTER_RELATION).map(templateSystem => templateSystem as SimpleTemplateGamesystem)
+    const characterParser = new CharacterParser(characterTemplateSystems, characterRelationTemplateSystems, gameModel.scriptAccounts, itemgroupParser.getCharacteristics(), itemgroupParser.getParsedItemgroups());
+    gameModel.characters = characterParser.parseCharacters(storedGameModel.storedCharacters)
+
+
+
     this.gameModel = gameModel;
   }
 
diff --git a/src/app/project/parser/characterParser/CharacterParser.ts b/src/app/project/parser/characterParser/CharacterParser.ts
index 6472cb1..f868942 100644
--- a/src/app/project/parser/characterParser/CharacterParser.ts
+++ b/src/app/project/parser/characterParser/CharacterParser.ts
@@ -7,8 +7,9 @@ import {ScriptAccount} from "../../game-model/scriptAccounts/ScriptAccount";
 import {SimpleTemplateState} from "../../game-model/templates/simpleGamesystem/SimpleTemplateState";
 import {SimpleTemplateTransition} from "../../game-model/templates/simpleGamesystem/SimpleTemplateTransition";
 import {CharacterRelation} from "../../game-model/characters/CharacterRelation";
-import {load} from "@angular-devkit/build-angular/src/utils/server-rendering/esm-in-memory-loader/loader-hooks";
-import {Gamesystem} from "../../game-model/gamesystems/Gamesystem";
+import {InventorySlotParser} from "./InventorySlotParser";
+import {ItemGroupCharacteristic} from "../../game-model/inventory/ItemgroupCharacteristic";
+import {ItemGroup} from "../../game-model/inventory/ItemGroup";
 
 
 export class CharacterParser {
@@ -17,12 +18,14 @@ export class CharacterParser {
   characterRelationSpecificGamesystems: SimpleTemplateGamesystem[]
   scriptAccountConditionParser: ScriptAccountConditionParser
   scriptAccountActionParser: ScriptAccountActionParser
+  inventorySlotParser: InventorySlotParser
 
-  constructor(characterSpecificGamesystems: SimpleTemplateGamesystem[], characterRelationSpecificGamesystems: SimpleTemplateGamesystem[], scriptAccounts: ScriptAccount[]) {
+  constructor(characterSpecificGamesystems: SimpleTemplateGamesystem[], characterRelationSpecificGamesystems: SimpleTemplateGamesystem[], scriptAccounts: ScriptAccount[], characteristics: ItemGroupCharacteristic[], itemgroups: ItemGroup[]) {
     this.characterSpecificGamesystems = characterSpecificGamesystems;
     this.characterRelationSpecificGamesystems = characterRelationSpecificGamesystems;
     this.scriptAccountActionParser = new ScriptAccountActionParser(scriptAccounts);
     this.scriptAccountConditionParser = new ScriptAccountConditionParser(scriptAccounts)
+    this.inventorySlotParser = new InventorySlotParser(characteristics, itemgroups);
   }
 
 
@@ -46,6 +49,8 @@ export class CharacterParser {
 
     const characterRelationGamesystems = this.parseCharacterSpecificGamesystems(character, characterData.characterRelationGamesystems, this.characterRelationSpecificGamesystems)
     characterRelationGamesystems.forEach(gamesystem => character.addAsymetricCharacterRelationGamesystem(gamesystem))
+
+    character.inventorySlots = this.inventorySlotParser.parseInventorySlots(characterData.inventorySlots);
     return character;
 
   }
diff --git a/src/app/project/parser/characterParser/InventorySlotParser.ts b/src/app/project/parser/characterParser/InventorySlotParser.ts
new file mode 100644
index 0000000..3f637cd
--- /dev/null
+++ b/src/app/project/parser/characterParser/InventorySlotParser.ts
@@ -0,0 +1,64 @@
+import {ItemGroupCharacteristic} from "../../game-model/inventory/ItemgroupCharacteristic";
+import {ItemGroup} from "../../game-model/inventory/ItemGroup";
+import {InventorySlot} from "../../game-model/inventory/intentory-slots/InventorySlot";
+import {InventorySlotSerializer} from "../../serializer/InventorySlotSerializer";
+import {InventoryCharacteristic} from "../../game-model/inventory/intentory-slots/InventoryCharacteristic";
+
+export class InventorySlotParser {
+  private parsedCharacteristics: ItemGroupCharacteristic[]
+  private parsedItemgroups: ItemGroup[]
+
+
+  constructor(parsedCharacteristics: ItemGroupCharacteristic[], parsedItemgroups: ItemGroup[]) {
+    this.parsedCharacteristics = parsedCharacteristics;
+    this.parsedItemgroups = parsedItemgroups;
+  }
+
+  parseInventorySlots(inventorySlotData: any): InventorySlot[] {
+    const result: InventorySlot[] = []
+    for(let i=0; i<inventorySlotData.length; i++) {
+      result.push(this.parseSingleInventorySlot(inventorySlotData[i]))
+    }
+    return result;
+  }
+
+  private parseSingleInventorySlot(inventorySlotData: any): InventorySlot {
+    const slotName = inventorySlotData.slotName;
+    const slotCharacteristics = this.parseSlotCharacteristics(inventorySlotData.slotCharacteristics)
+    const inheritedGroups = this.parseRequieredInheritedItemgroups(inventorySlotData.requiredInheritances);
+
+    const inventorySlot = new InventorySlot(slotName);
+    inventorySlot.slotCharacteristics = slotCharacteristics;
+    inventorySlot.requiredInheritances = inheritedGroups;
+    return inventorySlot;
+  }
+
+  private parseSlotCharacteristics(slotCharacteristicsData: any): InventoryCharacteristic[] {
+    const characteristics: InventoryCharacteristic[] = []
+    for(let i=0; i<slotCharacteristicsData.length; i++) {
+      const increasingCharacteristic = this.findReferencedCharacteristic(slotCharacteristicsData[i].increasingCharacteristic);
+      const decreasingCharacteristic = this.findReferencedCharacteristic(slotCharacteristicsData[i].decreasingCharacteristic);
+      characteristics.push(new InventoryCharacteristic(increasingCharacteristic!, decreasingCharacteristic!))
+    }
+    return characteristics;
+  }
+
+  private parseRequieredInheritedItemgroups(inheritanceData: any): ItemGroup[] {
+    const result: ItemGroup[] = []
+    for(let i=0; i<inheritanceData.length; i++) {
+      const inheritedGroup = this.findReferencedItemgroup(inheritanceData[i]);
+      if(inheritedGroup != undefined) {
+        result.push(inheritedGroup);
+      }
+    }
+    return result;
+  }
+
+  private findReferencedCharacteristic(characteristicName: string) {
+    return this.parsedCharacteristics.find(characteristic => characteristic.characteristicName === characteristicName);
+  }
+
+  private findReferencedItemgroup(groupName: string) {
+    return this.parsedItemgroups.find(group => group.componentName === groupName);
+  }
+}
diff --git a/src/app/project/parser/itemParser/ItemgroupParser.ts b/src/app/project/parser/itemParser/ItemgroupParser.ts
index fb18e77..3da0cd2 100644
--- a/src/app/project/parser/itemParser/ItemgroupParser.ts
+++ b/src/app/project/parser/itemParser/ItemgroupParser.ts
@@ -9,6 +9,7 @@ export class ItemgroupParser {
 
   private parsedItemgroups: ItemGroup[] = []
   private topParsedItemgroups: ItemGroup[] = []
+  private parsedCharacteristics: ItemGroupCharacteristic[] = []
 
   parseItemgroups(storeComponents: StoreComponent[]) {
     const topologicalSort = this.topologicalSort(storeComponents);
@@ -81,6 +82,7 @@ export class ItemgroupParser {
 
     const characteristic =  new ItemGroupCharacteristic(name, description, itemgroup);
     characteristic.itemgroup.addItemgroupCharacteristic(characteristic);
+    this.parsedCharacteristics.push(characteristic)
     return characteristic;
   }
 
@@ -91,4 +93,8 @@ export class ItemgroupParser {
   getParsedItemgroups() {
     return this.parsedItemgroups;
   }
+
+  getCharacteristics() {
+    return this.parsedCharacteristics;
+  }
 }

From 8fc57d339616579a1ae7067f9b50150a2d40fb5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 11 May 2024 15:34:25 +0200
Subject: [PATCH 13/13] Implement Combinable Inventoryslots

---
 .../inventory-slot-editor.component.html            | 13 +++++++++++++
 .../inventory-slot-editor.component.ts              |  2 +-
 .../inventory/intentory-slots/InventorySlot.ts      |  1 +
 .../parser/characterParser/InventorySlotParser.ts   |  2 ++
 .../project/serializer/InventorySlotSerializer.ts   |  3 ++-
 testModel/characters/Hicks Haddock.json             | 11 +++++++++--
 6 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index 9a715ec..ab9fc1f 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -12,6 +12,19 @@
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="combinable">
+    <th mat-header-cell *matHeaderCellDef>Combinable</th>
+    <td mat-cell *matCellDef="let slot">
+      <span *ngIf="slot != editedSlot">
+        <mat-icon *ngIf="slot.combinable">done</mat-icon>
+        <mat-icon *ngIf="!slot.combinable">close</mat-icon>
+      </span>
+      <span *ngIf="slot == editedSlot">
+        <mat-checkbox [(ngModel)]="slot.combinable"></mat-checkbox>
+      </span>
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="edit">
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let slot">
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
index 5e8f9c8..46c36bb 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
@@ -22,7 +22,7 @@ export class InventorySlotEditorComponent implements OnInit{
 
   @Input() character: Character | undefined
   @Input() itemgroups: ItemGroup[] = []
-  displayedColumns: string[] = ['name', 'edit', 'delete']
+  displayedColumns: string[] = ['name','combinable', 'edit', 'delete']
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
   dataSource: MatTableDataSource<InventorySlot> = new MatTableDataSource<InventorySlot>();
 
diff --git a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
index c7657f6..a588f11 100644
--- a/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
+++ b/src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts
@@ -7,6 +7,7 @@ export class InventorySlot {
   slotName: string
   slotCharacteristics: InventoryCharacteristic[] = []
   requiredInheritances: ItemGroup[] = [] //if empty: non reqierements
+  combinable: boolean = false;
 
 
   constructor(slotName: string) {
diff --git a/src/app/project/parser/characterParser/InventorySlotParser.ts b/src/app/project/parser/characterParser/InventorySlotParser.ts
index 3f637cd..22b4041 100644
--- a/src/app/project/parser/characterParser/InventorySlotParser.ts
+++ b/src/app/project/parser/characterParser/InventorySlotParser.ts
@@ -30,6 +30,8 @@ export class InventorySlotParser {
     const inventorySlot = new InventorySlot(slotName);
     inventorySlot.slotCharacteristics = slotCharacteristics;
     inventorySlot.requiredInheritances = inheritedGroups;
+    inventorySlot.combinable = inventorySlotData.combinable;
+
     return inventorySlot;
   }
 
diff --git a/src/app/project/serializer/InventorySlotSerializer.ts b/src/app/project/serializer/InventorySlotSerializer.ts
index ae6a6a2..739d260 100644
--- a/src/app/project/serializer/InventorySlotSerializer.ts
+++ b/src/app/project/serializer/InventorySlotSerializer.ts
@@ -16,7 +16,8 @@ export class InventorySlotSerializer {
         }),
         requiredInheritances: inventorySlot.requiredInheritances.map(itemgroup => {
           return itemgroup.componentName
-        })
+        }),
+        combinable: inventorySlot.combinable
       }
     })
   }
diff --git a/testModel/characters/Hicks Haddock.json b/testModel/characters/Hicks Haddock.json
index 0a3a015..b3f515d 100644
--- a/testModel/characters/Hicks Haddock.json	
+++ b/testModel/characters/Hicks Haddock.json	
@@ -69,7 +69,7 @@
     ],
     "inventorySlots": [
         {
-            "slotName": "New Inventory Slot",
+            "slotName": "Linke Hand",
             "slotCharacteristics": [
                 {
                     "increasingCharacteristic": "Test0",
@@ -78,7 +78,14 @@
             ],
             "requiredInheritances": [
                 "Clothing"
-            ]
+            ],
+            "combinable": true
+        },
+        {
+            "slotName": "Rechte Hand",
+            "slotCharacteristics": [],
+            "requiredInheritances": [],
+            "combinable": true
         }
     ],
     "combinableInventorySlots": []