Introduce Inventory-Item Editor

src/app/app.component.html

@@ -31,7 +31,7 @@
       <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
       <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview>
       <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview>
-      <app-inventory-item-overview *ngIf="openContent === ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel"></app-inventory-item-overview>
+      <app-inventory-item-overview *ngIf="openContent === ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel" (openItemEditor)="openModelComponent($event)"></app-inventory-item-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.module.ts

@@ -85,6 +85,7 @@ import {
 import {
     InventoryItemOverviewComponent
 } from "./side-overviews/inventory-item-overview/inventory-item-overview.component";
+import {InventoryItemEditorComponent} from "./editor/inventory-item-editor/inventory-item-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -175,6 +176,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelTitle,
     MatCardTitle,
     MatExpansionPanelHeader,
+    InventoryItemEditorComponent,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {Character} from "../../project/game-model/characters/Character";
 import {GameModel} from "../../project/game-model/GameModel";
 import {MatDialog} from "@angular/material/dialog";

src/app/editor/editor.component.html

@@ -16,9 +16,11 @@
                                 [scriptAccounts]="gameModel!.scriptAccounts"></app-gamesystem-editor>
     <app-character-editor *ngIf="modelComponent.type === ModelComponentType.CHARACTER"
                                 [character]="convertModelComponentToCharacter(modelComponent)"
-                                [gameModel]="gameModel!"
+                                [gameModel]="gameModel!">
-    >
-
     </app-character-editor>
+    <app-inventory-item-editor *ngIf="modelComponent.type === ModelComponentType.ITEM"
+                                [item]="convertModelComponentToItem(modelComponent)"
+                                [gameModel]="gameModel!">
+    </app-inventory-item-editor>
   </mat-tab>
 </mat-tab-group>

src/app/editor/editor.component.ts

@@ -7,6 +7,7 @@ import {State} from "../project/game-model/gamesystems/states/State";
 import {Transition} from "../project/game-model/gamesystems/transitions/Transition";
 import {ModelComponentType} from "../project/game-model/ModelComponentType";
 import {Character} from "../project/game-model/characters/Character";
+import {Item} from "../project/game-model/inventory/Item";
 
 
 @Component({
@@ -27,6 +28,7 @@ export class EditorComponent {
     } else {
       this.activeTab = this.gameModelComponents.findIndex(component => component.componentName === gameModelComponent.componentName);
     }
+    console.log(gameModelComponent)
   }
 
   closeGameModelComponent(gameModelComponent: ModelComponent) {
@@ -57,4 +59,11 @@ export class EditorComponent {
       return modelComponent as Character
     return undefined;
   }
+
+  convertModelComponentToItem(modelComponent: ModelComponent) {
+    if(modelComponent instanceof Item) {
+      return modelComponent as Item
+    }
+    return undefined
+  }
 }

src/app/editor/inventory-item-editor/inventory-item-editor.component.html

@@ -0,0 +1 @@
+<p>inventory-item-editor works!</p>

src/app/editor/inventory-item-editor/inventory-item-editor.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventoryItemEditorComponent } from './inventory-item-editor.component';
+
+describe('InventoryItemEditorComponent', () => {
+  let component: InventoryItemEditorComponent;
+  let fixture: ComponentFixture<InventoryItemEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InventoryItemEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InventoryItemEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/editor/inventory-item-editor/inventory-item-editor.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {Character} from "../../project/game-model/characters/Character";
+import {GameModel} from "../../project/game-model/GameModel";
+import {Item} from "../../project/game-model/inventory/Item";
+
+@Component({
+  selector: 'app-inventory-item-editor',
+  standalone: true,
+  imports: [],
+  templateUrl: './inventory-item-editor.component.html',
+  styleUrl: './inventory-item-editor.component.scss'
+})
+export class InventoryItemEditorComponent {
+
+  @Input() item: Item | undefined;
+  @Input() gameModel: GameModel | undefined;
+
+}

src/app/project/game-model/GameModel.ts

@@ -108,7 +108,7 @@ export class GameModel {
 
   createInventoryItem(itemName: string) {
     if(itemName != undefined) {
-      const item = new Item(itemName, "", ModelComponentType.CHARACTER);
+      const item = new Item(itemName, "", ModelComponentType.ITEM);
       this.inventoryItems.push(item);
     }
   }